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.