# Design QA

Internal prototype QA helper.

- Repository: https://github.com/XiaomiMiMo/MiMo-Code (13741 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add XiaomiMiMo/MiMo-Code --skill design-qa -g -a claude-code -y`
Codex: `npx skills add XiaomiMiMo/MiMo-Code --skill design-qa -g -a codex -y`
Cursor: `npx skills add XiaomiMiMo/MiMo-Code --skill design-qa -g -a cursor -y`
Gemini CLI: `npx skills add XiaomiMiMo/MiMo-Code --skill design-qa -g -a gemini-cli -y`

## Description

Internal prototype QA helper. Use only after a Product Design prototype, URL-to-code build, or image-to-code build has a source visual target and a rendered implementation to compare before handoff. Do not use for broad UX critique, design critique, product audits, or flow reviews; route those user-facing requests to audit.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Design QA

Use this internal helper to compare a prototype's source design against the rendered implementation before handoff.

Do not use this skill for broad UX critique, design critique, product audits, or flow reviews. Use [audit](../audit/SKILL.md) for those user-facing requests.

Use this skill before every Product Design build handoff.

A passing QA run requires both:

- a source visual target: Figma node, image, screenshot, mockup, or source capture
- a rendered implementation: local URL, deployed URL, app screen, component, or screenshot

If either artifact cannot be opened, captured, or compared, write `design-qa.md` with `final result: blocked` and name the blocker. Do not let the build skill hand off as done.

## Critical Overrides

Follow [critical-overrides](../../references/critical-overrides.md).

## Workflow

Compare the intended design to the implementation as a product-quality reviewer, not as a generic aesthetic critic. The output must be a prioritized fix list grounded in evidence from both artifacts.

Do not write the QA review from memory, code, or file paths alone. Open or capture both the source design and the implementation first, then compare what is actually visible.

Do not pretend separate image views are side-by-side comparison. Put the source image and the implementation screenshot together in the same comparison input, then judge the visible differences from that combined input.

Design QA is an iteration loop. The first comparison may pass only when it finds no actionable P0/P1/P2 differences and no visual fixes are made in response.

When a comparison finds any P0/P1/P2 issue:

- Record the finding and keep the current result blocked.
- Apply the fix.
- Capture the revised implementation at the same viewport and state.
- Compare the revised capture against the source again.

The rest: https://github.com/XiaomiMiMo/MiMo-Code/blob/HEAD/packages/cli/src/skill/builtin/.bundle/product-design/workflows/design-qa/SKILL.md