当我说"设计系统"时，你想到的是什么？
大概率是一堆按钮、颜色、字体、间距的集合。一个组件库。一个 Figma 文件。一堆设计师和前端工程师共同维护的"UI 积木"。
这个理解没错，但太狭隘了。就像你说"一栋房子"的时候，只想到了砖头和水泥。
设计系统真正的价值，不是"帮你更快地画 UI"，而是帮你做更好的决策。它是一套决策框架，记录了你对产品设计的所有理解和判断——什么情况下用什么颜色、什么情况下弹什么提示、什么情况下该怎么做。不是"怎么画"，而是"为什么这样画"。
组件库只是设计系统的冰山一角
我最早做工具站的时候，根本没有"设计系统"的概念。每一个工具页面都是独立设计的——颜色自己选，按钮自己画，布局自己排。结果就是：204 个工具，至少有 30 种不同的按钮样式、20 种不同的间距标准、15 种不同的灰色。
每一个页面单独看，都还行。但当它们放在一起，用户一眼就能看出"这个网站没有章法"。不是因为颜色不好看，而是因为不一致——这个按钮圆角 4px，那个按钮圆角 8px；这个页面用蓝色作为主色，那个页面用绿色。用户说不清楚哪里不对，但他们能感觉到不专业。
所以我开始做"组件库"：统一按钮样式、统一颜色系统、统一字体层级。做了之后，效果立竿见影——页面看起来整洁多了，开发速度也快了。
但很快，我遇到了新的问题：虽然组件统一了，但决策没有统一。
举个例子：当用户操作失败时，我该弹出什么？是用 Toast 提示"操作失败"，还是用模态框提示"操作失败，请重试"，还是直接在输入框旁边显示红色错误文案？我用组件库解决了"怎么画"，但我没有解决"什么时候用哪个"。
这就是组件库和设计系统的关键区别：组件库告诉你怎么做，设计系统告诉你怎么选。
设计系统的三个层次
经过这些年的实践，我理解的设计系统分为三个层次。每一个层次都解决不同的问题。
第一层：视觉规则
这是最外层的，也是大多数人理解的"设计系统"：颜色、字体、间距、圆角、阴影、图标风格。这些是产品的外衣，决定了用户的第一印象。
视觉规则的核心目标很简单：一致性。相同的含义，用相同的视觉元素表达。比如：所有可点击的按钮都用相同的颜色，所有错误提示都用相同的红色，所有标题都用相同的字号。
这一层最容易实现，也最容易看到效果。但仅仅有这一层，你的设计系统只是一个"调色盘"。
第二层：交互模式
这一层解决的是"什么时候用什么"的问题。它是产品中各种交互场景的通用解决方案。
比如我上面提到的"操作失败提示"的场景，我的工具站是这样定义的：
- Toast：用于非关键的成功提示（"已保存"），3 秒自动消失。
- 内联错误：用于表单验证失败（"密码至少 8 位"），直接在输入框旁边显示。
- 模态框：用于关键操作确认（"确认删除？"）或不可逆转的错误（"您的操作未保存，因为网络连接已断开"）。
- 空状态：当页面没有数据时，展示什么内容、提供什么操作。
这些不是"组件"——它们是一种约定。当团队中任何一个人遇到类似场景，不需要重新思考"这个场景该怎么做"，只需要查阅这份约定，就知道该怎么做。
交互模式的价值，不在于"画得好看"，而在于减少了决策的重复。每一次决策都是一次心智消耗。设计系统帮你把那些"已经想清楚"的决策固定下来，让你的精力集中在"还没有想清楚"的事情上。
第三层：设计原则
这是最深层的，也是最容易被忽略的。设计原则是你做所有设计的底层逻辑。它决定了你在面对一个全新的、没有文档覆盖的场景时，该怎么做。
我的工具站只有三条设计原则：
- 一次只做一件事：每个工具页面只解决一个核心问题，不要让用户在一个页面上做多件事。
- 结果优先于过程：用户来工具站是为了"拿到结果"，不是为了"体验工具"。所以一键复制比任何花哨的动画都重要。
- 默认就是最好的：所有设置都应有合理的默认值，用户不需要配置就能获得好的体验。
这三条原则，比任何组件库都重要。它们帮我做决策的速度，比翻组件库快一百倍。当我不确定一个新工具该怎么做时，我会用这三条原则去衡量：这个设计符合"一次只做一件事"吗？它把结果放在首位了吗？默认值合理吗？
如果不符合，不管设计有多好看，我都会改。
小型项目需要设计系统吗？
你可能会想："我只是一个独立开发者，或者一个小团队，有必要搞这么复杂吗？"
答案是：需要，但不需要那么正式。
你不必像大厂那样建设一个完整的 design system 文档。但你可以用"设计系统思维"来管理你的产品决策。
具体来说，你可以做三件很小的事情：
- 定 3 条设计原则：写下来，贴在你的工作台旁边。每次做设计决策时，拿它来对照一下。
- 记录重复的交互模式：当你第三次遇到"这个场景该用弹窗还是提示"的问题时，做一个决定，写下来。下次不需要再想。
- 维护一个"组件清单"：不需要做成 Figma 组件库，一个简单的截图文档就够了。关键是记录"我在用什么组件，以及它们的参数和变体"。
我自己的工具站，设计系统就是一篇飞书文档，加上一个简单的 CSS 变量文件。但正是这篇文档，让我从一个"随便画"的状态，变成了一个"有章法"的状态。
设计系统是活的
最后我想说，设计系统不是一次性的产物。它和产品本身一样，需要不断迭代、不断优化。
当你发现某个交互模式不再适用了——改它。当你发现某个设计原则被新的产品方向打破了——更新它。当你发现某个组件很少被使用了——删掉它。
设计系统不是为了"约束"你，而是为了解放你。它把你从"每个按钮都要重新设计"的琐碎中解放出来，让你有精力去思考真正重要的问题：你的产品到底在解决什么问题，以及如何解决得更好。
记住，设计系统不是 UI 库，是决策框架。它不是一个 Figma 文件，而是一套思考方式。它不能帮你画图，但能帮你画对方向。