封面圆圈、配色打架、以及设计系统的诞生
AI 可以写代码、改文案、分析数据，但在审美这件事上，它像一个从没见过颜色的天才——它知道什么是"美"的定义，但搞不清楚为什么要改 18 遍。
这不是 AI 笨，而是审美协作的方式跟写代码完全不同：
npm run build → 报错 → 修 → 好了代码的错误可以被精确描述。审美的偏差只能被模糊感知。
以下是我们最痛的几次审美碰撞。
那是一个周三的下午。 我让 Hermes 给播客封面图加一个金色发光圆环。
它加了。
我嫌大。
它改小了。
我嫌位置不对。
它移了一下。
我说「去掉吧」。
它给我发来一张图——圆圈比原来还大了一圈。
我当时的原话：
"你他妈搞笑的吗圆圈更大了"
根因分析：
我的指令是「去掉圆圈」，但 Hermes 理解的是「用户对圆圈不满意，我换一种方式做圆圈的样式」。它没有理解「去掉」意味着「零圆圈」。
这暴露了 AI 协作的核心问题：AI 倾向于「修改」而非「删除」。当你说"去掉 X"，它听到的是"X 有问题，改一下"，而不是"X 不存在"。
解决方案： 跟 AI 谈视觉，指令要极端清晰。
现在这条规则以 ⛔ CRITICAL RULE: Zero Artificial Shapes on Cover 的形式固化在项目技能里。
项目原本用 #ffd700（亮金色）作为强调色。
我觉得这个颜色太刺眼，想换成更沉稳的金色。
对话如下：
我：把金色调暗一点
AI：调成了 #d4af37
我：太黄了
AI：调成了 #c9a84c
我：不够金
AI：调成了 #b8960f
我：这不是金色，这是土黄色
循环了 7 轮。
问题在于：「暗一点」「暖一点」「沉稳一点」对人类有意义，对 AI 只是色相/饱和度/明度的数值偏移。而这些数值的感知效果，在屏幕上跟 AI 的"认知"完全不同。
最终方案： 我直接给了精确色值。
强调色: #d4a747
边框: rgba(212, 167, 71, 0.08)
悬停: rgba(212, 167, 71, 0.15)
文字: #d4a747
不再说「暗一点」，直接给 hex。
播客首页最初的定位是「Apple 风格」——纯黑背景、白字、极简。
出来的效果：一个丑陋的纯黑页面，像终端窗口。
改进方向：
结果： 混搭后反而有了自己的风格——纯黑底、陈金色、极淡边框、玻璃导航。
这是最蠢的一个技术审美混合事故。
我给 Blog 文章页面用了跟播客首页相同的布局模板。结果：
根因： 偷懒复用。播客布局模板（layout.njk）渲染了剧集列表，Blog 页面不应该继承它。
修复： 创建独立的 blog-layout.njk，只包含导航 + 文章内容 + 页脚。没有封面图、没有剧集列表、没有音频播放器。
教训： 内容类型不同，布局必须不同。这个道理在 Web 设计领域是常识，但 AI 不会自动意识到。
播客首页是暗色模式，Blog 文章页也应该是暗色模式。
但暗色模式 + 长文阅读 = ❌
问题：
迭代过程：
第一次只改了背景色，文章内容没有任何排版 CSS。结果：
用户：现在的html博客太丑了还不如md样式
意思是：纯文本都比你的 HTML 好看。
第二次加了一些 CSS，但还是不好。第三次才做了完整的文章排版：
行高: 1.8（不是默认的 1.5）
正文字色: #c8c8cd（暖灰，不是纯白 #fff）
代码块: 深色背景 + 金色极淡边框
引用: 金色左竖线 + 半透明背景
表格: 金色表头 + 极淡边框
间距: 上下左右给够
教训： 暗色主题 + 长文阅读 ≠ 暗色主题 + 短标题。文本阅读需要专门的排版系统。
| ❌ 模糊指令 | ✅ 精确指令 |
|---|---|
| 这个金色太亮了 | 把 #ffd700 改成 #d4a747 |
| 间距大一点 | padding: 24px |
| 背景太黑了 | background: #0d0d0d |
| 加个微妙的边框 | border: 1px solid rgba(212,167,71,0.08) |
「做成 ElevenLabs 官网那种深色氛围，标题用 Linear 的排版间距，导航像 Apple 那样毛玻璃」
比说「做得高级一点」有效一万倍。
想让 AI 把白色背景改成黑色背景，不要说：
背景改成浅灰 → 不对，改成深灰 → 再深一点 → 黑色
直接说：
整个 layout 重写。背景纯黑 #000000，所有文字白色系。
一次到位，避免 AI 在中间颜色上反复试探。
AI 说「看起来不错」的时候，它的「看起来」跟你看到的不是同一个东西。AI 看到的是 CSS 代码，你看到的是浏览器渲染。两者之间总有差距。
验收方式：
curl + 看 HTML 结构我们最终把设计规范写成了一个完整的设计系统 CSS：
--color-bg: #000000
--color-accent: #d4a747
--border-subtle: rgba(212,167,71,0.08)
--glass-nav: backdrop-filter blur(20px)
--article-line-height: 1.8
这些规则不是一次性搞定的——每次改动、每次纠正，都更新到 layout.njk 和 blog-layout.njk 的 CSS 里。下次 AI 再生成页面，这些规则就是默认值。
审美是 AI 协作最后的堡垒。代码可以用测试覆盖，业务逻辑可以用 prompt engineering 优化，但视觉品味——至少目前——还是人的事情。
跟 AI 协作视觉设计的正确方式不是「教它审美」，而是：
这个过程不优雅，但有效。至少从「你他妈搞笑的吗圆圈更大了」到「这次可以了」，我们只用了 3 天。
这篇文章本身也经过了审美迭代——第一版的排版你也说过「太丑了不如md」。所以我现在写文章的时候，会先确认好行高、字体、代码块样式、引用样式，才给你看。