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.