Skip to content
Get packs

Design QA Checker

Compares a built prototype's screenshot against its source design and lists prioritized visual fixes.

Source Download skill
Repository
XiaomiMiMo/MiMo-Code
Stars
13,743
Licence
MIT
Files
3 files

What it does

When a product design prototype or a design-to-code build is ready, this skill makes the agent check the rendered result against the original design before handoff. The agent places the source image and a screenshot of the working implementation side by side, checks fonts, spacing, colors, images, and copy, and writes a ranked list of differences with suggested fixes. It is an internal helper inside the MiMo Code product-design workflow and explicitly does not do general UX or design critiques, which are routed to a separate audit skill.

Great for

  • Developers handing off a prototype built from a Figma file, mockup, or image and wanting a fidelity check
  • Designers verifying that a coded page matches their visual target before sign-off
  • Teams using the MiMo Code product-design workflow who need a repeatable QA gate before handoff

Skip it if

  • Broad UX critiques, product audits, or user-flow reviews, which the skill itself says to send to the separate audit skill
  • Projects with no source design image or Figma node to compare against, because the skill requires both a source and a rendered implementation
  • Pixel-perfect judgments on tiny details when screenshots are low resolution, since the skill warns that unreadable details should not pass QA

Try asking

  • “Compare my built landing page at localhost:3000 against this Figma frame and list the fidelity differences”
  • “Run design QA on the screenshot of the checkout screen versus the mockup I attached before I hand it off”
  • “Check the mobile and desktop renders of this prototype against the source images and give me a prioritized fix list”
Step-by-step guide: how to use Design QA CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    design-qa.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip design-qa.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip design-qa.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide both the source image and the implementation at the same viewport size and state so the comparison is fair
  • Expect iterative loops: each fix requires a new capture and re-comparison before the result can pass
  • Use it for visual fidelity only; send general UX or flow questions to the audit skill instead

What's inside

  • agents/openai.yaml
  • references/qa-rubric.md
  • SKILL.md

Redistributed unmodified from XiaomiMiMo/MiMo-Code under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.