竖版图文卡片批量生成
> 本技能是通用竖版（1:3）图文卡片生成工具，不依赖任何特定内容平台。
> 产出为 1080×1440px HTML，可经截图后用于任意支持竖图的渠道。
Overview
Batch-generate poster-quality vertical HTML image cards (1080×1440) from an existing content repository.
Each issue produces 3 card types (cover, knowledge, quote) rendered with a dark cosmic + gold glow visual style.
When to Use This Skill
- 你有一个按日期组织的竖版内容目录，每个子目录含
content.md - 现有卡片 HTML「太丑」，需要重做成海报级视觉
- 需要批量生成每期 3 张以上卡片，覆盖多天
- 需要同时拿到视觉 HTML 与提取好的标题/正文数据
Prerequisites
内容源目录需包含：
- 按日期命名的子目录（如
2026-04-30/、2026-06-22/） - 每个子目录下
content.md，采用标准格式： # Title首行标题- Hook 段落（钩子）
📌 【概念名】定义块💡 知识点标题正文段落🎯 一句话总结：总结💬 CTA 问句#话题标签行- 一个
topics.json，把概念映射到分类 + 副标题
Workflow
Step 1: 定位内容源
确认 base 目录，扫描全部日期子目录，读取 topics.json 获取概念元数据。
Step 2: 设计或复用卡片 CSS 模板
使用内置 assets/poster-style.css（暗色宇宙海报模板），提供：
.poster-cover— 深色渐变背景、大标题、Day 角标、装饰圆环.poster-knowledge— 玻璃态知识卡，彩色左边框.poster-quote— 居中的金色金句布局 + CTA 区
改配色只需改 :root 里的 CSS 变量：
--gold、--gold-light— 主强调色（金）--cyan、--teal、--blue、--purple、--pink— 辅助强调色--bg-abyss、--bg-deep— 背景层次
Step 3: 跑批量生成脚本
执行 scripts/generate_posters.py，它会：
-
解析 每个
content.md，提取：
- 标题、钩子正文、概念名（自动去掉「是什么」等后缀）
- 定义、知识点（最多 3 条）、一句话总结
- CTA 问句、话题标签 -
匹配
topics.json得到：
- 分类（宏观经济学、博弈论、行为经济学等）
- 副标题 -
生成 每期 3 个 HTML：
-poster-cover.html— 概念名 + 副标题 + Day 角标 + 分类
-poster-knowledge.html— 栏目标题 + 最多 3 张玻璃卡 + 页脚金句
-poster-quote.html— 大引号 + 总结文案 + CTA + 署名 -
生成 内联 CSS 的
*-preview.html，可直接用浏览器打开 -
输出
titles_and_texts.json，汇总全部标题与正文数据
Step 4: 预览与校验
起一个本地 HTTP 服务（Python 自带 http.server 即可），浏览器打开 preview 文件，检查：
- 概念名显示正确（没有残留「是什么」等后缀）
- 分类标签确实来自 topics.json
- 金句内容非空
- 1080×1440 下视觉渲染符合预期
Step 5: 截图导出
用 Playwright/Puppeteer 把每个 *-preview.html 按 1080×1440 截图，得到 PNG。
竖版卡片通用尺寸为 1080×1440（1:3），适配主流竖屏图文渠道。
Content Parsing Rules
解析器兼容以下格式变体：
| 写法 | 示例 | 解析结果 |
|---|---|---|
【概念名】 |
【滞胀是什么】 | 概念名 = "滞胀"（去掉「是什么」） |
【什么是概念】 |
【什么是口红效应】 | 概念名 = "口红效应"（去掉「什么是」） |
| 🎯 与文案同行 | 🎯 一句话总结：文案 |
summary = "文案" |
| 🎯 标签与文案分行 | 🎯 一句话总结：\n 文案 |
summary = "文案" |
Directory Structure (Output)
<output-base>/
├── templates/poster-style.css # 卡片 CSS（从 assets/ 复制）
├── day3-滞胀/poster/
│ ├── poster-cover.html # 常规版（相对 CSS 路径）
│ ├── poster-knowledge.html
│ ├── poster-quote.html
│ ├── poster-cover-preview.html # 内联 CSS 版
│ ├── poster-knowledge-preview.html
│ └── poster-quote-preview.html
├── day4-囚徒困境/poster/ ... （结构相同）
├── ...
├── titles_and_texts.json # 全部标题与正文
└── preview-index.html # iframe 总览页
Customization Tips
- 换配色：改
poster-style.css的:root变量 - 调整卡片数量：在
generate_posters.py里增删 HTML 模板 - 改尺寸：改 CSS
:root的--w/--h（默认 1080×1440） - 加一期：在
topics.json加条目，并新建date-dir/content.md
Resources
scripts/
- generate_posters.py — 主批量生成脚本，Python 3.10+
python generate_posters.py --base ./content --output ./output
从--base目录读取（含topics.json与各 Day 子目录），输出到--output。
输入缺失/格式有误时会明确打印缺哪个文件、缺哪一行标记，不会静默跳过整批。
输入文件格式见references/example-input.md。
assets/
- poster-style.css — 完整卡片 CSS 模板（暗色宇宙风）。运行前先复制到
<output>/templates/。
references/
- example-input.md — 最小可运行示例：展示
topics.json与content.md的规范格式，
以及 📌/💡/🎯/💬 各标记的解析规则。新接一期内容前先照此对齐格式。
