企业官网建设流程全解析

gstack /plan-design-review教程：设计0-10分制评审，以及“10分”到底长什么样

【免费下载链接】gstackUse Garry Tan's exact Claude Code setup: 23 opinionated tools that serve as CEO, Designer, Eng Manager, Release Manager, Doc Engineer, and QA项目地址: https://gitcode.com/GitHub_Trending/gs/gstack

gstack 的/plan-design-review是一个0-10分制的设计评审技能：它给方案里的每一个设计维度打分，明确告诉你“10分长什么样”，然后直接把方案修到接近满分。它不止给文字意见——还会生成视觉稿（mockup）让你在浏览器里对比挑选。本文带你完整走一遍这个流程。

🎨 它是什么：方案阶段的“虚拟资深设计师”

gstack 是 YC CEO Garry Tan 开源的一套工具，把 Claude Code 变成一支 23 人的“虚拟专家团队”：CEO、设计师、工程经理、QA……/plan-design-review就是其中那位资深产品设计师（见 README.md）。

它和普通评审的区别：

• 评审对象是方案（PLAN），不是网页——在写代码之前，把缺失的设计决策补进方案
• 每个问题都会说明“10分长什么样”，再动手把方案修到那个标准
• 涉及 UI 时默认生成视觉稿，而不是用文字描述“首页大概长这样”

📌 对照记忆：想审计已上线的页面用 /design-review；/plan-design-review只负责设计规划阶段，产出物是“更好的方案”，而不是“关于方案的文档”。

🚀 30秒安装：从克隆到第一次设计评审

前置条件：Claude Code、Git、Bun。执行：

git clone --single-branch --depth 1 https://gitcode.com/GitHub_Trending/gs/gstack.git ~/.claude/skills/gstack && cd ~/.claude/skills/gstack && ./setup

装好后，在 Claude Code 里输入/plan-design-review即可开始。完整技能定义见 plan-design-review/SKILL.md，7 个评审维度的详细规则在 plan-design-review/sections/review-sections.md。

📊 0-10分制评审三步走：一次评审到底在做什么

第一步：确认评审对象（Scope Gate）

技能启动后第一个动作是问你评什么：当前分支 diff、你贴的方案、还是某个具体文件。在 plan 模式下会自动选中“评审当前方案”。这是一个硬性暂停点——不确认对象就不开工，避免白干。

第二步：初始评分 + 视觉稿生成

在 Step 0: Design Scope Assessment 中，它会做三件事：

1. 初评打分，例如：“这个方案 3/10——只写了后端做什么，没写用户看到什么”
2. 检查 DESIGN.md：项目里有设计系统文件，后续判断就以它为校准基准；没有则建议先跑/design-consultation
3. 确认聚焦范围：列出最大的 2-3 个缺口，问你是全量过 7 个维度，还是只看重点

若方案含 UI，它会默认生成3 个风格变体，并在浏览器打开一个对比看板：打分、留评论、Remix 混搭重新生成，点 Submit 后你的选择写入feedback.json。整个挑选过程是交互式的，不是 AI 自说自话。

第三步：7 个维度逐遍评审（核心）

随后按 7 个维度逐一过，每个问题单独问你、等你回答。完整定义见 review-sections.md#L47-L181：

每个维度都遵循同一个循环：打分 → 解释差距 → 修改方案 → 重新打分 → 有选择就问你 → 再打分，直到 10 分或你说“够了，继续”（SKILL.md#L1486-L1498）。

🏆 “10分”到底长什么样？

这是该技能最有意思的设计：“10分”不是口号，而是可以“看”到的。

• 任何维度低于 7 分时，你可以要求“show me what 10/10 looks like”——它会直接生成一张理想状态的设计稿。“方案写的”和“应该长成的”之间的差距，从抽象变得肉眼可见（SKILL.md#L1500-L1513）
• 评审结束输出一张完成度摘要表：每个维度修复前后分数、做了几项决策、defer 了几项、总分___/10 → ___/10（review-sections.md#L294-L317）
• 所有设计决策写回方案文件，文件末尾追加## GSTACK REVIEW REPORT报告，任何人打开方案就能看到评审状态

一句话：“10分”= 方案里的每个设计决策都有明确答案，每个状态（空、错、加载）都有人管。

🚫 “AI味”黑名单：10分设计绝不包含什么

Pass 4 是最狠的一遍。它先给页面分类（营销页 / 应用 UI / 混合），再对照7 条硬性拒绝项（例如“用通用 SaaS 卡片网格当第一印象”“强标题却没有明确行动点”）+7 条试金石检查，外加一份11 条 AI 模板黑名单（review-sections.md#L139-L150）：紫蓝渐变背景、三列对称卡片网格、标题里塞 emoji、"Welcome to [X]" 式套话……命中即打回。

背后的理念是Specificity over vibes（具体 > 氛围感）：“clean, modern UI” 不算设计决策；“48px 粗体标题、#1a1a1a 配白底”才算。

📤 评审之后：结论都去哪了？

1. 写回方案：修复后的设计决策、"NOT in scope"（明确不做的）、"What already exists"（该复用的现有组件）、以及已批准视觉稿的路径清单
2. TODO 沉淀：想推迟的设计债逐条问你是否写入 TODOS.md
3. 评审看板：Review Readiness Dashboard 显示各类评审是否齐备，并推荐下一步——通常接着跑/plan-eng-review（工程评审）或直接/ship发布
4. 学习积累：本次踩到的坑会被记录，下次评审自动参考，越用越懂你的项目

⭐ 速查：相关技能推荐

总结

/plan-design-review把“设计评审”从一句主观的“感觉差点意思”，变成了0-10 分制、可执行、有 10 分参考答案表的流程：每一步扣分都能追溯到具体原则，每一个缺口都给出“10分答案”。下次你的方案里只要含 UI，先跑一遍它再开工——设计师会帮你把“以后再说”的坑提前填掉。

【免费下载链接】gstackUse Garry Tan's exact Claude Code setup: 23 opinionated tools that serve as CEO, Designer, Eng Manager, Release Manager, Doc Engineer, and QA项目地址: https://gitcode.com/GitHub_Trending/gs/gstack