209 lines
12 KiB
Markdown
209 lines
12 KiB
Markdown
# 文章封面（Cover）—— 设计指南
|
||
|
||
## 这是什么
|
||
|
||
每篇 Beautiful Article 在 TOC + 正文之上有一块**像书的封面**的题图，独占顶部。
|
||
它是 HTML 文章"出版物感"的开篇 —— 类似书封 / 杂志封面 / 唱片封套：
|
||
一眼传达 "**这篇讲什么 + 长什么气质**"，决定读者会不会往下看。
|
||
|
||
封面**不**是 Hero：
|
||
|
||
| 角色 | Hero | Cover |
|
||
|---|---|---|
|
||
| 位置 | `<Article>` 内、TOC 旁 | `<Article>` **之外**、TOC **之上** |
|
||
| 形态 | 标题 + 副题 + meta（文字栏） | 3:4 图文构图（图 + 字） |
|
||
| 职责 | 框定主题 + 读者收获 | 视觉钩子 + 风格定调 |
|
||
| 信息 | 文字为主 | **图主字辅** |
|
||
|
||
两者**互补**：封面引人，Hero 锚定。**不要把它们做成同一件事**。
|
||
|
||
---
|
||
|
||
## 尺寸 · 屏幕 3:4 一屏看全 / PDF 独占首页
|
||
|
||
- **屏幕**：`aspect-ratio: 3 / 4`，宽度同时受**两条上限**约束（取较小者），保证
|
||
3:4 完整封面**一屏看全、不用下拉**：
|
||
1. `48rem`（768px）—— 硬上限，再大就像广告牌而不是书封；
|
||
2. `calc((100vh - 8rem) * 3 / 4)` —— 从视口高度反推的宽度，给顶栏 / 容器
|
||
边距 / 上下呼吸留 8rem (128px)。
|
||
|
||
也就是 `max-width: min(100%, 48rem, calc((100vh - 8rem) * 3 / 4))`。在矮屏幕上
|
||
封面自动缩小（仍是 3:4），在 1024px 以上的高屏幕上保持 768×1024。
|
||
- **PDF**：`@media print` 默认保持屏幕版 3:4 构图，并在封面之后分页，让封面独占
|
||
PDF 首页。不要依赖通用 `height: 100vh` 把封面强行拉成整页；Chromium print 对
|
||
复杂封面内部布局的裁切行为不够稳定。
|
||
|
||
为什么是 3:4 而不是 A4 比例（1:√2 ≈ 0.707）：
|
||
|
||
| 比例 | 数值 | 感觉 |
|
||
|---|---|---|
|
||
| 16:9 | 1.78 | 太宽，像横幅 / banner |
|
||
| A4 (1:√2) | 0.707 | 偏瘦，像报告内页 |
|
||
| **3:4** | **0.75** | **像书封 · A4 和 Letter 的中间值** |
|
||
| 2:3 | 0.667 | 像小说封面 · 偏窄 |
|
||
|
||
3:4 在 A4 PDF 上下方有约 4% 白边；在 Letter PDF 上下方约 3% 白边。默认保留这
|
||
些比例差异，换取 PDF 输出稳定。
|
||
|
||
**给设计者的影响**：默认 PDF 不会改变封面比例，但内部布局仍应自适应：用百分比 /
|
||
`aspect-ratio` / `inset: 0` / `grid` / `flex` 撑起元素，**不要把任何元素的位置写死
|
||
成绝对像素**，否则不同视口和打印缩放下仍可能错位。
|
||
|
||
---
|
||
|
||
## 硬约束（5 条 · 不可妥协）
|
||
|
||
1. **3:4 屏幕 + PDF 独占首页（外壳不要动）**。`Cover.tsx` 的 `aspectRatio: "3 / 4"` 和
|
||
max-width / margin / border 不要改 —— `pdf-print-overrides.css` C 段只负责让封面
|
||
之后分页。**内部元素一律用百分比 / 相对单位**，不要写绝对 px 高度。
|
||
2. **图文并茂**。**禁止纯文字封面**。必须同时具备：
|
||
- **视觉主体**（什么技术都行，见下）；
|
||
- **文字层**：至少一个标题，可加一行副题、一个小标签（type / date / kicker）。
|
||
3. **主题忠实 · 只能用 `--ra-*` token**。颜色 / 字号 / 字重 / 边框 / 圆角 / 间距全部通过
|
||
`var(--ra-color-fg)` `var(--ra-color-accent)` `var(--ra-text-3xl)` 等取值。
|
||
**禁止**：写死 hex 颜色、写死字体名、写死像素字号 —— 切主题封面就废。
|
||
4. **内容忠实**。封面的视觉主体要呼应**正文主旨**（不是泛泛装饰）。读完封面，
|
||
读者要能猜出文章在讲哪个领域 / 哪种判断。比如：
|
||
- 文章讲"提示词缓存就是一切" → 封面可以是**缓存命中率曲线 / 重复 token 的高亮带**；
|
||
- 文章讲"Codex 智能体循环" → 封面可以是**带箭头的循环图（USER → MODEL → TOOL）**；
|
||
- 文章讲"色彩冲撞" → 封面可以是**两个互补色块的几何拼贴**。
|
||
5. **offline-first**。**唯一被硬禁的事**：远程图片（`<img src="https://...">`、
|
||
Google Fonts 动态加载、跨域 CSS background-url 等）—— 离线打不开。
|
||
**base64 raster** 仅当 Plan Checkpoint "配图模式" 是 `user-assets` / `ai-generated`
|
||
才允许，且必须内联。
|
||
|
||
---
|
||
|
||
## 视觉技术 · 模型自己选，效果好就行
|
||
|
||
封面的视觉主体**用什么技术由你（模型）决定** —— SVG / CSS / Canvas / WebGL / 字体 / 表情符号
|
||
/ 复杂 React 组件 / mask / clip-path / filter / 多层合成 / 任意混搭。**没有"首选"**，只
|
||
有"对这篇文章 + 这个主题，哪种最对味"。
|
||
|
||
可选技术（不全，能想到的都可用）：
|
||
|
||
- **内联 SVG**：网格 / 曲线 / 节点-边图 / 流程箭头 / 矢量插画 / pattern fill / mask；
|
||
优势是任意尺寸清晰、`currentColor` 自动跟主题。
|
||
- **CSS 几何 / gradient / clip-path / backdrop-filter**：分屏色块、玻璃感、光感、
|
||
抽象排版；适合海报感 / 平面设计感的封面。
|
||
- **`<canvas>` + JS**：粒子 / 流体 / 噪声 / 程序化纹理 / 字符 ASCII art；
|
||
适合数据 / 科技 / 生成艺术气质。注意：Canvas 在 PDF 里只会渲染**初始帧**，所以
|
||
动画类要保证"第一帧本身就是好看的最终态"。
|
||
- **复杂 React 组件**：完全自定义的布局，比如用 grid + 条件渲染做一面"目录式封面"、
|
||
用 React 重排标题字符做字体艺术。
|
||
- **字体 / 排版本身就是图**：超大字号、字距 / 行距实验、字符叠加、emoji 拼贴、
|
||
Unicode 几何字符 (`◐ ▲ ◆ ╳`)、引号 / 章节号放大到布满整页。
|
||
- **多层合成**：背景层（gradient） + 中层（SVG） + 前景层（文字） + 装饰层（图标 / 标签）。
|
||
- **混搭**：上面任意几种叠在一起。封面是单次创作，没必要拘泥单一技术栈。
|
||
|
||
**唯一不允许**：远程图片（见硬约束 5）。其它**全开放**。
|
||
|
||
**判定标准**：眯眼看 3 秒（图 OK 吗？气质对吗？切主题不会废吗？打印不会错位吗？）。
|
||
通过这 4 关，技术怎么实现都行。
|
||
|
||
---
|
||
|
||
## 构图模板（按主题感选一个起手）
|
||
|
||
| 模板 | 视觉布局 | 适合主题感 |
|
||
|---|---|---|
|
||
| **A · 上字下图** | 标题区在上 1/3，视觉主体占下 2/3（书封最经典的"片名 + 主画面"） | 教学 / 报告 / 多数场景 |
|
||
| **B · 大字盖图** | 视觉铺满整个 3:4，超大字标题压在中段或下段 | bodoni / press · 印刷 / 叙事 |
|
||
| **C · 上下分屏** | 上半色块（含标题） + 下半视觉主体；中间一条分割 | tufte / shannon · 数据 / 严谨 |
|
||
| **D · 满屏拼贴** | 视觉是若干色块 / 形状 / 图层拼接铺满整页，文字嵌在某个块里 | sottsass / bayer · 当代 / 视觉感 |
|
||
| **E · 极简框** | 大留白、细线框、标题居中、一个极小的视觉锚点（一个圆 / 一个图标 / 一段曲线） | 极简主题 / 严肃报告 / 哲思 |
|
||
|
||
**不要混搭** —— 一篇文章一个模板。模板只是"起手"，具体怎么实现（用 SVG / CSS /
|
||
Canvas / React 还是别的）由你定。
|
||
|
||
---
|
||
|
||
## 主题倾向（速查）
|
||
|
||
读 `theme-profiles/<id>.md` 获得权威风格指南；下面是"封面起手"提示（**视觉手法只是
|
||
启发，不是规定** —— 你可以用任何技术做出对的气质）：
|
||
|
||
| 主题 | 封面感觉 | 推荐模板 | 视觉手法举例 |
|
||
|---|---|---|---|
|
||
| tufte | 学术 / 克制 / 数据 | C 或 E | 极细线网格 + 一个小型 sparkline / 数据点；颜色低饱和 |
|
||
| press | 报刊 / 叙事 / 凝重 | B 或 E | 大字标题 + 横分割线 + 印章式 kicker；可加铜版画感纹理 |
|
||
| shannon | 信息论 / 工程 / 蓝调 | A 或 C | 节点-边图 / 香农式信道图 / 概率分布 |
|
||
| bodoni | 古典 / 优雅 / 印刷 | B | 高对比 serif 大标题 + 极细 hairline 装饰 + 留白 |
|
||
| bayer | 包豪斯 / 几何 / 排版 | D | 三原色块拼贴 + 圆 / 方 / 三角组合 |
|
||
| sottsass | 后现代 / 玩味 / 明亮 | D | 撞色色块 + 装饰图案 + 大胆字体 |
|
||
| fuller | 测地 / 科技 / 结构 | A 或 D | 三角网格 / 等距投影 / 工程图样 |
|
||
|
||
没列到的主题 → 读它的 `theme-profiles/*.md` 决定模板。
|
||
|
||
---
|
||
|
||
## 反面案例（**禁止**）
|
||
|
||
- **纯文字封面**（只有标题居中，没有视觉主体）。
|
||
- **使用远程图片**（`<img src="https://...">`、`background-image: url(https://…)`）—— 离线打不开。
|
||
- **写死颜色 / 字体 / 像素值**（`color: #ff0066` / `font: 24px Helvetica`）—— 切主题废。
|
||
- **位置写死成 3:4 时的绝对像素**（`top: 384px`）—— 换视口或打印缩放就错位。
|
||
- **复制 Hero 内容到封面**（标题、副题、日期、作者全堆封面里）—— 与 Hero 重复。
|
||
- **塞过多元素**（封面里同时塞下：标题 + 副题 + 三个小标签 + meta + Lead + TOC 预览 +
|
||
大插画 + 二维码）—— 信息密度爆炸，不像封面像 dashboard。
|
||
- **内部元素溢出容器**（让 absolute 子元素跑出 3:4 边界）—— PDF 会被裁切。
|
||
- **封面承担正文**（把第一段干货塞封面里）—— 封面是钩子不是内容。
|
||
- **Canvas 动画依赖时间才出现内容**（PDF 只截第一帧，黑屏）—— 保证第一帧自身就好看。
|
||
|
||
---
|
||
|
||
## 自检（**必过 5 条**）
|
||
|
||
写完封面，对照下面 5 项；任何一项 fail → 改完再交付：
|
||
|
||
1. **图文并茂**：截掉文字层后还剩视觉主体？截掉视觉层后还剩文字？两者都要有。
|
||
2. **主题忠实**：切到 `theme-profiles/index.json` 里另一个主题（改 `main.tsx` 一行），
|
||
封面**自动跟随**变色 / 变字、不破相？如果有写死值就不算过。
|
||
3. **内容忠实**：盯着封面看 5 秒钟，能不能猜出文章在讲什么？如果只能看到"一个漂亮
|
||
图形"但跟正文关系不大，不算过。
|
||
4. **比例自适应**：把容器从 3:4（屏幕）拉成 ~3:4.2（A4）/ ~3:3.9（Letter），内部元素
|
||
没溢出 / 没错位 / 没出现大块空白？（用 `position:absolute; inset:0` + `grid`
|
||
/ `flex` 撑起元素，而不是写死像素位置，就自动通过）。
|
||
5. **不与 Hero 重复**：封面文字 ≠ Hero 文字（一个是钩子，一个是锚点）。
|
||
|
||
---
|
||
|
||
## PDF 表现
|
||
|
||
`scripts/pdf-print-overrides.css` 的 C 段会把封面：
|
||
|
||
- **保持封面的 3:4 外壳不变** —— 避免 Chromium print 在强拉伸时裁切内部布局；
|
||
- **`break-after: always`** —— TOC 从第二页开始。
|
||
|
||
效果：PDF 第一页 = 3:4 封面独占首页；第二页起 = TOC + 正文。
|
||
|
||
> **想做满页封面**：可以在单篇文章里为 `.ra-cover` 加专门的 print 适配，但必须导出
|
||
> PDF 目检。不要把满页拉伸作为通用默认值。
|
||
|
||
---
|
||
|
||
## 何时关闭封面（`--no-cover`）
|
||
|
||
99% 的场景都该开。少数关闭的情况：
|
||
|
||
- **briefing**（决策摘要 / 给忙人看）：用户希望"打开就是干货"，封面反而是阻力。
|
||
- **dialogue**（对话 / 访谈）：内容是对话流，封面价值不大；可关。
|
||
- **用户明确要关**：尊重用户。
|
||
|
||
关闭方法：
|
||
- 脚手架阶段：`bash scripts/scaffold.sh <dir> --theme=<id> --no-cover`。
|
||
- 已脚手架：删 `article/main.tsx` 里 `<Cover />` 引入和渲染，可顺手删 `Cover.tsx`。
|
||
|
||
---
|
||
|
||
## 写作流程（在 Skill 里的位置）
|
||
|
||
| 阶段 | 跟封面相关的事 |
|
||
|---|---|
|
||
| Phase 2 Plan | `plan/plan.md` Brief 段里加一行"封面：开/关 + 一句构图想法 + 主题模板（A/B/C/D/E）" |
|
||
| Phase 3 Checkpoint 1 | 第 5 项独立确认"封面 · 开 / 关"，AI 推荐通常是"开" |
|
||
| Phase 4 First Spread | **替换 `article/Cover.tsx` 里的 `<CoverPlaceholder />`** 为本文专属设计；首屏验收必看封面 |
|
||
| Phase 4 First Spread Review | Reviewer 用本文档自检 5 条核对 |
|
||
| Phase 6 Final Review | Visual Reviewer 复查封面与主题一致性 |
|
||
| Phase 8 Delivery | PDF 导出时封面自动独占首页（不需要额外操作） |
|