Frontend Craft — Design to Components

Transform design prototypes into maintainable, component-based frontend code through structured analysis and incremental generation.

Core Principles

1. Components, not pages — Always generate one component at a time. Never produce an entire page in a single pass.
2. Tokens, not values — Every visual property (color, spacing, font size) must reference a design token. No hardcoded hex codes, pixel values, or magic numbers.
3. Libraries first — Use existing component library primitives (shadcn/ui, Radix, Element Plus, etc.) before building custom implementations. Do not reimplement datepickers, modals, tables, or select menus.
4. Match conventions — In existing projects, mirror the established code style, naming, directory structure, and patterns exactly.
5. Confirm before code — The architecture plan (Phase 2) must be confirmed by the user before any code is written.

Phase 0: Input Validation

Required Inputs