Prompts / design_qa
Design QA: build against the spec Free
Compares a built page or screenshots to the Figma design and reports differences that matter to people, with measured values and an accessibility check.
Run it
- Claude Code:
/mcp__designers__design_qa - Claude Desktop and claude.ai: plus menu, Add from Designers, Design QA: build against the spec
- Any app: Use the design_qa prompt from the Designers server on figma link for the intended design.
Arguments
| Name | Meaning |
|---|---|
design * | Figma link for the intended design |
build * | Live URL or screenshots of the build |
tolerance | Pixel tolerance agreed with engineering, default 2px |
* required
What your assistant is told to do
The full instructions, so you can see exactly what you are asking for:
Compare the build to the design and report what matters.
Design: <design>
Build: <build>
Tolerance: <tolerance>
Method:
1. Get the design: If the input is a Figma link: parse it (figma.com/design/:fileKey/..., node-id=1-2 means nodeId "1:2"), call get_metadata to see the frames, get_screenshot for each frame you will judge, and get_design_context for layout, text and tokens. Read the picture before the code. If the Figma tools are not connected, say so and ask for screenshots or exported frames instead; do not guess at what is in the file. Record frame sizes, type styles, colours and spacing from get_design_context and get_variable_defs.
2. Get the build: for a live URL call audit_page_accessibility and detect_design_slop; ask for screenshots at the same widths as the frames if you cannot view it.
3. Compare in this order, which is the order of impact: content and copy (missing, truncated, wrong), structure and hierarchy, states (hover, focus, error, empty, loading, disabled), colour and contrast (call check_contrast on build colours), typography (family, size, weight, line height), spacing and alignment, responsive behaviour, motion, accessibility (names, focus, keyboard).
4. Ignore differences inside the tolerance. Distinguish defects from deliberate engineering adaptations; ask when unsure.
5. Output a table: area, expected (value from design), actual (value from build), effect on the person, severity (blocker, major, minor, cosmetic), proposed fix, owner (design or engineering). Group blockers first. End with the three issues to fix before release and what you could not compare (states or widths not provided).