XingfenD/teamai-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
65c04def51fa33e310360b85e79c53b460c81f7c
teamai-test/.teamai/skills/common/beautiful-article/references/cover.md
T

12 KiB
Raw Blame History

文章封面（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 导出时封面自动独占首页（不需要额外操作）
Reference in New Issue View Git Blame Copy Permalink