skills.rest
zhifengzhang-sz
zhifengzhang-szCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit UI designs for typography, spacing, hierarchy, and interaction latency issues.

Updated Feb 27, 2026
Search Tags:#typography#frontend#design-system#spacing#visual-qa#design-review#ui-polish
One-click install
npx skills add https://github.com/zhifengzhang-sz/divine-book --skill design-review-zhifengzhang-sz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/zhifengzhang-sz/divine-book/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/zhifengzhang-sz/divine-book --skill design-review-zhifengzhang-sz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and front-end teams spend time chasing layout inconsistencies, spacing imbalances, and chaotic visual hierarchy. This skill provides a structured way to audit, fix, and verify visual polish through atomic commits and before/after checks.

Core Features & Use Cases

  • Visual QA audits across UI pages and components to identify typography, spacing, color, and interaction latency issues.
  • Iterative fixes with atomic commits and automated before/after verification to ensure changes are isolated and trackable.
  • Plan-mode design reviews for pre-implementation polish, plus live-site polishing guided by design-system rules.

Quick Start

Audit the current UI for visual inconsistencies and propose an atomic fix plan 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 fix visual QA issues like typography and spacing inconsistencies in my UI?▼

To fix visual QA issues, you can audit UI designs to identify typography, spacing, color, and interaction latency problems. The skill guides the workflow from audit to fix to verify, applying changes through atomic commits with before/after verification.

Can I run a design review on live pages to check visual hierarchy?▼

Yes, you can run design reviews on live pages to check visual hierarchy. The skill polishes live sites guided by pre-loaded design-system rules, auditing for layout imbalances and interaction latency issues.

What is the best way to track UI polish fixes without losing context?▼

The best way to track UI polish fixes is through atomic commits. This skill isolates visual QA changes and produces automated before/after verification, ensuring every typography and spacing adjustment is trackable.

Does plan-mode design review work for pre-implementation UI polish?▼

Yes, plan-mode design review works for pre-implementation UI polish. It audits typography, spacing, and hierarchy issues before coding begins, proposing an atomic fix plan with before/after screenshots.

Do I need a design system to audit visual hierarchy and spacing?▼

You do not strictly need a design system to audit visual hierarchy and spacing, but having one enhances live-site polishing. The skill loads available design guidance into context to guide the audit and fix workflow.

Related Skills

Explore More Design & Creative Skills→
ScivorScivor

design-review

Audit live sites for typography, spacing, and hierarchy consistency.

Community
Advanced
zzxtbetazzxtbeta

design-review

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

Community
Advanced
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
r3dlexr3dlex
2

visual-verdict

Compare UI screenshots against reference images to detect layout, style, and content discrepancies.

Community
Intermediate