从零搭设计系统,这10个Skill把规范落到代码

设计系统最容易死在“规范写了一套、代码长成另一套”。这10个Skill按顺序把设计语言一路推到令牌、组件和页面。

假设你要从零搭一套设计系统。多数人先动手写组件,结果颜色和间距各写各的,越往后越收不回来。

更稳的顺序是先把设计语言定下来,再写成一份规范文档,作为团队和 AI 后续实现的唯一依据。规范落地时先变成令牌和主题配置,再长出基础组件,最后才拼页面。

组件之间怎么组合,也得在骨架阶段想清楚,否则布尔属性会越堆越多。等页面成型,再回头逐页检查无障碍和视觉偏差,用真实浏览器跑一遍关键交互。

最后把令牌、组件和页面改动按规范提交。下面五张卡片就是这个顺序。

frontend-design

先定下整套设计系统的视觉方向、配色和字体基调,避免后续组件落入模板感

design-md

把确定下来的设计语言写成 DESIGN.md 规范文档,作为团队和 AI 后续实现的唯一依据

tailwind-design-system

用 Tailwind CSS v4 把规范文档里的颜色、间距、字号落成可复用的令牌和主题配置

building-components

按照设计系统规范构建可访问、可组合的基础 UI 组件,作为组件库的骨架

shadcn-ui

把设计系统映射到 shadcn/ui 组件上,快速得到符合规范的导航、表单等成品组件

web-design-guidelines

逐页检查组件和页面是否符合无障碍与界面设计规范,把不合规的地方挑出来

web-design-reviewer

在真实页面里审查响应式布局和视觉问题,并直接修复设计系统落地后的偏差

webapp-testing

用 Playwright 跑一遍关键页面,确认设计系统在真实交互下没有样式或布局回归

git-commit

把设计系统相关的令牌、组件和页面改动按规范提交,留下清晰的演进记录