102.7K+Download
Skip to the usage guide
plan-design-reviewby Garry Tan

Plan Design Review Skill.

A Claude Code and Codex skill for design review: reviews a design plan for completeness and experience risk before implementation.

  • Design Review & Accessibility
  • Review report
Download OpenDesignView usage guide
garrytan/gstack · plan-design-review/SKILL.mdSKILL.md
--- name: plan-design-review description: Designer's eye plan review — interactive, like CEO and Eng review. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
Front matter and section headings read from the upstream file on 2026-09-14 · 72,139 characters in full

01 What it does

What the plan-design-review Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Reviews and improves a design plan before implementation. It rates design completeness from 0-10, explains the gaps, edits the plan and re-rates until the user accepts the result. The entry delegates seven detailed review passes to sections/review-sections.md. Mockups are the default for UI work when the designer is available, unless the user requests text-only review.

Includes an optional outside-voices step: Codex evaluates against OpenAI's design hard rules plus litmus checks; Claude subagent runs an independent completeness review. Operates in plan mode. For live site visual audits, use /design-review instead. The output is a better plan with a structured review report, not a document about the plan.

What it produces

  • An improved plan file with design gaps closed, rated dimensions, and a structured GSTACK REVIEW REPORT section appended
  • When mockups run: an HTML comparison board, feedback records and approved.json documenting the selected direction
  • A litmus scorecard synthesizing Codex and Claude subagent findings if outside voices ran
See the example prompt ↗

How It Works

  1. 01
    Scope Gate Confirms Review Target

    Before anything else, asks the user to confirm what to review (branch diff, plan doc, or specific page) unless plan mode auto-selects the active plan or the user explicitly named a target.

  2. 02
    Assess Scope, Then Preview

    Audit project context and UI scope, rate the initial plan, and wait for the user’s focus-area response. Then generate mockups when the designer is available, unless the user declines. Complete visual selection and confirm the feedback before review passes.

  3. 03
    Optional Outside Design Voices Run in Parallel

    If user opts in, launches Codex (design hard rules + litmus checks) and Claude subagent (independent completeness review) simultaneously.

  4. 04
    Seven Design Passes Rate 0-10 and Fix Gaps

    Read the companion review-sections.md for the seven-pass workflow. Rate each dimension, explain the missing decisions, edit the plan, and re-rate until the target is met or the user chooses to move on. Scores describe the review rubric, not measured usability.

  5. 05
    Writes Structured Review Report to Plan File

    Appends a GSTACK REVIEW REPORT section with runs/status/findings table, a VERDICT line, and an unresolved-decisions status as the file's terminal non-whitespace line.

02 Find your fit

When to Use the plan-design-review Skill

Use the plan-design-review skill in Claude Code or Codex when the job is design review of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • The user has drafted a plan with UI/UX components that should be reviewed before implementation begins
  • A design plan needs visual mockups to make abstract descriptions concrete before coding starts
  • A plan describes what the backend does but never specifies what the user sees, empty states, error states, or responsive behavior

Know the Boundaries

  • Pure backend, API-only, or infrastructure changes with no UI scope
  • Live site visual audits (use /design-review instead)

What to Provide

  • A design plan or branch diff with UI scopeThe plan file, a doc the user pastes, a specific page/path, or the current branch diff.
  • Mockup feedback via comparison boardThe gstack designer serves a comparison board over HTTP where the user rates variants, leaves comments, clicks Regenerate/Remix, or submits a final choice.

03 Inside the skill

Rules the plan-design-review Skill Gives Claude Code and Codex

5 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. All Design Artifacts Save to ~/.gstack/projects/$SLUG/designs/

    Mockups, comparison boards, and approved.json must be saved to the user's gstack project designs directory, never to .context/, docs/designs/, /tmp/, or any project-local directory.

  2. Priority Hierarchy: Step 0 > Mockups > Interaction States > AI Slop > IA > User Journey

    Scope resolution and assessment come first. Available mockups precede the detailed passes unless the user explicitly asks to skip them; unavailable tooling has a disclosed fallback.

  3. Design Reviews Calibrate Against DESIGN.md When Present

    If DESIGN.md exists, all design decisions must align with the stated design system.

  4. Outside Voices pre-load Issues into Passes

    Hard rejections from Codex are raised as the first items in Pass 1 tagged [HARD REJECTION]. Litmus DISAGREE items surface both perspectives in the relevant pass.

  5. Improve the Plan, Not the Implementation

    Add concrete design decisions to the plan and record unresolved choices. The workflow prohibits implementation-code changes; its score does not prove the future interface will work.

04 Put it to work

Install plan-design-review in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add plan-design-review to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/garrytan/gstack --skill plan-design-review

Use the full gstack setup, plan file and plan-design-review/sections/review-sections.md. Mockups need the gstack designer; independent Codex and subagent reviews are optional and depend on host tools and authentication.

Give the Skill a First Design Review Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Review the design plan in [plan-file-path] before we start building. The plan describes a new onboarding flow with three screens, email capture, and a welcome modal. I want to make sure we're not missing interaction states, empty states, or accessibility requirements. Generate mockups if you can.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Confirm the plan file's last heading is ## GSTACK REVIEW REPORT before exiting plan mode
  • Confirm the review report has a runs/status/findings table, a VERDICT line, and an unresolved-decisions status as the file's terminal non-whitespace line
  • Verify gstack-review-log was called and gstack-review-read was run at least once if a plan file is in context

In OpenDesign plan-design-review is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Garry Tan
Repository
github.com/garrytan/gstack Branch main
Skill file
plan-design-review/SKILL.md Content checksum recorded at verification; commit 71f6048
License
MIT From LICENSE.
Repository stars
132,921 GitHub snapshot taken 2026-09-14 for the whole garrytan/gstack repository, which contains 7 skills in this catalog. Not a rating or usage count for plan-design-review.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. When to invoke this skillUse for design plan reviews; proactively suggest when UI/UX plan needs review before implementation
  2. Preamble (run first)Runs gstack-skill-start, handles degraded mode, reads instruction blocks, sets SESSION_KIND and telemetry markers
  3. Design PhilosophyEnsures design feels intentional not generated; find every gap, explain why it matters, fix obvious ones
  4. The gstack designer — YOUR PRIMARY TOOLAI mockup generator creating real visuals from design briefs; use by default when UI exists
  5. Design PrinciplesNine principles: empty states are features, hierarchy matters, specificity over vibes, edge cases are UX, AI slop is the enemy, responsive is intentional, accessibility mandatory, subtraction default, trust earned at pixel level
  6. Cognitive Patterns — How Great Designers SeeTwelve perceptual instincts: seeing systems not screens, empathy as simulation, hierarchy as service, constraint worship, question reflex, edge case paranoia, would-I-notice test, principled taste, subtraction default, time-horizon design, design for trust, storyboard journeys
  7. UX Principles: How Users Actually BehaveThree laws (don't make me think, clicks don't matter thinking does, omit then omit), user behavior (scan not read, satisfice, muddle through), billboard design, navigation as wayfinding, goodwill reservoir, mobile higher stakes
  8. Priority Hierarchy Under Context PressurePrioritizes scope assessment and available mockups before review passes, while honoring an explicit text-only request.
  9. PRE-REVIEW SYSTEM AUDIT (before Step 0)Gathers context from git log, diff stat, plan, CLAUDE.md, DESIGN.md, TODOS.md, maps UI scope and existing patterns
  10. DESIGN SETUP (run this check BEFORE any design mockup command)Checks if gstack designer binary is available; prints DESIGN_READY or DESIGN_NOT_AVAILABLE
  11. Brain Context (preflight)Loads structured project context (product, brand, goals, recent-decisions) from gstack-brain-cache before asking clarifying questions
  12. Step 0: Design Scope AssessmentInitial design rating 0-10, DESIGN.md status check, existing design leverage, focus areas question (STOP until user responds)
The Skill's Own Description
“Designer's eye plan review — interactive, like CEO and Eng review. (gstack)”

Front-matter description from SKILL.md. The full file is about 72,139 characters. Read the full file on GitHub.

Plan Design Review

Run plan-design-review on a Real Design Review Task.

The plan-design-review skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/garrytan/gstack --skill plan-design-review