Design Qa Checklist
- 991 installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
design-qa-checklist is a Claude Code skill that generates systematic frontend QA checklists so developers can verify implementations match design specifications across visual accuracy and layout categories.
About
design-qa-checklist is a designer-skills agent skill that produces structured QA checklists for verifying that coded interfaces match design specifications. The skill organizes checks into Visual Accuracy categories—design tokens for color, typography, spacing, border radius, shadows, opacity, icon sizing, and image aspect ratio—and Layout categories including grid alignment and responsive behavior at each breakpoint. Developers reach for design-qa-checklist when handing off Figma or design-token specs to engineering and need a repeatable audit before merge or release. The checklist format turns subjective design review into concrete pass-or-fail items an agent or reviewer can walk through file by file.
- Generates complete QA checklists covering six distinct categories
- Verifies visual accuracy against design tokens, typography, spacing, and assets
- Checks layout, responsive behavior, interactions, content fidelity, accessibility, and cross-platform consistency
- Includes 44px minimum touch target rule and WCAG AA contrast requirements
- Produces actionable verification steps ready for designers or developers
Design Qa Checklist by the numbers
- 991 all-time installs (skills.sh)
- +45 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #396 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill design-qa-checklistAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 991 |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you verify frontend code matches design specs?
Generate systematic QA checklists that verify frontend implementations match their design specifications exactly.
Who is it for?
Frontend developers and design engineers validating that Tailwind, CSS, or component implementations match Figma tokens and responsive specifications before shipping.
Skip if: Teams needing automated visual regression testing with screenshot diff tools rather than specification-based manual checklists.
When should I use this skill?
A developer asks to verify UI implementation against design tokens, Figma specs, or responsive layout requirements before merge or release.
What you get
A categorized QA checklist covering visual accuracy and layout verification items ready for manual or agent-driven review.
- categorized design QA checklist
- visual accuracy audit items
- layout verification items
Files
Design QA Checklist
You are an expert in creating systematic QA checklists for verifying design implementation.
What You Do
You create checklists that help designers systematically verify that implementations match design specifications.
QA Categories
Visual Accuracy
- Colors match design tokens
- Typography matches specified styles
- Spacing and sizing match specs
- Border radius, shadows, opacity correct
- Icons are correct size and color
- Images are correct aspect ratio and quality
Layout
- Grid alignment is correct
- Responsive behavior matches specs at each breakpoint
- Content reflows properly
- No unexpected overflow or clipping
- Minimum and maximum widths respected
Interaction
- All states render correctly (default, hover, focus, active, disabled)
- Transitions and animations match specs
- Click/touch targets are adequate size (44px minimum)
- Keyboard navigation works in correct order
- Focus indicators are visible
Content
- Real content fits the layout (no lorem ipsum in production)
- Truncation works as specified
- Empty states display correctly
- Error messages are correct
- Loading states appear as designed
Accessibility
- Screen reader announces correctly
- Color contrast meets WCAG AA
- Focus management works
- ARIA labels and roles are correct
- Reduced motion is respected
Cross-Platform
- Works in required browsers
- Works on required devices
- Handles different text sizes (OS accessibility settings)
- Handles different screen densities
QA Process
1. Self-review by developer against checklist 2. Designer visual QA pass 3. File bugs with screenshots comparing design vs implementation 4. Prioritize bugs by severity 5. Verify fixes
Best Practices
- QA against the design spec, not memory
- Test with real content and data
- Check edge cases, not just happy paths
- Use browser dev tools to verify exact values
- Document recurring issues for prevention
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Choose design-qa-checklist for specification-driven manual QA; use visual regression tools when you need automated pixel-level screenshot comparison.
FAQ
What does design-qa-checklist verify?
design-qa-checklist verifies frontend implementations against design specifications across Visual Accuracy (colors, typography, spacing, borders, shadows, icons, images) and Layout (grid alignment, responsive behavior at breakpoints).
When should developers use design-qa-checklist?
Developers should use design-qa-checklist before merging or releasing UI when coded components must match Figma tokens, spacing scales, and responsive specs that manual review alone might miss.
Is Design Qa Checklist safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.