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:
- [ ] typography.md - if working with fonts, scales, or text hierarchy
- [ ] color.md - if designing color palettes or checking contrast
- [ ] spacing.md - if defining layout grids or margins
- [ ] shadows-depth.md - if adding elevation or depth effects
- [ ] components.md - if building buttons, forms, cards, or nav
DO NOT load all files at once. Load only what's relevant to your current task.