skills.rest
bhianerd
bhianerdCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit visual design and apply patch-level UI fixes with screenshot verification.

1|Updated Mar 25, 2026
Search Tags:#typography#accessibility#design review#visual hierarchy#ui audit#frontend polish#spacing QA
One-click install
npx skills add https://github.com/bhianerd/aimemory --skill design-review-bhianerd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/bhianerd/aimemory/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/bhianerd/aimemory --skill design-review-bhianerd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps catch visual and UX quality problems early, like inconsistent spacing, unclear hierarchy, and “AI-slop” UI patterns, then fixes them in the code with evidence-based verification.

Core Features & Use Cases

  • Visual QA & hierarchy grading: Performs a first-impression critique, then checks typography, spacing, layout, color/contrast, and interaction states across pages.
  • Inferred design-system extraction: Identifies fonts, colors, heading scale, and spacing patterns actually used in the UI, and flags deviations or inconsistencies.
  • Iterative fixes with before/after screenshots: Makes atomic code changes and re-verifies results with annotated and responsive screenshots.
  • Plan-mode design review: Supports reviewing planned UI before implementation using the plan-specific trigger.

Quick Start

Run the manual trigger /design-review to audit the current site visually, fix detected issues, and verify 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 UI audit to fix inconsistent spacing and typography on my live site?▼

A UI audit navigates your live site pages, extracts the inferred design system for fonts and spacing, flags visual hierarchy deviations, and applies atomic code commits to fix detected issues. It verifies results using before and after screenshots.

What is the best way to perform a pre-launch visual QA for accessibility and hierarchy?▼

Pre-launch visual QA performs a first-impression critique, then checks color contrast, interaction states, and typography across pages. It identifies actual UI design patterns, flags inconsistencies, and makes iterative code fixes verified by responsive screenshots.

Can I scope a design review to only check UI changes on a feature branch?▼

Yes, diff-aware design reviews limit the visual audit scope to only the affected UI on feature branches. This targets specific layout updates, runs the accessibility and hierarchy checklist, and applies patch-level fixes with deterministic screenshot verification.

How do I extract an inferred design system from existing frontend code?▼

Extracting an inferred design system identifies the fonts, colors, heading scale, and spacing patterns actually used in your UI. It flags deviations from these patterns to catch inconsistent visual hierarchy and AI-slop UI patterns early.

Does the design review process support checking planned UI before implementation?▼

Yes, plan-mode design review supports reviewing planned UI before implementation using a plan-specific trigger. This evaluates visual hierarchy and accessibility constraints proactively before any frontend code is written.

Why does my frontend polish workflow require screenshot-based verification?▼

Screenshot-based verification provides deterministic evidence that typography, spacing, and interaction-state fixes are visually correct. It annotates before and after results to ensure patch-level UI changes resolve the detected visual quality problems.

Related Skills

Explore More Design & Creative Skills→
cogine-aicogine-ai
3

site-design-audit

Audit live-site design quality without modifying source code.

Official
Advanced
olaafrossiolaafrossi
10

design-review

Audit live interfaces for visual consistency and patch issues via atomic commits.

Community
Advanced
marcustamarcusta

frontend-design

Enforce TapScore design constraints on frontend UI components.

Community
Advanced
zinohomezinohome
1

visual-regression-tester

Capture and compare UI screenshots with Playwright and Chromatic.

Community
Advanced