skills.rest
nicholaslocascio
nicholaslocascioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

plan-design-review

Audit live site visual design and export a DESIGN.md baseline.

2|Updated Mar 20, 2026
Search Tags:#typography#design-system#spacing#design-review#color-contrast#visual-audit
One-click install
npx skills add https://github.com/nicholaslocascio/x-claw-studio --skill plan-design-review-nicholaslocascio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plan-design-review
Source: https://github.com/nicholaslocascio/x-claw-studio/tree/main/skills/gstack
Command: npx skills add https://github.com/nicholaslocascio/x-claw-studio --skill plan-design-review-nicholaslocascio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer's eye audits expose visual inconsistencies, spacing issues, hierarchy problems, and interaction feel gaps on live sites. It then infers a cohesive design system and offers to export DESIGN.md as a stable baseline.

Core Features & Use Cases

  • In-depth visual audit of layout, typography, color, spacing, contrast, motion, and interaction states.
  • Infers a design system from the live site and offers to export DESIGN.md to codify the baseline.
  • Report-only workflow by default; follow-up with /qa-design-review to implement fixes atomically.

Quick Start

Run plan-design-review on a target site to generate a gut-level first impression, extract a design system, and start a structured audit.

Frequently Asked Questions about plan-design-review

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

FAQPage Schema
How do I run a visual design audit on a live website?▼

A visual design audit evaluates a live site's typography, spacing, color, layout, and interaction patterns to extract a cohesive design system and output a formal report with actionable improvements.

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

A design system audit identifies visual inconsistencies and hierarchy problems on live web apps or marketing sites, inferring a cohesive baseline design system to codify spacing, typography, and color standards.

Can I extract a design system from an existing website?▼

Yes, the audit process infers a robust design system from a live site's visual patterns and optionally exports a DESIGN.md file to codify typography, spacing, and color contrast rules as a stable baseline.

How do I check color contrast and spacing issues on my web app?▼

Check color contrast and spacing issues by running a visual audit on the live web app, which targets visual hierarchy and interaction patterns to produce a structured report of actionable improvements.

Does the design audit report automatically fix visual inconsistencies?▼

No, the audit operates in a report-only workflow by default to identify visual inconsistencies and hierarchy problems, followed by a separate QA design review step to implement fixes atomically.

What's the best way to document a baseline design system for a marketing site?▼

Document a baseline design system by auditing the live marketing site to infer visual rules, then exporting a DESIGN.md file to codify typography, spacing, color, and layout standards as a stable foundation.

Related Skills

Explore More Design & Creative Skills→
lucas-flatwhitelucas-flatwhite
43

design-review

Audit live sites for visual inconsistencies and implement fixes with before/after verification.

Community
Advanced
TwoTonedTwoToned

design-review

Audit visual designs for inconsistencies, spacing, and hierarchy issues.

Official
Advanced
TheGreatLTheGreatL

ui-visual-validator

Validate UI modifications for visual regressions, design compliance, and accessibility.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced