design-review

Audit UI designs for visual inconsistencies and polish issues.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/mmunro3318/3d-render-pipeline --skill design-review-mmunro3318
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/mmunro3318/3d-render-pipeline/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/mmunro3318/3d-render-pipeline --skill design-review-mmunro3318

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: detects visual inconsistencies, spacing issues, typography mismatches, and interaction slop.
  • Plan-mode design review: conducts pre-implementation audits and suggests polish before code is written.
  • Iterative fixes: commits each fix atomically with before/after verification.
  • Live-site polish: proactively suggests improvements for existing sites to enhance UX.

Quick Start

Run the design review on your project, then review findings and commit each fix atomically with before/after verification.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I run a visual QA audit on my live site?

A visual QA audit detects visual inconsistencies, spacing issues, and typography mismatches by reviewing your layout and interactions. This process iteratively fixes issues in source code, commits each fix atomically, and re-verifies with before/after screenshots.

What is plan-mode design review for pre-implementation?

Plan-mode design review is a pre-implementation audit that suggests polish before code is written. It evaluates layout, typography, spacing, and interactions to identify potential issues and recommend fixes early in the development cycle.

Can I fix UI spacing and typography mismatches automatically?

You can fix UI spacing and typography mismatches iteratively in source code. The review process commits each fix atomically and generates before/after verification proofs to ensure the visual hierarchy problems and inconsistencies are resolved.

How do I check if my UI design looks good before implementation?

To check if your UI design looks good before implementation, run a plan-mode design review. This audits layout, typography, spacing, and interactions, suggesting polish and identifying visual inconsistencies or AI slop patterns before coding begins.

What's the best way to polish visual design and fix hierarchy problems?

The best way to polish visual design and fix hierarchy problems is an iterative QA process. It detects visual inconsistencies and interaction slop, then applies fixes to source code atomically with before/after screenshot verification for each change.

Does design review work for existing design systems and live sites?

Design review works for live sites, design systems, and pre-implementation reviews. It proactively suggests improvements for existing sites to enhance UX by detecting visual inconsistencies, spacing issues, typography mismatches, and slow interactions.