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