使用设计令牌（Design Tokens）同步设计与代码

在初创公司构建设计系统时，有时反而会导致速度变慢。这是因为开发人员需要不断地将设计师修改后的数值重新转化为代码，产生枯燥的重复性工作。只有将这一流程自动化，团队才能专注于产品的本质问题。

用令牌统一设计语言

不要将设计工具中的数值逐一手动映射为代码变量。引入设计令牌后，这一连接纽带将变为数据。

1. 基础令牌（Primitive Tokens）：定义如 blue-500 这样的原始颜色值。
2. 语义令牌（Semantic Tokens）：明确实际用途（如 action.primary.bg），并引用上述基础令牌。
3. CSS 变量映射：将语义令牌存储为 CSS 变量。

通过这样设置，即使设计师更改了颜色值，开发人员也无需触碰代码。系统会自动更新 CSS 文件。字体缩放也应在 Penpot 的令牌面板中输入 Base 和 Ratio，进行数学定义。使用 $Size_{n} = Base \times Ratio^{n}$ 公式，可以强制保持设计的一致性。

实现 Penpot 与 GitHub 的联动自动化

让开发人员手动核对设计修改内容是低效的。由于 Penpot 遵循 W3C 设计令牌标准，因此可以构建自动化流水线。

1. 生成 Penpot API 密钥。
2. 在项目根目录下创建 penpot-export.config.js 文件，在此配置需要提取的令牌及其保存路径。
3. 安装 @penpot-export/cli 包后，执行 npx penpot-export 命令。

数百个令牌值会在瞬间同步至代码库中，手动输入所带来的的人为错误随之消失。像 Shopify 这样的大型服务，也正是利用这种基于令牌的工作流，在无需修改代码的情况下实现即时设计更新。

通过 Git Review 把握设计变更意图

不要再通过 Slack 消息或口头传达设计变更事项，应使用开发人员最熟悉的 Git 进行管理。

1. 编写 .github/workflows/design-sync.yml 文件，实现设计令牌提取的自动化。
2. 通过 peter-evans/create-pull-request 操作自动生成包含变更内容的 PR。
3. PR 创建后，检查 style(tokens) 提交信息，并在代码审查过程中查看 diff。

开发人员可以立即在 PR 中掌握哪些数值发生了变化以及原因，从而节省去询问变更原因的时间。

与遗留代码共存

不要试图一次性重构所有代码。使用将现有 CSS 与新令牌混用的回退（Fallback）技术是更现实的做法。

1. 将自动生成的令牌文件放置在 src/styles/tokens 目录下。
2. 在现有 CSS 中使用 var(--new-token, #legacy-value) 格式。

尚未定义令牌的组件将保持原有数值。这样可以在无需担心 UI 损坏的情况下，一点点实现系统的现代化。从将一个小小的颜色令牌连接到流水线开始吧。这是防止未来产生巨大技术债务的有效手段。