Visual QA
0Visual QA utilizes vision models to review screenshots against design intent, identifying issues such as spacing, alignment, and accessibility. This skill is aimed at designers and developers who want to ensure their work aligns with established design standards before deployment.
000Updated 2mo ago
Design & UI/UX
Quick InstallView Source
$ npx skills add https://github.com/dylanfeltus/skills --skill visual-qaOverview
About This Skill
Visual QA leverages vision-capable AI models to automatically review screenshots against design standards. The skill evaluates seven key categories—layout, typography, color, hierarchy, components, polish, and responsive behavior—providing structured feedback on spacing, alignment, color consistency, and accessibility gaps. It supports full reviews, quick reviews, and mockup comparisons, helping designers and developers catch issues before shipping. Integration with build workflows enables QA checks during development. The skill requires a vision-capable model like GPT-4o or Claude and the ability to capture screenshots via browser tools or user-provided images.
How to Use
Install the skill using the provided npm command.
Use Cases
User requests to review a design or screenshot.
After building a page, verify design accuracy.
Compare implementation against mockups.
User asks if the design meets expectations.
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/dylanfeltus/skills --skill visual-qaAlternative Install (Git Clone)
git clone https://github.com/dylanfeltus/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Review the attached screenshot of [COMPANY]'s [INDUSTRY] [PRODUCT/APP/WEBSITE] against the design system guidelines. Check for: spacing inconsistencies, alignment issues, color contrast violations, font size discrepancies, and missing accessibility features. Provide a detailed report with screenshots annotated for each issue found.
Example Output
### Visual QA Report for Acme Corp's Mobile Banking App **Checked Against**: Acme Corp Design System v2.1 (Light Mode) **Screenshot**: Home Dashboard (iOS 17) #### Issues Found: **1. Spacing Inconsistencies** - Balance between account balance card and transaction list is off by 4px (should be 16px). - Padding in "Recent Transactions" header is 12px instead of 16px. **2. Alignment Issues** - Transaction amount text is misaligned by 2px in the list. - "See All" button is 8px too far to the right. **3. Accessibility Violations** - Contrast ratio for "Log Out" button text (gray #7A7A7A) is 3.1:1 (needs 4.5:1). - Missing focus ring on "Pay Bills" button (WCAG 2.1 AA failure). **4. Font Size Discrepancies** - Transaction date text is 14px instead of 16px. - Account balance amount is 20px instead of 24px. #### Suggested Fixes: - Adjust spacing to match design tokens. - Re-align all text elements to the baseline grid. - Update button colors to meet contrast requirements. - Ensure all interactive elements have visible focus states. **Screenshots**: [Annotated images attached] **Total Issues**: 8 (4 Critical, 4 Medium) **Confidence**: 95% (based on 100+ design system checks)
Apply to these tools
Browse all toolsCompatible MCP servers
Browse all MCP serversFind the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan