メニュー
Compare implemented UI against Figma and report only meaningful deviations
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | pixel-check |
| description | Compare implemented UI against Figma and report only meaningful deviations |
Trigger: /pixel-check [figma-url] or auto-called after ui-builder
Purpose: Flag only deviations large enough to matter before review.
| Category | What to check | Blocker threshold |
|---|---|---|
| Spacing | Gap, padding, margin match 4px grid | >4px off |
| Typography | Font size, weight, line-height, letter-spacing | Any deviation |
| Color | Design token used — not raw hex or hardcoded rgba | Any raw value |
| Component | Mapped codebase component used — not custom re-implementation | Re-implementation present |
| States | Hover, focus, disabled, loading, error states rendered | Any interactive state missing |
| Responsive | Breakpoint behavior matches Figma variants | Layout breaks at defined breakpoint |
1. Fetch Figma screenshot via get_design_context
2. Compare implementation against check criteria above
3. Report only blocker-level or meaningful major deviations
## Pixel Check Results
### Blockers
- [element]: [expected] vs [actual]
### Notes
- [non-blocking major deviation]
Overall: PASS | NEEDS REVISION
Rules:
Single entry point for frontend work. Classify intent, create a plan, and run the minimal agent workflow.
Independent adversarial code review via Codex CLI to eliminate Claude self-review bias
Find reusable components with compact output before UI work
Create a task branch after plan approval
Create scoped Conventional Commits after reviewer PASS
Create an issue for failed tests or tracked follow-up work