Frontend Design Skill

This skill guides creation of frontend interfaces that are both well-designed (usable, clear, appropriate) and visually distinctive (memorable, polished, intentional).

Core Principle

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.

Phase 1: Understand Before Building

Do not write any code until you have internally answered:

What problem are we solving?

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?

What are the constraints?

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.

Phase 2: Structure the Information

Before visual design, establish the bones:

What entities/objects exist?

List the "things" being displayed or manipulated
How do they relate to each other?

What's the navigation/flow model?

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?

What are the states?

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.

Phase 3: Establish Hierarchy

For each screen/view, determine what matters most:

The squint test

If you blur the screen, what stands out?
Is that the right thing?

Rank every element

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.

Visual hierarchy tools (in order of impact)

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.

Phase 4: Select Patterns

Match problems to established solutions. Don't reinvent.

Navigation

< 5 sections → tabs or top nav
5-15 sections → sidebar
Deep hierarchy → breadcrumbs required
Task-focused → wizard/stepper

Data display

< 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

Forms

< 5 fields → single section
5-15 fields → logical groupings
15 fields → multi-step wizard
High stakes → confirmation step

Feedback

Instant action result → inline feedback or toast
Background process → progress indicator
Error → inline at source, specific message, recovery path
Success → confirmation + clear next action

States (always design these)

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.

Phase 5: Visual Design

Now — and only now — make it visually distinctive.

Commit to an aesthetic direction

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.

Typography

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)

Colour

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

Spacing

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

Visual details (use intentionally, not by default)

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

Layout

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.

Phase 6: Verify Before Output

Do not output code until you have checked:

Usability (Nielsen's heuristics)

Accessibility (minimum)

Completeness

Empty state designed
Loading state designed
Error state designed
All interactive states (hover, active, disabled)

Anti-Patterns (Never Do These)

UX failures

❌ 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)

Visual failures

❌ 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

AI slop indicators

❌ 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

Quick Reference: The Process

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.

Implementation Notes

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

frontend-design