visual-style-pass

视觉风格调整

把「改样式」从目测微调变成先定规范、再量、迭代到 0。

这套方法是在漫画风（studio）上走完一遍得出来的：从 66 处违规到 0，气泡 52px → 48px。核心不是任何一条 CSS，而是规范可量 + 审计脚本 + 只信实测。

---

一、用户的视觉偏好（当成硬规则，不要重新征求意见）

这些是反复确认过的，不是猜测。新风格默认按这些来。

1. 有背景的文字，高度必须由字号推出来

这是最核心的一条，用户自己提的：

H = lineBox + 2·padY + 2·borderWidth

不许手填高度。选中态药丸、气泡、按钮、chip 全部走这个公式。 漫画风的落点：padY ∈ {4, 6, 8, 10} → H ∈ {28, 36, 40, 44}；单行气泡 24 + 10·2 + 2·2 = 48。

用户会直接看出来：「左栏选中的背景高度太小了，对话区我的气泡背景又有些大」。

2. 每个风格只有一种线宽

漫画风是 2px，纯 #000000。合法值只有「那一种」和 0。

• 没有 hairline。见到 1px 就是错的，要么升到风格线宽，要么删掉。
• 两条边框挨在一起 = 太粗。用户明确反馈过两次。一条边归一个元素，另一个设 0——不是两条都调细。
  • 踩过的：.session-sidebar 有 border-right，.resize-handle 又是实心的 → 两条黑线夹一条白缝。留下 handle 那条，它就是那条线。

3. 字号、字重、圆角都是闭集

漫画风：字号 {11, 14, 15, 16, 20}、字重 {500, 600, 700, 800}、圆角 {0, 2, 4, 6, 8}。

• 把字重当旋钮用是明确的错。450、640 这种「两档之间」的值抓到就归档。
• 字号写成 token（--st-t-*），不写字面量，改规范时是一处改动。

圆角这一条被改了两次，值得单独记：

R = clamp(2, floor(H/8) 取偶, 8)   硬上限 R ≤ H/6

• 让圆角的步长等于线宽（漫画风 = 2px）。整个风格只有一个尺寸量，圆角阶梯就取它——一套算术而不是两套。
• 12/20 → 4/6/8/12 → 2/4/6/8，降了两次。用户两次的说法是「圆角太大了，小点」和「中栏里圆角还是有点大」。
• 第二次降档的原因不是某个元素太圆，而是最大的那一档在同一栏里出现了三次：输入框壳、artifact 卡、错误块全坐在 12px 上，中间一竖排三个大软方块。 → 单看一个元素判断不了圆角。要看同一档位在一栏里同时出现几次。 默认往小走。

4. 阴影：要么没有，要么是 0 模糊的实心偏移

漫画风只有 0 3px 0 0 <ink>，只给能按的东西。气泡不能按，所以是平的。 环境柔光阴影（0 14px 34px rgba(...)）跟这类风格不兼容，一律清掉。

5. 图标要按这个风格的性格重做

不要把上一个风格的特征顺手带过来。用户为此专门骂过一次：「你不要因为我的插画风有线框，你也加线框」。

• 漫画风：填字形自身的闭合轮廓，不是在黑字形后面垫一个色块。（这条做反过一次，用户回「图标不对」。容器只在参考图里出现两次。）
• 牛皮纸：全部面性（实心）。
• 像素风：真的点阵图标集（pixelarticons），不是把线性图标缩小。
• 两个咽喉点：StateIcon（~65 个语义槽）和 uiIcons.tsx（47 个 chrome 名）。agent-preview/*.tsx 里没有直接 import lucide，所以换图标只需要动这两处。
• 按槽位建映射表（65 个），不要按选项（282 个）。先例：codiconSlots.ts。

6. 字体

• 一个风格说衬线，就是 中英日都衬线。字体栈是逐字符解析的：先拉丁衬线，再跟 CJK 衬线。
• 不要假粗。单字重的字体（如 Ark Pixel）配 font-synthesis: none，并把 --weight-* 全部压成该字重。用户截图指过：「你不要加粗」。
• -webkit-font-smoothing: none 会把 CJK 搞粗，别用。

7. 编辑器家具不跟着换皮

hover 出现的编辑/删除浮层，所有风格都用原生风的样子。用户原话：「你不用每个风格里都不一样，这个浮层你就都统一原生风里的风格就行」。 风格只作用于 .preview-frame 内的内容，不作用于工具条、rail、region label。