Drag to rotate the mock UI in 3D
The workflow, step by step
1. Slice the design
Break the Figma file into components: navbar, hero, card grid, sidebar, footer. Each slice should be reviewable in one sitting — roughly 50–200 lines of output.
2. Prompt with context
For each component give the agent: a screenshot or Figma frame, your design tokens (spacing, colors, type scale), and one existing component as a style reference so it matches your conventions.
3. Review like a PR
Read the diff before moving on. Catching a wrong spacing token in component 2 is cheap; catching it after 12 components means twelve fixes.
4. Compound the context
Each accepted component becomes a reference for the next prompt. By component 5 the agent has learned your patterns and needs far less correction.
Why one-shot generation fails on real templates
Attention dilution
A whole-page prompt forces the model to juggle dozens of decisions at once. Errors cluster in the parts it “attended to” least — usually responsive states and edge spacing.
Unreviewable output
1,500 lines of generated markup can't be meaningfully reviewed. Unreviewed AI code is where visual drift from the design sneaks in.
No feedback loop
Component-by-component gives you 10 correction opportunities per page. One-shot gives you one — after everything is already tangled together.
Rule of thumb: scope each AI task so that a human can fully verify it in under 10 minutes. That's the unit of reliable delegation.