skills.rest
rahmanayon
rahmanayonCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit live UI for visual inconsistencies, spacing, and typographic hierarchy.

Updated Apr 5, 2026
Search Tags:#typography#design-system#spacing#design-review#before-after#ui-polish#visual-audit
One-click install
npx skills add https://github.com/rahmanayon/beehive --skill design-review-rahmanayon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/rahmanayon/beehive/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/rahmanayon/beehive --skill design-review-rahmanayon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer's eye QA: finds visual inconsistencies, 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".

Core Features & Use Cases

  • Visual QA audit of UI designs and live sites for consistency, spacing, typography, and hierarchy.
  • Iterative fixes in source code with atomic commits and before/after verification.
  • Plan-mode workflows for upfront design review.

Quick Start

Ask design-review to audit the live site for visual consistency and propose atomic fixes 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 UI for visual inconsistencies and spacing issues?▼

A visual QA audit identifies visual inconsistencies, spacing problems, and typographic hierarchy issues across an entire site or focused pages. It inspects live UI against design system references to detect AI slop patterns and slow interactions.

Can I review my design for polish before implementing the source code?▼

Yes, you can review designs before implementation by using the plan-mode design review workflow. This upfront process evaluates visual consistency and spacing without modifying code, providing a structured review before development begins.

How do I fix typographic hierarchy and spacing issues iteratively in source code?▼

Iterative fixes are applied directly to source code by committing each correction atomically. The process re-verifies every change using before and after screenshots to ensure the typographic hierarchy and spacing issues are fully resolved.

Do I need a design system reference to perform a visual audit of my live site?▼

Yes, a design system reference is required to perform a visual audit. The Skill compares your live UI against these references to accurately identify visual inconsistencies, spacing deviations, and typographic hierarchy problems.

What is the best way to automate visual QA and check if a UI looks good?▼

The best way to automate visual QA is to trigger an audit when asked to "check if it looks good" or "polish UI". The process iteratively fixes source code and verifies visual consistency through automated before and after screenshots.

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
GenEducationGenEducation

design-review

Detect visual inconsistencies, spacing, hierarchy, and slow interactions in live web pages.

Official
Advanced
zzxtbetazzxtbeta

design-review

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

Community
Advanced
LaPaGaYoLaPaGaYo

design-review

Identify and fix visual design issues in software UI with before/after screenshot verification.

Community
Intermediate