| name | description |
|---|---|
frontend-design |
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. |
This skill guides creation of frontend interfaces that are both well-designed (usable, clear, appropriate) and visually distinctive (memorable, polished, intentional).
Good frontend work requires two things that are often conflated:
- Design — solving the right problem with appropriate structure, flow, and hierarchy
- Aesthetics — making it visually compelling and memorable
Most AI-generated frontends fail at #1 and are mediocre at #2. This skill fixes both.
Do not write any code until you have internally answered:
- What is the user trying to accomplish? (their goal, not the feature)
- What context are they in? (rushed? relaxed? expert? novice?)
- What does success look like for them?
- Technical: framework, performance requirements, browser support
- Content: what information must be shown? what actions available?
- Scope: is this a full page, a component, a flow?
CHECKPOINT: If the goal is unclear, ASK. Do not guess and build the wrong thing.
Before visual design, establish the bones:
- List the "things" being displayed or manipulated
- How do they relate to each other?
- Is this a single screen or multi-step flow?
- What's the entry point? Exit points?
- If multi-step: what's the sequence? where can it branch?
- Empty state (no data yet)
- Loading state
- Populated state (happy path)
- Error state (what can go wrong?)
- Edge cases (one item? thousands?)
Apply: Information architecture principles. Consider how Rosenfeld would organise this.
For each screen/view, determine what matters most:
- If you blur the screen, what stands out?
- Is that the right thing?
- Primary: The main event. What the user came for. ONE thing.
- Secondary: Supporting context. Needed but not the focus.
- Tertiary: Available if needed. Settings, help, edge cases.
- Hidden: Accessed via explicit action. Progressive disclosure.
- Position: Top-left (LTR) and above-fold gets seen first
- Size: Bigger = more important
- Contrast: High contrast = attention
- Whitespace: Isolation increases prominence
- Colour: Use sparingly for emphasis
Apply: Progressive disclosure, Miller's Law (chunk information), Fitts's Law (important actions should be large and reachable).
CHECKPOINT: Can you state the ONE primary thing per screen? If not, simplify.
Match problems to established solutions. Don't reinvent.
- < 5 sections → tabs or top nav
- 5-15 sections → sidebar
- Deep hierarchy → breadcrumbs required
- Task-focused → wizard/stepper
- < 10 items → list or cards
- 10-100 items → table with sort/filter
-
100 items → pagination or virtual scroll + search
- Comparison needed → table
- Visual/scannable → cards
- < 5 fields → single section
- 5-15 fields → logical groupings
-
15 fields → multi-step wizard
- High stakes → confirmation step
- Instant action result → inline feedback or toast
- Background process → progress indicator
- Error → inline at source, specific message, recovery path
- Success → confirmation + clear next action
- Empty: Explain value, single CTA to get started
- Loading: Skeleton or spinner, never blank
- Error: What went wrong, how to fix it
- Partial: Some data loaded, some failed
Apply: Jakob's Law — users expect conventions. Check how Polaris, Carbon, or Material solve this problem.
Now — and only now — make it visually distinctive.
Don't be generic. Pick a clear tone:
- Brutally minimal / Maximalist rich
- Editorial / Magazine / Luxury
- Playful / Toy-like / Rounded
- Industrial / Utilitarian / Dense
- Retro / Nostalgic / Period-specific
- Organic / Natural / Soft
- Technical / Data-heavy / Dashboard
- Brutalist / Raw / Exposed
The direction should match the context. A legal document tool shouldn't look like a children's game.
- Never use: Inter, Roboto, Arial, system-ui as display fonts. These are AI slop defaults.
- Do use: Distinctive, characterful fonts appropriate to the aesthetic
- Pair intentionally: Display font for headings + readable body font
- Establish scale: Clear hierarchy through size (use a ratio: 1.2, 1.25, 1.333)
- Commit to a palette: 1-2 dominant colours, 1 accent, semantic colours for states
- Avoid: Purple-to-blue gradients on white (AI cliché), evenly-distributed rainbow palettes
- Ensure contrast: 4.5:1 minimum for text, 3:1 for UI elements
- Use colour meaningfully: Not just decoration — colour should communicate
- Use a consistent scale: Base unit of 4px or 8px
- Spacing communicates grouping: Related things are closer together
- Generous whitespace beats cramming: Let elements breathe
- Depth: Shadows, layering, overlaps — but only if it serves hierarchy
- Texture: Noise, grain, patterns — but only if it matches aesthetic
- Motion: Transitions, micro-interactions — but purposeful, not gratuitous
- Effects: Gradients, glows, blurs — but cohesive with overall design
- Break the grid occasionally — asymmetry creates interest
- Full-bleed moments for impact
- Consistent alignment creates calm; intentional breaks create focus
CRITICAL: Match complexity to vision. Maximalist designs need elaborate implementation. Minimalist designs need restraint and precision. Both require intention.
Do not output code until you have checked:
- System status visible (loading, errors, success)
- Uses familiar language and conventions
- User can undo/escape/go back
- Consistent patterns throughout
- Errors are prevented where possible
- Recognition over recall (options visible)
- Primary actions are obvious
- No unnecessary elements
- Error messages are helpful and specific
- Help is available if needed
- Interactive elements are keyboard accessible
- Focus states are visible
- Colour contrast meets ratios
- Images have alt text
- Form inputs have labels
- Not relying on colour alone
- Empty state designed
- Loading state designed
- Error state designed
- All interactive states (hover, active, disabled)
- ❌ Modal for non-blocking information
- ❌ Infinite scroll without position indicator
- ❌ Form with no validation feedback
- ❌ Generic "Something went wrong" errors
- ❌ Actions with no confirmation on destructive operations
- ❌ Hiding primary actions in menus
- ❌ Requiring hover to discover functionality (breaks touch)
- ❌ Placeholder text as the only label
- ❌ Colour as the only differentiator
- ❌ Low contrast text
- ❌ Tiny click targets (minimum 44px)
- ❌ Custom controls that break keyboard navigation
- ❌ Text over busy images without treatment
- ❌ Inter/Roboto/Arial as display fonts
- ❌ Purple-blue gradient on white background
- ❌ Generic "hero with text left, image right" without purpose
- ❌ Overly rounded corners on everything
- ❌ Shadows on every element
- ❌ Stock illustration style (Undraw, etc.) without customisation
- ❌ "Lorem ipsum" in final output
1. UNDERSTAND → What's the goal? What are constraints?
2. STRUCTURE → What entities? What flow? What states?
3. HIERARCHY → What's primary? Secondary? Hidden?
4. PATTERNS → What established solutions apply?
5. VISUAL → What aesthetic? Execute with intention.
6. VERIFY → Heuristics pass? States complete? Accessible?
All phases happen internally before code output. User sees only the final, considered result.
- Output production-ready code (HTML/CSS/JS, React, Vue, etc.)
- Use CSS variables for theming
- Prefer CSS for animation where possible; use Motion library for React when needed
- Include responsive considerations
- Comment complex visual techniques