plan-design-review

Analyze a live website and produce a prioritized design audit with annotated screenshots.

48|2|Updated Dec 23, 2017
One-click install
npx skills add https://github.com/g4rcez/dotfiles --skill plan-design-review-g4rcez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plan-design-review
Source: https://github.com/g4rcez/dotfiles/tree/main/.ai/skills/plan-design-review
Command: npx skills add https://github.com/g4rcez/dotfiles --skill plan-design-review-g4rcez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a designer's structured, audit-driven review of a live site, identifying visual inconsistencies, spacing issues, typography gaps, and interaction feel problems to produce a prioritized design audit that guides design decisions without modifying code.

Core Features & Use Cases

  • Design Audit Phases: First impressions, design system extraction, page-by-page visual review, cross-page consistency, and a final report with actionable improvements.
  • Design System Inference: Extracts fonts, colors, spacing, and heading scale from rendered UI to inform a DESIGN.md export or a project baseline.
  • Report-Only Workflow: Generates comprehensive findings and annotated screenshots, ready for review, with an optional DESIGN.md export.

Quick Start

Ask the agent to perform a design audit on the target live site using the default Full scope.

Frequently Asked Questions about plan-design-review

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

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

To perform a design audit on a live website, the skill analyzes rendered pages across home, product, and marketing to identify visual inconsistencies and typography gaps, producing a prioritized, non-destructive report with annotated screenshots.

Can I extract a design system from an existing live site?▼

Yes, you can extract a design system from an existing live site. The skill infers fonts, colors, spacing, and heading scale directly from the rendered UI to inform a project baseline or DESIGN.md export.

What is the best way to review UI consistency across multiple live pages?▼

The best way to review UI consistency across multiple live pages is through a structured cross-page visual assessment that identifies spacing issues and interaction feel problems, generating actionable improvements for design teams.

Does this design audit workflow modify the live site's code?▼

No, this design audit workflow does not modify the live site's code. It performs a comprehensive, non-destructive review that generates findings and annotated screenshots strictly for handoff and design decision guidance.

How do I document visual design issues for handoff to a design team?▼

You document visual design issues for handoff by generating a final report with actionable improvements and annotated screenshots, ensuring the design team receives a clear improvement plan without touching the codebase.

What does a live-site design audit include for typography and spacing assessment?▼

A live-site design audit includes a typography and spacing assessment that evaluates visual inconsistencies and heading scale extracted from the rendered UI, ensuring cross-page consistency throughout the final report.