design-qa-skill

What problem does it solve?

Maintaining high visual quality and consistency across UI implementations is a constant challenge, often leading to design drift, accessibility issues, and a degraded user experience. This Skill equips AI agents with structured checklists to automate rigorous design quality assurance, ensuring every pixel is perfect.

Core Features & Use Cases

• Comprehensive QA Checklists: Provides detailed guidelines covering visual hierarchy, typography, spacing, alignment, color, contrast, responsive behavior, interaction, and accessibility.
• Severity-Based Issue Scoring: Categorizes identified design flaws as Blocker, High, Medium, or Nit, enabling prioritized remediation and efficient bug tracking.
• Quantitative Design Score Generation: Generates a design_score (0-100) based on adherence to design system tokens, visual clarity, responsive behavior, and overall polish, offering measurable quality metrics.
• Use Case: Before launching a new feature, you need to ensure it meets all design standards. Use this Skill to automatically apply a detailed QA checklist to the UI, identify visual inconsistencies, and generate a clear report with severity ratings, saving hours of manual review and preventing costly post-launch fixes.

Quick Start

Perform a design QA on the attached UI screenshot, focusing on spacing, color contrast, and responsive behavior.