从零搭建设计系统：色彩、间距与组件规范

设计系统不是大公司的专属。即使是一个人的项目，提前定义好设计规范也能大幅减少"这个蓝用哪个蓝"的纠结。

第一步：色彩体系

定义三级颜色：主色（品牌色）、中性色（文字/背景）、语义色（成功/警告/错误）。用 CSS 变量存储：

--color-primary: oklch(0.55 0.2 270);
--color-muted: oklch(0.45 0.02 260);

第二步：间距节奏

选一个基础单位（通常 4px），所有间距都是它的倍数：4、8、12、16、24、32。Tailwind 默认就是这套节奏。

第三步：基础组件

从最常用的开始：按钮、输入框、卡片、标签页。每个组件定义几种变体（primary / secondary / ghost），确保样式一致。

工具推荐

• Figma — 设计稿与开发对齐
• Storybook — 组件文档和交互测试
• CSS 变量 — 主题切换的基础

好的设计系统不是限制创造力，而是减少重复决策，把精力留给真正重要的事。