Frontend Design Skill

Create distinctive, memorable user interfaces that avoid generic AI aesthetics.

Pre-Implementation Planning

Before writing code, establish:

1. •Purpose & Audience - What problem does this solve? Who uses it?
2. •Tone - Choose a deliberate aesthetic direction:
   • •Brutalist, maximalist, retro-futuristic, luxury, playful, editorial, organic, industrial
3. •Constraints - Framework requirements, performance budgets, accessibility needs
4. •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