| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. |
| license | Complete terms in LICENSE.txt |
Create distinctive, production-grade frontend interfaces avoiding generic "AI slop" aesthetics.
Design Thinking
Before coding, commit to a BOLD direction:
- Purpose: What problem? Who uses it?
- Tone: Pick extreme — brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
- Constraints: Framework, performance, accessibility
- Differentiation: What's UNFORGETTABLE?
Key: Intentionality, not intensity. Execute with precision.
Guidelines
Typography: Distinctive fonts, not generic (Arial, Inter, Roboto). Pair display + body fonts.
Color: Cohesive aesthetic, CSS variables. Dominant colors with sharp accents beat timid palettes.
Motion: High-impact moments — page load staggered reveals > scattered micro-interactions. Scroll-triggering, surprising hovers.
Composition: Unexpected layouts. Asymmetry, overlap, diagonal flow, grid-breaking. Generous negative space OR controlled density.
Backgrounds: Atmosphere and depth — gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.
Never
Generic AI aesthetics:
- Inter, Roboto, Arial, system fonts
- Purple gradients on white
- Predictable layouts
- Cookie-cutter patterns
Vary themes, fonts, aesthetics. Never converge on common choices (Space Grotesk).
Match Complexity to Vision
Maximalist = elaborate code, extensive animations
Minimalist = restraint, precision, subtle details
Elegance = executing vision well
Don't hold back. Show what's possible.
