Design Review

What Is This?

Overview

Design Review is a specialized skill for performing visual quality assurance on user interfaces directly within your development workflow. It applies a designer's eye to running applications, identifying visual inconsistencies, spacing problems, hierarchy issues, AI-generated pattern artifacts, and sluggish interactions. Rather than simply flagging problems, it iteratively fixes each issue in the source code, commits the change atomically, and re-verifies the result using before and after screenshots.

The skill operates in two distinct modes. The default mode performs live design review against a running application, making and committing fixes as it works through each identified problem. For situations where you want to review a design before writing any implementation code, the companion command /plan-design-review provides a planning-focused variant that evaluates designs at the specification or mockup stage.

This approach bridges the gap between design and engineering by embedding visual QA directly into the development cycle. Teams no longer need to wait for a dedicated design review meeting or a separate QA pass. Issues are caught, fixed, and verified in a single automated workflow, reducing the round-trip time between identifying a visual problem and shipping a corrected build.

Who Should Use This

• Frontend developers who want automated visual QA without switching context to a separate design tool
• Full-stack engineers building product features who lack dedicated design support and need a reliable way to catch visual regressions
• Engineering teams using AI-assisted code generation who need to identify and remove generic or low-quality UI patterns introduced by language models

Why Use It?

Problems It Solves

• Inconsistent spacing and padding across components that accumulates over time as multiple contributors touch the same codebase
• Visual hierarchy failures where typography, color, or layout choices make it unclear what a user should focus on first
• AI-generated UI patterns that look generic, misaligned, or stylistically inconsistent with the rest of the product
• Slow or janky interactions caused by unoptimized animations, layout thrashing, or missing loading states
• Manual design review bottlenecks that delay shipping because visual feedback requires a separate meeting or asynchronous comment thread

Core Highlights

• Performs visual QA against a live running application, not static screenshots
• Identifies spacing, hierarchy, consistency, and interaction quality issues automatically
• Fixes each issue directly in source code rather than producing a report for someone else to act on
• Commits each fix atomically so changes are traceable and reversible
• Captures before and after screenshots to verify that each fix produced the intended result
• Supports a planning mode via /plan-design-review for pre-implementation design evaluation
• Integrates into existing development workflows without requiring external design tooling

How to Use It?

Basic Usage

Trigger the skill by asking the agent to audit the design of a running application. Common invocations include:

audit the design
visual QA
check if it looks good

The skill will connect to the running application, capture the current visual state, and begin its review pass.

Specific Scenarios

Scenario 1: Post-implementation visual cleanup. After completing a feature, run Design Review to catch spacing inconsistencies and hierarchy problems before opening a pull request. The skill will commit each fix with a descriptive message so reviewers can see exactly what changed.

Scenario 2: AI-generated UI cleanup. When using a code generation tool to scaffold a new page or component, run Design Review immediately after to strip out generic patterns and align the output with your product's visual language.

Real-World Examples

Example 1: A developer ships a new settings page built with an AI assistant. Design Review identifies four spacing inconsistencies, two misaligned labels, and a button hierarchy problem. It fixes and commits each issue, then provides before and after screenshots confirming the corrections.

Example 2: A team integrates Design Review into their staging deployment pipeline. Every pull request targeting the main branch triggers a visual QA pass, and the resulting screenshots are attached to the pull request for human sign-off.

Important Notes

Requirements

• A running instance of the application must be accessible for the skill to perform live visual analysis
• The project must use a version-controlled codebase so that atomic commits can be created for each fix
• Screenshot capture capability must be available in the execution environment
• For planning mode, design specifications or mockups should be available as input to /plan-design-review