design-review

Audit live pages for visual inconsistencies and fix them in source code.

1|Updated Apr 8, 2026
One-click install
npx skills add https://github.com/martin-hsu-test/gstack-gemini-slim --skill design-review-martin-hsu-test
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/martin-hsu-test/gstack-gemini-slim/tree/main/.gemini/skills/gstack-design-review
Command: npx skills add https://github.com/martin-hsu-test/gstack-gemini-slim --skill design-review-martin-hsu-test

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use /plan-design-review. Use when asked to "audit the design", "visual QA", "check if it looks good", or "design polish". Proactively suggest when the user mentions visual inconsistencies or wants to polish the look of a live site. (gstack)

Core Features & Use Cases

  • Visual QA: identify inconsistencies, spacing issues, typographic hierarchy.
  • Iterative fixes: commit atomic changes and verify with before/after screenshots.
  • Plan-mode support: use /plan-design-review for pre-implementation audits.
  • Proactive guidance: propose polish suggestions when users discuss visuals.

Quick Start

Ask the design-review skill to audit a live page, identify visual issues, fix code, and verify with before/after screenshots.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I audit my live website for UI consistency and spacing issues?

To audit a live website for UI consistency, this skill identifies visual inconsistencies, spacing problems, and typographic hierarchy issues, then iteratively fixes them in the source code while verifying each change with before and after screenshots.

What is the best way to fix visual hierarchy problems directly in my source code?

Fixing visual hierarchy problems directly in source code is handled by iteratively applying atomic commits for each UI adjustment, allowing you to verify the visual changes through before and after screenshots before finalizing the codebase update.

Can I check visual design issues before implementation during plan mode?

Yes, you can check visual design issues before implementation by using the plan-design-review command, which performs a pre-implementation audit to spot AI slop patterns, slow interactions, and visual inconsistencies.

Do I need a design system reference to perform a visual QA audit?

Yes, a design system reference is required to effectively perform a visual QA audit, as it provides the necessary baseline to identify typographic hierarchy errors, spacing inconsistencies, and visual deviations across multiple screens.

How does iterative UI improvement with before and after verification work?

Iterative UI improvement with before and after verification works by committing atomic code changes for each identified visual issue, then re-verifying the live page with screenshots to ensure the fix resolves the inconsistency without introducing new errors.