UI

Ship interface code that looks intended, works in every state, and holds up at every width. The rendered page is the source of truth, not the code or a description of it.

Phase 1: Gather the contract

• Inputs: the brief, a design direction or DESIGN.md (flow-design), and any reference (screenshot, mockup, design-file export). No direction for a new surface? Run flow-design first.
• Stack: framework, styling approach, component library, tokens, icon set, fonts and existing patterns for similar screens. Reuse components before creating new ones; follow the existing conventions even if you would choose differently.
• Content: real copy and data from the user or the domain. Draft specific copy when none exists, never lorem ipsum. Label mock data as mock; never invent testimonials, customer logos or metrics presented as real.
• Scope: viewports (default 375, 768, 1280, 1920), themes, locales and the states to build.

Phase 2: Structure before style