| 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, or applications. Generates creative, polished code that avoids generic AI aesthetics. |
| license | Complete terms in LICENSE.txt |
Guide creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Before coding, understand context and commit to a BOLD aesthetic direction
Choose a clear conceptual direction and execute it with precision
NEVER use generic AI-generated aesthetics: overused fonts (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts, cookie-cutter design
NEVER converge on common choices (Space Grotesk, for example) across generations
Match implementation complexity to the aesthetic vision
Pre-coding design analysis
1. Purpose: What problem does this interface solve? Who uses it?
2. Tone: Pick an extreme - brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc.
3. Constraints: Technical requirements (framework, performance, accessibility)
4. Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
Code output requirements
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
<best_practices>
Typography: Choose beautiful, unique, interesting fonts. Avoid generic fonts. Pair a distinctive display font with a refined body font.
Color and Theme: Commit to a cohesive aesthetic. Use CSS variables. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only for HTML, Motion library for React. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
Spatial Composition: Unexpected layouts, asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space OR controlled density.
Backgrounds and Visual Details: Create atmosphere and depth. Apply gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays.
Vary between light and dark themes, different fonts, different aesthetics across designs. No two designs should look the same.
</best_practices>
<anti_patterns>
Overused font families, cliched color schemes, predictable layouts, cookie-cutter design lacking context-specific character
Interpret creatively and make unexpected choices that feel genuinely designed for the context
Maximalist designs with minimal code, or minimalist designs with excessive effects
Maximalist designs need elaborate code with extensive animations. Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details.
</anti_patterns>
Implement working code (HTML/CSS/JS, React, Vue, etc.)
Every design must have a clear conceptual direction
Generic fonts (Inter, Roboto, Arial, system fonts)
Purple gradients on white backgrounds
Predictable layouts and component patterns
