design-qa
Conformance-checks a built prototype against its mockup, context, and success criteria, flagging visual, behavioral, and a11y drift with expected-vs-actual and a verdict.
Source: DKeken
At a glance
- Best for
- Confirming a prototype matches the agreed design before review
- Works with
- Cursor · OpenAI Codex · Claude Code
- Outcome
- Catching drift across states (loading/empty/error/success)
- Source
- DKeken/codex-skills-alternative
01 / Understand the skill
About design-qa
Check a prototype against its original design direction and requirements before shipping. Compares implementation to the mockup/spec/context, flags drift in layout, spacing, type, color, states, and behavior, and reports a pass/fix list. Use when the user says "design QA", "does it match the design", "check against the spec", "conformance check", or before sharing/handing off a prototype. Part of the Product Design set. Uses a browser tool for visual comparison.
Check a prototype against its original design direction and requirements before shipping. Compares implementation to the mockup/spec/context, flags drift in layout, spacing, type, color, states, and behavior, and reports a pass/fix list.
Read full description
Check a prototype against its original design direction and requirements before shipping. Compares implementation to the mockup/spec/context, flags drift in layout, spacing, type, color, states, and behavior, and reports a pass/fix list. Use when the user says "design QA", "does it match the design", "check against the spec", "conformance check", or before sharing/handing off a prototype. Part of the Product Design set. Uses a browser tool for visual comparison.
02 / Confirm the fit
Use design-qa when you need to
- Confirming a prototype matches the agreed design before review
- Catching drift across states (loading/empty/error/success)
- A final gate before sharing or dev handoff
03 / See the workflow
How design-qa works
- 01Install: npx skills add https://github.com/DKeken/codex-skills-alternative --skill design-qa
- 02Try: Does this prototype match the onboarding mockup and our success criteria?
- 03Get: A qa.md with pass items, prioritized fixes, and a READY/NOT-READY verdict.
Check before installing
Compatible platforms
Cursor · OpenAI Codex · Claude Code
Best fit
Confirming a prototype matches the agreed design before review
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Cursor and OpenAI Codex and Claude Code · Published by DKeken
Ready to add design-qa?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Cursor · OpenAI Codex · Claude Code
npx skills add https://github.com/DKeken/codex-skills-alternative --skill design-qa
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Generates original p5.js generative art by first writing an algorithmic philosophy, then expressing it as a self-contained interactive HTML viewer with seeded randomness.
Reproduces a reference mockup as a runnable frontend, extracting its design system then screenshot-comparing the build and iterating until the gap is minor and explained.
Clarifies the brief before design work by interrogating goal, user, JTBD, constraints, success, and scope, then writing a context.md the other design skills consume.
Creates museum-quality original poster and visual-art PDFs/PNGs by drafting a design philosophy first, then expressing it as a minimal, design-forward single-page canvas.