Menú
Compare implemented UI against Figma and report only meaningful deviations
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
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
| 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: