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

Category	Find	Examples
Typography	Sizes, weights	text-xs, font-medium
Spacing	Padding, gaps	p-4, gap-2
Colors	Palette, semantic	bg-emerald-50
Borders	Radius, styles	rounded-sm
Animations	Durations	duration-200

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]"