狸想岛 · AI 实战学习社区

🎯 学 gstack 的设计系统从零到一构建：不是从模板库选一个现成的设计系统，而是根据你的产品定位、目标用户和品牌愿景，从第一性原理出发构建完整的设计系统——颜色、字体、间距、组件、交互模式。 ⏱️ 预计时间：25 分钟

[!tip] 初学提示：第一次构建设计系统时，建议先聚焦"颜色系统"和"字体系统"两个最直观的部分，再逐步深入到间距、网格和组件设计。

[!quote]- 📖 原Skill精要 技能名称：design-consultation（从零搭建维度） 核心功能：与 [[L6-09-设计系统咨询|design-consultation]] 共享同一个 Skill，本课聚焦其从零到一构建完整设计语言体系的对话式工作流——不是从模板库选现成方案，而是根据产品定位、目标用户和品牌愿景，从第一性原理构建颜色、字体、间距、组件、交互模式。 所属体系：gstack 虚拟工程团队 协作关系：产出 DESIGN.md 后为 [[L6-14-设计系统哲学|设计系统哲学]] 和 [[L6-42-设计到代码|design-html]] 提供设计约束源

§1 课程概览

[!info] 白话小课堂 一句话：不给你的产品套现成的 UI 模板（Material Design / Tailwind UI），而是问清楚你的用户是谁、品牌给人什么感觉，从零推导出专属于你的颜色、字体、间距、组件。

为什么重要：套模板的后果是——你的护肤品官网看起来和别人的 SaaS 后台一模一样。品牌色不是"选个好看的颜色"，而是从品牌个性推导出来的视觉信号。森林绿传达"科学 + 自然"，紫色传达"神秘 + 创意"，橙色传达"活力 + 可及"——用错了颜色的品牌就像用错了语气说话。

核心心法：第一性原理构建。不从"有什么设计系统可以参考"出发，而从"你的产品是什么，用户是谁，品牌给人什么感觉"出发——每一个设计决策都回溯到这三个根本问题。

§2 结构拆解

核心特征

管理对象：完整设计语言体系（颜色、字体、间距、组件、交互模式）
核心原则：第一性原理推导 —— 不依赖现有模板，从产品定位和用户画像推导
关键设计：
- 对话式构建：6 步对话逐步收敛（产品 → 颜色 → 字体 → 间距 → 组件 → DESIGN.md）
- 颜色心理学映射：品牌个性关键词 → 色相/饱和度/明度的具体选择
- 单一事实来源：DESIGN.md 作为所有后续设计决策的约束源
- 业务组件优先：不仅生成通用组件（Button/Card），还生成业务特有组件（IngredientCard）

通用结构

输入层： → 产品定位（产品是什么？解决什么问题？） → 目标用户画像（年龄、性别、使用场景、设备偏好） → 品牌个性（专业/有趣/奢华/极简/温暖/科技） → 竞品参考（竞品设计系统的优缺点） ├── Step 1: 产品定位 → 品牌个性关键词 ├── Step 2: 颜色系统推导 │ ├── Primary（品牌主色）← 品牌个性映射 │ ├── Secondary（辅助色）← 色轮关系（互补/类似） │ ├── Neutral（中性色）← 灰度阶梯 50-900 │ └── Semantic（语义色）← success/error/warning/info ├── Step 3: 字体系统 │ ├── 标题字体 + 正文字体 + 等宽字体 │ ├── 字体层级（h1-h6 + body + caption + overline） │ └── 字重分配（regular/medium/semibold/bold） ├── Step 4: 间距与布局 │ ├── 间距 scale（4px 或 8px 基准） │ ├── 网格系统（列数、gutter、margin） │ └── 响应式断点 + content max-width ├── Step 5: 组件设计 │ ├── 通用组件（Button / Input / Card / Modal / Toast） │ └── 业务特有组件（品类特定的信息展示组件） └── Step 6: 输出 DESIGN.md └── 被 design-review、design-html、design-shotgun 引用

§3 设计系统咨询的工作流

design-consultation 的对话式构建

Step 1: 产品定位

→ 产品是什么？解决什么问题？ → 目标用户是谁？（年龄、性别、使用场景、设备偏好） → 品牌个性？（专业/有趣/奢华/极简/温暖/科技） → 竞品是谁？他们的设计系统有什么优缺点？

Step 2: 颜色系统

→ Primary（品牌主色）→ 从品牌个性推导 → Secondary（辅助色）→ 互补或类似 → Neutral（中性色）→ 灰度，用于背景和文本 → Semantic（语义色）→ success/error/warning/info → 每种颜色生成 50-900 的色阶

Step 3: 字体系统

→ 标题字体 + 正文字体 + 等宽字体 → 字体层级（h1-h6 + body + caption + overline） → 字重分配（regular/medium/semibold/bold）

Step 4: 间距与布局

→ 间距 scale（4px 或 8px 基准） → 网格系统（列数、gutter、margin） → 最大宽度（content max-width） → 响应式断点

Step 5: 组件设计

→ Button (primary/secondary/ghost, sizes) → Input (text/select/textarea, states) → Card (padding, shadow, radius) → Modal / Dialog / Toast / Tooltip

Step 6: 输出 DESIGN.md

→ 完整的 Markdown 设计系统文档 → 被 design-review、design-html、design-shotgun 引用 → 所有后续设计决策的单一事实来源

§4 电商 Skill 案例：DTC护肤品牌从零搭建设计系统

🛒 实战案例：某DTC护肤品牌（中高端定位，线上直销为主）使用/design-consultation从第一性原理构建完整设计系统。品牌个性"科学、透明、优雅"——不是奢侈品而是专业感。目标用户25-40岁关注成分和功效的都市女性。竞品参考The Ordinary(成分透明)、Drunk Elephant(色彩鲜明)、Glossier(社区感)。

Step 1-2 品牌个性→设计语言映射：品牌关键词"科学"→设计语言：数据可视化风格成分表、清晰结构、DM Mono等宽字体用于成分浓度标注；"透明"→大量留白、诚实的产品摄影(无过度修图)、价格完整展示(含税)；"优雅"→Playfair Display优雅衬线标题、温暖但不花哨的配色、8px基准间距的呼吸感。差异化定位——避免"奢侈品"的深色+金色/衬线字体组合，也避免"药妆"的蓝白配色+粗体无衬线。

Step 3-4 设计系统核心理念与具体规范：设计哲学——"成分即主角"（Ingredient-First Design），每个产品页的核心视觉焦点是成分表和功效数据而非模特或场景图。具体规范——品牌色Primary #2D6A4F(森林绿——自然+科学)+Secondary #F4A261(温暖珊瑚——人性+温暖)+Neutral #F8F9FA~#212529；字体Headings Playfair Display(优雅衬线)+Body Inter(清晰无衬线)+Accent DM Mono(成分表/数据展示)；间距8px scale(4/8/16/24/32/48/64)；圆角4px(传达精确感，与"科学"关键词匹配)。

Step 5 特色组件设计：IngredientCard(成分名称+浓度百分比+功效说明+临床证据等级——用DM Mono展示浓度数据，视觉层级清晰)、BeforeAfter(使用前后对比slider——成分功效的可视化证明，与品牌"透明"承诺一致)、ProductRoutine(早晚护肤流程步骤——1-2-3数字引导+产品缩略图，解决护肤流程选择困难)、ClinicallyProvenBadge(临床验证徽章——引用研究+样本量+显著性水平，将"科学"品牌定位转化为可验证的UI元素)。

Step 6 输出DESIGN.md：生成完整Markdown设计系统文档→被design-review(审查品牌符合度)、design-html(生成符合设计系统的商品页)、design-shotgun(约束视觉探索方向)引用→成为所有后续设计决策的单一事实来源(Single Source of Truth)。实际应用效果——跨页面品牌一致性评分从3.2→8.7/10，新页面设计耗时从平均3天→4小时(设计系统预定义90%的决策)。

🔑 启示：design-consultation的"第一性原理"方法——不是从现成模板库选择配色方案，而是从品牌DNA推导设计系统——让品牌个性成为设计决策的依据。"成分即主角"的设计哲学不是凭空想出来的——它来自对品牌"科学+透明"定位的深层解读：如果品牌建立在成分功效上，那么设计系统的视觉焦点应该是成分表而非模特图。这个推导链确保了设计系统不是"好看的皮肤"而是"品牌的视觉化表达"。

[!info] 参考来源设计系统构建方法论参考了 Design Systems Handbook (DesignBetter) 和 Atomic Design (Brad Frost) 的组件化设计理念。

§5 掌握检验

Q1：design-consultation 从"第一性原理"构建设计系统——这意味着什么？

A) 从现成的 UI 组件库（如 Material Design）中选择配色方案
B) 从产品定位、目标用户和品牌个性出发，推导出颜色、字体、间距——而非从模板库选择
C) 使用 AI 自动搜索互联网上最好看的设计系统
D) 复制竞品的设计系统并根据需要微调

Q2：DESIGN.md 作为"单一事实来源"（Single Source of Truth），被哪些 gstack Skill 引用？

A) 只被 design-review 引用
B) 被 design-review（设计审查）、design-html（代码生成）、design-shotgun（视觉探索）引用——所有后续设计决策都从 DESIGN.md 获取约束
C) 只被开发团队手动阅读
D) 被所有 gstack Skill 引用

Q3：design-consultation 的 Step 1（产品定位）中需要回答"品牌个性"（专业/有趣/奢华/极简/温暖/科技）。请问：品牌个性如何"推导"出具体的颜色选择？以 DTC 护肤品牌为例——"科学、透明、优雅"的个性为什么推导出了 #2D6A4F（森林绿）作为主色，而非紫色或橙色？请从颜色心理学角度解释每个个性关键词对应的颜色选择逻辑。

Q4：间距 scale 选择 4px 基准 vs 8px 基准有什么实际影响？如果一个设计系统选择了 4px 基准，它的可用间距值是 [4, 8, 12, 16, 20, 24, 28, 32...]，如果选择 8px 基准，可用间距是 [8, 16, 24, 32, 48, 64...]。哪种基准提供了更细的间距控制？哪种基准更容易在团队中保持一致？为什么？

Q5：DTC 护肤品牌的设计系统中，特色组件（IngredientCard、BeforeAfter、ProductRoutine）不是通用的 Button/Card/Input——而是"业务特有组件"。为什么设计系统需要包含业务特有组件，而不仅仅是通用 UI 组件？如果设计系统只有通用组件，前端开发者在实现产品详情页时需要做什么额外的决策？

Q6：design-consultation 生成了完整的 DESIGN.md 后，如何验证这个设计系统在"实际页面中"的效果？如果所有颜色、字体、间距在纸面上看起来完美，但应用到实际电商首页后视觉混乱——这是设计系统本身的问题还是应用的问题？验证-修正的迭代过程应该如何在 design-consultation 和 design-review 之间进行？

§6 答案

点击查看答案

Q1：B —— 第一性原理构建 = 不依赖现有的设计系统模板，而是从根本问题出发：①你的产品是什么？（功能）②你的用户是谁？（受众）③你的品牌给人什么感觉？（情感）。

Q2：B —— DESIGN.md 是设计系统的"宪法"——design-review 用它检查页面是否遵守规范，design-html 用它确保生成的代码使用正确的颜色/字体/间距，design-shotgun 用它生成符合品牌约束的视觉方向（而非随机的配色组合）。

Q3：颜色推导逻辑：科学 → 蓝色/绿色系（实验、数据、自然——"科学"的颜色是冷静的、客观的，不是热情的红色或神秘的紫色）；透明 → 干净的浅色中性调（白底、高对比度——"透明"意味着不隐藏，深色背景传达神秘感而非透明感）；优雅 → 低饱和度的主色（森林绿而非荧光绿——"优雅"排斥过于鲜艳和廉价的色彩，饱和度过高 = 塑料感/廉价感）。三个关键词的交集：自然（绿）+ 干净（浅中性）+ 低饱和（优雅）= #2D6A4F（深沉的森林绿）。紫色不符合"科学"（紫色传达神秘而非客观），橙色不符合"优雅"（橙色传达活力和可及，这对于 DTC 护肤品太"超市"了）。

Q4：4px 基准：更细的间距控制（可以指定 4px、12px、20px 等非 8 的倍数值），适合精细的设计调整——但容易导致团队间的不一致（设计师 A 用 12px，设计师 B 用 16px 在同样的场景——"看起来差不多但不一样"导致累计偏差）。8px 基准：间距值更少但更清晰（只有 8/16/24/32/48/64），团队更容易统一——"卡片间距永远用 24px"比"卡片间距在 20-28px 之间视情况而定"更容易执行。8px 在实践中是更好的默认选择——牺牲了极少的灵活性但换取了高得多的团队一致性。大多数成熟的设计系统（Material Design、Shopify Polaris）使用 8px 或 4px 基准，但 8px 是现代主流。

Q5：业务特有组件的价值：通用组件（Button/Card/Input）告诉你"交互模式"——所有电商 App 的按钮都差不多。业务组件（IngredientCard）告诉你"信息架构"——一个 DTC 护肤品的成分卡片应该显示成分名称 + 浓度 + 功效说明，这是这个品类的特有需求。如果只有通用组件 → 前端开发者需要：①理解业务的"成分信息"意味着什么（需要产品经理解释）；②设计每个业务特有元素的布局和交互（每次都是新设计，和上次可能不一致）；③重复造轮子（每个页面都独立设计"成分展示"）。业务组件将"业务知识"固化到设计系统中——降低了前端开发者的认知负担并保证了跨页面的一致性。

Q6：验证方法：①生成一个"设计系统展示页"——将 DESIGN.md 中所有组件（Button/Input/Card + 业务组件）放在一个页面中——检查彼此之间的视觉协调性（颜色搭配、间距节奏、字体层级）。②生成一个"真实内容页面"——使用设计系统构建一个完整的电商首页（带真实商品数据）——检查设计系统在"有真实内容非理想布局"时是否仍然统一。问题归因：如果展示页中各个组件看起来协调但真实页面中混乱 → 这是"应用问题"——设计系统没问题，但特定页面的信息架构、内容密度、图片风格与设计系统不匹配 → 需要 design-review 诊断具体页面的布局问题而非修改设计系统。迭代过程：design-consultation（构建设计系统）→ design-html（应用生成页面）→ design-review（审查页面的设计系统遵守情况）→ 如果 design-review 发现系统性问题（如"对比度在 3 个页面中都不合格"）→ 回到 design-consultation 调整色彩梯度 → 重新生成 → 重新审查。

（5/6 通过）

L6-43：设计系统搭建咨询 —— 从零到一构建你自己的设计语言体系