Design Frontend

Frontend Design Skill

Degree of freedom: MIXED. Visual composition [HIGH freedom]; design-system discovery [LOW freedom — run exactly].

Discover design systems, respect existing patterns, create beautiful interfaces.

How to reason

1. Discover — tokens, components/ui, forbidden patterns
2. Reuse — extend existing components; do not fork a second Button
3. Compose — new surface on those tokens
4. Check — type mins, 44px targets, reduced-motion, no AI clichés

Worked example

Discover: components/ui/button.tsx + globals.css tokens; text-xs min; rounded-sm. Reuse: settings rows use existing Button / Input; no new primitive. Compose: new /settings page — token spacing, text-sm body, 44px save. Check: no Inter+purple gradient; prefers-reduced-motion on any spinner.

Self-critique before reporting

• Discovery stated — token file, radius, and forbidden list were spoken before JSX
• Reuse first — no duplicate primitive next to components/ui
• Mins held — readable type ≥ text-xs; tap targets ≥44px
• Right owner — polish existing → enhance-web-ui; landing → enhance-web-landing; redesign existing → enhance-web-redesign

Phase 1: Design System Discovery (MANDATORY) [LOW freedom — run exactly]

Before writing ANY frontend code:

1.1 Find Design System Files

Glob: **/*design-system*.{md,ts,css}
Glob: **/tokens*.{ts,json}
Glob: **/components/ui/**
Glob: **/_*README*

1.2 Extract & Document Tokens

1.3 Find Forbidden Patterns

grep -r "NEVER\|FORBIDDEN\|❌" docs/ README*

1.4 Verification Statement (REQUIRED)

"Design System Discovery:
├─ Found: [design system path]
├─ Typography min: [e.g., text-xs]
├─ Radius standard: [e.g., rounded-sm]
├─ Forbidden: [list patterns]
└─ Reusing: [existing components]"

Phase 2: Implementation Standards [HIGH freedom]

Typography Minimums

Never use text-[8px] or text-[9px] for readable content.

Accessibility Requirements

Quick Reference

Typography: text-xs=12px, text-sm=14px, text-base=16px
Spacing: 1=4px, 2=8px, 3=12px, 4=16px, 6=24px, 8=32px

Phase 3: Quality Checklist [LOW freedom — do not skip]

[ ] Uses design system tokens (no hardcoded values)
[ ] Extends existing components (no duplicates)
[ ] Typography ≥ text-xs for readable content
[ ] Touch targets ≥ 44px
[ ] Focus states visible
[ ] prefers-reduced-motion respected

Common Fixes

Anti-Generic Checklist

Avoid these AI clichés:

• Inter/Roboto/Arial fonts
• Purple gradients on white
• Cookie-cutter card layouts
• Same choices every generation

Remember: The codebase's design system is the source of truth. Search before creating. Reuse before reinventing.