/cover-design

Cover Composition · 封面该放哪些元素来传达选题

thumbnail-vs-slide.md 管的是易读性（大字、单焦点、160px 可读）。这份管的是内容传达 - 同样一张读得清的封面，放对元素能在三秒内说清选题，放错就只是一句好看的标语。

这份是执行层。 上游是 design-conception.md（想法先行 · 方法论主线）：先按那套抽出这期的核心想法，再用下面的规则把它表达成画面元素。本文回答的是「想法怎么落到画面」，不替你想出想法。

来源：impeccable 选题实战中的多轮用户反馈。封面初版「读得清但传达不到位」，由此逐条总结出下面这些规则。

1. 三信号原则（最高优先）

封面要让人在三秒内读出三件事。做完封面先自检这三条，缺哪个补哪个：

「是什么」指向的是核心想法，不默认等于产品名 - 想法可能是一种氛围、一个隐喻装置。下面两个反例都是「核心想法恰好是具名产品」的情形:

反例一（impeccable）：初版把中文标语「祛 AI 味」做成最大字，产品名 impeccable 缩成顶角小字，用户反馈「品牌名不显眼」。这期的核心想法就是产品本身，改成产品名为最大主元素后才对。

反例二（MiniMax M3）：把角度「开放权重 · 三合一」当主角、产品名缩小 → 应让产品名当主角、角度退 accent 副线(完整复盘见 design-conception.md 文末 Worked example)。具名产品的固定层级:产品名（最大）＞ 角度 / 卖点（accent 副线）＞ 能力 / 细节（灰字）。

两条共同的教训:别把「角度 / 卖点」误当成核心想法。 但也别反过来教条 —— 若这期核心想法本就是一种氛围或一个隐喻（不是具名产品），那主元素就该是那个氛围 / 装置，而不是硬塞一个名字。先回 design-conception.md 抽对想法，再决定主元素。

品类信号怎么给

• agent skill / 命令行工具 → 放斜杠命令条（/polish /bolder /colorize）或终端提示符 >，让人立刻看出是「可调用的技能 / 命令」。比文字说明更直接。
• 模型 → 厂商 logo + 参数 / 版本（见 brand-logos.md）。
• 框架 / 库 → 代码片段或 import 行 + star 数。
• 产品 / SaaS → 产品 logo + 一句价值主张。

领域锚（让人看出是哪个领域）

• 设计 → before/after UI 小样、色板 swatch、字体 specimen（Aa）。
• 安全 → 终端告警、🔒、CVE / 红色高亮、扫描结果。
• 数据 / 分析 → 图表骨架、大数字、网格。
• 基础设施 / 运维 → 架构节点、管线箭头、blueprint 线稿。
• 领域锚常常和品类信号是同一个元素（命令条既证明是 skill，命令名又点出领域）。

2. 领域装置（一个图示同时解决领域呈现 + 价值传达 + 填空白）

封面右半 / 一侧放一个和选题价值主张对应的小图示，是性价比最高的一块 - 它一眼点明领域、演示产品做什么、又把空白填了。按选题类型选装置：

• 转变型（把 X 变成 Y / 优化前后 / 重构 / 祛 XX 味）→ before → after 对照小样。
  • 两个「设备框」mini（各约 330px 宽、360px 高，圆角，像缩小的浏览器 / 卡片）+ 中间 accent 箭头 →，每框顶部标签 ✕ 改之前 / ✓ 改之后。
  • before 框放该领域的典型问题（设计类 = 紫蓝渐变 + 卡片套卡片 + Inter + 灰字），after 框放改进版（用本期品牌色 / 字体做干净版）。
• 整合 / 替代型（一个工具替掉一堆）→ N 个 ✕ → 一个 ✓ 列表。
  • 例：Bun 封面 - node / npm / bundler / test runner 四个框各打 ✕ → 箭头 → $ bun 一个搞定。
• 对比型（X vs Y）→ 左右两栏对照 + 中缝 vs。
• 数据 / 性能型（快多少、省多少）→ 大数字 + 单位 + 一句对比基准。

可复用的「设备框对照」partial 见 ../templates/partials/before-after.html（自带 CSS，改文案和 --accent 即用，转变型 / 整合型都能改）。两个真实实现：

• 转变型：contenthub videos/20260602-impeccable-design-skill/cover.html 的 .demo 块（impeccable，before/after）。
• 整合型：~/cover-verify/skill-bun/cover.html（Bun，N→1）。

3. 默认元素集 + 精简 chrome / 品牌只出现一次

先从精简版起手，再按需加回 - 不要从塞满的模板往下删。 这是默认交付形态，不是收尾才做的验收。

默认元素集（≤ 5，模板出厂即此形态）

默认不放（除非确有信息价值）：日期、eyebrow 小字、Ep· 胶囊、扇出节点 / 纯装饰色块 / 几何形（不承载领域信息的）、上下分隔横线、// 标签 装饰、第二处署名、重复副标。

精简时别误伤风格身份：风格本身的视觉语言（swiss 网格细线、bauhaus 几何色块、terminal 扫描线 + 光标、aurora / glass 光晕、blueprint 网格线稿）是这个风格之所以成立的身份，保留。要删的是被过度填充的内容槽和不承载信息的装饰，不是风格的招牌处理。

简洁不是留白，而是去掉次要 chrome，把空间让给有信息量的视觉。

• 品牌署名全图只出现一次。 反例（本例遇到的）：VerySmallWoods 同时出现在右上角和页脚，用户反馈冗余。改到只剩左下一处。
  • 注意区分产品名（选题主角，要显眼）和频道署名（作者标识，低调一次即可）—— 这是两个不同的东西，不算重复。
• 默认不放这些次要 chrome，除非有信息价值：日期、Ep · 胶囊、上下分隔横线、// 标签 这类装饰性 label、重复的副标。
• 纯装饰的色块 / 几何形若不承载领域或价值信息，删掉或换成有意义的装置。 反例（本例遇到的）：封面右侧放了一个抽象珊瑚色方块纯做平衡，用户反问「这么抽象吗」 - 它不传达任何信息。要么删，要么换成领域装置（before/after、命令条、N→1、大数字）。用「有意义的内容」做平衡，而不是「无意义的形状」。
• 精简后留出的空间，用 before/after、命令条、大数字这类有信息量的视觉来填充，而不是留一片黑。

4. 构图：居中之外，左锚定非对称留白也是一等公民

封面不必把主元素摆在正中。左锚定非对称构图（内容压在左 ~45%、右侧 ≥40% 留空）同样成立，而且在「冷静 / 克制 / 编辑感」调性下往往更高级 - 大片空白不是「没填完」，它就是构图本身（参考 quiet-dark 风格）。

• 所有元素共享同一条左边缘：kicker、标题、横杠、副标、署名都对齐左线，靠对齐而非居中建立秩序。
• 层级只靠字号 + 字重 + 留白：letter-spaced 微 kicker → 大字标题 → 细横杠 + 小灰副标。不靠任何装饰承载层级。
• 右侧留空别手痒去填 - 想填就回 §2 放领域装置（before/after、命令条、N→1、大数字），用有信息量的视觉，不用纯装饰色块（见 §3）。
• 竖屏窄画幅里「右侧大留白」不成立，改用「纵向大留白 + 文字左对齐」保持同一种克制感（见 quiet-dark-vertical）。

5. 强调色：当「标点」用，不当「填充」用

这是「读得清」最容易翻车的一处，单列出来（完整原理见 thumbnail-vs-slide.md §4 + SKILL.md Critical Rule 14）：

• 标点式（对）：强调色只出现在 kicker、一段短横杠、单个高亮词、图标、数字 - 小、实、短促。主标题保持最高对比的中性色（白压暗 / 墨压浅）。
• 填充式（错）：给整段大标题上饱和色、或在同明度半透明色块上压同色文字。中等亮度 + 任何 glow → 字缘发虚，160px 缩略图必糊。
• 一句话：颜色用来「指」，不用来「铺」。 想强调，是让强调色那一小块更显眼，不是把主元素整个染色。

验收自检清单（并入 SKILL.md Step 5）

• 三信号都到位？（是什么 / 什么品类 / 什么领域 - 逐条指认画面里哪个元素负责）
• 主角（产品 / 概念）是不是最显眼的主元素？
• 品牌署名是否只出现一次？产品名与频道署名有没有混淆或重复？
• 有没有可删的次要 chrome（日期 / 胶囊 / 横线 / 装饰标签）？
• 空白处是有信息量的视觉还是纯空？转变类选题有没有放 before/after？
• 三秒原则 / 160px 可读（见 thumbnail-vs-slide.md）。
• 配色服务可读性？主标题是最高对比中性色（没被饱和色填充、没加 glow），强调色只当「标点」（kicker / 横杠 / 高亮词），没有同明度色块压同色字（见 §5）。

多方向预览工作法（推荐）

定稿前，一次给出 3-4 个不同方向供用户选择（不同风格 / 配色），而不是单版反复改 - 收敛更快，也更容易找到合适的方向。本例给了 A 杂志浅色 / B 粗野 / C 暖色块 / D 瑞士蓝 四版预览，用户选定方向后再精修。各方向存档在 cover-styles/，命名 {字母}-{风格}.html/.png。