Specify the system
Name typography roles, spacing rhythm, color tokens, component states, content hierarchy, and the breakpoints that materially change composition.
Keep design judgment inside the implementation loop.
Agents can move a page from brief to browser quickly. Your leverage is defining the visual system, states, responsive behavior, and acceptance criteria clearly enough that speed does not erase intent.
A design-to-browser loop
Build the surface
Give the agent real copy, real assets, the existing code conventions, and a narrow route. Review structure and semantics before polishing pixels.
Inspect the browser
Capture desktop and mobile, exercise menus and forms, test keyboard focus, and compare the result against explicit acceptance notes.
Design the states the mockup skipped
| Surface | States to specify | Proof |
|---|---|---|
| Responsive layout | Small phone, tablet, standard desktop, wide desktop, long labels, and zoom. | Viewport screenshots with no overlap or horizontal scroll. |
| Interactive controls | Default, hover, keyboard focus, pressed, disabled, loading, success, and error. | Keyboard pass plus captured state sequence. |
| Dynamic content | Empty, one item, many items, missing media, slow media, and unusually long copy. | Seeded fixtures that reproduce every case. |
Designer artifact
The visual acceptance sheet
A useful handoff tells the agent and the client what “matches” means after the static frame becomes a working surface.
- Named design tokens and component rules
- Reference viewport for every structural change
- Copy and asset source of truth
- Keyboard, contrast, and reduced-motion expectations
- Screenshot set with annotated differences
- Known compromises and next-pass priorities
Bring one route and its source design.
Use a Direct Call to set up a live design-to-code review loop. Choose the web-agent workshops when you want focused practice across implementation, browser QA, and handoff.