设计债管理
跟踪并偿还设计系统与已发布之间的差距。
视觉设计进阶
为什么
每赶截止发布决策造债：一次性色、硬编码间距、应在系统中的组件。不跟踪则复利直到 UI 不一致且系统无关。
Google 研究显示用户在 50ms 内形成第一印象，75% 的网站可信度判断基于视觉美学。一致的间距比例（8px 网格）可测量地降低认知负荷。
何时使用
持续。债生即记，每季排偿还冲刺，像技术债燃尽跟踪设计债燃尽。
如何做
1. 记 — 发布一次性时加票："用 --color-promo 替 PromoBanner 中 #FF0000" 标 design-debt
2. 分类 — 令牌债（错色/间距）、组件债（应在系统中）、模式债（不一致 UX）
3. 优先 — 用户面不一致（两种按钮样式）> 不可见债（重构）> 锦上添花
4. 偿还冲刺 — 每季 10–20% 投设计债；勿让其无界长
5. lint — stylelint 禁原始色/间距；新债无显式覆写不能发布
6. 审计 — 每季跑审计（视觉回归 + 令牌用报告）；浮前 10 漂移
7. 退役 — 组件被替时跟踪其用；仅用达 0 时移除
示例
// design-debt 日志 — markdown 文件或 Linear 项目标 "design-debt"
/*
- [ ] 令牌：用 --color-promo-500 替 PromoBanner 中 #FF0000（加 2026-01-15、#PR-1234）
- [ ] 组件：将 PromoBanner 提取到系统（3 一次性实例）
- [ ] 模式：统一 toast 定位 — 3 组件用右上、2 用下中
- [ ] 间距：用 --space-4（16px）替 UserCard 中 17px gap
*/
// stylelint — 防新令牌债
"declaration-property-value-allowed-list": {
"color": ["/var\\(--color-/"],
"gap": ["/var\\(--space-/"],
}
// 每季审计脚本 — 找应为令牌的原始值
const rawColors = await grep(/#[0-9a-f]{6}/i, "src/**/*.{tsx,css}");
const rawSpacing = await grep(/\b\d+px/g, "src/**/*.{tsx,css}"); // 除 1px 边框
console.log(`${rawColors.length} 原始色、${rawSpacing.length} 原始间距 — 设计债`);
常见问题
- ⚠债未记 — 一次性发布、无票、月后设计师注意漂移才记
- ⚠无偿还时间 — 每冲刺债长、无排窗修
- ⚠无 lint 防护 — 新原始色/间距自由发布，偿还时债仍复利
最佳实践
- ✓债生即记 — PR 时加票，非 '稍后修'（不会）
- ✓每季排偿还冲刺 — 10–20% 容量，当技术债对待
- ✓加 stylelint 禁原始色/间距 — 防新债；覆写需显式理由