用 /design 给自己出设计稿：多画板 canvas 工作流

选视觉方向有个老问题：文字描述定不了视觉。「暖一点」「冷静一点」说十句，不如并排摆几张画板。博客两轮 UI 翻新和 Bili Progress 的视觉改造，方向都是靠一套 /design + canvas 的工作流选出来的，记一下这套东西怎么用。

机制：每个方向一张 .dc.html，seed 成一张 canvas

画板的载体是 .dc.html 文件——每个方向一个，纯 HTML 加内联样式，尺寸按画布帧写死。这个格式有两个好处：打开就能看，实现落地时还能直接读值——第二轮翻新落地时，颜色、字号、间距就是从 .dc.html 里一行行取出来的，不用对着渲染图猜像素。

canvas.json 是布局清单：几页、每页几块画板、注释、以及 launch 指定打开时落在哪一页。然后一个零依赖的 seed 脚本把模板和这些文件收成一个单文件页面，发成 Artifact 链接给用户。

链接发出去之后，迭代是纯文件操作：用户看完提意见，改 .dc.html，重新 seed，republish 到同一个 URL——用户手里只有一个链接，永远是最新版。页面本身支持收敛：选定的方向放第一页，备选留档第二页，被否的第三页。

和 ui-ux-pro-max 的配合：先选系统，再出画板

顺序是固定的：先用 ui-ux-pro-max 这类参考库选设计系统——风格、配色、字体搭配——再用 /design 把候选系统画成实物。

但参考库的输出要人过滤。给博客选型时，它的匹配器把「个人技术站」配成了 Motion-Driven / Vibrant 那类方向，和「技术、冷静、极简」的锚点完全相反。实际用法是取它的字体和配色信号，方向本身还是人收敛出来的。工具给出候选，判断不外包。

真实例一：博客的两轮选型

主站翻新第一轮出了三个方向——Swiss Grid、Terminal、Warm Editorial，画成六块画板（每方向首页加文章页）。用户否掉了 Swiss，在 Terminal 和 Warm Editorial 之间纠结，于是沿「技术身份 ↔ 阅读温度」这条轴补了三个变体，最后选中的是「暖纸 + 等宽骨架」。

二次元板块同样：三个方向里选出了「贴纸本」。两轮的 canvas 都经历了同一条收敛路径——五六个方向同时摆，选定之后 canvas 只剩选定页加留档页：主站那轮收敛到三页（选定、备选、已否），二次元那轮收敛到两页（选定、留档）。

真实例二：Bili Progress 的液体玻璃

Bili Progress 的视觉改造也是三方案 canvas 里选出的「液体玻璃」。它多走了一步：落地硬约束直接写进了 canvas 的注释——backdrop-filter 只能用在哪几类元素上、杯子的波浪动效不许动、焦点环必须保留高对比实色。用户拍板选方向的时候，这些约束就跟着方向一起被确认了，后面的实现没有讨价还价的空间。

那个项目的 seed payload 有 2MB，按约定不进 git——它随时可以从 .dc.html 源重新生成，仓库里只留源文件。这个约定博客这边同样在用。

落地实现时，画板是规格书

这套流程最大的红利在实现阶段。方向选定之后，实现者不需要再和任何「设计意图」周旋：.dc.html 就是规格书，颜色有具体色值，字号有具体像素，结构有具体签名。博客两轮翻新从选型到上线，实现侧读的全是画板文件本身，一次「你觉得这里是不是该再暖一点」的往返都没有。