Frontend Design

Build memorable, functional interfaces with a clear point-of-view (no generic templates). Commit to one aesthetic direction, define tokens, ship accessible + responsive UI, and keep changes scoped.

Preferred Targets (choose the best fit)

1. Next.js (TypeScript): preferred for production app/marketing routes and design system work.
2. React (TypeScript): preferred for SPA/component libraries outside Next.js.
3. Vanilla HTML/CSS/JS: great for static demos, prototypes, and standalone embeds.

Quick Start (do this first)

1. Ask up to 4 questions:
   • What user and job-to-be-done (what should feel “easy” after the change)?
   • Where does it live (component/route) and what stack? Prefer Next.js/React; vanilla is fine for standalone pages or prototypes.
   • In Next.js: assume App Router (app/). Any server/client constraints?
   • Any hard constraints (brand tokens, light/dark, motion limits, must-keep UI parts, perf budgets)?
2. Pick an aesthetic direction + one signature move. If vague, propose 2–3 options from references/aesthetic-playbook.md.
3. Define tokens (type, palette, spacing, radius, shadows, motion). Keep accents to 1–2.
4. Build structure first (semantic markup + layout), then motion, then polish + QA.