gstack DESIGN.md 实战解析让设计系统文件成为 AI 设计决策的唯一事实来源【免费下载链接】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/gstackDESIGN.md是 gstack 社区网站的设计系统规格文件记录了字体、色彩、间距、布局与动效的完整决策。在 gstack 的工作流中它更是一个被多套工具自动读取的“设计事实来源”/design-consultation从零创建它designCLI 的extract命令会把已批准设计稿的视觉语言写回它/plan-design-review则要求所有设计决策以它为准校准。读完本文你将掌握一份可直接复用的设计系统文档规范以及 gstack 各模块如何通过源码消费这份文件的完整链路。一、产品语境DESIGN.md 为谁而写gstack 自身的 DESIGN.md 开篇即声明产品语境这是整份文档的第一节也是 gstack 建议每个项目在设计系统中回答的问题What this is:社区网站面向正在发现 gstack一个把 Claude Code 变成虚拟工程团队的 CLI 工具的开发者与现有社区成员。Space/industry:开发者工具参考坐标是 Linear、Raycast、Warp、Zed 这类产品。Project type:社区仪表盘 营销站点。在产品定位之后文档给出美学方向Aesthetic Direction这是后续所有 token 决策的依据方向工业风/实用主义Industrial/Utilitarian——功能优先、数据密集等宽字体作为性格字体personality font。装饰程度克制的刻意——在表面上叠加细微的噪点/颗粒纹理赋予材质感。情绪一个“由在乎工艺的人打造的严肃工具”温暖而非冰冷。CLI 血统本身就是品牌。参考站点formulae.brew.sh竞品但本站点更“活”、可交互、Linear深色 克制、Warp暖色强调。这一节的价值在于它不是孤立的美术偏好而是约束了后文每个具体数值——比如“等宽字体要醒目而非藏在代码块里”直接决定了 JetBrains Mono 在数据表格中被广泛使用的排版决策。二、Typography三段式字体体系与完整字号阶梯gstack 的字体系统分五个角色每类字体都标注了加载来源这是很多设计系统文档缺失的工程细节角色字体与字重说明加载来源Display/HeroSatoshiBlack 900 / Bold 700几何但带温度字形有辨识度小写 a 和 g明确排除 Inter、GeistFontshare CDNBodyDM Sans400 / 500 / 600干净、易读比几何展示字体更友好Google FontsUI/LabelsDM Sans与正文相同减少字体加载成本Google FontsData/TablesJetBrains Mono400 / 500性格字体支持 tabular-nums等宽字体应醒目出现不只用于代码块Google FontsCodeJetBrains Mono—Google Fonts加载策略DM Sans 与 JetBrains Mono 走 Google FontsSatoshi 走 Fontshare统一使用displayswap。字号阶梯Type Scale完整继承自原文档级别尺寸Hero72px /clamp(40px, 6vw, 72px)H148pxH232pxH324pxH418pxBody16pxSmall14pxCaption13pxMicro12pxNano11pxJetBrains Mono 标签用注意 Hero 用了clamp()实现响应式缩放而其余标题是固定值——这是“编辑感 hero 仪表盘式正文”布局策略的排版映射。三、Color琥珀色强调 中性 zinc 的双模式色彩体系色彩策略的核心一句话是“克制”Restrained琥珀色强调很少出现、每次出现都有意义数据区获得颜色界面框架chrome保持中性。完整 token 如下主色Primary琥珀模式Token色值理由Darkamber-500#F59E0B温暖、有活力读起来像“终端光标”Lightamber-600#D97706白底上更暗以保证对比度Dark 文字强调amber-400#FBBF24—Light 文字强调amber-700#B45309—中性色Cool zinc graysToken色值用途zinc-50#FAFAFA最浅色zinc-400#A1A1AA中灰zinc-600#52525B深灰zinc-800#27272A更深灰Surface (dark)#141414深色卡片面Base (dark)#0C0C0C深色底Surface (light)#FFFFFF浅色卡片面Base (light)#FAFAF9暖 stone 底语义色Semanticsuccess#22C55E、warning#F59E0B、error#EF4444、info#3B82F6。双模式规则Dark mode默认近黑底#0C0C0C卡片面#141414边框#262626。Light mode暖 stone 底#FAFAF9白色卡片stone 边框#E7E5E4强调色切换为 amber-600 以保证对比度。四、Spacing 与 Layout4px 基数、12 列网格与圆角分级间距Spacing基数4px。密度定位“舒适”——不拥挤不是 Bloomberg 终端式也不疏朗不是营销页式。阶梯2xs(2px) xs(4px) sm(8px) md(16px) lg(24px) xl(32px) 2xl(48px) 3xl(64px)。布局Layout策略仪表盘部分严格网格化落地页 hero 区走编辑感editorial排版。网格lg 断点以上 12 列移动端 1 列。内容最大宽度1200px6xl。圆角分级Border radiussm:4px、md:8px、lg:12px、full:9999px并按组件分配——组件圆角卡片/面板lg12px按钮/输入框md8px徽章/胶囊full9999px技能条sm4px五、Motion 与 Grain Texture只保留“帮助理解”的动效动效Motion原则最小功能主义——只保留辅助理解的过渡“仪表盘实时 feed 本身就是动效”。缓动enter 用ease-out具体曲线cubic-bezier(0.16,1,0.3,1)exit 用ease-inmove 用ease-in-out。时长micro(50-100ms)、short(150ms)、medium(250ms)、long(400ms)。动画元素白名单实时 feed 圆点脉冲2s infinite、技能条填充600ms ease-out、hover 状态150ms。颗粒纹理Grain Texture为整个页面叠加细微噪点营造材质感、防止“千篇一律的 SaaS 模板”感。实现约束非常具体Dark mode 不透明度 0.03Light mode 0.02用 SVGfeTurbulence滤镜作为 CSSbackground-image挂在body::after上pointer-events: none、position: fixed、z-index: 9999。六、源码级链路gstack 工具链如何自动消费 DESIGN.md以上 token 是静态规范DESIGN.md 在 gstack 中的真正威力在于它是多条工具链的输入。以下均为仓库源码可验证的事实。6.1 /design-consultationDESIGN.md 的生产者design-consultation/SKILL.md 的职责是“从零创建 DESIGN.md 作为项目的设计事实来源”。它的 frontmatter 中声明了 gbrain 上下文查询第一条就是直接以glob: DESIGN.md读取文件系统上的现有 DESIGN.md并以## Existing DESIGN.md (if any)渲染进上下文——也就是说每次咨询时技能都会先检查是否已有设计系统避免重复设计。README 中对/design-consultation的描述是从零构建你的设计系统、调研业界现状、提出有创造性的风险、并写出DESIGN.md。6.2 design CLI 的 extract 命令从设计稿反向写入 DESIGN.mddesign/src/commands.ts 注册了extract子命令Extract design language from approved mockup into DESIGN.md用法为extract --image approved.png。其实现位于 design/src/memory.ts调用链如下extractDesignLanguage(imagePath)将已批准的 mockup PNG 以 base64 形式发给 GPT-4o vision 接口要求只返回 JSON结构为colors / typography / spacing / layout / mood五字段见 ExtractedDesign 接口60 秒超时失败时回退到空结构defaultDesign()而不中断流程updateDesignMd(repoRoot, extracted, sourceMockup)写入仓库根目录的DESIGN.mdmemory.ts#L111文件已存在 → 若其中已有## Extracted Design Language标记段则替换该段否则追加到末尾文件不存在 → 创建新的# Design System文档每次写入都带日期与来源 mockup 文件名*Source: xxx.png*与本文开头 gstack 自己的 Decisions Log 表格是同一维护哲学设计决策必须留痕。CLI 分发逻辑在 design/src/cli.tscase extract分支先调extractDesignLanguage成功后updateDesignMd再把提取结果以 JSON 打到 stdout——即该命令对脚本和人都友好。6.3 design-to-codeDESIGN.md 作为实现约束design/src/design-to-code.ts 在从已批准 mockup 生成“实现提示词”时会先调用readDesignConstraints(repoRoot)读取 DESIGN.md 全文并截断到前 2000 字符memory.ts#L196-L203然后注入 promptExisting DESIGN.md (use these as constraints): ...。这意味着 DESIGN.md 同时服务于“生成阶段”与“代码阶段”无此文件时返回 null模型“explore wide”自由探索有此文件时视觉细节必须与既定系统对齐。与之呼应的是 design/src/brief.ts 中的DesignBrief接口其reference字段注释明确写着DESIGN.md excerpt or style reference text——生成 mockup 的 brief 结构里就为 DESIGN.md 预留了位置。6.4 评审与规划技能以 DESIGN.md 校准一切设计决策plan-design-review/SKILL.md 规定“DESIGN.md — if it exists, ALL design decisions calibrate against it”若存在所有设计决策都以它校准并在评审的 System Audit 维度检查其状态存在则“所有设计决策将按你声明的设计系统校准”不存在则标记为 gap 并建议先运行/design-consultation在生成设计变体时brief 由“计划描述 DESIGN.md 约束”拼装例如$D variants --brief 由计划与 DESIGN.md 约束组装的描述 --count 3 --output-dir ...。autoplan/sections/design-phase.md 的 Step 0 同样要求“Check DESIGN.md”且规则是“如果 DESIGN.md 存在且修复明显则自动修复设计系统对齐问题”。6.5 使用 design CLI 的最小实操路径从 design/src/cli.ts 的printUsage与runSetup可以确认完整用法# 1. 引导式 API key 配置 冒烟测试key 存到 ~/.gstack/openai.json0600 权限 $D setup # 2. 从已批准的设计稿提取设计语言并写回仓库根目录的 DESIGN.md $D extract --image approved.png # 3. 从已批准 mockup 生成结构化实现 prompt会读取 DESIGN.md 作为约束 $D prompt --image approved.png # 4. 从 brief 生成 UI mockup $D generate --brief ... --output /path.png # 5. 生成 N 个设计变体供评审 $D variants --brief ... --count 3 --output-dir /path/认证解析顺序为先读~/.gstack/openai.json其次OPENAI_API_KEY环境变量都没有则进入引导式 setupvision/生成类调用均依赖 OpenAI 图像权限。七、Decisions Log设计文档的维护约定gstack 的 DESIGN.md 末尾是决策日志每条决策记录日期、决策与理由DateDecisionRationale2026-03-21Initial design systemCreated by /design-consultation. Industrial aesthetic, warm amber accent, Satoshi DM Sans JetBrains Mono.2026-03-21Light mode amber-600amber-500 在白底上太亮/发灰amber-700 太棕/土。amber-600 是平衡点。2026-03-21Grain texture为平面深色表面增加材质感避免“通用 SaaS 模板”的同质化。这给出了 DESIGN.md 的第三种维护方式除人工编辑与extract自动追加外每个偏离默认判断的决策都要记录理由。三条记录正好对应本文的三个章节——初始系统、浅模式强调色权衡、噪点纹理——展示了“token 从哪里来”的完整叙事。八、小结如何在自己项目中落地这套模式结合 DESIGN.md 的结构与 gstack 工具链的消费方式一份可被 AI 工具链消费的设计系统文档应包含Product Context——产品是什么、给谁、所处赛道为所有 token 提供判断依据Aesthetic Direction——一句话美学方向 参考站点约束后续选择完整 token 表——字体含加载来源与displayswap、色彩含明暗双模式、间距、圆角、动效全部落到具体数值例外与材质细节——如 grain 纹理的具体 CSS 挂载方式Decisions Log——决策留痕表配合/design-consultation创建、$D extract从 mockup 自动追加、评审技能校准使用。gstack 仓库自身的 DESIGN.md 就是这套模式的示范样本仓库中的 design/、design-consultation/、plan-design-review/ 目录则提供了从“文档”到“自动化消费”的全部源码证据。【免费下载链接】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.md 实战解析：让设计系统文件成为 AI 设计决策的唯一事实来源
gstack DESIGN.md 实战解析让设计系统文件成为 AI 设计决策的唯一事实来源【免费下载链接】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/gstackDESIGN.md是 gstack 社区网站的设计系统规格文件记录了字体、色彩、间距、布局与动效的完整决策。在 gstack 的工作流中它更是一个被多套工具自动读取的“设计事实来源”/design-consultation从零创建它designCLI 的extract命令会把已批准设计稿的视觉语言写回它/plan-design-review则要求所有设计决策以它为准校准。读完本文你将掌握一份可直接复用的设计系统文档规范以及 gstack 各模块如何通过源码消费这份文件的完整链路。一、产品语境DESIGN.md 为谁而写gstack 自身的 DESIGN.md 开篇即声明产品语境这是整份文档的第一节也是 gstack 建议每个项目在设计系统中回答的问题What this is:社区网站面向正在发现 gstack一个把 Claude Code 变成虚拟工程团队的 CLI 工具的开发者与现有社区成员。Space/industry:开发者工具参考坐标是 Linear、Raycast、Warp、Zed 这类产品。Project type:社区仪表盘 营销站点。在产品定位之后文档给出美学方向Aesthetic Direction这是后续所有 token 决策的依据方向工业风/实用主义Industrial/Utilitarian——功能优先、数据密集等宽字体作为性格字体personality font。装饰程度克制的刻意——在表面上叠加细微的噪点/颗粒纹理赋予材质感。情绪一个“由在乎工艺的人打造的严肃工具”温暖而非冰冷。CLI 血统本身就是品牌。参考站点formulae.brew.sh竞品但本站点更“活”、可交互、Linear深色 克制、Warp暖色强调。这一节的价值在于它不是孤立的美术偏好而是约束了后文每个具体数值——比如“等宽字体要醒目而非藏在代码块里”直接决定了 JetBrains Mono 在数据表格中被广泛使用的排版决策。二、Typography三段式字体体系与完整字号阶梯gstack 的字体系统分五个角色每类字体都标注了加载来源这是很多设计系统文档缺失的工程细节角色字体与字重说明加载来源Display/HeroSatoshiBlack 900 / Bold 700几何但带温度字形有辨识度小写 a 和 g明确排除 Inter、GeistFontshare CDNBodyDM Sans400 / 500 / 600干净、易读比几何展示字体更友好Google FontsUI/LabelsDM Sans与正文相同减少字体加载成本Google FontsData/TablesJetBrains Mono400 / 500性格字体支持 tabular-nums等宽字体应醒目出现不只用于代码块Google FontsCodeJetBrains Mono—Google Fonts加载策略DM Sans 与 JetBrains Mono 走 Google FontsSatoshi 走 Fontshare统一使用displayswap。字号阶梯Type Scale完整继承自原文档级别尺寸Hero72px /clamp(40px, 6vw, 72px)H148pxH232pxH324pxH418pxBody16pxSmall14pxCaption13pxMicro12pxNano11pxJetBrains Mono 标签用注意 Hero 用了clamp()实现响应式缩放而其余标题是固定值——这是“编辑感 hero 仪表盘式正文”布局策略的排版映射。三、Color琥珀色强调 中性 zinc 的双模式色彩体系色彩策略的核心一句话是“克制”Restrained琥珀色强调很少出现、每次出现都有意义数据区获得颜色界面框架chrome保持中性。完整 token 如下主色Primary琥珀模式Token色值理由Darkamber-500#F59E0B温暖、有活力读起来像“终端光标”Lightamber-600#D97706白底上更暗以保证对比度Dark 文字强调amber-400#FBBF24—Light 文字强调amber-700#B45309—中性色Cool zinc graysToken色值用途zinc-50#FAFAFA最浅色zinc-400#A1A1AA中灰zinc-600#52525B深灰zinc-800#27272A更深灰Surface (dark)#141414深色卡片面Base (dark)#0C0C0C深色底Surface (light)#FFFFFF浅色卡片面Base (light)#FAFAF9暖 stone 底语义色Semanticsuccess#22C55E、warning#F59E0B、error#EF4444、info#3B82F6。双模式规则Dark mode默认近黑底#0C0C0C卡片面#141414边框#262626。Light mode暖 stone 底#FAFAF9白色卡片stone 边框#E7E5E4强调色切换为 amber-600 以保证对比度。四、Spacing 与 Layout4px 基数、12 列网格与圆角分级间距Spacing基数4px。密度定位“舒适”——不拥挤不是 Bloomberg 终端式也不疏朗不是营销页式。阶梯2xs(2px) xs(4px) sm(8px) md(16px) lg(24px) xl(32px) 2xl(48px) 3xl(64px)。布局Layout策略仪表盘部分严格网格化落地页 hero 区走编辑感editorial排版。网格lg 断点以上 12 列移动端 1 列。内容最大宽度1200px6xl。圆角分级Border radiussm:4px、md:8px、lg:12px、full:9999px并按组件分配——组件圆角卡片/面板lg12px按钮/输入框md8px徽章/胶囊full9999px技能条sm4px五、Motion 与 Grain Texture只保留“帮助理解”的动效动效Motion原则最小功能主义——只保留辅助理解的过渡“仪表盘实时 feed 本身就是动效”。缓动enter 用ease-out具体曲线cubic-bezier(0.16,1,0.3,1)exit 用ease-inmove 用ease-in-out。时长micro(50-100ms)、short(150ms)、medium(250ms)、long(400ms)。动画元素白名单实时 feed 圆点脉冲2s infinite、技能条填充600ms ease-out、hover 状态150ms。颗粒纹理Grain Texture为整个页面叠加细微噪点营造材质感、防止“千篇一律的 SaaS 模板”感。实现约束非常具体Dark mode 不透明度 0.03Light mode 0.02用 SVGfeTurbulence滤镜作为 CSSbackground-image挂在body::after上pointer-events: none、position: fixed、z-index: 9999。六、源码级链路gstack 工具链如何自动消费 DESIGN.md以上 token 是静态规范DESIGN.md 在 gstack 中的真正威力在于它是多条工具链的输入。以下均为仓库源码可验证的事实。6.1 /design-consultationDESIGN.md 的生产者design-consultation/SKILL.md 的职责是“从零创建 DESIGN.md 作为项目的设计事实来源”。它的 frontmatter 中声明了 gbrain 上下文查询第一条就是直接以glob: DESIGN.md读取文件系统上的现有 DESIGN.md并以## Existing DESIGN.md (if any)渲染进上下文——也就是说每次咨询时技能都会先检查是否已有设计系统避免重复设计。README 中对/design-consultation的描述是从零构建你的设计系统、调研业界现状、提出有创造性的风险、并写出DESIGN.md。6.2 design CLI 的 extract 命令从设计稿反向写入 DESIGN.mddesign/src/commands.ts 注册了extract子命令Extract design language from approved mockup into DESIGN.md用法为extract --image approved.png。其实现位于 design/src/memory.ts调用链如下extractDesignLanguage(imagePath)将已批准的 mockup PNG 以 base64 形式发给 GPT-4o vision 接口要求只返回 JSON结构为colors / typography / spacing / layout / mood五字段见 ExtractedDesign 接口60 秒超时失败时回退到空结构defaultDesign()而不中断流程updateDesignMd(repoRoot, extracted, sourceMockup)写入仓库根目录的DESIGN.mdmemory.ts#L111文件已存在 → 若其中已有## Extracted Design Language标记段则替换该段否则追加到末尾文件不存在 → 创建新的# Design System文档每次写入都带日期与来源 mockup 文件名*Source: xxx.png*与本文开头 gstack 自己的 Decisions Log 表格是同一维护哲学设计决策必须留痕。CLI 分发逻辑在 design/src/cli.tscase extract分支先调extractDesignLanguage成功后updateDesignMd再把提取结果以 JSON 打到 stdout——即该命令对脚本和人都友好。6.3 design-to-codeDESIGN.md 作为实现约束design/src/design-to-code.ts 在从已批准 mockup 生成“实现提示词”时会先调用readDesignConstraints(repoRoot)读取 DESIGN.md 全文并截断到前 2000 字符memory.ts#L196-L203然后注入 promptExisting DESIGN.md (use these as constraints): ...。这意味着 DESIGN.md 同时服务于“生成阶段”与“代码阶段”无此文件时返回 null模型“explore wide”自由探索有此文件时视觉细节必须与既定系统对齐。与之呼应的是 design/src/brief.ts 中的DesignBrief接口其reference字段注释明确写着DESIGN.md excerpt or style reference text——生成 mockup 的 brief 结构里就为 DESIGN.md 预留了位置。6.4 评审与规划技能以 DESIGN.md 校准一切设计决策plan-design-review/SKILL.md 规定“DESIGN.md — if it exists, ALL design decisions calibrate against it”若存在所有设计决策都以它校准并在评审的 System Audit 维度检查其状态存在则“所有设计决策将按你声明的设计系统校准”不存在则标记为 gap 并建议先运行/design-consultation在生成设计变体时brief 由“计划描述 DESIGN.md 约束”拼装例如$D variants --brief 由计划与 DESIGN.md 约束组装的描述 --count 3 --output-dir ...。autoplan/sections/design-phase.md 的 Step 0 同样要求“Check DESIGN.md”且规则是“如果 DESIGN.md 存在且修复明显则自动修复设计系统对齐问题”。6.5 使用 design CLI 的最小实操路径从 design/src/cli.ts 的printUsage与runSetup可以确认完整用法# 1. 引导式 API key 配置 冒烟测试key 存到 ~/.gstack/openai.json0600 权限 $D setup # 2. 从已批准的设计稿提取设计语言并写回仓库根目录的 DESIGN.md $D extract --image approved.png # 3. 从已批准 mockup 生成结构化实现 prompt会读取 DESIGN.md 作为约束 $D prompt --image approved.png # 4. 从 brief 生成 UI mockup $D generate --brief ... --output /path.png # 5. 生成 N 个设计变体供评审 $D variants --brief ... --count 3 --output-dir /path/认证解析顺序为先读~/.gstack/openai.json其次OPENAI_API_KEY环境变量都没有则进入引导式 setupvision/生成类调用均依赖 OpenAI 图像权限。七、Decisions Log设计文档的维护约定gstack 的 DESIGN.md 末尾是决策日志每条决策记录日期、决策与理由DateDecisionRationale2026-03-21Initial design systemCreated by /design-consultation. Industrial aesthetic, warm amber accent, Satoshi DM Sans JetBrains Mono.2026-03-21Light mode amber-600amber-500 在白底上太亮/发灰amber-700 太棕/土。amber-600 是平衡点。2026-03-21Grain texture为平面深色表面增加材质感避免“通用 SaaS 模板”的同质化。这给出了 DESIGN.md 的第三种维护方式除人工编辑与extract自动追加外每个偏离默认判断的决策都要记录理由。三条记录正好对应本文的三个章节——初始系统、浅模式强调色权衡、噪点纹理——展示了“token 从哪里来”的完整叙事。八、小结如何在自己项目中落地这套模式结合 DESIGN.md 的结构与 gstack 工具链的消费方式一份可被 AI 工具链消费的设计系统文档应包含Product Context——产品是什么、给谁、所处赛道为所有 token 提供判断依据Aesthetic Direction——一句话美学方向 参考站点约束后续选择完整 token 表——字体含加载来源与displayswap、色彩含明暗双模式、间距、圆角、动效全部落到具体数值例外与材质细节——如 grain 纹理的具体 CSS 挂载方式Decisions Log——决策留痕表配合/design-consultation创建、$D extract从 mockup 自动追加、评审技能校准使用。gstack 仓库自身的 DESIGN.md 就是这套模式的示范样本仓库中的 design/、design-consultation/、plan-design-review/ 目录则提供了从“文档”到“自动化消费”的全部源码证据。【免费下载链接】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），仅供参考