qa-design-review

Audit web interfaces for visual hierarchy, typography, spacing, color contrast, and interaction polish.

2|Updated Mar 20, 2026
One-click install
npx skills add https://github.com/nicholaslocascio/x-claw-studio --skill qa-design-review-nicholaslocascio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-design-review
Source: https://github.com/nicholaslocascio/x-claw-studio/tree/main/skills/gstack/qa-design-review
Command: npx skills add https://github.com/nicholaslocascio/x-claw-studio --skill qa-design-review-nicholaslocascio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For report-only mode, use /plan-design-review instead.

Core Features & Use Cases

  • Designer-led QA of UI to identify layout, typography, color, and interaction issues, ensuring a coherent visual language across pages.
  • Structured, repeatable workflow that surfaces actionable fixes with before/after evidence and annotated screenshots.
  • Supports end-to-end design verification from first impression to final report, with guidance for implementers.

Quick Start

Run the qa-design-review on the target site to start a full design audit and generate a shareable report.

Frequently Asked Questions about qa-design-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a visual design audit on a live web interface?▼

Perform a visual design audit by running the review on your target site to analyze visual hierarchy, typography, spacing, and color contrast. It generates a shareable report with annotated screenshots and actionable recommendations.

What is the best way to find and fix UI color contrast and typography issues?▼

Find and fix UI color contrast and typography issues through a structured design review that iteratively corrects source code. It commits each fix atomically and provides before/after screenshots as verification evidence.

Can I use this design review to identify visual hierarchy and spacing problems?▼

Yes, you can use this design review to identify visual hierarchy and spacing problems. It evaluates visual consistency across pages, detecting layout issues and AI slop patterns to ensure a coherent visual language.

Does the design QA process automatically fix code or just generate a report?▼

The design QA process automatically fixes code by iteratively addressing issues in the source and committing each fix atomically. For report-only mode without applying fixes, you should use the plan-design-review command instead.

When do I need a comprehensive design audit with annotated screenshots?▼

You need a comprehensive design audit when verifying UI polish before release or fixing visual inconsistency. It guides designers and engineers through phase-based audits from first impression to final report with actionable design-baselines.

Why does my web interface lack interaction polish and visual consistency?▼

Your web interface lacks visual consistency due to spacing issues, hierarchy problems, and slow interactions. A designer-led QA process surfaces these actionable fixes with before/after evidence to establish a coherent visual language.