为独立项目打造设计系统

当你独自交付副项目时，一致性是你不能跳过的奢侈品。我是在吃了亏之后才明白这一点的——我发布了三个产品，看起来像是三个不同的人做的。某种意义上确实如此：每个阶段的我有不同的状态、不同的审美，以及零共享组件。

现成设计系统的问题

大多数设计系统是为20人以上的团队构建的。它们自带治理模型、贡献指南，以及足够让你头晕的抽象层。作为独立开发者，我需要的是不同的东西：一个足够有主见来保持一致性，又足够灵活不拖慢我速度的系统。

从 Token 开始

我从设计 Token 开始——一小组颜色、间距值和字体比例，定义在一个 CSS 文件中。没什么花哨的，只是确保我接触的每个项目都共享相同的视觉基因。

:root {
  --color-primary: #0ea5e9;
  --color-surface: #fafafa;
  --spacing-unit: 0.25rem;
  --font-sans: 'Inter', system-ui, sans-serif;
}

可迁移的组件

接下来，我用 Tailwind CSS 和 Headless UI 构建了几个组件——Button、Card、Input 和 Container。这些没有发布到 npm，而是放在一个共享的 Git 仓库里，我在新项目中直接复制过来。不够优雅，但快速且有效。

关键洞察：不要过早抽象。我让模式在多个项目中自然浮现，然后再提取为共享组件。这让系统扎根于真实使用场景，而非假设性需求。

如果重来我会怎么做

如果重新开始，我会从第一天就在文档上投入更多时间。不是为了别人——是为了未来的自己。三个月后，我总是忘记为什么选了某个特定的圆角半径，或者按钮为什么用了那个特定的内边距。几行注释就能省很多事。

设计系统不需要很大才有用。有时候一个共享的 CSS 文件加五个组件，就是你需要的全部——让你交付更快，看起来更专业。