skills.rest
agatx
agatxCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit UI designs for visual inconsistencies and propose fixes with before/after screenshots.

5|2|Updated Dec 27, 2025
Search Tags:#screenshots#design-review#visual QA#before-after#ui polish#design diagnostics
One-click install
npx skills add https://github.com/agatx/serenada --skill design-review-agatx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/agatx/serenada/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/agatx/serenada --skill design-review-agatx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA can be slow and error-prone; this skill identifies visual inconsistencies, spacing issues, hierarchy problems, and slow interactions, then guides iterative fixes with evidence.

Core Features & Use Cases

  • Visual QA pass: audit typography, spacing, alignment, color contrast, and hierarchy to ensure design consistency.
  • Design polish: propose concrete tweaks, generate before/after visuals, and verify improvements.
  • Plan-mode review: outline audit steps before implementation and provide actionable feedback for developers and product teams.

Quick Start

Inspect a live page and describe the exact changes you want, then apply them iteratively 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 run a visual QA pass on a live website?▼

To run a visual QA pass, inspect the live page and describe the desired changes. The skill audits typography, spacing, alignment, and color contrast, then guides iterative fixes using before and after screenshots for validation.

What is the best way to fix UI hierarchy and spacing problems?▼

Fix UI hierarchy and spacing problems by identifying visual inconsistencies and proposing concrete tweaks. The skill generates actionable feedback and before/after visuals to verify improvements across multiple pages.

Can I use design diagnostics on both live sites and design mockups?▼

Yes, design diagnostics apply to both live sites and design mockups. The skill audits visual inconsistencies across multiple pages, providing iterative fixes with clear acceptance criteria and before/after verification.

How do you verify UI polish improvements after applying fixes?▼

Verify UI polish improvements using before and after screenshots. The skill produces these visuals alongside actionable feedback to ensure the spacing, alignment, and hierarchy fixes meet clear acceptance criteria.

Does visual QA work for multi-page UI design audits?▼

Yes, visual QA supports multi-page UI design audits. The skill identifies visual inconsistencies, spacing issues, and hierarchy problems across multiple pages, proposing iterative fixes with evidence and before/after verification.

Related Skills

Explore More Design & Creative Skills→
EhsaanArkEhsaanArk

design-review

Audit live site visual design and propose atomic fixes for typography, spacing, color, and hierarchy.

Community
Advanced
drt0927drt0927
5

design-review

Audit live UI pages for visual inconsistencies, spacing, and slow interactions.

Community
Advanced
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced