skills.rest
binfen1
binfen1COMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit visual design and UX quality by detecting inconsistencies, spacing issues, and hierarchy problems.

Updated Mar 23, 2026
Search Tags:#typography#spacing#design-review#plan-mode#visual QA#ui-audit#before-after
One-click install
npx skills add https://github.com/binfen1/my-skills --skill design-review-binfen1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/binfen1/my-skills/tree/main/claude-code/design-review
Command: npx skills add https://github.com/binfen1/my-skills --skill design-review-binfen1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer QA helps teams detect visual inconsistencies, spacing issues, and hierarchy problems in interfaces. It guides iterative fixes in source code and verifications with before/after screenshots to ensure polished outcomes. For plan-mode design review before implementation, use /plan-design-review to scope work.

Core Features & Use Cases

  • Detect visual inconsistencies, misalignment, typography issues, and spacing problems across pages.
  • Propose concrete fixes and verify results with before/after screenshots on live or staged sites.
  • Use during plan-design-review to scope polish work before coding begins.

Quick Start

Tell me the page to audit and I will perform a design review, identify issues, and propose fixes.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I perform a visual QA audit on a live site?▼

To perform a visual QA audit on a live site, provide the page URL or design specs to detect visual inconsistencies, spacing issues, and hierarchy problems while proposing concrete fixes.

Can I scope UI polish work before coding begins?▼

Yes, you can scope UI polish work before coding begins by using plan-mode design review to identify typography and layout issues beforehand, ensuring structured iterative fixes.

How do I verify design fixes using before and after screenshots?▼

You verify design fixes using before and after screenshots by applying proposed changes to staged sites and capturing visual evidence to ensure polished outcomes and resolved inconsistencies.

What types of layout and typography issues can a design review detect?▼

A design review can detect layout and typography issues including visual inconsistencies, misalignment, improper spacing, and hierarchy problems across focused pages or full-site audits.

Does visual QA work with design specs if I don't have a live site?▼

Yes, visual QA works with design specs if you don't have a live site, requiring access to either the staged environment or specification documents to execute spacing and hierarchy checks.

What is the best way to fix spacing and hierarchy problems in an interface?▼

The best way to fix spacing and hierarchy problems in an interface is to run an automated UI audit that detects inconsistencies and guides iterative source code fixes with visual verification.

Related Skills

Explore More Design & Creative Skills→
agwacomagwacom

avad-design-review

Audits live-site visuals and fixes design inconsistencies with atomic commits.

Official
Advanced
EmeaAppGbbEmeaAppGbb

web-design-reviewer

Inspect websites for responsive, accessibility, and visual issues and propose code fixes.

Official
Intermediate
anilveersingh1308anilveersingh1308

gstack-design-review

Audit live UI design and apply source code fixes with screenshot verification.

Community
Advanced
LaPaGaYoLaPaGaYo

design-review

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

Community
Intermediate