What problem does it solve?
Design implementations often drift from the source mockup in fonts, spacing, colors, and imagery, and these mismatches slip through when reviews rely on memory or code inspection alone. This Skill enforces an evidence-based visual QA pass that compares the actual source design against the actual rendered implementation before any build is handed off.
Core Features & Use Cases
- Side-by-side visual comparison: Captures both the source design (Figma node, image, screenshot, mockup) and the rendered implementation (local URL, deployed URL, app screen) and judges differences from a combined comparison input at matched viewport and state.
- Required fidelity surfaces: Always audits fonts/typography, spacing/layout rhythm, colors/tokens, image quality, and copy/content, flagging banned shortcuts like CSS art, inline SVG substitutes, or placeholder imagery replacing real assets.
- Severity-ranked fix report: Produces a structured
design-qa.md report with P0-P3 findings, evidence, concrete CSS/component fixes, an implementation checklist, and a final result of exactly passed or blocked.
- Use Case: After building a prototype from a Figma frame, run this Skill to capture both artifacts, detect that the heading font weight and card padding drifted from the mock, and receive an ordered fix list before the build is marked done.
Quick Start
Run design QA comparing my Figma mockup against the local prototype at localhost:3000 and save the report as design-qa.md.
