工作流
交付一份开发者敢接的设计稿
校验对比度、锁定色板、导出干净规范，让设计到代码之间不丢信息。
预计耗时: ~45 分钟 涉及工具: 4 要把设计稿交付给开发者的设计师
- 1
按 WCAG AA 审计每一组文字与背景的搭配，让无障碍问题不要流到代码评审。
小字按 4.5:1、大字按 3:1 检查，低于标准的先标出来再交付。
- 2
把色板锁定成唯一可信来源，配上开发者能直接复制的色值。
给十六进制色值，不要给截图，开发者本来也会问你要。
外部工具
- 3
压缩规范里任何铺满整版的图，让交付包保持轻量。
网页用的素材导出 WebP/AVIF，印刷用的保留原始 PNG。
- 4
在 markdown 规范里加一段 README 式的说明，把 token 名字写清楚。
颜色 token 按语义命名（--surface-1），而不是按色值（#0B0F1A）。
该工作流涉及的全部工具
| 工具 | 作用 | 自研 / 外部 |
|---|---|---|
| 对比度检查器 | 按 WCAG AA 审计每一组文字与背景的搭配，让无障碍问题不要流到代码评审。 | 自研工具 |
| Coolors | 把色板锁定成唯一可信来源，配上开发者能直接复制的色值。 | 外部工具 |
| Squoosh | 压缩规范里任何铺满整版的图，让交付包保持轻量。 | 外部工具 |
| Markdown ↔ HTML | 在 markdown 规范里加一段 README 式的说明，把 token 名字写清楚。 | 自研工具 |