design-sprint

Run a design sprint that builds the hero screen first as a structure-only monochrome HTML pass, confirms layout through warmer/colder feedback, then applies a skin pass and extends the design system to all secondary screens saved as individual HTML files.

Import the Figma via MCP, enumerate all frames, then extract exact colors, typography, spacing, and border radius from node properties before building. Every CSS value in the HTML output traces to an extracted Figma value rather than approximation.

It is a markdown document organized by screen that records which visible elements are in Phase 1 scope, which are deferred with revisit triggers, and what implied backend infrastructure each screen requires. It feeds directly into build planning.

Run it after the discovery brief and to-be process map are complete, and before planning phases are sequenced. Planning cannot correctly sequence work without knowing which design elements were approved versus deferred.

Mixing them contaminates feedback — reviewers react to color and typography before confirming layout. Structure rounds use monochrome palettes and system fonts so feedback targets hierarchy and placement first, then skin direction is decided once.

It requires a completed discovery brief and process map as inputs, and it targets good-enough decision surfaces rather than pixel-perfect fidelity. If structure stays cold after three rounds, discovery must be deepened before continuing.