design-review

Audit website and UI component visual design with standardized scoring.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/samurano/ai-brain --skill design-review-samurano
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/samurano/ai-brain/tree/main/.agents/skills/design-review
Command: npx skills add https://github.com/samurano/ai-brain --skill design-review-samurano

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams perform a rigorous visual design audit of a landing page, web app, or UI component from the perspective of a senior product designer and frontend engineer. It identifies visual issues, evaluates typography, spacing, color, accessibility, and consistency, and proposes atomically verifiable fixes.

Core Features & Use Cases

  • First Impression checks: a quick 5-second assessment of clarity and visual hierarchy.
  • Component Audit: thorough, per-section review across typography, spacing, color, and responsiveness with actionable fixes.
  • Modes: audit-and-fix (applies fixes and commits) or report-only (generates a report without changing code).

Quick Start

Provide the project URL and scope (whole site or a single page) and run the design-review mode to generate a report or apply fixes.

Frequently Asked Questions about design-review

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

FAQPage Schema
How does the mode-driven workflow enforce consistent design system audits?

The mode-driven workflow enforces consistent design system audits by applying a standardized scoring framework across all evaluations. It guides first impressions, component-level critique, and accessibility checks for uniform results.

Can I perform an accessibility check alongside a UI audit?

Yes, an accessibility check is integrated directly into the UI audit process. It evaluates color contrast and visual hierarchy alongside typography and spacing to identify issues and propose atomically verifiable fixes.

How do I fix frontend visual quality issues automatically?

Fix frontend visual quality issues automatically by selecting the audit-and-fix mode. This workflow identifies visual inconsistencies and proposes atomically verifiable fixes that are applied directly to your codebase and committed.

What is the best way to evaluate landing page clarity and visual hierarchy?

The best way to evaluate landing page clarity is using a first impression check, a quick 5-second assessment of visual hierarchy. It guides the review from a senior product designer perspective to identify clarity issues.

Does the design review workflow support whole sites or just single pages?

The design review workflow supports both whole sites and single pages. You specify the scope alongside the project URL during setup to generate a consistent, standardized visual design report.

Do I need references to run a UI component critique?

You do not need references to run a UI component critique, as they are optional inputs. The workflow relies on mode selection, URL, and setup inputs to enforce a standardized scoring framework for consistent results.