What problem does it solve? Live websites often ship with visual inconsistencies, spacing problems, broken hierarchy, and generic AI-looking interfaces that nobody systematically reviews. This Skill acts as a designer's eye: it audits rendered pages with screenshots, finds concrete design defects, fixes them in source code, and verifies each fix with before/after screenshots. ## Core Features & Use Cases - Structured Design Audit: Runs a multi-phase review covering first impression, design system extraction (fonts, colors, heading scale, touch targets), page-by-page visual audit, responsive screenshots, console errors, and performance checks. - Iterative Fix-and-Verify Loop: Fixes each identified issue in source code, commits atomically, and re-verifies with before/after screenshots so every change is traceable. - Flexible Modes: Supports full, quick, deep, diff-aware (feature-branch scoped), and regression modes that compare against a previous design baseline. - Use Case: Before launching a marketing site, run a deep audit across 10-15 pages to catch undersized buttons, inconsistent heading scales, and slow interactions, then let the Skill fix and commit each issue. ## Quick Start Ask the AI to run a design review on your site, for example: audit the design of http://localhost:3000 and fix any visual issues it finds.
