假设你要从零搭一套设计系统。多数人先动手写组件,结果颜色和间距各写各的,越往后越收不回来。
更稳的顺序是先把设计语言定下来,再写成一份规范文档,作为团队和 AI 后续实现的唯一依据。规范落地时先变成令牌和主题配置,再长出基础组件,最后才拼页面。
组件之间怎么组合,也得在骨架阶段想清楚,否则布尔属性会越堆越多。等页面成型,再回头逐页检查无障碍和视觉偏差,用真实浏览器跑一遍关键交互。
最后把令牌、组件和页面改动按规范提交。下面五张卡片就是这个顺序。
设计系统最容易死在“规范写了一套、代码长成另一套”。这10个Skill按顺序把设计语言一路推到令牌、组件和页面。
假设你要从零搭一套设计系统。多数人先动手写组件,结果颜色和间距各写各的,越往后越收不回来。
更稳的顺序是先把设计语言定下来,再写成一份规范文档,作为团队和 AI 后续实现的唯一依据。规范落地时先变成令牌和主题配置,再长出基础组件,最后才拼页面。
组件之间怎么组合,也得在骨架阶段想清楚,否则布尔属性会越堆越多。等页面成型,再回头逐页检查无障碍和视觉偏差,用真实浏览器跑一遍关键交互。
最后把令牌、组件和页面改动按规范提交。下面五张卡片就是这个顺序。
先定下整套设计系统的视觉方向、配色和字体基调,避免后续组件落入模板感
把确定下来的设计语言写成 DESIGN.md 规范文档,作为团队和 AI 后续实现的唯一依据
用 Tailwind CSS v4 把规范文档里的颜色、间距、字号落成可复用的令牌和主题配置
按照设计系统规范构建可访问、可组合的基础 UI 组件,作为组件库的骨架
整理组件之间的组合关系,让设计系统里的组件能被灵活拼装而不是层层嵌套
把设计系统映射到 shadcn/ui 组件上,快速得到符合规范的导航、表单等成品组件
逐页检查组件和页面是否符合无障碍与界面设计规范,把不合规的地方挑出来
在真实页面里审查响应式布局和视觉问题,并直接修复设计系统落地后的偏差
用 Playwright 跑一遍关键页面,确认设计系统在真实交互下没有样式或布局回归
把设计系统相关的令牌、组件和页面改动按规范提交,留下清晰的演进记录