What problem does it solve? Teams often jump from flows to screens that are off-system, use invented one-off tokens, or exist only as screenshots, leaving builders to approximate the design. This Skill turns approved flows into real high-fidelity screens expressed in the design system's tokens and components, delivered as the artefact the handoff carries. ## Core Features & Use Cases - Flow-driven screen production: Every screen named in the flows is drawn at hi-fi with real copy, real data shapes, both themes checked, and awkward-length content handled deliberately. - On-system-or-named rule: Screens use DS tokens and components; gaps in the system are recorded as findings with owners and routed, never silently fudged with one-off hex values. - Artefact as output: The deliverable is the .dc.html folder (prototype, sidecars, DS snapshot) or canvas artboards exported to that shape, ready for design-handoff. - Use Case: After design-flows defines the checkout flow, use this Skill to draw every checkout screen at hi-fi on the design system, flag a missing empty-cart component as a routed DS gap, and hand the .dc.html folder to design-handoff. ## Quick Start Take the approved flows to hi-fi by designing every screen on the design system and producing the .dc.html artefact for handoff.
