design-review

Audit live sites for visual inconsistencies and propose design system fixes.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/steffenpharai/StartupFramework --skill design-review-steffenpharai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/steffenpharai/StartupFramework/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/steffenpharai/StartupFramework --skill design-review-steffenpharai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables designers and frontend engineers to audit live sites for visual quality, spacing, typography, hierarchy, and interaction issues, then fix them to align with a project’s design system.

Core Features & Use Cases

  • Design audit: evaluate typography, spacing, color, layout, and interaction states against a design system and accessibility standards.
  • Fix and verify: implement fixes and re-audit to confirm before/after improvements.
  • Plan-mode design review: perform initial reviews before implementation to guide development and avoid design drift.

Quick Start

Navigate to the target URL and run a full audit to report top visual issues and recommended fixes.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I audit live web pages for visual inconsistencies and typography problems?

To audit live web pages for visual inconsistencies, navigate to the target URL and run a full design audit. The review evaluates typography, spacing, color, and layout against your design system to identify and report top visual issues.

Can I run a design system review in plan-mode before implementing new features?

Yes, you can run a plan-mode design review before implementation. This process performs an initial evaluation of visual hierarchy and interaction states to guide frontend development and prevent design drift during feature launches.

How does a visual audit verify that frontend fixes align with accessibility standards?

A visual audit verifies accessibility alignment by evaluating interaction states and visual hierarchy against standards. After implementing fixes, it re-audits the live site to confirm before and after improvements, ensuring design integrity is preserved.

What is the best way to fix spacing issues and interaction gaps on a live site?

The best way to fix spacing issues and interaction gaps is through a deterministic workflow that proposes design system fixes. It applies atomic commits and re-verification with before and after evidence to ensure visual quality is maintained.

Do I need specific frontend dependencies to perform a pixel-perfect design audit?

No specific frontend dependencies are required to perform a pixel-perfect design audit. The process works across any web app to identify visual inconsistencies and propose fixes to align pages with a project's design system.

When should I avoid using an automated visual audit for a redesign?

You should avoid using an automated visual audit when you lack a defined design system to check against. The audit enforces deterministic workflows by comparing live site typography, spacing, and color directly to your established design standards.