From Design to Built
Goal — Take a small design and build it end to end, using everything from the earlier phases.
By the end — A working interface built from a real design — right-sized stack, clean context skeleton, tokens seam, committed.
Map first — What is this, how much does it need, and where will it run?
1Pick the stack with atelier
Start by right-sizing. The atelier skill triages how much this project actually needs and routes you to a fitting stack instead of the biggest one.
Using the atelier skill, decide the right stack for this project.Read its reasoning — you are learning to right-size, not over-build.
2Lay the context skeleton
This is Phase 4 in action: organize by concern, a router CLAUDE.md that points rather than dumps, portability files in place.
Set up the project structure and a router CLAUDE.md for this build.3Build through the tokens seam
This is Phase 7 in action: decisions become tokens, tokens become components, nothing hardcoded.
Define the design tokens for this design, then build the interface using them.If you have a [Figma](https://www.figma.com) design, use the Figma MCP to pull the decisions in directly.
4Run it and refine
Start the dev server, open it, and run the look-feedback-change loop until it feels right. Use the guided habit throughout: understand what each part does as it comes together.
5Commit your progress
Save the capstone so far.
git add . && git commit -m "Build the capstone" && git pushRecap — You carried a design from stack choice through a clean skeleton and the tokens seam to a running interface — the whole build, in your hands.