This skill guides 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 You Code
Understand the context:
- Purpose: What problem does this solve? Who uses it?
- Tone: Pick a clear direction (see Personality below)
- Constraints: Framework, performance, accessibility requirements
- Differentiation: What's the ONE thing someone will remember?
Commit to a direction. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Anti-Patterns to Avoid
NEVER use generic AI-generated aesthetics:
- Overused fonts: Inter, Roboto, Arial, Space Grotesk
- Cliched colors: purple gradients on white
- Predictable layouts and patterns
- Cookie-cutter design lacking context-specific character
Every design should be DIFFERENT. Vary themes, fonts, aesthetics. Don't converge on common choices across generations.
Design System Foundations
Typography
- Type scale: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72px (hand-crafted, not ratios)
- Body: 16-17px, line-height 1.5-1.6
- Headers: line-height 1.0-1.3, tighter letter-spacing
- Weights: 400-500 body, 600-700 emphasis. Never under 400
- Line length: 45-75 characters optimal
- Choose fonts with 4-5 weights. Serif=elegant, rounded=playful, neutral=relies on other elements
Color
- Use HSL for human-readable color manipulation
- Build complete palette: 8-10 greys, 5-10 shades per primary/accent
- Increase saturation as lightness moves from 50%
- Avoid true grey (0% saturation) and pure black (#000000)
- WCAG contrast: 4.5:1 normal text, 3:1 large
- Gradients: max 30 degree hue shift between colors
Spacing
- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px
- Start with TOO MUCH white space, remove until happy
- More space around groups than within them
- Desktop margins: 160-180px. Mobile margins: 20-24px
Shadows & Depth
- Light comes from above (lighter top edge, shadow below)
- Soft shadows: blur 30-60px, opacity 5-10%, Y offset 20-40px
- 5-level elevation system: sm (buttons) to 2xl (modals)
- Two-part shadows for realism: large soft + small tight
- Interactive: increase on lift/drag, decrease on press
Components
- Button hierarchy: CTA > Primary > Secondary > Tertiary
- Button height 40-60px, horizontal padding 32px
- Minimum tap target: 44x44px
- Form inputs: match width to expected input length
- Cards: only info needed to make a decision
- Nav: max 5-7 visible items, de-emphasize inactive
Personality Spectrum
| Trait |
Playful |
Neutral |
Formal |
| Colors |
Saturated |
Balanced |
Muted |
| Typography |
Rounded Sans |
Clean Sans |
Serif |
| Corners |
20px+ radius |
8-12px |
0-4px |
| Icons |
Rounded |
Mixed |
Sharp |
| Language |
Friendly |
Clear |
Professional |
| Imagery |
Illustrations |
Either |
Real photos |
Stay consistent - don't mix personality traits (e.g., playful illustrations + Serif fonts).
Finishing Touches
- Accent borders: top of cards, active nav items, side of alerts
- Backgrounds: section color changes, subtle gradients (<30 degree hue diff), geometric decorations
- Supercharge defaults: icons for bullets, oversized quotation marks, custom link underlines
- Fewer borders: try shadows, background colors, or spacing first
Motion & Animation
- Focus on high-impact moments: page load with staggered reveals > scattered micro-interactions
- Animation duration: <1000ms
- Ease-in-out for natural feel
- Interactive feedback: hover states, press states, loading indicators
Visual Hierarchy
- Not all elements are equal - deliberately de-emphasize secondary content
- Three-level color hierarchy: dark (primary), grey (secondary), light grey (tertiary)
- Emphasize by de-emphasizing - soften competing elements instead of making primary louder
- Labels: often unnecessary. "12 left in stock" not "In stock: 12"
- Icons feel heavy - reduce contrast to balance with text
Implementation Notes
Match complexity to vision:
- Maximalist: elaborate code, extensive animations, layered effects
- Minimalist: restraint, precision, careful attention to spacing and subtle details
NEVER use generic AI-generated aesthetics. Interpret creatively. Make unexpected choices that feel genuinely designed for the context.
Loading Files
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
1---2name: frontend-design3description: 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.4license: Complete terms in LICENSE.txt5---67This skill guides 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.89## Before You Code1011**Understand the context**:12- Purpose: What problem does this solve? Who uses it?13- Tone: Pick a clear direction (see Personality below)14- Constraints: Framework, performance, accessibility requirements15- Differentiation: What's the ONE thing someone will remember?1617**Commit to a direction**. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.1819## Anti-Patterns to Avoid2021NEVER use generic AI-generated aesthetics:22- Overused fonts: Inter, Roboto, Arial, Space Grotesk23- Cliched colors: purple gradients on white24- Predictable layouts and patterns25- Cookie-cutter design lacking context-specific character2627Every design should be DIFFERENT. Vary themes, fonts, aesthetics. Don't converge on common choices across generations.2829## Design System Foundations3031### Typography32- **Type scale**: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72px (hand-crafted, not ratios)33- **Body**: 16-17px, line-height 1.5-1.634- **Headers**: line-height 1.0-1.3, tighter letter-spacing35- **Weights**: 400-500 body, 600-700 emphasis. Never under 40036- **Line length**: 45-75 characters optimal37- Choose fonts with 4-5 weights. Serif=elegant, rounded=playful, neutral=relies on other elements3839### Color40- Use HSL for human-readable color manipulation41- Build complete palette: 8-10 greys, 5-10 shades per primary/accent42- Increase saturation as lightness moves from 50%43- Avoid true grey (0% saturation) and pure black (#000000)44- WCAG contrast: 4.5:1 normal text, 3:1 large45- Gradients: max 30 degree hue shift between colors4647### Spacing48- **Scale**: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px49- Start with TOO MUCH white space, remove until happy50- More space around groups than within them51- Desktop margins: 160-180px. Mobile margins: 20-24px5253### Shadows & Depth54- Light comes from above (lighter top edge, shadow below)55- Soft shadows: blur 30-60px, opacity 5-10%, Y offset 20-40px56- 5-level elevation system: sm (buttons) to 2xl (modals)57- Two-part shadows for realism: large soft + small tight58- Interactive: increase on lift/drag, decrease on press5960### Components61- Button hierarchy: CTA > Primary > Secondary > Tertiary62- Button height 40-60px, horizontal padding 32px63- Minimum tap target: 44x44px64- Form inputs: match width to expected input length65- Cards: only info needed to make a decision66- Nav: max 5-7 visible items, de-emphasize inactive6768## Personality Spectrum6970| Trait | Playful | Neutral | Formal |71|-------|---------|---------|--------|72| Colors | Saturated | Balanced | Muted |73| Typography | Rounded Sans | Clean Sans | Serif |74| Corners | 20px+ radius | 8-12px | 0-4px |75| Icons | Rounded | Mixed | Sharp |76| Language | Friendly | Clear | Professional |77| Imagery | Illustrations | Either | Real photos |7879**Stay consistent** - don't mix personality traits (e.g., playful illustrations + Serif fonts).8081## Finishing Touches8283- **Accent borders**: top of cards, active nav items, side of alerts84- **Backgrounds**: section color changes, subtle gradients (<30 degree hue diff), geometric decorations85- **Supercharge defaults**: icons for bullets, oversized quotation marks, custom link underlines86- **Fewer borders**: try shadows, background colors, or spacing first8788## Motion & Animation8990- Focus on high-impact moments: page load with staggered reveals > scattered micro-interactions91- Animation duration: <1000ms92- Ease-in-out for natural feel93- Interactive feedback: hover states, press states, loading indicators9495## Visual Hierarchy9697- **Not all elements are equal** - deliberately de-emphasize secondary content98- **Three-level color hierarchy**: dark (primary), grey (secondary), light grey (tertiary)99- **Emphasize by de-emphasizing** - soften competing elements instead of making primary louder100- **Labels**: often unnecessary. "12 left in stock" not "In stock: 12"101- **Icons feel heavy** - reduce contrast to balance with text102103## Implementation Notes104105Match complexity to vision:106- **Maximalist**: elaborate code, extensive animations, layered effects107- **Minimalist**: restraint, precision, careful attention to spacing and subtle details108109NEVER use generic AI-generated aesthetics. Interpret creatively. Make unexpected choices that feel genuinely designed for the context.110111---112113## Loading Files114115**Consider loading these reference files based on your task:**116117- [ ] [typography.md](references/typography.md) - if working with fonts, scales, or text hierarchy118- [ ] [color.md](references/color.md) - if designing color palettes or checking contrast119- [ ] [spacing.md](references/spacing.md) - if defining layout grids or margins120- [ ] [shadows-depth.md](references/shadows-depth.md) - if adding elevation or depth effects121- [ ] [components.md](references/components.md) - if building buttons, forms, cards, or nav122123**DO NOT load all files at once.** Load only what's relevant to your current task.
onmax