design-review

Audit live websites for visual inconsistencies and propose concrete fixes.

Updated Mar 24, 2026
One-click install
npx skills add https://github.com/pcaokhai/gradion-response-report-api --skill design-review-pcaokhai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/pcaokhai/gradion-response-report-api/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/pcaokhai/gradion-response-report-api --skill design-review-pcaokhai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and teams struggle to identify visual inconsistencies, spacing issues, and hierarchy problems across live sites, leading to inconsistent experiences. This Skill provides a rigorous, actionable audit that surfaces gaps and suggests precise fixes with before/after guidance.

Core Features & Use Cases

  • Visual QA audits: detect typography, spacing, color, and layout issues that undermine clarity and usability.
  • Plan-mode reviews: outline recommended changes and design system alignment before implementation, with concrete steps for developers.
  • Generated reports: produce annotated screenshots, before/after comparisons, and a prioritized fix list to drive design polish quickly.

Quick Start

Provide the target site URL and scope, and run the design-review audit to uncover visual issues and recommended fixes.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I audit a live website for visual inconsistencies and spacing issues?▼

You can audit a live website by providing its URL and scope to perform a visual QA audit, which generates a design report with annotated screenshots and a prioritized fix list for spacing and typography issues.

What is a visual design review and how does it improve UI hierarchy?▼

A visual design review is a structured audit that detects typography, spacing, color, and layout issues to improve UI hierarchy. It enforces a phased workflow to ensure consistent interaction cues and design system alignment across multiple pages and states.

Can I use this to check my website for accessibility and CSS hierarchy problems?▼

Yes, you can use this to check your website for accessibility and CSS hierarchy problems by running an audit that surfaces visual gaps and suggests precise fixes with before/after guidance to ensure consistent interaction cues and usability polish.

What is the best way to generate a design system alignment report for a live site?▼

The best way to generate a design system alignment report is running a plan-mode review on the live site URL, which outputs a structured design report with annotated screenshots and concrete developer steps to resolve visual inconsistencies.

Do I need to provide component code to get a UI audit with recommended changes?▼

No, you do not need to provide component code; you only need to supply the target site URL and scope to run the visual QA audit and receive a prioritized fix list with before/after comparisons and developer implementation steps.

Why does my design review report separate findings by phases instead of a single list?▼

Your design review report separates findings by phases because the audit enforces a structured workflow, ensuring visual inconsistencies across multiple pages, components, and states are systematically categorized before proposing concrete fixes and design system alignment steps.