Frontend Design Skill
Create distinctive, memorable user interfaces that avoid generic AI aesthetics.
Pre-Implementation Planning
Before writing code, establish:
- Purpose & Audience - What problem does this solve? Who uses it?
- Tone - Choose a deliberate aesthetic direction:
- Brutalist, maximalist, retro-futuristic, luxury, playful, editorial, organic, industrial
- Constraints - Framework requirements, performance budgets, accessibility needs
- Memorable Element - What's the ONE thing users will remember?
Design Principles
Typography
- Avoid: Inter, Roboto, Arial, system-ui (generic AI look)
- Prefer: Distinctive typefaces with character
- Pair display fonts with refined body options
- Size hierarchy should be dramatic, not subtle
Color & Theme
- Use CSS variables for cohesive theming
- Dominant colors with sharp accents > evenly-distributed palettes
- Commit fully to color choices - timid palettes look generic
- Dark mode should be designed, not just inverted
Motion & Animation
- Prioritize high-impact moments (page load, key interactions)
- One well-orchestrated entrance > scattered micro-interactions
- Staggered reveals create rhythm and hierarchy
- Quality over quantity
Spatial Composition
- Employ asymmetry, overlap, diagonal flow
- Break grids intentionally for emphasis
- Generous negative space OR controlled density (pick one)
- Avoid centered-everything layouts
Visual Details
- Gradient meshes, noise textures, geometric patterns
- Layered transparencies, dramatic shadows
- Custom cursors, grain overlays, decorative borders
- Details should reinforce the chosen aesthetic
Anti-Patterns
- Generic fonts (Inter, Roboto, Arial on white backgrounds)
- Purple/blue gradients on white (classic AI startup look)
- Predictable card grids with rounded corners
- Cookie-cutter component libraries without customization
- Designs that could belong to any product
Implementation Approach
1. Establish design tokens (colors, typography, spacing)
2. Build distinctive hero/header first (sets the tone)
3. Let the hero aesthetic inform component design
4. Add motion and micro-interactions last
5. Review: "Would I remember this UI tomorrow?"
Framework Notes
This skill is framework-agnostic. Apply these principles whether using:
- React/Next.js with Tailwind
- Vue/Nuxt with CSS
- Svelte with styled-components
- Plain HTML/CSS
The goal is distinctive design, not specific implementation.
Version
- v1.0.0 (2025-12-05): Added YAML frontmatter, initial documented version
1---2name: frontend-design3description: Create distinctive, memorable user interfaces that avoid generic AI aesthetics. Use when designing UI/UX, planning visual direction, or building pages and layouts.4---56# Frontend Design Skill78Create distinctive, memorable user interfaces that avoid generic AI aesthetics.910## Pre-Implementation Planning1112Before writing code, establish:13141. **Purpose & Audience** - What problem does this solve? Who uses it?152. **Tone** - Choose a deliberate aesthetic direction:16 - Brutalist, maximalist, retro-futuristic, luxury, playful, editorial, organic, industrial173. **Constraints** - Framework requirements, performance budgets, accessibility needs184. **Memorable Element** - What's the ONE thing users will remember?1920## Design Principles2122### Typography23- **Avoid**: Inter, Roboto, Arial, system-ui (generic AI look)24- **Prefer**: Distinctive typefaces with character25- Pair display fonts with refined body options26- Size hierarchy should be dramatic, not subtle2728### Color & Theme29- Use CSS variables for cohesive theming30- Dominant colors with sharp accents > evenly-distributed palettes31- Commit fully to color choices - timid palettes look generic32- Dark mode should be designed, not just inverted3334### Motion & Animation35- Prioritize high-impact moments (page load, key interactions)36- One well-orchestrated entrance > scattered micro-interactions37- Staggered reveals create rhythm and hierarchy38- Quality over quantity3940### Spatial Composition41- Employ asymmetry, overlap, diagonal flow42- Break grids intentionally for emphasis43- Generous negative space OR controlled density (pick one)44- Avoid centered-everything layouts4546### Visual Details47- Gradient meshes, noise textures, geometric patterns48- Layered transparencies, dramatic shadows49- Custom cursors, grain overlays, decorative borders50- Details should reinforce the chosen aesthetic5152## Anti-Patterns5354- Generic fonts (Inter, Roboto, Arial on white backgrounds)55- Purple/blue gradients on white (classic AI startup look)56- Predictable card grids with rounded corners57- Cookie-cutter component libraries without customization58- Designs that could belong to any product5960## Implementation Approach6162```631. Establish design tokens (colors, typography, spacing)642. Build distinctive hero/header first (sets the tone)653. Let the hero aesthetic inform component design664. Add motion and micro-interactions last675. Review: "Would I remember this UI tomorrow?"68```6970## Framework Notes7172This skill is framework-agnostic. Apply these principles whether using:73- React/Next.js with Tailwind74- Vue/Nuxt with CSS75- Svelte with styled-components76- Plain HTML/CSS7778The goal is distinctive design, not specific implementation.7980---8182## Version83- v1.0.0 (2025-12-05): Added YAML frontmatter, initial documented version
benshapyro