A curated list of useful tools for web-focused design engineers by James Warner, from inspiration galleries to AI coding agents and utilities.
AIInspirationTools+1
designengineer.tools
Visitopens in a new tabLoading resources…
Designtools
designtools.fyi
A comparison site ranking 104 design tools by role and capability, with scores, pricing context and copyable agent instructions.
What is Designtools?
designtools.fyi explores and compares every design tool — 104 and counting — ranked by what actually matters for your role, whether designer, design engineer or non-designer. Each entry is scored and annotated with pricing, production readiness and notable capabilities, from Claude Code down to niche utilities. You can copy agent instructions to bring comparisons into AI workflows, and browse by facets or news.
Best for
- Comparing design tools across capabilities
- Finding the right tool for your role
- Shortlists with scores and pricing context
Key features
- 104 tools with capability comparisons
- Rankings by role from designer to non-designer
- Copyable agent instructions for comparisons
- Facet browsing and tool news
Related resources
A color generator for design systems — build 50–950 shade scales with contrast control and export straight to Tailwind CSS, CSS or design tokens.
ColorDesign SystemsTailwind+2
kigen.design
Visitopens in a new tab
Home of five free React UI effect libraries — Beam, Orb, Gooey, Metal and Image — built to be installed and wired up by coding agents.
ReactAnimationAI+3
libraries.dev