design-review

Audits live pages for spacing, typography, hierarchy problems and generates visual reports.

1|Updated Apr 15, 2026

Search Tags:#typography #design #spacing #hierarchy #visual-qa #before-after #design-polish

Ready to run

npx skills add https://github.com/tyhuffman7/gstack-hermes --skill design-review-tyhuffman7

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/tyhuffman7/gstack-hermes/tree/main/gstack-design-review
Command: npx skills add https://github.com/tyhuffman7/gstack-hermes --skill design-review-tyhuffman7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA for live interfaces—identifies spacing gaps, typographic misalignments, and hierarchy inconsistencies, then guides fixes that elevate polish and consistency across pages.

Core Features & Use Cases

Proactive visual QA across pages and components, catching typography, spacing, color, and contrast issues before users notice.
Iterative fixes with before/after verification, producing concrete visual improvements and a clear upgrade path for design systems.
Plan-mode readiness: supports /plan-design-review workflows to scope and prepare design polish for implementation.

Quick Start

Audit the live page and return a before/after visual report highlighting typography, spacing, and hierarchy improvements.

Frequently Asked Questions about design-review

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

FAQPage Schema

How do I run a visual QA audit to fix spacing and hierarchy problems in my UI?▼

Run a visual QA audit to identify spacing gaps, typographic misalignments, and hierarchy inconsistencies across live interface pages. The audit guides concrete fixes that elevate design polish and consistency before users notice visual issues.

What is visual QA for design polish and when do I need it?▼

Visual QA for design polish is the process of proactively scanning live interfaces to catch typography, spacing, color, and contrast issues. You need it during redesigns, component-level views, and plan or design reviews to improve perceived quality.

Can I generate a before and after visual report for typography and spacing improvements?▼

Yes, you can generate a before and after visual report highlighting typography, spacing, and hierarchy improvements. This iterative verification produces concrete visual upgrades and a clear upgrade path for design systems.

Does the design review process work for component-level views and live sites?▼

The design review process works across live sites, design systems, and component-level views. It applies to pages across various contexts to satisfy checks for typography, spacing, color contrast, and exportable visual reports.

What is the best way to check color contrast and typography alignment across a design system?▼

The best way to check color contrast and typography alignment is to run a proactive visual QA audit across your design system pages. This catches inconsistencies and guides fixes that elevate perceived quality and consistency.

Why does my UI look visually inconsistent even after applying standard spacing?▼

Your UI looks visually inconsistent due to hidden spacing gaps, typographic misalignments, and hierarchy problems. A visual QA audit identifies these specific issues across pages and guides fixes to elevate polish and consistency.