design-review

Compare rendered UI screenshots against aesthetic-direction and ux-brief criteria.

17|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/alexiolan/craft-skills --skill design-review-alexiolan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/alexiolan/craft-skills/tree/main/skills/design-review
Command: npx skills add https://github.com/alexiolan/craft-skills --skill design-review-alexiolan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automated visual regression and design-contract audit that runs between develop and browser-test.

Core Features & Use Cases

  • Pre-flight checks against aesthetic-direction.md; detect changed UI files and route scope
  • Start a dev server and render updated UI for visual comparison
  • Capture desktop and mobile screenshots for affected routes and states
  • Dispatch a Haiku-vision agent to compare visuals against the ux-brief.md and aesthetic direction
  • Generate and update a structured .claude/plans design-review.md with status, findings, and next steps
  • Escalate to Sonnet/Opus if issues are found and require deeper analysis

Quick Start

Invoke craft-skills:design-review after UI changes to automatically generate a design-review pass and flag regressions.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I catch visual regressions before running automated browser tests?

To catch visual regressions before browser tests, you can run an automated design review that compares rendered UI screenshots against aesthetic direction and ux-brief criteria, generating a structured pass/fail report.

What is a visual regression check against an aesthetic direction?

A visual regression check against an aesthetic direction is a process that captures desktop and mobile screenshots of affected routes and uses a Haiku-vision agent to compare them against your ux-brief.md for design-contract compliance.

How do I automate UI design analysis across responsive states?

You can automate UI design analysis by starting a dev server to render updated UI files, capturing screenshots across desktop and mobile states, and dispatching a vision agent to evaluate visual compliance.

Do I need an aesthetic-direction.md file to run a design review?

Yes, an aesthetic-direction.md file is a required prerequisite. The design review process performs pre-flight checks against this file to detect changed UI files and establish the visual scope before capturing screenshots.

What happens when a visual regression audit finds UI issues?

When a visual regression audit finds UI issues, it updates a structured design-review.md with findings and next steps, and escalates the analysis to Sonnet or Opus models for deeper evaluation and recommended actions.

When should I run a visual regression audit in my development workflow?

You should run a visual regression audit during the handoff between the develop and browser-test stages, specifically for features with UI changes, to ensure visual compliance before automated testing begins.