design-review

Name: design-review
Availability: InStock
Author: mgher

Audit live websites for visual inconsistencies and apply fixes with before/after verification.

Updated Apr 13, 2026

Search Tags:#typography #frontend #contrast #spacing #visual-qa #web-design #design-review

Ready to run

npx skills add https://github.com/mgher668/surf-ai --skill design-review-mgher668

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/mgher668/surf-ai/tree/main/.agents/skills/gstack/design-review
Command: npx skills add https://github.com/mgher668/surf-ai --skill design-review-mgher668

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual design quality often lags during development, leaving inconsistencies in spacing, typography, and hierarchy that degrade user experience. This skill provides a structured approach to identify and fix visual defects across a site or app, delivering consistently polished UI.

Core Features & Use Cases

Visual QA audits across pages to detect misalignment, typography mismatch, and spacing errors.
Systematic fixes in source code and design tokens, followed by before/after verification.
Use cases include polishing dashboards, marketing pages, and product UIs before release.

Quick Start

Start a design audit on the target URL, analyze typography, spacing, and hierarchy, apply fixes, then verify the improvements with before/after visuals.

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 to fix spacing and typography inconsistencies on my live website?▼

Run a visual QA audit on a target URL to detect misalignment, typography mismatch, and spacing errors. The skill analyzes live pages, enforces typography scales and spacing tokens, then proposes and applies fixes to source code and design tokens.

What is the best way to enforce accessible contrast and grid alignment across a web UI before release?▼

Enforce accessible contrast and grid alignment by auditing the live UI for hierarchy and visual defects. The skill applies targeted fixes across pages and components, validating improvements with snapshot comparisons and designer-approved checks.

Can I audit a focused set of product pages instead of running a full site visual design review?▼

Apply visual design reviews across a defined scope, whether a full site or focused pages. The skill audits targeted components for spacing and typography issues, applying fixes and verifying improvements with before/after visuals.

How do I verify UI improvements after applying design token fixes for spacing and typography?▼

Verify UI improvements using snapshot comparisons that generate before/after visuals. The skill enforces typography scales, spacing tokens, and grid alignment, ensuring applied fixes pass designer-approved checks and resolve visual inconsistencies.

Why does my web UI still look misaligned after development, and how do I polish the visual hierarchy?▼

Visual design quality lags during development when spacing, typography, and hierarchy degrade user experience. Polish the UI by auditing live pages for visual defects, applying systematic fixes to design tokens, and verifying results with before/after snapshots.