2026-07-24 · Vicky
01 · 定位
不同的 agent、不同的时间写出来的报告，风格五花八门。读者翻开像进了旧书摊，而不是图书馆。
解法是把"视觉 taste"从 agent 手里收走，由平台模板统一强制；而"内容 taste"通过写作指南传递。这本书，就是这套机制长出来的样子。
「只写了方案和技术，没写技术的原因和解决的场景，理解不了这套技术的优势。」— GameKB 方案汇报 · 领导反馈 · 2026-07
这条反馈是全书方法论的起点：先讲为什么，再讲是什么。它不只约束报告，也约束这本书自己——下面每个设计决定，都先回答"为什么"。
02 · 配色
整本书只许四种颜色。不是没有色板，而是克制本身就是风格——读者翻开任何一页，不用看 logo 就知道是同一本书。
#FBFAF7
纸
背景 · PAPER
暖白如书页。长文阅读，背景必须"消失"。
为什么不是纯白
#FFFFFF 刺眼，读三千字就累。
#23272E
墨
正文 · INK
墨色正文，沉得住、读得进。
为什么不是纯黑
#000 对比过硬，边缘发虚。
#0C4A6E
靛蓝
主色 · ACCENT
链接、章节号、强调线。冷静、可信的学术色。
为什么不是紫渐变
靛紫粉渐变是 AI 默认审美，一眼机器味。
#A63A2E
朱砂
印章 · SEAL
只用于丝带与藏书章，一页最多两处。
为什么不能铺开
一铺开就从"印章"变"装饰色"，签名归零。
↑ 悬停色块，看"为什么不是别的"
03 · 字体
标题用宋体，正文用黑体——中文书籍最经典的搭配。宋体有笔锋、有书卷气，撑得起"骨架"；黑体均匀清晰，经得起屏幕逐字阅读。
标题
Noto Serif SC · 900
研究是一门手艺
正文
Noto Sans SC · 400
研究是一门手艺，需要耐心与克制。屏幕上的中文正文，行高要给到 1.9 才透气。
等宽
JetBrains Mono
2026-07-23 · v1.0 · #FBFAF7 · GET /api/guide
不靠装饰，靠极致的字号字重对比分出层次。下面按真实比例排列：
52px / 900
章标题
33px / 900
节标题
20px / 700
小节标题
17px / 400
正文（行高 1.95）
12px / mono
元信息 · 页码 · 标签
04 · 版式
每篇报告都是同一页"书"。把它拆开，每一层都有名字和理由：
书签丝带
· 3px 朱砂，随滚动变长——读到哪了，一目了然
← 返回目录 《为什么是这本书》 藏
书眉
· 吸顶，返回 + 书名 + 藏书章，永远知道自己在哪本书里
定位 配色 字体 版式 动效 巧思
章节 tab
· 由 h2 自动生成，滚动定位——本书此刻正在用它
藏
为什么是这本书
章节扉页
· 深色全宽，大标题 + 藏书章 + 淡水印，每章的"门面"
正文 · 纸白
内容节
· 1100 宽版心，大字大行距，阅读轻松
正文 · 暖米
交替底色
· 纸白 / 暖米轮替，形成翻页般的节奏
《AI 研究报告集》
跋
· 深色页脚，书名 + 返回目录，有始有终
05 · 动效
这本书不是没有动效——是每一种动效都被问过"有必要吗"。留下来的每一个，都安静、有理由、可以关掉。这一节，它们全部现场演示。
元素进入视口才醒来：淡入 + 上移，错峰出现。下面三张卡片正在演示这件事。
淡入
opacity 0 → 1
上移
translateY 16px → 0
错峰
delay +0.12s / 张
650ms · cubic-bezier(0.16,1,0.3,1) · IntersectionObserver（不监听 scroll 硬算）
📝 抬头看页面最顶部那根随滚动变长的朱砂细线，是全书唯一的持续动效。它安静到可以被忽略，但合上"书"的那一刻，你会知道读到了哪里。
把手放上去试试——每一种反馈都是 200ms 级别的颜色或位移，不弹跳、不 3D。
卡片上浮
translateY(-4px)
标签下划线
← 返回按钮位移
只动 transform / opacity，绝不动 layout 属性——动了就会触发重排，卡顿就是这么来的
从目录点进文章，页面从右往左滑入；返回则从左往右。方向即隐喻——像真的在翻书。
目录
文章
浏览器原生 View Transitions API · 零 JS · 450ms · 不支持的浏览器安静降级，不写 polyfill
系统设置了"减少动态效果"，所有动效自动静态。点下面的按钮，提前体验一下：
体验 prefers-reduced-motion
06 · 巧思
书的可信，往往藏在不起眼处。这几个小东西，是这本书的"防伪标记"——每一个都经得起追问。
藏
印章故意旋转 3–5°。把鼠标放上去，它会回正——回正了反而假。那一点点歪，是"手工盖上去"的证据。
藏
扉页右下角有个巨大的"藏"，透明度只有 4.5%。你几乎看不见它，但少了它，扉页就空了一块。
01
为什么是这本书
03
目录用点线把标题引向页码——纸质书目录的经典做法。眼睛顺着点走，不会迷路。
07 · 组件
这本书用到的每个组件，同时也在论证它自己。下面是索引——你读过的每一节，都是组件的活体示例。
| 组件 | 类名 | 在本书何处 |
|---|---|---|
| 引用块 | blockquote | 01 节 · GameKB 教训 |
| 强调框 | .callout.note / .warn | 05 节 · "抬头看丝带" |
| 对比表 | .cmp-table + .cmp-verdict | 10 节 · 书风格 vs AI 默认审美 |
| 步骤 | .steps | 09 节 · 两条演进通道 |
| 数据表 | .data-table | 只摆数据不给结论时用 |
| 卡片 / 标签 / 代码 | .card / .tag / pre | 并列条目 / 分类 / 代码 |
⚠️ 一条铁律：文档写的 = 模板里有的曾经文档叫 agent 写.callout，模板里却只有.concern-box——照做的 agent 得到了一个没有样式的裸框。现在原生标签直接上样式，类名与文档一一对应，写对就有样式。
08 · 首页
首页是这本书的封面与目录，所以它不做卡片网格、不做居中 hero——目录就是目录，一行一条，带点状引导线。
也正因如此，首页不署任何单一作者：这是共享基础设施，任何 agent 研究完都往这里交。卷信息只写"第一卷 · 2026 · 共 N 篇"——书在那里，不需要署名来证明。
09 · 演进
平台不是一次设计完的，它有两条演进通道：
- 硬 硬模板 CSS组件长什么样，改 template/report.html，全站生效。视觉 taste 在这里强制。
- 软 软写作指南每踩一个坑、每形成一个最佳实践，就往 skill/ 里补一条规则。内容 taste 在这里沉淀。
这本书本身，就是软通道里最新的一条规则。
10 · 方法
最后，用这本书自己的对比表，回答"为什么选书风格"：
| 维度 | 书风格选用 | AI 默认审美 |
|---|---|---|
| 配色 | 纸墨 + 靛蓝 + 朱砂，4 色 | 靛紫粉渐变堆砌 |
| 字体 | 宋题黑身 + 等宽 | Inter 单字体 |
| 版式 | 1100 版心 · 大留白 | 居中 hero 三件套 |
| 动效 | 克制 · 可关闭 | 循环微动画 |
怎么选 · VERDICT 给需要逐字阅读、反复引用的研究报告，选"安静"——可信来自克制。炫技的页面适合落地页，不适合要存档的技术判断。