design-review

Detect visual design inconsistencies and commit atomic fixes with screenshots.

Updated Feb 24, 2026
One-click install
npx skills add https://github.com/Jia-Hong-Peng/jolike.com --skill design-review-jia-hong-peng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/Jia-Hong-Peng/jolike.com/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/Jia-Hong-Peng/jolike.com --skill design-review-jia-hong-peng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manual visual QA is slow, inconsistent, and misses subtle design issues like spacing errors, hierarchy problems, and generic AI-generated UI patterns. This skill automates the detection and correction of visual inconsistencies, ensuring your interface looks polished and professional without hours of manual pixel-pushing.

Core Features & Use Cases

  • Visual Inconsistency Detection: Identifies spacing issues, hierarchy problems, and generic "AI slop" patterns across your live site or implementation plan.
  • Atomic Fixes with Verification: Makes targeted code changes, commits each fix individually, and captures before/after screenshots to prove the improvement.
  • Proactive Design Polish: Suggests itself when you mention visual inconsistencies or express interest in improving your site's look and feel.

Quick Start

Use the design-review skill to audit the visual design of the homepage and fix any spacing or hierarchy issues you find.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I automate visual QA for web interfaces to fix spacing and hierarchy issues?

You can automate visual QA by capturing screenshots of your live site or implementation plan, detecting spacing inconsistencies and hierarchy problems, and making targeted frontend code modifications to fix the detected visual design issues.

What is the best way to find and fix generic AI-generated UI patterns in my frontend code?

To find and fix generic AI-generated UI patterns, you need a visual inconsistency detection mechanism that audits your frontend code and live site, identifies these generic patterns, and applies atomic code fixes with before-and-after screenshot verification.

Can I use screenshot capture to audit a live site and automatically commit UI fixes?

Yes, you can use screenshot capture to audit a live site and commit UI fixes automatically. The workflow detects visual design inconsistencies, makes targeted frontend code changes, and creates atomic version control commits with visual verification for each improvement.

How do I perform a pre-implementation design review before writing frontend code?

Performing a pre-implementation design review involves analyzing your implementation plan to detect visual inconsistencies and hierarchy problems. This proactive design polish step identifies potential UI issues before you write the actual frontend code.

Does automated visual design review work for iterative UI polish workflows?

Automated visual design review works for iterative UI polish workflows by continuously detecting visual inconsistencies and applying atomic fixes. It captures before and after screenshots during each iteration to verify the visual improvements in your frontend code.

Why should I use automated visual QA instead of manual pixel-pushing for design polish?

Automated visual QA replaces manual pixel-pushing because manual visual QA is slow, inconsistent, and misses subtle design issues. Automation detects spacing errors and hierarchy problems efficiently, ensuring your interface looks polished and professional.