codeloop_design_compare
Compare reference designs (Figma exports or baseline PNGs) to the actual coded UI. Returns pixel-diff scores and an LLM-ranked rationale.
When to use codeloop_design_compare
When the project ships with designs/ or .codeloop/figma.json — produces a per-region pixel diff so the agent knows which regions to fix.
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| design_dir | string | no | Folder of reference PNGs. Defaults to designs/. |
| screenshot_dir | string | no | Folder of current screenshots. Defaults to artifacts/runs/<latest>/screenshots/. |
| mode | enum (all | single) | no (default: all) | Compare all design files or a single matched pair. |
| project_dir | string | no | Project root. |
What you get back
Per-design pixel-diff %, severity, and a structured fix list.
Typical prompts that trigger it
Cursor + Claude Code call codeloop_design_compare automatically when your prompt looks like one of these:
- “Pixel-diff the page against the design file.”
- “Compare to designs/dashboard.png.”
FAQ
What does codeloop_design_compare do?
Compare reference designs (Figma exports or baseline PNGs) to the actual coded UI. Returns pixel-diff scores and an LLM-ranked rationale.
When should an AI agent call codeloop_design_compare?
When the project ships with designs/ or .codeloop/figma.json — produces a per-region pixel diff so the agent knows which regions to fix.
What does codeloop_design_compare return?
Per-design pixel-diff %, severity, and a structured fix list.
Is codeloop_design_compare part of the CodeLoop MCP server?
Yes. CodeLoop ships as an MCP server installed via `npx codeloop init`. Cursor and Claude Code call it automatically once the User Rule (Cursor) or CLAUDE.md (Claude Code) is in place.