plan-design-review

Reviews UI/UX design decisions in implementation plans and generates visual mockups before coding.

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill plan-design-review-lgj-jonathan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: plan-design-review
Source: https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills/tree/main/gstack/plan-design-review
Command: npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill plan-design-review-lgj-jonathan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Plans with UI scope often ship with missing design decisions: no empty states, no hierarchy, no edge-case handling, and generic AI-looking layouts. This Skill reviews a plan with a designer's eye before implementation, rates each design dimension 0-10, and fixes the plan so the design is intentional rather than accidental. ## Core Features & Use Cases - Dimension-by-dimension plan review: Rates each design dimension 0-10, explains what would make it a 10, then edits the plan to close the gaps. - AI mockup generation: Uses the gstack designer binary to generate visual mockups, style variants, comparison boards, and vision-based quality checks from design briefs. - UI scope detection: Exits early when a plan has no UI surface, avoiding forced design review on backend-only changes. - Use Case: You have a plan for a new dashboard page. Run this Skill in plan mode to get mockups of the layout, a critique of empty states and responsive behavior, and an updated plan with concrete typography, spacing, and accessibility decisions. ## Quick Start Ask the assistant to run /plan-design-review on the current plan to critique its UI and UX decisions and add missing design details before implementation.

Frequently Asked Questions about plan-design-review

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

FAQPage Schema
How do I review the design of a plan before implementing it?

Run /plan-design-review in plan mode. It audits the plan's UI scope, generates visual mockups with the gstack designer, rates each design dimension 0-10, and edits the plan to add missing decisions like empty states, hierarchy, and accessibility.

What is the difference between plan-design-review and design-review?

plan-design-review evaluates a written plan before any code exists, working in plan mode. The /design-review skill is for live site visual audits of already-built interfaces. Use the plan version to catch design gaps early.

Does plan-design-review work on backend-only plans?

No. It performs UI scope detection first, and if the plan involves no screens, components, interactions, or design system changes, it reports that a design review is not applicable and exits early.

What happens if the gstack designer binary is not installed?

The skill prints DESIGN_NOT_AVAILABLE and falls back to an HTML wireframe approach instead of generated mockups. Visual mockups are a progressive enhancement, not a hard requirement for the review.

Can plan-design-review generate multiple design directions?

Yes. The designer binary supports variants to generate multiple style directions, compare to build a side-by-side review board, iterate with feedback, and check to run a vision-based quality gate on a chosen mockup.