skills.rest
Prestonigo
PrestonigoCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit live UI designs for visual inconsistencies and spacing issues.

Updated Aug 23, 2026
Search Tags:#typography#spacing#design-review#plan-mode#before-after#ui-polish#visual-audit
One-click install
npx skills add https://github.com/Prestonigo/Claude-Skills --skill design-review-prestonigo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/Prestonigo/Claude-Skills/tree/main/gstack-main/design-review
Command: npx skills add https://github.com/Prestonigo/Claude-Skills --skill design-review-prestonigo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit live UI designs to identify visual inconsistencies, spacing issues, and hierarchy problems, then propose fixes and verify with before/after comparisons.

Core Features & Use Cases

  • Visual QA audits across pages or components to catch typography, spacing, and hierarchy issues.
  • Propose concrete fixes and verify changes with before/after screenshots, then commit atomically.
  • Plan-mode support for design reviews before implementation, with guidance to create plan-design-review workflows.

Quick Start

Provide the URL of the live page you want reviewed and I will audit typography, spacing, and visual hierarchy and propose fixes.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I audit live UI designs for visual inconsistencies and spacing issues?▼

You audit live UI designs by providing the target page URL to automatically identify typography, spacing, and visual hierarchy problems, then propose concrete fixes for each issue found.

What is visual hierarchy in UI design and how do I check it?▼

Visual hierarchy guides the order users perceive interface elements. You check it by running a visual audit to identify hierarchy problems that confuse navigation and propose structural fixes.

Can I review UI design changes in plan mode before implementation?▼

Yes, you can review UI design changes in plan mode before implementation. This supports creating plan-design-review workflows to evaluate typography and spacing fixes before committing.

How do I verify UI polish fixes with before and after comparisons?▼

You verify UI polish fixes by capturing before and after screenshots of the live site. This visual QA process generates actionable design changes and commits atomic fixes for verification.

Does plan-mode visual QA work for individual components or full pages?▼

Plan-mode visual QA works across both individual components and full pages. It applies deterministic checks to catch typography and spacing issues at any scale, proposing atomic fixes.

Related Skills

Explore More Design & Creative Skills→
edonghyunedonghyun
1

compare

Compare baseline and current UI captures into a side-by-side visual report.

Community
Advanced
himes19himes19

design-review

Audit frontend code for visual design issues and generate atomic fixes with before/after evidence.

Community
Advanced
mattothomasmattothomas

design-review

Audit UI designs for visual inconsistencies and fix them with atomic commits.

Community
Advanced
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate