83.3K+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 a design plan for completeness and experience risk before implementation. Runs seven design passes (Information Architecture, Interaction States, User Journey, Empty States, Visual Hierarchy, AI Slop Risk, Accessibility) rating each 0-10, explains what would make each a 10, then fixes the plan to get there. Generates visual mockups with the gstack designer by default when UI is in scope.

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
  • A comparison board HTML file and approved.json recording the user's chosen variant, ratings, comments, and feedback
  • 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
    Generates Visual Mockups by Default

    When the gstack designer is available and the plan has UI scope, generates mockups immediately without asking permission.

  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

    For each dimension (Information Architecture, Interaction States, User Journey, Empty States, Visual Hierarchy, AI Slop Risk, Accessibility), rates the plan, explains what 10/10 looks like, edits the plan to close gaps, re-rates, and repeats until 10 or user says move on.

  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

    Never skip Step 0 scope assessment or mockup generation when the designer is available. Mockups before review passes is non-negotiable.

  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. Completeness Principle: AI Makes Completeness Cheap

    Recommend full coverage (tests, edge cases, error paths) — boil the ocean one lake at a time.

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

Generic skills CLI form for plan-design-review/SKILL.md; the repository may document its own path.

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 PressureStep 0 > mockups > Interaction States > AI Slop > IA > User Journey; never skip Step 0 or mockups
  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