skills.rest
esopian
esopianCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-review

Detect layout, spacing, and hierarchy issues on live web interfaces.

2|Updated Apr 10, 2026
Search Tags:#design#layout#UI#QA#aesthetic#visual
One-click install
npx skills add https://github.com/esopian/blue-oak-audit --skill design-review-esopian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/esopian/blue-oak-audit/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/esopian/blue-oak-audit --skill design-review-esopian

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps designers and frontend engineers quickly identify and fix visual inconsistencies, spacing issues, and hierarchy problems in web interfaces.

Core Features & Use Cases

  • Visual QA & Polishing: Detects issues like misaligned elements, inconsistent spacing, and poor visual hierarchy on live sites.
  • Iterative Fixes: Automatically applies source code improvements, commits changes, and verifies results with before and after screenshots.
  • Use Case: When asked to "audit the design" or "check if it looks good," this Skill reviews the site and suggests or performs fixes to improve visual coherence.

Quick Start

Run the design-review skill on your live site URL to automatically find and fix visual issues, then verify improvements.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I check my web interface for visual consistency and layout issues?▼

Visual QA for web interfaces detects layout issues, spacing inconsistencies, and hierarchy flaws on live sites. It evaluates misaligned elements to ensure polished, professional UI standards are maintained throughout the design process.

What is the best way to automate fixing spacing and hierarchy problems in a UI?▼

Automated UI fixing applies source code improvements iteratively, commits changes, and verifies results using before and after screenshots. This ensures spacing and hierarchy flaws are resolved to improve overall visual coherence.

Can I audit my live site URL for UI design polish and visual flaws?▼

Yes, you can audit a live site URL for design polish by running a visual QA check. The system reviews the interface directly on the live site and suggests or performs fixes to improve visual coherence and aesthetic consistency.

Does visual QA for web interfaces work without external dependencies?▼

Yes, visual QA works without external dependencies. It uses internal references and assets to evaluate live sites, detect layout issues, and suggest source code improvements without requiring additional tools or setup.

When do I need to run a visual QA check on my web interface?▼

You need visual QA during design polish to find misaligned elements, inconsistent spacing, and poor visual hierarchy. It is used when asked to audit the design or check if it looks good before meeting professional UI standards.

Related Skills

Explore More Design & Creative Skills→
Jia-Hong-PengJia-Hong-Peng

design-review

Detect visual design inconsistencies and commit atomic fixes with screenshots.

Community
Advanced
himes19himes19

design-review

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

Community
Advanced
JupiterTheWarlockJupiterTheWarlock

layout

Assess and improve UI layout, spacing, and hierarchy for web interfaces.

Community
Advanced
mytechsonamymytechsonamy
1

visual-ai-analyzer

Analyze visual diffs between baseline and current UI screenshots.

Community
Advanced