/cover-design

name: cover-design
description: Design typography-driven video cover images using HTML/CSS + Chrome DevTools screenshot. Generates covers in all needed aspect ratios - 16:9 (YouTube), 16:10 (Bilibili), 9:16 and 3:4 (抖音/视频号 竖屏短视频) - with big readable text. Different from `cover-image` (AI hand-drawn aesthetic) - this is precise typography control via code. Use when user asks for "视频封面", "thumbnail", "做封面", "cover design", "缩略图", "横屏/竖屏封面", "抖音封面", "视频号封面".

Cover Design · 代码驱动的封面设计

用 HTML/CSS 写封面,然后用 Chrome DevTools MCP 截图成 PNG。**字体精确可控**,适合视频缩略图、文章题图、社交分享卡这类对文字位置敏感的场景。

跟 `cover-image` 的分工

| | `cover-image` | `cover-design` (本 skill) | |---|---|---| | 渲染方式 | AI 生图 (Replicate gpt-image-2) | HTML/CSS + 浏览器截图 | | 视觉风格 | 手绘 / 插画 / 编辑设计 | 排版驱动 / typography hero | | 文字精度 | AI 渲染的文字常常模糊 / 错字 | 100% 精确 | | 适合 | 文章题图 / 抽象概念 / 美术导向 | 视频缩略图 / 大标题 / 品牌一致性 | | 风格扩展 | 通过 prompt 调整 | 通过新增 HTML 模板扩展 |

需要 thumbnail 在 160px 缩略图也读得出大字 - 用本 skill。 需要插画美感和氛围 - 用 `cover-image`。

适用场景

• 横屏视频缩略图 (YouTube / Bilibili)
• 竖屏短视频封面 (抖音 / 视频号)
• 文章 hero 题图 / 社交分享卡 (X Card / Open Graph)
• 系列内容 (品牌一致性)

输出比例（4 套核心）

封面要覆盖横屏长视频和竖屏短视频，去重后是 **4 种核心长宽比**，分两个模板族生成。完整规格、平台落点像素、安全区见 `references/platform-specs.md`。

| 比例 | 朝向 | 设计画布 | 模板族 | 主要平台 | |---|---|---|---|---| | 16:9 | 横 | 1920×1080 | `hero-typography` | YouTube、横屏短视频 | | 16:10 | 横 | 1920×1200 | `hero-typography` | Bilibili（封面位是 16:10，不是 16:9） | | 9:16 | 竖 | 1080×1920 | `hero-typography-vertical` | 抖音、视频号 | | 3:4 | 竖 | 1080×1440 | `hero-typography-vertical` | 视频号官方封面、抖音九宫格 |

一期视频通常做 **1 个横屏设计 + 1 个竖屏设计**，各导出 2 个比例，共 4 张图。横屏的 16:9↔16:10、竖屏的 9:16↔3:4 只差 `--cv-h`，同一 HTML 改一个变量就能切。**竖屏务必遵守安全区**（抖音/视频号首尾会叠 UI 或被裁），核心文字居中。

核心原则

0. 想法先行(方法论主线 · 最高优先)

这个 skill 只采用**一套**构思方法论:Paul Rand 的「想法先行」。封面不是先选模板填标题,而是**先有一个想法(idea)** - 这期到底要让人 get 到什么 - 再让画面为它服务。四步:**研究(不预设)→ 抽取核心想法 → 删减(simplicity 是好想法的副产品)→ 缩到 160px 验证那个想法还在**。

核心想法**不一定是产品名**,形态开放:一个名字 / 一个 logo / 一个隐喻装置 / 一种氛围。下面的所有原则(单焦点、传达、精简)都是这套方法论的执行层 - **先有想法,再谈表达**。完整方法论见 `references/design-conception.md`,这是全 skill 的构思总纲,不要混入别的设计流派。

1. Thumbnail ≠ Slide

封面缩略图在订阅列表 / 推荐位 / 搜索结果里最小可能只有 160px 宽。**bento 网格、4 个 metric tiles、信息密集的布局都不工作**。要的是:

• **单焦点** - 一个主元素占据 40-60% 画面
• **大字优先** - 主标题字号 ≥ 200px (1920×1080 画布)
• **3 秒原则** - 缩到 160px 仍能读出主标题
• **少即是多** - 一个视觉钩子 + 标题 + 副标 + 作者署名,完。

**元素预算(默认 ≤ 5,模板一律按此交付精简版,多出来的先删再说)**:① 一个 kicker(品类 / 工具,可选)② 一个核心主元素(标题 或 logo / 隐喻装置 - 单焦点)③ 一句副标(可选)④ 一处署名(只一次)⑤ 至多一个领域装置(before/after、命令条、N→1、大数字 - 仅当承载信息时)。**默认不放**:日期、eyebrow 小字、`Ep·` 胶囊、扇出节点 / 纯装饰色块 / 几何形、上下分隔横线、第二处署名、重复副标。要加回任何一项,先自问「它传达了信息吗」 - 不传达就删,这是原则 0「删减」的执行。

**关键区分(精简时别误伤)**:风格本身的视觉语言 - swiss 的网格细线、bauhaus 的几何色块、terminal 的扫描线 + 光标、aurora / glass 的光晕渐变、blueprint 的网格线稿 - 是这个风格的**身份**,不是 chrome,**不在精简之列**。要删的是被过度填充的**内容槽**(eyebrow / 日期 / episode 胶囊 / 第二署名)和**不承载信息的装饰**(扇出节点、纯平衡用的抽象色块)。

详见 `references/thumbnail-vs-slide.md` 与 `references/cover-composition.md`(默认元素集)。

2. 模板驱动 + 参数化

每种风格落地为一个 HTML 模板,所有可变内容(主标题、副标、accent 色、作者署名等)通过 CSS 变量或文本占位符暴露。新增风格 = 新增一个模板,不动 skill 主流程。

可用模板见 `templates/` 目录，每个风格一对（横屏 + 竖屏）。当前有 15 个风格（见 Step 2 列表），风格目录与扩展规格见 `references/design-styles.md`。

3. 固定像素画布 + 浏览器陷阱

`.cover` 元素**必须用固定像素**（通过 `--cv-w` / `--cv-h` 变量 - 横屏 1920 宽、竖屏 1080 宽，高度按比例取值），**不要用 `vw` / `vh` / `%`**。原因见 `references/render-pipeline.md` 里的浏览器视口陷阱章节 - 简单说,resize_page 设的高度不等于实际视口高度,Chrome 工具栏 / 标签栏会吃掉 200-400px。固定像素 + fullPage 截图才稳。

4. 传达 > 好看(让核心想法落到画面)

封面读得清还不够,要在三秒内说清**核心想法是什么(及它的形态)/ 什么品类 / 什么领域**:核心想法做最显眼的主元素(它可能是名字、logo、隐喻装置或氛围 - 见原则 0),品类给信号(agent skill→斜杠命令条、模型→logo),领域给锚(设计→before/after、安全→告警)。品牌署名只出现一次,精简次要 chrome(simplicity 是好想法的副产品)。这是封面质量能超过纯模板套用的关键一环 - 详见 `references/cover-composition.md`。

工作流

Step 1 · 收集信息

问用户(已给的跳过):

1. **目标平台 / 比例** - 要哪些?默认全 4 套(16:9 YouTube / 16:10 Bilibili / 9:16 抖音·视频号 / 3:4 视频号·抖音九宫格)。这决定做横屏、竖屏、还是都做 (见上方「输出比例」表) 2. **主标题** - 大字部分,通常 1-3 个英文词或 4-8 个中文字 (必填) 3. **副标题** - 一句话点题,中文 / 英文都行 (必填) 4. **品牌信息** - 频道名 / 作者名 / 日期 (可读 auto memory 的 `video-promo.md`) 5. **强调色** - 默认 lime `#7bff9f`,可换 (可选) 6. **背景** - 默认纯黑 `#000`,可换 (可选) 7. **品牌 logo** - 要不要带某个模型/产品/厂商的官方 logo (Claude / OpenAI / Gemini / DeepSeek / Ollama……)?来源是 `@lobehub/icons`,取图标和放置见 `references/brand-logos.md` (可选) 8. **额外元素** - 比如版本号、tagline、装饰图形 (可选) 9. **输出路径** - 默认输出到视频目录,文件名带比例后缀 (`cover-16x9.html/.png` 等) 10. **是不是讲某个具体产品 / 工具?** - 是的话拿到官网 URL,进入**品牌匹配模式**(见下),用产品自己的色 + 字 + logo,比频道默认 lime 更贴合产品

如果用户给了文章 / 脚本路径,先 Read 抽取主标题和副标题,再确认。

品牌匹配模式(选题是某个具体产品 / 工具 / 开源项目时)

封面采用**产品官网的品牌色和字体**,封面气质和被介绍的产品一致。运行:

scripts/extract-brand-theme.sh https://产品官网

它输出可直接写入模板 `:root` 的 Google Fonts + 颜色 token(含 oklch 原值,Chrome 原生支持,原样写入即可)。用提取值覆盖模板默认的 `--accent`/`--bg`/`--ink`/`--font-display`/`--font-mono`,风格按官网调性从 `design-styles.md` 选最接近的。**方法、字体中文搭配、取不到时的处理见 `references/brand-theme.md`**。这和 `brand-logos.md`(取 logo)互补,配齐「色 + 字 + logo」一整套。

Step 1.5 · 构思:抽取核心想法（动手前必做 · 见原则 0）

收集完信息,**先别选模板**。按 `references/design-conception.md` 走一遍「想法先行」,抽出这期的**核心想法**写下来,再定层级(核心想法做最大主元素 ＞ 角度 / 卖点做 accent 副线 ＞ 能力 / 细节做灰字),带着它进 Step 2。

两条提醒:核心想法**不一定是产品名**(也可能是 logo / 隐喻装置 / 氛围);**别把「角度 / 卖点」误当核心想法**。**这一步不可跳过 - 是封面超过「模板套标题」的关键。**

Step 2 · 选模板（按朝向选模板族）

根据 Step 1 要的比例选模板族:

先按朝向选模板族，再按风格选具体模板（每个风格都有横屏 + 竖屏两版）:

• 要横屏 (16:9 / 16:10) → `{style}.html`
• 要竖屏 (9:16 / 3:4) → `{style}-vertical.html`
• 两个都要 → 两版各做一份,共享同一套标题 / 副标 / 品牌信息

当前可用风格（每个都有横屏 `{style}.html` + 竖屏 `{style}-vertical.html`）:

• **`hero-typography`** - 黑底霓虹大字 + fan-out 节点。技术解读 / 新功能发布，强视觉钩子。
• **`swiss`** - 瑞士国际主义：暖纸底 + 网格 + 极轻大字 + 单一强调色 + 1px 细线。冷静专业，技术拆解 / 评测 / 数据。
• **`neo-brutalism`** - 新粗野：高饱和撞色 + 粗黑描边 + 硬阴影 + 圆角块。玩味醒目，产品发布 / 工具类。
• **`bauhaus`** - 包豪斯：米白底 + 红黄蓝几何色块 + 粗网格。经典感，设计 / 理论 / 艺术类。
• **`editorial`** - 杂志风：暖纸底 + 衬线大标题 + 氛围背景 + 细线引文。有质感，观点 / 深度长文 / 人物。
• **`brutalism`** - 粗野：白底 + 系统/等宽字体 + 硬黑边框 + 刻意朴素。黑客 / 独立开发 / 逆向工程气质。
• **`aurora`** - 极光渐变：深底 + 多彩光晕 + 通透细字。AI / SaaS / 现代科技，当下感最强。
• **`glass-dark`** - 深色玻璃拟态：深底 + 背后柔光 + 磨砂玻璃面板。AI / 产品 / 现代科技，通透高级。
• **`terminal`** - 终端黑：纯黑 + 等宽荧光 + 扫描线 + 光标。CLI / 开发 / 黑客 / 逆向