Every design in 1DesignTool moves through the same five-step loop. Understanding the loop once makes every other page in the docs predictable — steering, variants, exports and Build mode are all the same run, seen from a different angle.
1. Brief
You write what you want in the composer — the input at the foot of every project, or the box on the home screen for a new one. The brief goes to your agent with the template, the design system's rules, and any pins, comments or files you attached. The agent chip in the composer shows which CLI and model the run will use.
2. Build
The app spawns your agent as a headless subprocess inside the project folder
and hands it the brief plus the design kit — the plaintext rulebook copied
into every project (.claude/skills/ and friends) that tells the agent what
"good" means here: contrast floors, type scale, hit-target sizes, markup
structure. The agent writes real files; the preview watches the folder and
repaints as each file lands.
3. Gate
When the turn ends, the gate checks the result against the kit: text contrast, minimum font sizes, control targets, dead navigation at phone and tablet widths. A PASS means the result is yours to keep; a FAIL lists exactly which rule broke and where, and you can send the findings back to the agent as a one-line fix brief. See The design-kit gate.
4. Steer
This is where you shape the draft into the design: ⌥-click an element to pin a comment to it, open Tweaks for the live controls the agent exposes, or write a follow-up brief for a bigger direction change. Each steer is a new turn through the same loop — the agent rebuilds, the gate rechecks.
5. Ship
When the result is right, Share / export packages it — ZIP, HTML, PNG, PDF, MP4, per the template's export set. The project folder stays where you put it, with every version restorable from the history.
Tip: The loop is cheap to repeat. Run three variants of the same brief, blind-compare them, and promote the winner — that beats one long brief trying to guess the answer.