gstack /design-consultation 完整教程：从零构建设计系统，聪明地提出创意风险-Seo优化-塔城地区网站建设公司

gstack /design-consultation 完整教程：从零构建设计系统，聪明地提出创意风险

【免费下载链接】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是 YC CEO Garry Tan 开源的 AI 工程团队工具集，其中的/design-consultation是一条"设计咨询"技能：它会理解你的产品、调研竞品、为你从零构建完整的设计系统（审美、字体、配色、间距、动效），并明确告诉你哪些是稳妥选择、哪些是创意风险（creative risks），最后生成真实产品预览和 DESIGN.md 设计源文件。本教程带你 6 个阶段走完整个流程。

30 秒安装：先把 gstack 装到 Claude Code

在 Claude Code 中执行一次安装命令即可（30 秒完成）：

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

安装后所有技能以斜杠命令形式可用。/design-consultation的技能定义见 SKILL.md，触发词包括 "design system"、"brand guidelines"、"create DESIGN.md"。

💡 它和/plan-design-review的分工：已有网站做设计审计用后者；从零开始、没有任何设计系统时用/design-consultation。

阶段 0-1：摸清产品上下文，问出"让人记住的那一点"

技能不会一上来就让你选颜色。它会先读取你的 README.md、package.json和目录结构，甚至复用/office-hours沉淀的产品洞察，然后只问一个问题确认产品定位。

紧接着是关键的记忆点追问：

"用户第一眼看到你的产品，你希望他们记住什么？"

答案可以是一种感觉（"这是给严肃工作用的严肃软件"）、一个视觉（"近乎黑的蓝色"）或一句主张（"比别人都快"）。之后每一个设计决策都要服务于这一点——想对所有东西都过目不忘，结果就是什么都不剩。

阶段 2：竞品调研，用"三层综合法"看行业

同意调研后，它会用 WebSearch 找到你所在赛道的 5-10 个头部产品；如果 browse 二进制可用，还会真实访问前 3-5 个网站、截图分析字体、配色和留白密度。

核心是三层综合：

层级	含义
Layer 1 经典	整个品类共享的设计模式，是"及格线"
Layer 2 新潮	当前流行趋势和新兴模式
Layer 3 第一性原理	基于你产品的用户，常规做法是否错了？该在哪里故意打破品类惯例？

如果 Layer 3 推翻了常规智慧，它会以EUREKA标注并记录下来——这是整篇文章方法论里最值得注意的一环。

阶段 3：SAFE vs RISK 提案——创意风险的精华所在

这是整个技能的灵魂：一次性提出完整且自洽的设计系统（审美方向、3+ 款字体及角色、带 hex 值的配色、间距刻度、布局、动效策略），并把每个选择拆成两类：

✅SAFE（品类基线）：用户期待你"懂行"的稳妥选择，比如数据产品用等宽数字字体
⚡RISKS（创意风险）：2-3 个刻意的出格点，每个都说明"它是什么、为什么成立、你得到什么、付出什么代价"

官方文档的原话很到位："所有开发工具仪表盘都很协调，但都很平庸。让人记住你的，是刻意的创意风险。"（见 docs/skills.md 的/design-consultation一节）

你可以随时深入追问某一维度（字体给 3-5 个候选、配色给 2-3 组色板），它会重新校验整体协调性——比如"极繁配色 + 极简装饰"会提醒你颜色会承担很大权重，但绝不替你做最终决定。

阶段 4-5：预览与 AI 模拟图，看到产品"长出来"

提案敲定后进入预览，有两条路径：

AI 模拟图（优先）：调用设计二进制（源码在 design/src/）生成 3 个把设计系统应用到真实产品界面的模拟图，逐一过"人类设计师会不会不好意思署名"的质量关，再开一个浏览器对比板：打分、评论、Remix 混搭元素，循环迭代直到满意。
HTML 预览页（兜底）：单文件页面加载真实字体、渲染你的配色、用你的产品名（不是 Lorem Ipsum）画出真实感的仪表盘/营销页/表单，支持明暗模式切换。

设计产物统一存到~/.gstack/projects/$SLUG/designs/，与代码库分离、跨分支持久化。

阶段 6：写入 DESIGN.md，让所有 AI 会话都遵守

最后一步把决策沉淀成两份文件：

DESIGN.md（仓库根目录）：产品上下文、审美方向、字体角色、色板与深色模式策略、间距刻度、布局、动效，外加决策日志表格。本项目根目录就有一份真实样例 DESIGN.md
CLAUDE.md追加 "Design System" 段落：要求每个未来的 AI 会话做视觉决策前先读 DESIGN.md，QA 模式会标记任何不符合设计系统的代码

至此闭环完成：/design-review之后可以对照 DESIGN.md 审计线上界面，团队里的每个 AI 都遵守同一套视觉规则。