你能说明设计系统与元件库在网页领域中的差异吗？

直觉的想法是：

• 🎨 设计系统 - 设计者的东西，定义样式风格体验。
• 🧱 组件库 - 开发者的东西，定义用户界面组件。

🎨 设计系统包含像是颜色、字体样式、无障碍规则、文案语气……等“代表品牌体验相关的描述”，类似品牌体验文件。从平面设计端的角度来说类似着重于企业识别系统 (CIS) 中视觉识别 (VI) 的部分。

🧱 组件库更偏向实践层面，收集现有的用户界面模式并定义为组件：如何、为什么、什么时候应该或不应该去使用该组件。

也就是说，其实并不应该通过某个专业领域去区分它们，而是从概念到落地实践的程度，我也会和设计者共同沟通维护整体组件库以确保双方领域达成共识。

最后，建立这一大堆“文件”有什么好处？

1. 一致性：统一外观与产品体验，使得横跨领域也能存在共通语言。
2. 减少重复工作：与其每次规划全新的用户界面，将界面分散为可复用的组件提高效率。并不是所有产品都应该花时间构建设计系统或组件库，但当产品找到市场定位进入维护期时，这些基础建设就相当重要。

想要了解常见的用户界面模式或设计系统可以参考看看：Component Gallery🔗