06 —How the work flows
How designers shape the system directly — with engineers in control.
The idea
This workflow serves the goal from the last phase: designers shaping the system directly, and safely. AI helps speed up each round — but engineer review and automatic checks are always there. And it works here because the system sets the limits: the AI’s output is reliable precisely because the shared design settings and clear component definitions limit what it can produce.
The loop — from designer to live site
Describe it
The designer describes the change in plain words — a new version, a spacing fix, a behaviour. What they ask for is the brief.
Drafts the change
An AI assistant working in the codebase drafts the change — using the design settings and the component's set-up. It works inside the system, not around it, and it decides nothing.
See it live
The change shows up right away in a live preview. The designer sees the real component with real content — not a mock-up of it.
Refine
Not right yet? The designer keeps adjusting in the same conversation. Each round takes minutes, not a whole handoff cycle.
Review & approve
The whole point of the loop. The result is submitted for review; an engineer checks it, the automatic checks run, and only then does the change go live. Nothing this workflow produces reaches the live site without a person owning it.
05 → 01 · If a review sends it back, it returns to the start. The loop runs in hours, not weeks.
The safe limits — why this is safe
Shared design settings
The AI can only use the system's design settings — the agreed colours, type, and spacing. It can't ship an off-brand green or a made-up spacing value.
Clear component definitions
Every component has a clear, written definition of how it works. If the AI produces a version that doesn't exist or a setting that's wrong, it's caught before anyone sees it.
Automatic checks
Code style, accessibility, and the system's conventions are checked automatically on every change — whether it came from the AI or a person, same standard.
Checks + human review
Nothing goes in without passing the checks and an engineer's approval. The tools draft; people decide.
Next
A workflow needs a team around it. Next: who does what — designers, code, engineers, and where Figma still fits.