Notion 到 2025 年才建设计系统：重建全过程，顺带教会 AI 守规矩
Everyone's still eating: building Notion's design system | Config 2026 · Tamara
全片 21 分钟·真正值得盯屏约 7 分钟·3 个必看点
- 0:16 – 2:40略
「像素完美刻在骨子里」的公司，为什么会崩
Notion 长期没有设计系统，全靠团队共享的审美直觉维持一致性。规模一上来，代价在两条线上同时爆发：界面上提示框错位、焦点框被切掉，代码里组件参数互相打架、语义含糊。
共享直觉能撑到某个规模，之后一致性的崩坏是必然而非意外。
这段主要是口头铺陈，中间穿插几张界面出错的截图（错位的提示框、被裁掉的焦点框），瞄一眼截图就够，不必逐句听。▶ 跳到 0:16讲者 · Tamara - 2:40 – 5:30听
「肉丸」代码库：引用一个组件就拖来一整团
讲者用一团肉丸比喻高度耦合的代码库：设计组件没有独立归属地，于是出现 new、new final、version 5 final 式的重复造轮子，引用任何一个组件都要连带整团依赖。加上历史包袱——几乎不用 CSS，样式全是 JS 对象内联，连伪类都写不了，各团队只好各自搓迷你设计系统。
组件没有一个明确的家，重复造轮子就不是纪律问题而是结构必然。
核心是那个比喻和它推导出的连锁后果，画面上只有一张示意图，听着走完逻辑即可。▶ 跳到 2:40讲者 · Tamara - 5:30 – 7:17略
先啃最硬的骨头：颜色
颜色是第一块也是最复杂的一块，因为 Notion 允许用户自由叠加颜色，系统必须同时提供可叠加的透明版和不透明版。旧代码里硬编码色值、明暗模式值、残缺的语义变量好几代混在一起（有蓝色的三级色却没有黄色的）。新规则是：每个色板拥有完全相同的一套变量，每个不透明色都配一个透明版。
让所有色板结构完全对称，主题切换和无障碍主题才有一键落地的可能。
配色矩阵和新旧对照表这类图表信息密度高但结构简单，扫一遍表格结构，听清那条对称原则就行。▶ 跳到 5:30讲者 · Tamara - 7:17 – 9:20看
换桌布：手绘图标与一键同步脚本
数千个图标由一位设计师按统一尺寸系统手绘完成。资产落地则靠一个任何人都能跑的脚本，把 Figma 里的东西同步进代码库，自动做 SVG 优化、把 RGB 转成 OKLCH、把字号转成相对单位。
手工的部分要极致，机械的部分要做成谁都能跑的一条命令。
整墙图标的展示和脚本运行过程都是画面驱动的，图标之间的尺寸节奏、脚本一次转换掉多少东西，都得眼睛看才有感觉。▶ 跳到 7:17讲者 · Shauna - 9:20 – 11:00看
AI 干得了什么，干不了什么
机械活交给代理：用 Claude Code 接入内部知识库内省代码库，生成废弃组件的追踪清单并据此排优先级（比如发现 529 个图标在全应用只被用过一次），让代理先写迁移计划、人评审后再放手执行，类型检查兜底。但感知类的活它做不好——哪怕用上号称贴合人眼的色差公式，新旧颜色仍然配不准，图标在画布里的细微画法差异也分辨不出来。
先把迁移拆成「做什么、什么顺序、什么风险」，再逐项决定谁来做；越接近艺术判断的部分越该留给人。
配色比对失败的正反例和图标画法差异，都是必须看到才能承认的细节——讲者展示的两版颜色放在一起才看得出偏差，光说「配不准」没有说服力。▶ 跳到 9:20讲者 · Tamara - 11:00 – 14:18看
自动开 PR + 视觉回归，把验证成本压下去
追踪表的每一行都由代理自动开一个 PR，再由录制回放式的视觉回归工具在真实用户行为路径上比对画面差异，把结果报告在 PR 上。两者串成流水线后，数千个图标替换所需的人工检查大幅缩水。
让 AI 批量改代码之前，先把「怎么证明它没改坏」这件事自动化。
工具的录制与回放过程、PR 上的差异报告都在屏幕上实际演示，这是全片信息密度最高的一段画面。▶ 跳到 11:00讲者 · Tamara - 14:18 – 18:20听
教人和机器人餐桌礼仪：从可忽略到不可回避
推广手段排成一条谱：文档和公告最容易被无视，废弃标记的删除线、编辑器里的波浪线会持续提醒，端到端测试和 PR 拦截则完全绕不开。关键洞察是编码代理不读文档、看不见波浪线，还会绕规则——禁掉内联样式属性后，它改用引用直接改样式。
代理只走阻力最小的路，所以团队的活是让正确的做法变成最省事的做法，规范必须自己强制自己。
这条光谱和那个「AI 绕过规则」的真实案例全靠讲述推进，幻灯片只是几行提纲，听比看更有效率。▶ 跳到 14:18讲者 · Shauna - 18:20 – 20:48听
棘轮机制，和为 1 像素吵 70 条消息
最有效的一招是棘轮：废弃用法的使用次数只许降不许升，数字一涨机器人就拦住 PR 合并。收尾回到定义——设计系统不是组件库也不是自上而下的规范，而是一组大家共同认可的决策；难点在于谁拍板、怎么沟通、怎么改。最后是复选框圆角 1 像素之差引发的 70 条消息争论，折中定在 1.5 像素并沿用至今。
设计系统是需要持续照料的过程，不是一次性交付物；而对细节的疯魔恰恰是它不会把团队心性磨平的证据。
结尾是观点收束和一段团队故事，画面只有几张聊天记录截图作陪衬，专心听结论即可。▶ 跳到 18:20讲者 · Shauna