design-review

Audit live sites for visual design issues and verify fixes with before/after screenshots.

1|Updated Dec 23, 2025
One-click install
npx skills add https://github.com/rkumar261/studio-cast --skill design-review-rkumar261
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/rkumar261/studio-cast/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/rkumar261/studio-cast --skill design-review-rkumar261

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA often misses subtle design inconsistencies, spacing issues, and hierarchy problems that degrade user trust. This skill provides a designer's-eye audit and fixes workflow, iterating fixes atomically and validating with before/after screenshots.

Core Features & Use Cases

  • Pixel-perfect audits of live sites and design systems, catching typography, spacing, and layout issues.
  • Plan-design-review workflow for pre-implementation polish and design refinement.
  • Reproducible fixes with atomic commits and verified before/after diffs to ensure consistent polish across pages.

Quick Start

Provide a live URL and scope, then run the design-review to audit visuals, propose fixes, and verify changes 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 visual QA audit on a live website to catch spacing and typography issues?

Run a visual QA audit by providing a live URL and scope to review layout consistency, spacing, and hierarchy. The workflow enforces a structured checklist, proposes atomic fixes, and validates changes with before/after screenshots to ensure pixel-perfect polish.

What is a plan-design-review workflow for pre-implementation design refinement?

A plan-design-review workflow evaluates visual design rules before implementation begins. It audits typography, spacing, and layout hierarchy to establish a baseline, ensuring reproducible fixes and consistent design quality across pages before code changes are committed.

Can I review specific page sections instead of auditing an entire live site?

Yes, you can review specific page sections by defining a focused scope instead of a full-site audit. The workflow adapts to targeted page reviews, applying the same structured checklist and before/after visual verification to ensure durable design quality in that area.

How do I validate visual design fixes and ensure they do not break existing layout consistency?

Validate visual design fixes by generating before/after screenshots for each change. The workflow emphasizes atomic commits with visual verification, creating reproducible fixes that maintain spacing, typography, and layout consistency across the site.

Does this pixel-perfect design review work without external design system dependencies?

Yes, the pixel-perfect design review operates with no external dependencies. It audits live sites directly by applying a structured checklist to identify visual inconsistencies, hierarchy problems, and spacing issues without requiring a connected design system framework.

Why does visual QA often miss subtle layout hierarchy problems on live sites?

Visual QA misses subtle layout hierarchy problems because it often lacks a structured, reproducible checklist. This workflow solves that by applying a designer's-eye audit to live sites, enforcing atomic fixes and before/after validation to catch typography and spacing issues that degrade user trust.