你可能会说
帮我建一套设计系统:颜色、字体、组件统一规范。
一套统一的设计规范:颜色、字体、间距、组件库。
一套统一的设计规范:颜色、字体、间距、组件库。保证整个产品的视觉和交互一致性。
生活类比
像公司的 VI 手册——logo 怎么用、颜色怎么配、字体用哪个,全有规定。
🎮 动手试试
关于「设计系统」,以下哪个描述最准确?
你可以这样告诉 AI
帮我搭一套基础设计 Token:主色辅色、文字大小字号阶、间距 4/8/16/24、圆角 sm/md/lg,用 CSS 变量定义。
设计系统包含设计规范加组件库加使用文档的完整体系,组件库只是其中可复用的 UI 代码实现部分。
多产品统一视觉
当有多个产品、多个页面或多个团队协作时,用设计系统统一颜色、字体、间距和组件,避免每个地方各写一套样式。
和 AI 协作时
想让 AI 按设计系统写代码时,说「用主色 blue-600、圆角 8px、间距 4/8/16/24 的 Token 写这个组件」,AI 会遵循规范。
一次性营销页
短期上线的活动落地页或宣传页,生命周期短且独立于主产品,建立完整设计系统的投入远超该页面的开发成本。
与纯个人小项目无关
个人博客、课后作业等只有一个人维护的小项目,设计系统是解决多人协作一致性问题的工具,单兵作战不需要。
一套统一的设计规范:颜色、字体、间距、组件库。保证整个产品的视觉和交互一致性。
像公司的 VI 手册——logo 怎么用、颜色怎么配、字体用哪个,全有规定。
和 AI 沟通时提到「遵循设计系统」或「用 design token」,就是按统一规范来写样式。