design-review

Identify visual inconsistencies, spacing issues, and hierarchy problems in live designs.

Updated Mar 21, 2026

Search Tags:#typography #ui #accessibility #frontend #spacing #design-review #visual-audit

Ready to run

npx skills add https://github.com/studyzy/dev-agent-protocol --skill design-review-studyzy

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/studyzy/dev-agent-protocol/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/studyzy/dev-agent-protocol --skill design-review-studyzy

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 plan-mode design review (before implementation), use /plan-design-review. Use when asked to "audit the design", "visual QA", "check if it looks good", or "design polish". Proactively suggest when the user mentions visual inconsistencies or wants to polish the look of a live site.

Core Features & Use Cases

Visual QA: identify inconsistencies, spacing issues, and hierarchy problems in live UI.
Atomic fixes: iteratively fix issues in code and verify with before/after diffs (screenshots).
Plan-mode guidance: provide early design critique before implementation with /plan-design-review.

Quick Start

Navigate to the target site, run a visual audit, and implement fixes with atomic commits.

Frequently Asked Questions about design-review

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

FAQPage Schema

How do I find and fix visual inconsistencies in my live UI?▼

Run a visual audit to identify spacing issues, hierarchy problems, and visual inconsistencies in live designs. The tool then iteratively applies fixes in your source code, committing each change atomically and verifying results with before/after screenshots.

Can I review UI design issues before writing any code?▼

Yes, you can use plan-mode design reviews to get early critique before implementation. This helps catch typography and hierarchy problems upfront, preventing costly frontend rework later.

What's the best way to automate visual QA for a frontend project?▼

Automate visual QA by running an audit on the live site to detect accessibility and spacing issues. The tool iteratively fixes problems in the source code, making atomic commits and verifying each change with before/after screenshots.

Does this design review tool work with existing frontend source code?▼

Yes, it operates directly on your existing frontend source code. After identifying visual inconsistencies and slow interactions, it applies fixes iteratively and commits each change atomically to your codebase.

Why does my UI look inconsistent even after following a design system?▼

Visual inconsistencies often stem from subtle spacing, typography, or hierarchy problems that survive manual checks. A visual audit systematically identifies these issues and provides actionable fixes directly in your code.