| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, artifacts, dashboards, React components, HTML/CSS layouts, or styling any web UI. |
| version | 1.0.0 |
| author | Anthropic |
| license | Apache 2.0 |
| triggers | ["website","landing page","dashboard","React component","HTML/CSS","web UI","frontend"] |
| tools | ["file_read","file_write","shell"] |
| models | ["qwen3-coder","qwen3-32b"] |
Frontend Design
Design Thinking
Before coding, commit to a BOLD aesthetic direction:
- Purpose: What problem does this solve?
- Tone: Pick an extreme (brutally minimal, maximalist, retro-futuristic, etc.)
- Differentiation: What makes this UNFORGETTABLE?
Aesthetics Guidelines
Typography
- Choose distinctive display fonts (not Inter/Arial)
- Pair display font with refined body font
Color & Theme
- Commit to cohesive aesthetic
- Use CSS variables for consistency
- Dominant colors with sharp accents
Motion
- Use animations for micro-interactions
- One well-orchestrated page load > scattered animations
Spatial Composition
- Unexpected layouts, asymmetry, overlap
- Generous negative space OR controlled density
Avoid "AI Slop"
- Generic fonts (Inter, Roboto, Arial)
- Purple gradients on white
- Predictable layouts
- Centered body text
Qwen Code Integration
Use /skills frontend-design to invoke.
