Skip to content

Design review against the mockup with sign off gates

After an agent builds a screen, this compares the live UI against the Figma mockup screen by screen and logs every gap as a measured number against a number. A person signs off on the screen list, each batch of findings and the final acceptance.

EngineeringWorks with Claude Code · Cursor+1Community example
Build your promptSee requirements

What it does

  • Slices the design into screens and states and writes the checklist
  • Reads reference values from the mockup nodes
  • Measures computed styles and tokens on the live page
  • Logs each discrepancy with both numbers in a decision journal
  • Moves to the next stage only after a recorded human decision

Your approval boundaries

Creates drafts

These actions always wait for your yes:

  • Approving the list of screens to check
  • Accepting each group of findings
  • Final acceptance of the implementation

You decide what happens next.

More about this workflow

This setup is for developers and small engineering teams who want fewer chores. It takes a repeat chore off your plate and hands back something you can check quickly.

First, it slices the design into screens and states and writes the checklist. Next, it reads reference values from the mockup nodes. Then it measures computed styles and tokens on the live page. After that, it logs each discrepancy with both numbers in a decision journal. Finally, it moves to the next stage only after a recorded human decision. It works with your git host, each on its own login with limited access.

You get the prep work done and waiting for you. The agent stops and asks for your yes before approving the list of screens to check, accepting each group of findings and final acceptance of the implementation, and says plainly if a step cannot be undone.

“Visual QA that is measured, not eyeballed”
Denis Kondratev KondratevDenis on GitHub · Sep 20, 2026
Before you startGit host accessScoped permissionsClaude Code or Cursor
Explore required tools and model recommendations

Tools and access

  • GitHub

    Handles the git host part of this job. Grant a fine-grained token, read code and write comments.

    API required: Yes. Needs a GitHub App or a fine-grained personal access token scoped to the repos it needs.

    Sign up: Create a GitHub account

Official links only. Not sponsored, no affiliate links.

Model recommendations

Best pick

Claude Opus 5.5

Its maker points to it for long running coding work.

$4 per million input tokens, $20 per million output tokens.

Anthropic docs as of October 11, 2026

Cheaper backup

Claude Sonnet 5.5

Half the price per token and still strong for reviews and docs.

$2 per million input tokens, $10 per million output tokens.

Anthropic docs as of October 11, 2026

Our own picks. Not sponsored, no affiliate links.

Build your prompt

Add your details, then copy the prompt into your tool.

1Your details

Fill these in and the prompt updates as you type.

2Your prompt

4 of 4 still empty
Fill these in before you run it: [FIGMA FILE OR MOCKUP LINK] [LIVE APP URL OR STORYBOOK] [SCREENS AND STATES IN SCOPE] [WHO SIGNS OFF] You are the Design review against the mockup with sign off gates agent. After an agent builds a screen, this compares the live UI against the Figma mockup screen by screen and logs every gap as a measured number against a number. A person signs off on the screen list, each batch of findings and the final acceptance. Use only the details filled in above. If any [BRACKETED] item is still blank or unclear, stop and ask for it first. Do not guess. What you do on your own: - Slices the design into screens and states and writes the checklist - Reads reference values from the mockup nodes - Measures computed styles and tokens on the live page - Logs each discrepancy with both numbers in a decision journal - Moves to the next stage only after a recorded human decision What you must never do without a yes from a person: - Approving the list of screens to check - Accepting each group of findings - Final acceptance of the implementation Rules: - Before any step on the list above, stop and ask. Say in plain words what you want to do, who it affects, and whether it can be undone. - If something cannot be undone, say so first, in one short line. - Write drafts, not final actions. A person sends, pays, posts, or deletes. - Keep a short log of every action you took and every source you read. - If you are unsure, ask instead of guessing.
View run instructionsPaste into: Claude Code, Cursor, Claude Desktop with MCP

Your answers stay in this browser only.

Run your workflow

Connect your tools with only the access this setup needs, then follow these steps.

Steps

Do these in order. Test on old data before it touches live work.

  1. 1Connect GitHub with its own login, not yours. Grant a fine-grained token, read code and write comments.
  2. 2Paste the prompt where your harness takes instructions. See the note under the Copy button.
  3. 3Do a dry run on old or test data first. Check every draft and every stop point by hand before you let it near live work.
  4. 4Read its log after the first real run. Only widen access once a week of runs looks clean.

Safeguards and trust score

The score describes this example setup’s access, approval boundaries, ability to undo changes, and scope.

Access24 / 30

Writes drafts and notes inside your tools, nothing leaves on its own.

Human approval30 / 30

Waits for a yes on: approving the list of screens to check, accepting each group of findings, final acceptance of the implementation.

Undo and logs14 / 20

Proposes changes to live records, so the setup needs a change log and a way back.

Scope20 / 20

Runs on its own login across 1 tool. Fewer connections means a smaller blast radius.

How to raise it

  • Undo and logs: Stop it from editing live records. Have it write the change as a proposal you apply, and keep a log of every change with a way to roll it back +3

Do all of these to reach 91, up from 88.

Want help getting there? Get an AI Trust Audit from Pixeldesigns

Reviewed by Trustcase (example setup). How scoring works

Embed badge

Show this trust score on your site or README. It links back here.

Trustcase trust score badge
Markdown
[![Trustcase trust score for Design review against the mockup with sign off gates](https://trustcase.dev/badge/design-review-against-the-mockup-with-sign-off-gates.svg)](https://trustcase.dev/use-cases/design-review-against-the-mockup-with-sign-off-gates)
HTML
<a href="https://trustcase.dev/use-cases/design-review-against-the-mockup-with-sign-off-gates"><img src="https://trustcase.dev/badge/design-review-against-the-mockup-with-sign-off-gates.svg" alt="Trustcase trust score for Design review against the mockup with sign off gates" height="20"></a>

More engineering workflows

Other workflows that use the same tools

  • Site change tester

    Marketing. Tries small edits to your site, watches whether more visitors stay, and keeps only the changes that help. Good for steady small wins on a landing page.

  • Daily kids lesson builder

    Personal. Builds a short interactive lesson for your kids each night and has a second agent check it. You read a review email and approve it before the kids get the link.

  • Weekly delivery status report

    Operations. Pulls your team's work items once a week and builds a status report grouped by initiative. It puts at risk items first and flags anything with no update in two weeks.