design-parity-review-agent — Codex subagent: setup and usage
Checks coded user interfaces against Figma designs and reference screenshots. Catches typography drift, missing tokens, and spacing errors early.
.codex/agents/design-parity-review-agent.tomlWhat design-parity-review-agent does
This subagent compares implemented frontend interfaces directly with Figma specifications. Visual defects and broken component interactions take precedence over general code formatting rules. The agent identifies wrong design tokens, shifted margins, substituted graphic assets, and typography drift.
Review output follows a fixed three-part structure: issues ordered by severity, missing context or blockers, and an overall parity summary. Without visual references or screenshots, the agent will not guess and requests the necessary context before continuing.
What it helps with
- spot typography and spacing drift between code and mockups
- detect misused design tokens in interface styles
- catch substituted visual assets or missing icons
- generate parity findings sorted by severity
Example prompts for the agent
- Compare this modal dialog against the Figma screenshot and check margins
- Review the implemented profile card against the design file for token mismatches
How to install design-parity-review-agent
Manually: put the files in place
.codex/agents/design-parity-review-agent.tomlCodex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/
Manually: put the files in place
.claude/agents/design-parity-review-agent.mdFor all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention
Manually: put the files in place
.cursor/agents/design-parity-review-agent.mdCursor also reads .claude/agents/
Step by step, with commands for each platform: Claude Code subagents: how to create one, call it and keep context clean
Questions about design-parity-review-agent
How to install design-parity-review-agent in Codex?
Place the agent configuration file into .codex/agents/design-parity-review-agent.toml.
What does design-parity-review-agent do?
It reviews frontend implementations against Figma intent and visual screenshots. The focus is strictly on visible regressions and interaction mismatches.
What happens when reference screenshots are missing?
The agent avoids guessing layout details. It marks missing evidence as a blocker and explicitly asks for reference images.
