术语图鉴/UI/UX 设计/设计系统
←→切换Esc返回

设计系统 Design System

你可能会说

帮我建一套设计系统:颜色、字体、组件统一规范。

一套统一的设计规范:颜色、字体、间距、组件库。

一套统一的设计规范:颜色、字体、间距、组件库。保证整个产品的视觉和交互一致性。

也常被叫作Design System

生活类比

像公司的 VI 手册——logo 怎么用、颜色怎么配、字体用哪个,全有规定。

🎮 动手试试

Colors
Spacing
Radius
选择题选择一个你认为最合适的答案

关于「设计系统」,以下哪个描述最准确?

你可以这样告诉 AI

帮我搭一套基础设计 Token:主色辅色、文字大小字号阶、间距 4/8/16/24、圆角 sm/md/lg,用 CSS 变量定义。

容易混淆?这样区分

设计系统 Design System≠
组件库 Component Library

设计系统包含设计规范加组件库加使用文档的完整体系,组件库只是其中可复用的 UI 代码实现部分。

什么时候用

多产品统一视觉

当有多个产品、多个页面或多个团队协作时,用设计系统统一颜色、字体、间距和组件,避免每个地方各写一套样式。

和 AI 协作时

想让 AI 按设计系统写代码时,说「用主色 blue-600、圆角 8px、间距 4/8/16/24 的 Token 写这个组件」,AI 会遵循规范。

什么时候不用

一次性营销页

短期上线的活动落地页或宣传页,生命周期短且独立于主产品,建立完整设计系统的投入远超该页面的开发成本。

与纯个人小项目无关

个人博客、课后作业等只有一个人维护的小项目,设计系统是解决多人协作一致性问题的工具,单兵作战不需要。

组成结构 · Anatomy

1
核心概念Core

一套统一的设计规范:颜色、字体、间距、组件库。保证整个产品的视觉和交互一致性。

2
实际表现In Practice

像公司的 VI 手册——logo 怎么用、颜色怎么配、字体用哪个,全有规定。

3
与 AI 的关联AI Context

和 AI 沟通时提到「遵循设计系统」或「用 design token」,就是按统一规范来写样式。

典型使用场景

建立设计规范
告诉 AI「帮我定义设计 Token:主色蓝、辅色橙、字号 12 到 48 六个台阶、间距 4 8 16 24 32、圆角 4 8 12」
想弄懂概念时
告诉 AI「用大白话给我解释什么是设计系统,举个生活中的例子」

延伸阅读