跳转到使用指南
design-review作者 Garry Tan

Design Review Skill.

一个用于设计评审的 Claude Code 和 Codex skill:以设计师视角 QA 已构建页面,检查不一致、间距、层级、粗糙模式,然后修复它们。

  • Design Review & Accessibility
  • 审查报告
garrytan/gstack · design-review/SKILL.mdSKILL.md
--- name: design-review description: Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. (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 的上游文件 · 完整内容 126,647 字符

01 功能说明

design-review Skill 在 Claude Code 和 Codex 中的作用

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

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

以 skill 自身的术语

以设计师之眼对上线网站进行 QA。它在用户自己的浏览器中打开页面,在 375、768 和 1440 三种宽度下截图,从视觉层级到交互状态对十个类别评分,然后编辑源码修复发现的问题,每处修复一次提交,并用修复前后的截图重新验证。

审查深度默认为 5-8 页;若在功能分支上未提供 URL,则改为基于 diff 的审查。读者会得到两个总评分——加权的设计评分和独立的 AI Slop 评分——以及 30 条具名检测规则(如 [kicker-above-heading] 和 [gradient-text]),支撑背后的判断依据。

它产出什么

  • 运行目录中生成一份结构化的 Markdown 审查报告。
  • 写入一份 design-baseline.json 文件,供后续运行做回归对比。
  • 每处修复都附有修复前后的截图对比。
  • 如果用户接受第二阶段的建议,会根据提取到的观察结果生成一份可选的 DESIGN.md。
查看示例提示词 ↗

工作方式

  1. 01
    先感知,再分析

    第一阶段打开目标页面并截取整页桌面端截图,然后写下一份结构化的第一印象,指出视线首先落在何处。

  2. 02
    提取渲染出的系统

    第二阶段在页面内探查字体、颜色、标题层级和触控目标尺寸,然后提议将发现保存为一份 DESIGN.md。

  3. 03
    逐页审查

    第三阶段对每一页运行控制台钩子、交互快照和带标注的截图,并在三种视口宽度下重复执行。

  4. 04
    感受流程

    第四阶段走完 2-3 条用户流程,在每个操作后比对快照差异,并跟踪一个衡量摩擦与修复的好感度分数。

  5. 05
    逐条修复问题

    第八阶段进行最小改动,单独提交,并在进入下一条发现之前重新测试。

  6. 06
    给出两个总评分

    设计评分是十个类别的加权平均值,而 AI slop 评分是独立评定的。

02 找到适合场景

何时使用 design-review Skill

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

适合场景

  • 在上线前或重新设计之后,需要对整站进行系统性审查,而不仅是抽查。
  • 在改动 UI 的功能分支上工作时,应只审查受影响的路由。
  • 当你提到视觉不一致或想打磨一个上线中的网站时,该 skill 应该主动被建议使用。
  • 判断已上线的页面是否看起来像 AI 生成的内容,这是大多数开发者自己难以评估的事情。
  • 当没有时间进行完整扫描时的快速健全性检查:首页加两个关键页面,以及一份简化清单。

了解边界

  • 在构建之前评审设计:这属于另一个独立的 plan-mode skill。
  • 存在于源代码之外的问题,例如第三方组件或必须由团队提供的文案,会被标记为“延后处理”而非“已修复”。
  • 它不会触碰你的 CI 配置,现有测试也是禁区;只能创建新的回归测试文件。

需要提供的信息

  • 目标 URL一个可访问的地址,包括 localhost。若未提供,skill 会自动检测,或在 main 上向你询问。
  • 范围覆盖当你不想进行完整巡查时,可将扫描范围缩小到单个页面或区域。
  • 深度标志默认为 standard;--quick 精简为三个页面,--deep 则扩展为完整的上线前扫描。
  • 你的 DESIGN.md(如果存在)仓库根目录下的设计文档会最先被读取,以便每个判断都能与既定系统进行校准,任何偏离都会被更严格地评分。
  • 已登录的浏览器会话审查在用户已有的会话中进行,因此需要登录才能访问的页面无需再走登录流程。

03 Skill 内部

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

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

  1. 评判渲染结果,而非代码仓库

    此审查从不读取实现文件:所有结论必须来自渲染后的页面。唯一的例外是根据提取到的观察结果撰写 DESIGN.md。

  2. 每次修复独立提交

    每个修复都单独提交,提交信息格式为 style(design): FINDING-NNN 加一段简短描述。

  3. 开始前先清理工作树

    存在未提交更改的工作树会阻止运行:在产生任何修复提交之前,Agent 必须先询问是提交、暂存还是中止。

  4. 对真实账户操作前先征得同意

    在非本地目标上,任何有副作用的操作在每次运行时都需要一次同意确认,且需列明将执行的具体内容;退出登录和删除相关路径永远不会被执行。

  5. 凭据永不进入 Agent

    预先登录的会话按原样使用。密码、一次性验证码、支付信息、Cookie、token 以及 localStorage 均属禁区。

  6. 每个结论都有截图支撑

    没有至少一张截图佐证的结论不算数,图片会被复制出来并读取,以便用户能内嵌查看。

  7. 一旦情况变糟,立即回退

    任何回归都会立即触发 git revert HEAD,相应发现会被标记为延后处理,而不是绕过修补。

  8. 满 30 次修复即停止

    该循环每完成五次修复就会升级一次,一旦设计修复风险超过 20% 或修复次数达到 30 次,就会彻底停止。

04 投入使用

在 Claude Code 或 Codex 中安装 design-review

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

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

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

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

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

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

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

Starter prompt
Audit the design of [https://myapp.com/dashboard] at standard depth. Focus on the settings page. I'm signed in as [[email protected]] in Aside. Flag the AI slop patterns and anything that breaks the spacing scale, then fix what you can.

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

检查首次结果

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

  • 每次修复后重新测试受影响的页面,确认控制台错误列表为空,或不比基线更差。
  • 如果生成了目标 mockup,将修复后的截图与其对比,并记录通过或失败。
  • 每个修复都会被分类:如果重新测试确认无新错误,则标记为已验证。
  • 第 9 阶段会重新审查受影响的页面,若最终评分低于基线则会发出明显警告。
  • 报告会以从开始到结束的差值形式给出检测器计数,或说明检测器未安装或未开启。

在 OpenDesign 中design-review 已内置:在Plugins → Skills中的顶部栏选择它即可。

05 开源、可追溯

来源、许可与验证

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

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

SKILL.md 内部

  1. 设置解析 URL、范围、深度和身份验证;检查 DESIGN.md、干净的工作树、浏览器和测试。
  2. 模式完整、快速、深度、差异感知和回归范围决定要访问哪些页面。
  3. 第 1 阶段:初次印象整页桌面截图,随后给出结构化的直觉反应和页面区域测试。
  4. 第 2 阶段:设计系统提取探查字体、颜色、标题层级和触控目标,然后提议保存一份 DESIGN.md。
  5. 第 3 阶段:逐页视觉审查快照、带标注和响应式的截图、主干测试,随后进行 10 类清单核查。
  6. 第 4 阶段:交互流程审查走完 2-3 条流程,逐步进行差异比对,并从 70 分起给出好感度评分。
  7. 第 5 阶段:跨页面一致性比较各页面之间的导航、页脚、组件、语气和间距节奏。
  8. 第 6 阶段:编写报告为每个类别打出 A-F 等级,并撰写报告及 design-baseline.json。
  9. 第 7 阶段:分级处理按影响程度对发现进行排序,并推迟源码编辑无法解决的问题。
  10. 第 8 阶段:修复循环定位源码,做最小化修复,提交,重新测试,分类,并自我调节节奏。
  11. 第 9 阶段:最终设计审查重新审查受影响页面,重新计算评分和检测器计数,并对回归发出警告。
  12. 第 10 阶段:报告撰写完整报告、项目索引摘要、PR 行以及检测器差值。
Skill 自身的描述
设计师视角 QA:发现视觉不一致、间距问题、层次问题、AI 敷衍模式和交互迟钝 —— 然后修复它们。(gstack)

SKILL.md 中的 Front-matter 描述。完整文件约 126,647 个字符。在 GitHub 上阅读完整文件。

设计评审

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

design-review skill 内置于 OpenDesign 中。下载应用,在 Plugins → Skills 中选择该 skill,粘贴上方提示词,并在查看结果之前阅读执行计划。

终端
npx skills add https://github.com/garrytan/gstack --skill design-review