frontend-design

# Frontend Design Build an interface with a point of view and a usable system, not a collection of default cards. ## Before writing UI code 1. Inspect the existing product, design tokens, routes, components, assets, fonts, and responsive conventions. Preserve a real system unless a scoped redesign is intended. 2. Identify product type, user context, primary action, content hierarchy, brand constraints, supported viewport range, and available visual assets. 3. Extract the existing visual system before inventing one. Inspect CSS variables, theme configuration, type loading, spacing, radii, breakpoints, component variants, and recurring layout patterns. Use the dependency-free helper when the system is spread across source files: ```bash python3 skills/frontend-design/scripts/extract_design_system.py ./src ``` Read [design-system-extraction.md](references/design-system-extraction.md) before replacing or normalizing an existing token system. 4. Choose a visual direction and record the reason: type pairing, color role, density, shape language, imagery, and motion voice. Use the local `scripts/design_system.py` helper for a deterministic starting brief when a project has no design system: ```bash python3 skills/frontend-design/scripts/design_system.py \ --product "analytics dashboard" --tone "technical" --stack react ``` Search the small bundled design-intelligence catalog when a choice needs comparison; read [des...