Guide · Agent skill
How to use the Design QA Checker agent skill (design-qa)
Updated · written with AI from the project's own documentation and checked against our catalogue data
Design QA Checker is an agent skill that makes an AI agent compare a rendered build against the original design before it is handed off. It is written for developers handing off a prototype built from a Figma file, mockup or image, and for designers who want to confirm a coded page matches their visual target. After this guide you will know what the skill checks, how to install it, how to trigger it with a plain request, and what it needs to run.
Design QA CheckerXiaomiMiMo/MiMo-Code · MIT Download the skill Quick start
- 1Download the ZIP. Download the design-qa skill ZIP from this page.
- 2Unzip into a skills folder. Unzip into ~/.claude/skills/ for personal use or into the project's .claude/skills/ folder for one project.
- 3Or upload in the Claude apps. Alternatively, upload the ZIP under Settings → Capabilities → Skills.
- 4Prepare the source and the build. Have a Figma node, image or mockup for the design, and a local URL, deployed URL or screenshot of the build.
- 5Ask for design QA in plain words. Name the design and the build, and say which state to check such as mobile or dark mode.
- 6Fix and re-check. Apply the ranked fixes, capture the same view again, and ask for another comparison until no P0, P1 or P2 issues remain.
What the design-qa skill makes the agent do
The skill is an internal helper inside the MiMo Code product-design workflow. When a prototype, URL-to-code build or image-to-code build is ready, the agent places the source image and a screenshot of the working implementation side by side, then checks fonts, spacing, colors, images and copy.
The output is a prioritized list of differences, each with a suggested fix. Findings are graded P0 to P2, where P0 blocks core use and P1 is a major design mismatch likely to be noticed by users. A QA run only passes when there are no actionable P0, P1 or P2 differences, and any fix made in response requires a new screenshot and another comparison.
The skill does not do general UX or design critique. Requests for broad UX critique, product audits or user-flow reviews are routed to a separate audit skill.
- Compares a source visual target with a rendered implementation
- Checks the five required fidelity surfaces: fonts/typography, spacing/layout rhythm, colors/tokens, image quality and copy/content
- Writes a fix-oriented report with severity, location, evidence and suggested fix
- Writes design-qa.md and marks the result blocked if either artifact cannot be opened or captured
Install the design-qa skill from the ZIP or the Claude apps
Download the design-qa ZIP from this page. Then choose one of two routes.
For a personal install, unzip the file into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder. Either way the skill folder should contain SKILL.md, references/qa-rubric.md and agents/openai.yaml.
In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
Give the agent both artifacts before you ask for QA
The skill needs two things. The first is a source visual target, such as a Figma node, image, screenshot or mockup. The second is a rendered implementation, such as a local or deployed URL, an app screen, a component or a screenshot.
If the source is in Figma, the skill uses Figma design context tools to read it, so those tools need to be available. To capture a web implementation the agent needs a browser or screenshot tool. The skill refers to a Browser Choice rule in another skill for picking one.
- Source: Figma node, image, screenshot, mockup or spec
- Implementation: local URL, deployed URL, app screen, component or screenshot
- Browser or screenshot tool for web and app captures
- Figma design context tools when the source is Figma
Trigger the skill with natural requests
You do not need a special command. Describe the handoff in plain words and name both the design and the build. The skill's description says it should be used only after a prototype or build has a source target and a rendered implementation to compare before handoff.
Name the state you want checked, such as mobile width or dark mode, because the skill matches viewport, state and theme before it judges anything.
- "Run design QA on the checkout page against this Figma frame before I hand it off."
- "Compare my local build at localhost to the mockup image I attached and list the differences by priority."
- "Check the mobile view of the onboarding screen against the design, including fonts and image crops."
- "Do a design QA pass on the image-to-code build before sign-off."
Read the report and work through the fix loop
The report leads with findings ordered by severity. Each finding names the location, what differs, the evidence, why it matters and the concrete fix. Objective mismatches are kept separate from subjective polish suggestions.
When a comparison finds a P0, P1 or P2 issue, the agent records it, applies the fix, captures the revised implementation at the same viewport and state, and compares again. A later pass must reference the earlier findings and the post-fix evidence. Build, dependency, lint and deployment troubleshooting do not count as design-QA iterations.
The report ends with an implementation checklist.
- Findings: severity, location, difference, evidence, why it matters, fix
- Objective mismatches listed apart from subjective polish
- Blocked result if an artifact cannot be opened or compared
- Checklist to finish the handoff
What people use it for
- Checking a Figma-based prototype against its frame before a developer handoff
- Confirming a coded page matches a designer's mockup before sign-off
- Comparing a mobile and desktop capture of an image-to-code build against the source image
- Producing a ranked list of font, spacing, colour and image-crop differences with CSS or token fixes
Frequently asked questions
How do I install the design-qa skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
What does the design-qa skill require to run?
It needs a source visual target, such as a Figma node, image, screenshot or mockup, and a rendered implementation, such as a local or deployed URL or a screenshot. It also needs a browser or screenshot tool to capture web output, and Figma design context tools when the source is Figma.
Is design-qa free to use?
The source states the skill is licensed under MIT. Check the repository's license file for the terms that apply to your use.
Can design-qa do a UX audit or design critique?
No. The skill is explicitly limited to comparing a build with its source design. Broad UX critique, design critique, product audits and flow reviews are routed to a separate audit skill.
Does the skill run scripts or use the network?
According to the listing, it does not run scripts but does use the network. Capturing Figma or a deployed URL depends on those tools reaching their sources.
Why did the skill mark my QA as blocked?
The result is blocked when the source or the implementation cannot be opened, captured or compared. Provide both artifacts in a reachable form, such as a shareable Figma node or a screenshot file, and run the check again.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use design-qa when a Product Design prototype or design-to-code build is ready and you need a repeatable fidelity check against its source before handoff. Pick a different tool if you need a general UX critique or product audit, since this skill routes those requests elsewhere, or if you have no source image or Figma node to compare against.
Download the skill