visual-review

Assess visual design against a design system using a scoring rubric.

8|2|Updated Feb 9, 2026
One-click install
npx skills add https://github.com/mikeparcewski/wicked-garden --skill visual-review-mikeparcewski
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-review
Source: https://github.com/mikeparcewski/wicked-garden/tree/main/skills/product/visual-review
Command: npx skills add https://github.com/mikeparcewski/wicked-garden --skill visual-review-mikeparcewski

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual design audits identify deviations from a design system, ensuring consistent spacing, typography, color, and component usage across interfaces.

Core Features & Use Cases

  • Systematic evaluation across spacing, typography, color, components, and responsive behavior
  • Structured checklist and scoring to quantify conformance and guide repairs
  • Reusable for design reviews, design-token validation, and style-guide governance

Quick Start

Run a visual-design audit on the provided UI mockups and generate a structured checklist with a scoring report.

Frequently Asked Questions about visual-review

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

FAQPage Schema
How do I audit visual design for consistency with a design system?

To audit visual design, evaluate spacing, typography, color usage, component patterns, and responsive behavior against your design system. This process identifies deviations from established tokens and breakpoints, generating a structured checklist with a scoring report to quantify conformance and guide repairs.

What is a visual design audit and when do I need one?

A visual design audit is a systematic evaluation of UI mockups to identify deviations from your design system. You need one to ensure consistent spacing, typography, color, and component usage across interfaces, maintaining style-guide governance and validating design-token implementation.

How do I check if my UI mockups align with design tokens and breakpoints?

You can check UI mockup alignment by assessing responsive behavior and component patterns against defined design tokens and breakpoints. This generates a scoring rubric that quantifies conformance and provides actionable remediation steps for any mismatched spacing or typography.

Can I use a visual review to validate component patterns and style guides?

Yes, you can use a visual review to validate component patterns and enforce style-guide governance. It systematically evaluates color usage, typography, and spacing against your design system, producing a structured checklist to quantify conformance and ensure patterns align with tokens.

What's the best way to score design system conformance across multiple screens?

The best way to score design system conformance is to apply a scoring rubric that evaluates spacing, typography, color, components, and responsive behavior across all screens. This quantifies adherence to the design system and provides actionable remediation steps for inconsistencies.

What types of design inconsistencies does a visual design audit identify?

A visual design audit identifies inconsistencies in spacing, typography, color usage, component patterns, and responsive behavior. By evaluating UI mockups against design tokens and style guides, it detects deviations and generates a structured checklist with actionable remediation steps.