初创团队如何构建最小可行设计系统
初创团队不需要完整的设计系统，但需要一套能够随产品演进的最低标准。
- 2025.08.30
本文来自我在初创团队和大公司中的设计实践，仅讨论 Web 平台，移动端可以作为参考。
为什么需要设计系统？
设计系统经常被理解为 Figma 中复杂的组件库和完整的说明文档。但对初创团队而言，它更实际的形态是代码：可以复用的 CSS 变量、组件和样式。
团队可以暂时没有完善的 Figma 文件和文档，但必须有能够交付给用户的代码。设计系统的作用，是为这些代码建立最低限度的一致性，让产品在持续迭代中不至于逐渐失去秩序。
初创团队需要什么样的设计系统？
结合我在 Zeabur 和腾讯的工作经验，一个最小可行的设计系统只需要覆盖几个基础部分。
颜色：系统的基础
颜色系统同时影响视觉一致性、开发效率和可访问性。一旦大量进入产品，后续调整会涉及许多组件和页面，因此需要较早确定基本结构。
Zeabur 的旧颜色系统对浅色主题支持不足，文本可读性有限，色阶也不容易扩展。重新设计这套系统耗费了不少时间。这个经历说明，颜色不需要一开始就完整，但需要为后续变化保留空间。
建立颜色系统时，需要回答几个问题：
- 品牌表达：颜色如何对应产品特性，并与 Logo 和整体气质保持一致？
- 命名规范：使用
$colorPrimary、$colorError一类语义名称，还是blue-500、gray-900一类原始色阶名称？后者通常更容易扩展，也更适合多主题。 - 颜色与色阶数量：当前需要多少颜色和色阶？未来是否需要插入新的色阶？灰色用于不同层级的背景和文本，通常需要更多层级。
- 多主题支持：如何组织 Light Mode 与 Dark Mode？未来是否需要支持客户品牌主题？
- 可访问性：文本与背景的对比度是否符合 WCAG 等标准？
颜色系统的价值，不在于定义尽可能多的 Token，而在于减少未来修改时的连锁成本。
圆角与图标：一致的轮廓
圆角和图标共同决定产品的视觉轮廓。组件的圆角半径，应与图标端点和转角的处理保持相近的倾向。
- 圆角：较大的圆角通常显得柔和，较小的圆角或直角更显克制。具体选择不是关键，稳定使用同一组规则更重要。
- 图标：项目早期可以直接选择风格统一的开源图标库，例如 Lucide、Feather Icons 或 Tabler Icons，避免混用不同来源和风格的图标。
基础控件：核心交互
初创团队不需要在开始时实现 Ant Design 或 Material Design 那样完整的组件集合。先做好高频控件，通常已经可以覆盖 70%–80% 的场景。Linear 的做法可以作为参考。
基础控件通常包括：
- 按钮：Primary、Secondary、Ghost 等状态与必要的尺寸；
- 输入框：Input 与 Textarea；
- 选择控件：Checkbox、Radio Button 和 Switch；
- 反馈组件：Modal、Dialog、Notification 和 Toast；
- 产品自身高频使用的组件。
这些控件承担了大部分直接交互。先处理清楚状态、反馈和可访问性，再逐步扩展组件数量。
排版与间距：信息分层
初期的排版系统不需要复杂。它至少应区分三类文本：
- 标题（Heading）：用于页面或区块标题，可以先定义 1–2 个层级，例如
20pxBold； - 正文（Body）：用于段落、描述和常规内容，例如
14pxRegular； - 辅助文本（Subtle / Secondary）：用于 Placeholder、Hint 或禁用状态，字号可以与正文相同，但视觉强度更低。
随着信息层级增加，再扩展 H1、H2、H3，区分 Body Large 与 Body Small，并增加 Link、Caption、Button Text 等功能性样式。
间距可以从一个基础单位开始，例如 8px，再定义 8px、16px、24px、32px 等梯度。它的主要作用是减少任意值，让设计师和工程师不必反复决定使用 10px 还是 12px。
动效（可选）
初期的动效系统只需要定义时长和缓动曲线。目标是让不同组件具有相近的反馈节奏。
- 时长
- 快速：
100ms–150ms，用于 Hover、图标高亮等即时反馈； - 中速：
200ms–300ms，用于卡片展开、收起或 Modal 出现； - 慢速：
400ms–500ms，用于侧边栏等较大区域的切换。
- 快速：
- 缓动曲线
- 标准曲线：一条通用曲线，用于大部分界面过渡；
- 强调曲线：用于少数需要突出变化的场景，初期可以不定义。
其他建议
- 从代码开始：先在代码中建立颜色变量和基础组件，再持续迭代。
- 避免过度设计：Figma 中只需建立当前会被使用的样式和组件，不必提前枚举所有变体。
- 持续抽象：当一种模式在产品中重复出现，再把它沉淀为系统的一部分。
对初创团队而言，设计系统不是一个需要完成的项目，而是一套降低重复决策和交付偏差的基础设施。它的目标是让团队更快、更一致地交付产品。