frontend-design

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

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.