83.3K+下载
跳转到使用指南
plan-design-review作者 Garry Tan

Plan Design Review Skill.

一个用于设计审查的 Claude Code 和 Codex skill：在实现之前审查设计方案的完整性和体验风险。

  • Design Review & Accessibility
  • 审查报告
下载 OpenDesign查看使用指南
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)
从上游文件读取的前置内容和章节标题，2026-09-14 · 完整内容共 72,139 字符

01 功能说明

plan-design-review Skill 在 Claude Code 和 Codex 中的功能

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

在实施前审查设计方案的完整性和体验风险。运行七项设计检查（信息架构、交互状态、用户旅程、空状态、视觉层级、AI Slop 风险、无障碍），每项评分 0-10，说明达到满分 10 分所需条件，然后修改方案以达成目标。当涉及 UI 范围时，默认使用 gstack designer 生成可视化 mockup。

包含一个可选的“外部视角”步骤：Codex 依据 OpenAI 的设计硬性规则和 litmus 检查进行评估；Claude 子代理运行独立的完整性审查。以 plan 模式运行。若需对线上站点进行视觉审计，请改用 /design-review。输出结果是一份改进后的方案，附有结构化审查报告，而非一份关于该方案的说明文档。

它产出什么

  • 一份改进后的方案文件，其中设计缺口已补齐、各维度已评分，并附加了结构化的 GSTACK REVIEW REPORT 部分
  • 一个对比看板 HTML 文件，以及记录用户所选变体、评分、评论和反馈的 approved.json
  • 若已运行外部视角，则生成综合 Codex 和 Claude 子代理发现的 litmus 评分卡
查看示例提示词 ↗

工作方式

  1. 01
    范围关卡确认审查目标

    在进行任何其他操作之前，先请用户确认要审查的内容（分支差异、方案文档或特定页面），除非 plan 模式自动选中了当前活动方案，或用户已明确指定目标。

  2. 02
    默认生成可视化 Mockup

    当 gstack designer 可用且方案涉及 UI 范围时，立即生成 mockup，无需征得许可。

  3. 03
    可选的外部设计视角并行运行

    若用户选择启用，则同时启动 Codex（设计硬性规则 + litmus 检查）和 Claude 子代理（独立完整性审查）。

  4. 04
    七项设计检查按 0-10 评分并修复缺口

    对每个维度（信息架构、交互状态、用户旅程、空状态、视觉层级、AI Slop 风险、无障碍）进行评分，说明满分 10 分的样子，编辑方案以补齐缺口，重新评分，如此反复直到达到满分或用户表示可以继续。

  5. 05
    将结构化审查报告写入方案文件

    追加一个 GSTACK REVIEW REPORT 部分，包含运行/状态/发现表、一行 VERDICT，以及作为文件末尾非空白行的未解决决策状态。

02 找到适合场景

何时使用 plan-design-review Skill

在 Claude Code 或 Codex 中使用 plan-design-review skill 处理此类设计审查工作。适用范围和限制取自该 skill 的文件。

适合场景

  • 用户已起草一份包含 UI/UX 组件的方案，需要在实施前进行审查
  • 设计方案需要可视化 mockup，以在编码开始前将抽象描述具体化
  • 方案描述了后端的功能，但从未说明用户所见内容、空状态、错误状态或响应式行为

了解边界

  • 纯后端、仅 API 或不涉及 UI 范围的基础设施变更
  • 实时站点视觉审查（请改用 /design-review）

需要提供的信息

  • 带有 UI 范围的设计计划或分支差异计划文件、用户粘贴的文档、特定页面/路径，或当前分支差异。
  • 通过对比看板获得原型反馈gstack 设计器通过 HTTP 提供对比看板，用户可对变体评分、留下评论、点击 Regenerate/Remix，或提交最终选择。

03 Skill 内部

plan-design-review Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 5 条具体指令、默认值与限制——文件中真正改变结果的那一部分。

  1. 所有设计产物保存至 ~/.gstack/projects/$SLUG/designs/

    原型、对比看板和 approved.json 必须保存到用户的 gstack 项目设计目录，绝不能保存到 .context/、docs/designs/、/tmp/ 或任何项目本地目录。

  2. 优先级层级：第 0 步 > 原型 > 交互状态 > AI Slop > 信息架构 > 用户旅程

    在设计器可用时，绝不能跳过第 0 步范围评估或原型生成。审查通过前必须先有原型，这一点没有商量余地。

  3. 存在 DESIGN.md 时，设计审查应据其校准

    若存在 DESIGN.md，所有设计决策都必须与其中所述的设计系统保持一致。

  4. 外部意见预先加载至各轮的 Issues 中

    Codex 给出的硬性驳回会作为 Pass 1 中标记为 [HARD REJECTION] 的首要事项提出。Litmus 中的 DISAGREE 项会在相应轮次中呈现双方观点。

  5. 完整性原则：AI 让完整性变得低成本

    建议全面覆盖（测试、边界情况、错误路径）——一次啃下一片海洋。

04 投入使用

在 Claude Code 或 Codex 中安装 plan-design-review

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 plan-design-review 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

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

针对 plan-design-review/SKILL.md 的通用 skills CLI 形式；具体仓库可能记录自己的路径。

为 Skill 提供第一个设计审查任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

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.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

  • 退出 plan 模式前，确认计划文件的最后一个标题为 ## GSTACK REVIEW REPORT
  • 确认审查报告包含 runs/status/findings 表格、一行 VERDICT，以及作为文件末尾非空白行的未决决定状态
  • 如果上下文中存在计划文件，验证已调用 gstack-review-log，并至少运行过一次 gstack-review-read

在 OpenDesign 中，plan-design-review 已内置：进入 Plugins → Skills，在顶部栏中选取即可。

下载 OpenDesign阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author
Garry Tan
Repository
github.com/garrytan/gstack 分支 main
Skill 文件
plan-design-review/SKILL.md 内容校验和在验证时记录；提交 71f6048
License
MIT 来自 LICENSE。
仓库星标数
132,921 GitHub 快照拍摄于 2026-09-14，针对整个 garrytan/gstack 代码仓库，其中包含此目录中的 7 个 skills。不是 plan-design-review 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中（检查于 2026-08-28）；此页面尚未记录实际运行。

SKILL.md 内部

  1. 何时调用此 skill用于设计计划审查；当 UI/UX 计划需要在实现前接受审查时，主动建议使用
  2. 预备步骤（首先运行）运行 gstack-skill-start，处理降级模式，读取指令块，设置 SESSION_KIND 和遥测标记
  3. 设计理念确保设计感觉是有意为之而非生成的；找出每一处缺口，说明其重要性，并修复显而易见的问题
  4. gstack 设计器 —— 你的主要工具AI 原型生成器，可根据设计 brief 创建真实视觉效果；只要存在 UI，就应默认使用
  5. 设计原则九项原则：空状态是一种功能、层级至关重要、具体胜于感觉、边界情况即体验、AI slop 是敌人、响应式设计是有意为之、无障碍是强制要求、默认做减法、信任是在像素层面赢得的
  6. 认知模式 —— 卓越设计师如何观察十二种感知本能：把系统而非屏幕当作对象来看、以模拟实现共情、层级即服务、对约束的推崇、提问反射、对边界情况的警觉、"我会注意到吗"测试、有原则的品味、默认做减法、面向时间跨度的设计、为信任而设计、以分镜叙述用户旅程
  7. UX 原则：用户实际的行为方式三条法则（别让我思考、点击数不重要重要的是思考、先省略再省略）、用户行为（扫视而非阅读、满意即止、勉强应付）、广告牌式设计、导航即路标、善意储备、移动端风险更高
  8. 上下文压力下的优先级层级Step 0 > 效果图 > 交互状态 > AI Slop > 信息架构 > 用户旅程；切勿跳过 Step 0 或效果图
  9. 预审阶段的系统审查（Step 0 之前）从 git log、diff stat、plan、CLAUDE.md、DESIGN.md、TODOS.md 中收集上下文，梳理 UI 范围和现有模式
  10. 设计环境检查（在执行任何设计效果图命令前先运行此检查）检查 gstack designer 二进制是否可用；输出 DESIGN_READY 或 DESIGN_NOT_AVAILABLE
  11. Brain 上下文（预检）在提出澄清问题之前，从 gstack-brain-cache 中加载结构化的项目上下文（产品、品牌、目标、近期决策）
  12. Step 0：设计范围评估初始设计评分 0-10、DESIGN.md 状态检查、可复用的现有设计、重点关注领域提问（在用户回应前停止）
Skill 自身的描述
「设计师视角的计划审查——交互式，类似 CEO 和工程审查。（gstack）」

来自 SKILL.md 的前言描述。完整文件约 72,139 个字符。在 GitHub 上阅读完整文件。

计划设计审查

在真实的设计审查任务上运行 plan-design-review。

plan-design-review skill 内置于 OpenDesign 中。下载应用，在 Plugins → Skills 中选择该 skill，粘贴上面的提示词，并在结果之前阅读计划。

下载 OpenDesign浏览所有 skills
终端
npx skills add https://github.com/garrytan/gstack --skill plan-design-review