ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

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

gstack /plan-design-review教程:设计0-10分制评审,以及“10分”到底长什么样 gstack /plan-design-review教程设计0-10分制评审以及“10分”到底长什么样【免费下载链接】gstackUse Garry Tans 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/gstackgstack 的/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.md7 个评审维度的详细规则在 plan-design-review/sections/review-sections.md。 0-10分制评审三步走一次评审到底在做什么第一步确认评审对象Scope Gate技能启动后第一个动作是问你评什么当前分支 diff、你贴的方案、还是某个具体文件。在 plan 模式下会自动选中“评审当前方案”。这是一个硬性暂停点——不确认对象就不开工避免白干。第二步初始评分 视觉稿生成在 Step 0: Design Scope Assessment 中它会做三件事初评打分例如“这个方案 3/10——只写了后端做什么没写用户看到什么”检查 DESIGN.md项目里有设计系统文件后续判断就以它为校准基准没有则建议先跑/design-consultation确认聚焦范围列出最大的 2-3 个缺口问你是全量过 7 个维度还是只看重点若方案含 UI它会默认生成3 个风格变体并在浏览器打开一个对比看板打分、留评论、Remix 混搭重新生成点 Submit 后你的选择写入feedback.json。整个挑选过程是交互式的不是 AI 自说自话。第三步7 个维度逐遍评审核心随后按 7 个维度逐一过每个问题单独问你、等你回答。完整定义见 review-sections.md#L47-L181遍次维度10分标准1信息架构方案写清“用户第一眼看什么、第二眼看什么”2交互状态覆盖加载/空/错误/成功/部分 5 种状态全部指定3用户旅程与情绪弧每一步有情绪故事板4“AI味”风险UI 描述具体、有意图无模板痕迹5设计系统对齐新组件与 DESIGN.md 的词汇一致6响应式与无障碍每个视口有具体布局变化和 a11y 规范7未决设计决策每个含糊点列出“推迟会有什么后果”每个维度都遵循同一个循环打分 → 解释差距 → 修改方案 → 重新打分 → 有选择就问你 → 再打分直到 10 分或你说“够了继续”SKILL.md#L1486-L1498。 “10分”到底长什么样这是该技能最有意思的设计“10分”不是口号而是可以“看”到的。任何维度低于 7 分时你可以要求“show me what 10/10 looks like”——它会直接生成一张理想状态的设计稿。“方案写的”和“应该长成的”之间的差距从抽象变得肉眼可见SKILL.md#L1500-L1513评审结束输出一张完成度摘要表每个维度修复前后分数、做了几项决策、defer 了几项、总分___/10 → ___/10review-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 配白底”才算。 评审之后结论都去哪了写回方案修复后的设计决策、NOT in scope明确不做的、What already exists该复用的现有组件、以及已批准视觉稿的路径清单TODO 沉淀想推迟的设计债逐条问你是否写入 TODOS.md评审看板Review Readiness Dashboard 显示各类评审是否齐备并推荐下一步——通常接着跑/plan-eng-review工程评审或直接/ship发布学习积累本次踩到的坑会被记录下次评审自动参考越用越懂你的项目⭐ 速查相关技能推荐你的场景推荐命令想要更多设计方向、批量出变体/design-shotgun把批准的视觉稿变成真实 HTML/design-html审计已上线页面的视觉效果/design-reviewCEO 工程 设计全流水线评审/autoplan总结/plan-design-review把“设计评审”从一句主观的“感觉差点意思”变成了0-10 分制、可执行、有 10 分参考答案表的流程每一步扣分都能追溯到具体原则每一个缺口都给出“10分答案”。下次你的方案里只要含 UI先跑一遍它再开工——设计师会帮你把“以后再说”的坑提前填掉。【免费下载链接】gstackUse Garry Tans 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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表