gstack /design-consultation 完整教程从零构建设计系统聪明地提出创意风险【免费下载链接】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是 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标注并记录下来——这是整篇文章方法论里最值得注意的一环。阶段 3SAFE 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.mdCLAUDE.md追加 Design System 段落要求每个未来的 AI 会话做视觉决策前先读 DESIGN.mdQA 模式会标记任何不符合设计系统的代码至此闭环完成/design-review之后可以对照 DESIGN.md 审计线上界面团队里的每个 AI 都遵守同一套视觉规则。新手避坑清单 别跳过记忆点问题——它是所有决策的锚RISKS 不是越多越好——2-3 个足矣协调性优先于单点惊艳它有内置字体黑名单和AI 味反模式清单紫色渐变、三栏图标网格、Inter 打底……推荐时会自动规避已有设计系统时它会先问更新、推倒重来还是取消不会直接覆盖延伸阅读技能主文件design-consultation/SKILL.md阶段 3-6 完整规则proposal-and-preview.md设计二进制实现design/src/variants、compare、check、iterate、extract等命令全部技能详解docs/skills.md上游技能/office-hours、下游技能/design-shotgun、/design-html可在 README.md 的技能总表中查看【免费下载链接】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），仅供参考 gstack /design-consultation 完整教程：从零构建设计系统，聪明地提出创意风险
gstack /design-consultation 完整教程从零构建设计系统聪明地提出创意风险【免费下载链接】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是 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标注并记录下来——这是整篇文章方法论里最值得注意的一环。阶段 3SAFE 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.mdCLAUDE.md追加 Design System 段落要求每个未来的 AI 会话做视觉决策前先读 DESIGN.mdQA 模式会标记任何不符合设计系统的代码至此闭环完成/design-review之后可以对照 DESIGN.md 审计线上界面团队里的每个 AI 都遵守同一套视觉规则。新手避坑清单 别跳过记忆点问题——它是所有决策的锚RISKS 不是越多越好——2-3 个足矣协调性优先于单点惊艳它有内置字体黑名单和AI 味反模式清单紫色渐变、三栏图标网格、Inter 打底……推荐时会自动规避已有设计系统时它会先问更新、推倒重来还是取消不会直接覆盖延伸阅读技能主文件design-consultation/SKILL.md阶段 3-6 完整规则proposal-and-preview.md设计二进制实现design/src/variants、compare、check、iterate、extract等命令全部技能详解docs/skills.md上游技能/office-hours、下游技能/design-shotgun、/design-html可在 README.md 的技能总表中查看【免费下载链接】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），仅供参考