plan-design-review

Reviews UI/UX design decisions in implementation plans and generates visual mockup variants for feedback.

Updated Apr 5, 2026
One-click install
npx skills add https://github.com/Simon-YHKim/eject-button --skill plan-design-review-simon-yhkim
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: plan-design-review
Source: https://github.com/Simon-YHKim/eject-button/tree/main/.claude/skills/plan-design-review
Command: npx skills add https://github.com/Simon-YHKim/eject-button --skill plan-design-review-simon-yhkim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Plans often describe backend logic in detail but leave UI/UX decisions vague or missing, leading to generic, accidental interfaces discovered only after implementation. This Skill reviews a plan with a designer's eye before any code is written, rates each design dimension, and fixes gaps directly in the plan. ## Core Features & Use Cases - Design completeness scoring: Rates the plan 0-10 across design dimensions, explains what a 10 looks like, and identifies missing decisions like empty states, error states, and responsive behavior. - Visual mockup generation: Uses the gstack designer binary to generate mockup variants, run cross-model quality checks, and serve an interactive comparison board where users rate, comment, remix, and approve designs. - Plan-mode integration: Works inside plan mode, writes approved design decisions back into the plan file, and produces a GSTACK REVIEW REPORT footer. - Use Case: Before implementing a new settings page, run this Skill to generate three visual directions, pick one on the comparison board, and have the plan updated with concrete typography, spacing, and interaction specifications. ## Quick Start Ask the assistant to review the design of my current plan 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 implementation?

Invoke the plan-design-review skill while in plan mode. It rates the plan's design completeness 0-10, identifies missing decisions like empty states and responsive behavior, generates visual mockup variants, and writes approved decisions back into the plan file.

How do I generate UI mockups from a design plan?

The skill uses the gstack designer binary to run variants, compare, iterate, and check commands. It generates multiple mockup PNGs from a brief assembled from the plan and DESIGN.md, then serves an interactive comparison board for rating and feedback.

Does plan-design-review work without the designer binary installed?

Yes. If DESIGN_NOT_AVAILABLE is printed during setup, the skill falls back to text-based design review and HTML wireframes. Mockup generation is a progressive enhancement, not a hard requirement.

Can I use plan-design-review for backend-only changes?

No. The skill detects UI scope first and exits early if the plan involves no screens, components, interactions, or design system changes. Forcing design review on pure backend or infrastructure plans is explicitly avoided.

Where are generated design mockups and feedback stored?

All design artifacts are saved to ~/.gstack/projects/<slug>/designs/, never to project directories. Feedback from the comparison board is written as feedback.json or feedback-pending.json next to the board HTML.