turn a design into working ui
You have a screenshot, figma, or a rough mock and need the ui that matches it — layout, states, and the bits the picture left out.
recs
| model | best when | avoid when | cost vibe |
|---|---|---|---|
| Sonnet-class | The design has real states (empty, error, loading), responsive breakpoints, or it has to match an existing component system. | It’s a single static card with no interaction. | $$$ |
| Faster / cheaper cloud | A first pass of the layout from a screenshot, then you fix spacing yourself. | Pixel match and accessibility both matter and you won’t review it. | $ |
| Local mid | Private designs, and the job is mostly html/css you can see immediately. | The design system is implicit and the model has never seen your components. | ~free |
why
- Screenshot-to-code is easy to fake. The failure is the state the mock never drew.
- Cheap models copy the picture. Frontier earns it when it has to invent the empty state without inventing a new design.
- Don’t let it restyle the product. Match what exists.
- Pair with tool-loop-debug if the ui is really “the agent’s screen,” not a marketing page.