狸想岛 · AI 实战学习社区

🎯 学 gstack 的设计哲学与 DESIGN.md 规范：理解工业/实用主义美学的工程设计基础——为什么选择工业风、为什么色彩克制、为什么等宽字体是品牌个性的载体。 ⏱️ 预计时间：30 分钟

[!quote]- 📖 原Skill精要 技能名称：设计系统哲学（源自 gstack DESIGN.md） 核心功能：gstack 的工业/实用主义设计哲学——函数优先、数据密集、等宽字体作为品牌个性的载体。涵盖美学方向（工业/实用 vs 编辑/杂志 vs 俏皮/品牌）、字体系统（展示/正文/等宽/代码四层字体分工）、色彩系统、间距系统、动效哲学。DESIGN.md 作为项目设计真相源。 所属体系：gstack 虚拟工程团队 协作关系：为 [[L6-09-设计系统咨询|design-consultation]] 和 [[L6-43-设计系统搭建咨询|design-consultation（进阶）]] 提供哲学基础

1. 课程概览

💡 白话小课堂：当一个设计师说"这个按钮应该用蓝色"时，你追问"为什么是蓝色？"，对方的回答通常只有两种——"因为好看"或"因为苹果也用蓝色"。这两种答案的工程价值都是零。gstack 的设计系统哲学就是针对这个问题：每一个设计决策——从为什么选琥珀色而不是蓝色、为什么等宽字体是品牌个性而非"代码区专用"、到为什么加 0.03 不透明度的噪点——背后都有工程推理链。这堂课把 DESIGN.md 从"风格指南"提升为"设计宪法"：一张纸定义产品的完整视觉语言，并且每一个选择都附带了"为什么"的决策日志，让 6 个月后的你（或新成员）不会问"为什么选了那个颜色？"

2. DESIGN.md 是什么

Design Source of Truth

DESIGN.md 不是"风格指南"——它是项目的设计真理源。

一张纸定义了一个产品的完整视觉语言： → 美学方向（工业/实用、编辑/杂志、俏皮/品牌……） → 字体系统（展示字体、正文字体、等宽字体、加载策略、比例尺） → 色彩系统（主色、辅色、语义色、中性色、亮/暗模式策略） → 间距系统（基准单位、密度、比例尺） → 布局策略（网格方法、最大内容宽度、圆角层级） → 动效策略（缓动函数、时长、触发条件） → 决策日志（何时、做了什么决定、为什么）

当 DESIGN.md 存在时： → design-consultation 更新它而不是创建新的 → design-review 以它为基准评估视觉一致性 → design-shotgun 用它约束变体生成 → design-html 从中提取设计 token

一张 DESIGN.md = 所有下游设计工具共享同一个约束集。

3. gstack 的设计选择解构

以 gstack 自带的 DESIGN.md 为例，拆解每一个设计决策的工程推理：

美学方向：工业/实用主义

→ "功能优先，数据密集，等宽字体作为个性字体" → 为什么？CLI 工具的网站应该是"工具有多好"的诚实表达 → 对标的不是设计奖项，是 Linear（暗色+克制）、Warp（温暖的强调色）

字体选择：Satoshi + DM Sans + JetBrains Mono

→ 展示：Satoshi（几何 + 温暖，有辨识度的字母形状） → 正文：DM Sans（干净、可读、比几何字体略友好） → 数据/代码：JetBrains Mono（支持等宽数字，这是关键功能需求） → 三个字体各有角色，互不重叠 → JetBrains Mono 不是藏起来的——它是网站个性的一部分

色彩：克制的琥珀色

→ 琥珀色 #F59E0B = "终端光标的颜色" → 强调色是"稀有且有意义"的——仪表盘数据获得色彩，chrome 保持中性 → 暗色模式是默认（近黑底 + 面卡片 + 微妙的边框） → 明色模式是暖石色底（#FAFAF9） → 语义色：成功 #22C55E，警告 #F59E0B（与主色相同=有意为之），错误 #EF4444

间距：4px 基准，舒适密度

→ 数据仪表盘不需要 Bloomberg Terminal 的拥挤 → 也不需要营销网站的宽松 → "刚好"——足够呼吸，又不浪费空间

布局：仪表盘的网格 + 着陆页的编辑排版

→ 12 列网格在 lg+，单列在移动端 → 着陆页的第一视口不是网格——是一幅"海报"构图 → 最大内容宽度 1200px

动效：最小-功能

→ 仪表盘的实时 feed 本身就是动效 → 额外的动画只在改善理解时才出现 → 50-250ms 的微动效（hover、加载、过渡）

纹理：颗粒质感

→ 全页面微弱的噪点叠加（暗色模式 0.03 不透明度） → SVG feTurbulence 滤镜作为 body::after 的 CSS background-image → 给扁平的暗色表面增加"物质感" → 防止"通用 SaaS 模板"的同质感

独有的装饰策略

→ 不做"美丽图片 + 弱品牌"的陷阱 → 工具本身——CLI 的输出、等宽字体的排版——就是装饰 → 相信自己的工具足够有趣，不需要额外装饰来填补空白

4. 设计系统的"为什么"层

设计系统不只是"选了什么"——而是"为什么这样选"。这些推理链条是 DESIGN.md 的真正价值：

字体选择的工程推理

→ "为什么不用 Inter？"——因为 Inter 是"没做选择"的选择 Inter 是好字体，但因为 AI 默认推荐它，使用它就等于说"我没思考字体" → "为什么等宽字体作为个性字体？"——因为 CLI 工具的品牌 = 它的终端输出把等宽字体用在标题、标签、数据中 = 告诉用户"我们是一个 CLI 工具，我们为此骄傲" → "为什么三个字体？"——≤2 是理想，3 是上限每个字体都有明确的角色：展示 ≠ 正文 ≠ 数据

色彩选择的工程推理

→ "为什么是琥珀色而不是蓝色？"——蓝色是科技产品的"默认强调色" 用蓝色 = 看不出任何设计意图。琥珀色 = 温暖 + 有辨识度 + "终端光标" → "为什么暗色模式是默认？"——开发者是主要受众。开发者在暗色环境中工作。 → "为什么警告色和主色相同？"——不是 bug，是刻意的一致性 gstack 的主色就是"注意力色"——警告也需要注意力

纹理的工程推理

→ "加噪点的意义？"——纯色暗色背景 = 每一个 SaaS 模板的样子 0.03 不透明度的噪点 = 肉眼几乎看不见，但心理上感知到"这不是模板" → 这是一种设计策略：用最小成本打破同质感

🔑 核心秘诀：设计系统里最重要的不是"选了 Inter 还是 Satoshi"，而是"为什么选"。

5. 工业/实用主义的深层含义

Industrial/Utilitarian as a Design Philosophy

"工业设计"在代码产品的语境中意味着什么：

功能暴露结构 → CLI 的输出不应该藏在"漂亮"的包装后面 → 终端是诚实的——命令进去，输出出来 → 网站继承同样的诚实：数据是主角，装饰是配角
克制产生意义 → 当强调色只出现在 5% 的界面中时，每次出现都是事件 → 如果到处都有颜色，就没有一处有颜色
排版胜于装饰 → 一个好的字体的质感比 10 个装饰元素更有分量 → gstack 把等宽字体当装饰用——这是逆向思维
工具性是品牌 → 不是"我们做的东西很好看" → 而是"我们做的工具很好用，好到它本身就很好看"

与主流设计潮流的对比

→ SaaS 模板：中心化、泡泡圆角、渐变、图标网格 → gstack 拒绝所有这些 → 硅谷极简：白色、Inter、留白 → gstack 用暗色、别致字体、密度 → gstack 的美学是对"AI 生成的 SaaS 模板风格"的刻意对抗

⚠️ 避坑指南： "克制产生意义"可能是设计系统哲学里最重要的原则。如果你有 50 个按钮全是蓝色，蓝色就没意义了；如果你有 50 个按钮其中 3 个是琥珀色，用户就知道"琥珀色 = 需要我注意"。

6. 设计系统的演化与决策日志

DESIGN.md 不是静态文档

决策日志是设计系统的"git log"： → 每个设计决策都有一个日期、一个决定、一个理由 → "2026-03-21: 亮色模式改用 amber-600" → amber-500 在白色背景下太亮/太浅 → amber-700 又太棕/太深 → amber-600 是刚好 → 这个日志的价值：6 个月后回看，你不会问"为什么选这个颜色？"

更新 DESIGN.md 的时机： → design-consultation：创建或更新整个系统 → design-review 的 Phase 2：提供从实时网站提取为 DESIGN.md → design-html 的 Step 5：从生成的 HTML 中提取 token → 创建 DESIGN.md → 任何"这次我们换了个字体/颜色/间距"的变更都应该追加到决策日志

DESIGN.md 被谁读取： → Claude Agent（design-consultation、design-review、design-shotgun、design-html） → Codex（design-review 的外部验证） → 人类开发者（"我们的主色是什么来着？"） → 新的 AI 会话（"这个项目用的是 Deep Space 暗色主题对吗？"）

7. 结构拆解：设计系统哲学 Skill 模板

设计系统哲学型 Skill 模板

核心特征

→ 管理对象 = 产品的设计真理源（DESIGN.md）—— 一站式视觉语言定义 → 核心原则 = 工业/实用主义美学（功能暴露结构、克制产生意义、排版胜于装饰）+ 工程推理链（每个选择都有"为什么"） → 关键设计 = 七层设计系统（美学方向/字体/色彩/间距/布局/动效/纹理）+ 决策日志 + 跨工具共享约束

通用结构

DESIGN.md as Source of Truth（DESIGN.md 作为设计真理源）

定义产品完整视觉语言：美学 / 字体 / 色彩 / 间距 / 布局 / 动效 / 纹理
被所有设计工具共享：consultation、review、shotgun、html
决策日志记录每个设计选择的"什么时候、做了什么、为什么"

Seven-Layer Design System（七层设计系统）

美学方向：工业/实用 | 编辑/杂志 | 俏皮/品牌
字体系统：展示字体 / 正文 / 等宽 / 代码（四层分工、≤3 种字体、角色不重叠）
色彩系统：主色 / 辅色 / 语义色（成功/警告/错误）/ 中性色 / 亮暗双模式
间距系统：基准单位（4px）、密度（舒适而非拥挤）、比例尺
布局策略：网格方法、最大内容宽度（1200px）、圆角层级
动效策略：最小-功能原则、50-250ms 微动效、缓动函数
纹理与装饰：颗粒质感（0.03 噪点）、工具本身即装饰

Engineering Reasoning Chain（工程推理链）

每个设计选择必须回答"为什么"——不只是"选了什么"
字体：为什么不用 Inter（默认=没思考）、为什么等宽是品牌（终端工具性）
色彩：为什么不用蓝色（默认科技色）、为什么暗色默认（开发者受众）
纹理：为什么加噪点（用最小成本打破 SaaS 模板同质感）

Decision Log（决策日志）

设计系统的"git log"：每个决策 = 日期 + 决定 + 理由
防止"信息丢失型重做"——6 个月后不追问"为什么选这个颜色"
更新时机：consultation 创建、review 提取、html 导出、任何变更追加

8. 电商 Skill 案例：电商品牌设计系统的设计哲学

🛒 实战案例：一个从零起步的DTC服饰品牌（1年历史，SKU 200+，独立站+小程序双渠道）决定建立自己的设计系统。创始人说"我们现在的品牌页面东拼西凑——独立站用的是一个买来的模板（白色极简），小程序是另一个模板（卡片风），两边的颜色、字体、间距都不一样，用户从公众号文章点进小程序买东西，经常怀疑'是不是同一个品牌'"。

design-system-philosophy先确定设计哲学方向再建立系统，而非直接搬一套现成Token：

产品类型分析：该品牌的产品=电商独立站+小程序商城+公众号推文+包装盒+物流箱。两端的张力——营销端（独立站、公众号）需要"品牌故事和情感连接"，工具端（小程序商城、订单页）需要"高效转化和信任建立"。单一哲学无法覆盖，需要核心哲学+情境适配方案。

核心哲学：温暖的功能主义（Warm Functionalism）。功能主义=信息层级清晰、商品信息无歧义、支付路径无障碍。温暖=不是冰冷的Amazon式效率工具，而是有人情味的品牌感。品牌关键词——"在城市里寻找自然纤维"（品牌定位是天然材质+现代设计）。

哲学四原则的电商化翻译：(1)功能暴露结构——商品详情页的核心信息（价格/材质/尺码）应该是视觉上最强信号，而不是"品牌故事"抢C位；(2)克制产生意义——全站只有一种强调色（#B8753E暖棕铜色，品牌色），出现在"加入购物车"按钮和价格标签上，用户条件反射知道暖棕铜色="可以行动"；(3)排版胜于装饰——不做渐变、不做阴影、不做装饰图。产品本身的质感和裁片细节是最好的"装饰"；(4)工具性是品牌——用户记住的不是"这个网站真好看"，而是"我3分钟就找到了想要的亚麻衬衫并下单了"。

暗色模式决策：独立站不支持暗色模式（发现85%的用户在白天浏览且品类是服饰需要准确颜色呈现），但小程序订单管理页面支持暗色模式（商家端晚上处理订单的场景），两端的差异化决策统一在同一个哲学下——"什么时候暗色真正解决问题，什么时候亮色更好"。

决策日志嵌入：设计系统中的每个重要选择都配决策日志——如"2025-09-12选择#B8753E暖棕铜色为主强调色，理由：测试了5种强调色（薄荷绿/珊瑚橙/深蓝/暖棕/黑色），暖棕在女性用户好感度上得8.3分（其他4.2-6.8分），且与品牌关键词'天然纤维'语义一致"。

落地效果：设计系统上线3个月后，跨渠道视觉一致性评分从2.8/10提升到8.5/10。"用户怀疑是不是同一个品牌"的反馈从月均15条降到0条。但最关键的数据——小程序加购完成率从57%提升到68%（+11pp），因为一致的按钮颜色和位置让用户跨渠道时的认知摩擦几乎为零。

🔑 启示：设计系统的哲学不是"美学说明书"——是一套决策原则。当未来有人提出"要不要在首页加个渐变动效"时，哲学文档替你回答："不做装饰，不做渐变，排版胜于装饰。"——这就是哲学的实际力量。

9. 掌握检验

Q1：工业/实用主义设计哲学中，"功能暴露结构"的具体含义是什么？

A) 所有功能都要用文档说明
B) CLI 的输出应该作为界面的装饰元素，不被漂亮包装隐藏
C) 产品的代码结构必须开源
D) 每个按钮都要标注它的功能

Q2：gstack 选择琥珀色作为主强调色的工程推理中，以下哪一项是正确的？

A) 琥珀色是 AI 默认推荐的强调色
B) 琥珀色 = "终端光标的颜色"，温暖且有辨识度，而蓝色是"没做选择"的默认科技色
C) 琥珀色在所有屏幕上的对比度最高
D) 琥珀色是创始人最喜欢的颜色

Q3：在字体选择的"角色分离"原则中，等宽字体（JetBrains Mono）为什么不能只是"藏起来"的代码字体，而必须成为网站个性的一部分？

Q4：在商家后台案例中，为什么强调色从绿色改为琥珀色后"漏处理率降低 32%"，请从"语义颜色的认知心理学"角度解释——为什么绿色对于"待处理"事项反而是误导？

Q5：纹理策略（0.03 不透明度的全页面噪点叠加）的目的不是"让用户注意到纹理"，而是"让用户不会注意到'这是模板'"。这体现了一种什么样的设计策略？请对比这种策略与"加一个大的装饰性 hero 图"在效果上的区别。

Q6：决策日志的价值不仅在于记录"选了什么"，更在于记录"为什么"。假设 6 个月后你回看 DESIGN.md 发现强调色是 #F59E0B 但没有记录理由——作为一个新团队成员，你会面临什么风险？请举出一个具体场景。

10. 答案

点击查看答案

Q1：B —— 工业/实用主义的核心信条是：工具的功能本身就是设计。

Q2：B —— 琥珀色 = 终端光标的颜色 + 温暖 + 有辨识度。

Q3：如果等宽字体只藏在代码块中，它只是一个"工具字体"。但如果把它用在标题、标签、数据展示中，它就成为了"品牌性格的载体"——用户看到等宽字体排版就知道"这是一个 CLI 工具，他们为此骄傲"。角色分离的精髓不是"不同地方用不同字体"，而是"每种字体承担不同的表达使命"——等宽字体承担的使命是"工具性作为品牌"。

Q4：绿色的语义认知是"完成/安全/通过"——看到绿色，大脑自动关联"这件事已经解决了"。对于"待处理"事项这是致命误导：商家扫一眼看到绿色的标签，下意识认为"没问题"就跳过了——跳过的恰恰是需要处理的订单。琥珀色的语义认知是"注意/需要关注"——不紧急（不是红色警报），但也不已完成（不是绿色）。商家看到琥珀色会停一下："这个需要我做什么？"——这正是待处理事项需要的注意水平。

Q5：这是一种"潜意识差异化"策略。0.03 不透明度的噪点肉眼几乎看不见——用户不会说"这个网站有噪点纹理好酷"，但他们的潜意识会感觉"这个页面不是模板"。对比大装饰 hero 图：显性的差异化（"看，我们有个很酷的图"）容易被复制也容易过时；潜意识的差异化（"说不清为什么，但这个网站感觉不一样"）更难被复制，因为用户和竞争者都说不清差异到底在哪。最有效的差异化往往在可察觉与不可言说之间。

Q6：风险场景——新设计师觉得 #F59E0B "太暗/太黄"，建议换成更亮的橙色 #FF9500。如果没有决策日志："换吧，试试看"；然后用户反馈"这些按钮上的字看不清了"，再花 2 周排查、回退、重新测试；如果当初有记录"经过一组合适的对比度测试，选择了在暗色背景 #0F1117 上满足 AA 对比度且保持温暖感的 #F59E0B"——新成员就能理解这个选择不是随机的，背后有工程约束。决策日志的价值在于防止"信息丢失型重做"。

（5/6 通过）

L6-14：设计系统哲学 —— 理解为什么"好看"不是拍脑袋决定的