You can describe logic to your agent in words and check the result against a spec: given this input, return that output. Try the same with how something looks and you get back code that runs, compiles, and is visually wrong. The agent is building a screen it cannot see. This chapter gives you the different loop that visual work needs.
6.4.1The agent builds the screen blind
When the agent writes interface code, it never sees what that code paints on the screen. It is arranging pieces by name, not by eye, the way you might wire a lamp you are not allowed to switch on.
So a worded brief like "make it modern and clean" hands it nothing to aim at. Those words map to a thousand different screens, and the agent picks one at random. Logic you steer by telling; appearance you steer by showing.
6.4.2Show a reference, not a paragraph
The fastest way to pin down a look is to hand the agent something it can copy. Paste a screenshot of a screen you like, a mockup, or a link to a page whose style you want, then tell it what to borrow.
Compare the two briefs below. The first leaves the agent guessing; the second gives it a target.
A reference collapses a thousand possible screens down to one. An adjective does the opposite.
6.4.3Iterate on the look, not the logic
You cannot unit-test whether a screen looks right; you judge it by eye. So the loop is short and visual: the agent builds, you look, you correct. Modern agents can screenshot the running page and read their own output, which closes the loop without you.
Give corrections that are specific and visual, not vague: "the heading is too close to the buttons, double the gap" beats "it feels off." Repeat until it matches, then lock that look in place so it cannot drift, which the chapter on visual and snapshot tests covers.
6.4.4Give a design direction, not "make it nice"
If every screen starts from "make it nice," the agent guesses your taste fresh each time and nothing matches. Decide the direction once, before you build, and every screen inherits it.
A usable direction is three concrete choices, not a mood:
- One reference the whole app should resemble.
- A small color palette, your brand colors named.
- One named style you are committing to, not a shrug.
What that direction should actually be, the layout, the flow, the interface decisions, is its own subject, covered when we design the interface. Here the rule is only that you pick it up front and hand it over, rather than let the agent invent taste per prompt.
Once you have a direction and a reference, this prompt runs the whole visual loop for you, from image to a screen that matches:
Do this now: take a screen you want built, paste a reference image with the prompt above, and make the agent build, screenshot, and match it before you touch the words.
