A visual QA skill for Claude Code that compares your live UI against a Figma design and reports every defect — colors, spacing, typography, alignment, missing elements.
Works with web pages, iOS Simulator, and Android Emulator.
- Claude Code CLI installed
- A browser MCP server connected to Claude Code (e.g. Playwright MCP)
npx @playwright/mcp@latestAdd it to Claude Code:
claude mcp add playwright -- npx @playwright/mcp@latest- Xcode installed with command-line tools
- iOS Simulator running with your app open at the target screen
xcode-select --install- Android SDK platform-tools installed (
adbin PATH) - Emulator running with your app open at the target screen
brew install android-platform-toolsCopy the skill into your Claude Code skills directory:
cp -r . ~/.claude/skills/pixel-perfectOr clone directly:
git clone https://github.com/Huc91/pixel-perfect-skill ~/.claude/skills/pixel-perfectIn any Claude Code session, run:
/pixel-perfect <figma-url-or-image> <target>
Web page:
/pixel-perfect https://figma.com/design/abc123/MyApp?node-id=1:2 http://localhost:3000/dashboard
iOS Simulator (navigate to the screen first, then run):
/pixel-perfect https://figma.com/design/abc123/MyApp?node-id=1:2 ios-simulator
Android Emulator:
/pixel-perfect https://figma.com/design/abc123/MyApp?node-id=1:2 android-emulator
Local reference image instead of Figma:
/pixel-perfect /path/to/design.png http://localhost:3000
- Layout & structure
- Spacing (padding, margin, gap)
- Typography (font family, size, weight, color, alignment)
- Colors (backgrounds, text, borders, icons, shadows)
- Borders & border radius
- Icons & images
- Components (buttons, inputs, cards, badges, nav)
- Missing or extra elements
A structured report printed in the conversation:
## Visual QA Report
### Overall verdict: PASS / NEEDS WORK / FAIL
#### CRITICAL
#### MAJOR
#### MINOR
### What matches
No files are written — the report lives in the conversation and any temporary screenshots are deleted immediately after comparison.