Let the agent check its work

Give the agent a browser and the design, and loop until nothing differs.

Brian Lovin@brian_lovin
It's hard to get this to 100% since it assumes good naming + components (i.e. the agent needs to be able to match Figma components/colors/icons to something that exists in the codebase). One trick I found to go from ~60% → ~85% accuracy is to tell the coding agent to use a browser MCP (agent-browser, chrome devtools mcp, playwright mcp) to inspect it's work and compare it to the original Figma design. Have it loop until there are no detectable differences. I turned this workflow into a subagent with some specific instructions to pay close attention to type, color, spacing, shadows, corner radius, etc. It's not perfect, but pretty close! The key is giving the agent tools to verify it's work in the browser.
Jan 23, 2026View on X ↗
Brian Lovin@brian_lovin
Claude Code + Chrome DevTools MCP + Figma MCP = insane levels of productivity
Dec 2, 2025View on X ↗

Replying to a question on matching Figma. He saw ~60% → ~85%; this demo is idealized.

Build, look, fix, repeat

Run the check, or drag the design overlay over each build.

One shotBad
Passes1Checkednever
Loops in a browserGood
Passes0Differencesnot checked
<!-- Example: .claude/agents/design-check.md (not his exact prompt) -->
---
name: design-check
description: Compare the built UI with its Figma frame and fix every difference.
---
1. Get the frame from the Figma MCP: sizes, colours, text styles, effects.
2. Open the page with the browser MCP and inspect the component.
3. Compare type, colour, spacing, shadows and corner radius, one by one.
4. Fix each difference with the codebase's existing tokens and components.
5. Reload and compare again. Stop only when no difference is detectable.
6. Report what changed and anything you could not match.

Why it matters, pros and cons

Why it matters

An agent can't fix what it can't see. With a browser and the design side by side, “looks close” becomes a list of diffs it can close one by one.

Pros

  • Catches spacing and radius that are off by a few pixels.
  • The loop runs on its own; you review the result, not each step.
  • A subagent with a checklist makes the check repeatable.

Cons

  • Needs good naming: Figma parts must map to code that exists.
  • Every pass costs time and tokens.
  • No visible diff isn't taste: still review states and motion.