skills.rest
studyzy
studyzyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/studyzy/dev-agent-protocol --skill design-review-studyzy
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
apexradiusapexradius

canary

Monitor live websites for HTTP status, console errors, and performance metrics.

Official
Intermediate
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
SakshamKandelSakshamKandel

design-review

Audit web UI code and live sites for visual inconsistencies and deliver fixes.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced