review-design-parity — Claude command: check UI against a Figma design
Compares a built interface with its Figma frame and lists where layout, tokens or interactions drift. Useful before handing off a screen.
~/.codex/prompts/review-design-parity.mdWhat review-design-parity does
You give the command two things: a Figma frame or component URL, and the local page or component to inspect. It pulls the design context and a screenshot from Figma, then looks at the current implementation and runs whatever local preview or test path applies.
The comparison covers layout, typography, tokens, assets and interactions. Results come back findings-first, ordered by severity, with suggested fixes after. The report also states which evidence was checked — screenshot, local preview, tests — and what was missing that would block a full parity call.
Both arguments are required, so a run without figma_url and target goes nowhere. No access to the Figma file means the screenshot and design-context step fails, and there is nothing to compare against.
What it helps with
- check a built screen against its Figma frame
- spot spacing and typography drift
- confirm colors and tokens match the design
- catch interaction differences in components
- produce a mismatch report before handoff
Example prompts for the agent
- Review design parity for this page:
figma_urlis the frame link,targetissrc/pages/Checkout.tsx - Compare the Figma component with the local implementation and order findings by severity
- Run review-design-parity on the profile page and tell me what evidence was missing
How to install review-design-parity
Manually: put the files in place
~/.codex/prompts/review-design-parity.mdCall it with /prompts:review-design-parity. Codex marks this format deprecated in favour of skills
Manually: put the files in place
.claude/commands/review-design-parity.mdCall it with /review-design-parity. For all projects use ~/.claude/commands/
Manually: put the files in place
.github/prompts/review-design-parity.prompt.mdManually: put the files in place
.gemini/commands/review-design-parity.tomlGemini stores commands as TOML: the prompt text goes into the prompt field
Questions about review-design-parity
How do I install review-design-parity in Claude?
Place the command file at ~/.codex/prompts/review-design-parity.md.
What does review-design-parity do?
It checks an implemented interface against a Figma design and reports visual and behavioral mismatches, findings first and fixes second.
What arguments does the command take?
Two required ones: figma_url with the Figma frame or component link, and target naming the local page or component to review.
