Frontend with AI: Screenshots as Feedback

An agent can't see your UI – until you show it a screenshot. Visual feedback is the key to good frontend work with AI.

The problem: AI can't see your UI

An agent writing code doesn't automatically "see" the result in a browser. It doesn't know whether a button is misaligned or text is overflowing – unless you show it. That's the difference between "make the dashboard nicer" (vague) and a screenshot plus a concrete instruction.

Screenshots as feedback

You can paste screenshots directly: drag and drop, copy-paste, or as a file path. Give the agent an image of the design you want, then have it take a screenshot of the result and compare. That creates a loop the agent can close itself, instead of you checking every intermediate step manually.

Iterating on components

Work in small steps: build one component, take a screenshot, name the differences from the target, fix them. That works better than "build the whole page" at once, because mistakes surface early.

Use your design system

If your project has a design system (fixed colors, spacing, components), tell the agent explicitly or show it existing components as a template. That stops it from inventing its own, inconsistent solutions.

Verify visually

In the end, what counts is the visible result, not the code. Always ask for a screenshot of the actual result, not just a claim that it's "done."

EXAMPLE

Prompt with an image: '[target design screenshot attached] Implement this design for the dashboard header. Use our existing components from @src/components. Then take a screenshot of the result, compare it to the original, and list the differences.'

🛠️ EXERCISE — TRY IT YOURSELF

Take a small UI component from a practice project (or build a simple card component) and have an agent iterate it against a reference image.

Find or create a reference image (a screenshot of a website, a design mockup) and attach it for the agent.
Prompt: 'Implement this design as a component. Then take a screenshot of the result and compare it to the original.'
Let the agent self-correct at least once based on the comparison before you step in yourself.

✅ SELF-CHECK

☐ Did the agent actually take a screenshot and compare, or just claim it looked good?
☐ What concrete deviations did the comparison reveal?
☐ Was the result closer to the original after self-correction than the first attempt?

QUICK QUIZ

Why is a screenshot of the target design more effective than the prompt 'make the dashboard nicer'?