design-review

Audit live or staged sites for visual inconsistencies and design-system alignment.

Updated Mar 11, 2026
One-click install
npx skills add https://github.com/Liambiswell20-tech/Bolus-Brain --skill design-review-liambiswell20-tech
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/Liambiswell20-tech/Bolus-Brain/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/Liambiswell20-tech/Bolus-Brain --skill design-review-liambiswell20-tech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Skill helps teams audit live sites for visual inconsistencies, spacing issues, typographic hierarchy, and design-system drift, then guide fixes and re-verification.

Core Features & Use Cases

  • Visual audit checklist aligning with design-system
  • Before/after verification with screenshots
  • Plan-mode reviews for pre-implementation polish

Quick Start

Describe the site you want audited and the scope you want reviewed and I will run a design audit and return actionable fixes.

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 audit on a live website to fix spacing and hierarchy issues?

Run a visual audit by providing the live or staged site URL, review scope, and device depth. The design review identifies visual inconsistencies, spacing issues, and typographic hierarchy problems, then returns actionable fixes and annotated screenshots for before/after verification.

What is design-system drift and how do I check for it during a frontend review?

Design-system drift occurs when live UI components deviate from established spacing, typography, and visual standards. A design review checks for this drift by enforcing design-system alignment across the specified site scope and reporting visual inconsistencies.

Can I audit specific components or pages instead of running a full-site design review?

Yes, the design review supports focused reviews of specific pages or components as well as full-site audits. You define the scope and device depth in your input, and the audit checklist adapts to evaluate visual consistency and hierarchy within those boundaries.

How do I verify UI fixes after correcting visual inconsistencies found in an audit?

Verify UI fixes using the before/after verification step built into the design review workflow. After implementing annotated fixes for spacing or hierarchy issues, the tool compares screenshots to confirm the visual inconsistencies are resolved and design-system alignment is achieved.

Does the design review workflow support pre-implementation polish for frontend UI?

Yes, the design review includes plan-mode options to prepare pre-implementation polish. This allows teams to audit visual consistency, spacing, and design-system alignment before pushing frontend changes to a staged or live environment.

What do I need to provide to start a visual audit of my UI?

You need to provide the site URL, the review scope, and the device depth. These inputs allow the design review to generate a visual audit checklist, identify typographic hierarchy and spacing problems, and deliver annotated fixes.