design-review

Audits live websites for visual design issues and fixes them with atomic commits.

Updated Apr 5, 2026
One-click install
npx skills add https://github.com/Simon-YHKim/eject-button --skill design-review-simon-yhkim
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/Simon-YHKim/eject-button/tree/main/.claude/skills/design-review
Command: npx skills add https://github.com/Simon-YHKim/eject-button --skill design-review-simon-yhkim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Live websites accumulate visual inconsistencies, spacing problems, hierarchy issues, and AI-generated-looking patterns that erode user trust, and manually auditing every page with screenshots is slow and subjective. ## Core Features & Use Cases - Designer's-eye audit: Visits 5-8 pages of a live site, takes screenshots, extracts the actual rendered design system (fonts, colors, heading hierarchy, touch targets), and grades findings against usability principles. - Iterative fix loop: Fixes each finding in source code, commits atomically, and re-verifies with before/after screenshots. - Multiple modes: Full, quick, deep, diff-aware (feature-branch scoped), and regression comparison against a previous baseline. - Use Case: Before a launch, run a deep audit of your marketing site to catch undersized tap targets, inconsistent typography, and slow interactions, then have each issue fixed and committed one by one. ## Quick Start Ask the assistant to run a design review on your live site URL, for example by requesting a visual audit of https://yourapp.com with a focus on the homepage and settings page.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I audit the visual design of a live website?

Point the skill at a target URL and it navigates through 5-8 pages, captures screenshots, extracts the rendered fonts, colors, and heading hierarchy, then produces a graded design audit report with specific findings.

What is diff-aware design review on a feature branch?

When no URL is given and you are on a feature branch, the skill analyzes the branch diff, maps changed files to affected pages, detects a locally running app, and audits only the pages your changes touch.

Does design review fix the issues it finds?

Yes. After auditing, it iteratively fixes each finding in the source code, commits every fix atomically with git, and re-verifies the result with before and after screenshots. A clean working tree is required before starting.

Can I compare a new design audit against a previous baseline?

Yes. Regression mode loads a previous design-baseline.json and compares per-category grade deltas, new findings, and resolved findings, outputting a regression table in the report.

What are the limitations of automated visual design review?

It evaluates rendered pages against usability heuristics and a DESIGN.md if present, but subjective brand taste and complex interactive states may still need human judgment. Authenticated pages require cookie import or CDP mode with a real browser session.