菜单
将文章内容自动拆分为多张信息图海报（2400x3600竖版），支持多种风格模板和6种页面布局。 Use when: (1) 用户说"生成海报", (2) 用户发文章要求做图, (3) 用户说"做成卡片/信息图" (4) 用户发文章并希望转成可分享的图片, (5) 用户要求制作信息图/infographic
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | article-poster-generator |
| description | 将文章内容自动拆分为多张信息图海报（2400x3600竖版），支持多种风格模板和6种页面布局。 Use when: (1) 用户说"生成海报", (2) 用户发文章要求做图, (3) 用户说"做成卡片/信息图" (4) 用户发文章并希望转成可分享的图片, (5) 用户要求制作信息图/infographic |
将长文章自动拆分为5-8张精美信息图海报（2400×3600竖版），支持5种视觉风格 × 6种页面布局。 使用 Python + Playwright 将 HTML 模板渲染为高清 PNG 图片。
| 风格ID | 名称 | 配色方案 | 设计特征 |
|---|---|---|---|
dark-tech | 暗夜科技 | 深色底(#1a1a1a) + 猩红(#cc4444) | CNC金属质感，单色红系（猩红+珊瑚+银灰），暗外框+亮顶框内发光 |
cyberpunk | 赛博朋克 | 深蓝紫底(#0a0a1a) + 霓虹青(#00d4ff) + 品红(#ff007c) | 4px切角，霓虹发光，HUD装饰码，80/15/5色彩法则 |
minimal-biz | 极简清新 | 浅绿底(#F0F7F7) + 深色文字(#1C2226) + 深青绿(#1A7D7D) | 白卡片+阴影，清爽专业 |
guochao | 黑金奢华 | 深褐底(#1a0a0a) + 暗金(#d4a853) / 复古红(#c43a31) | 邀请函内框，冷白标题+金色点缀，黑金红银四色纪律 |
dark-green | 暗夜青绿 | 深色底(#0C1316) + 青绿强调(#3DB8B0) | 卡片微高光，赛博系辅助色，极客气质 |
大标题 + 副标题 + 核心要点列表。标题要大，占页面视觉主体。
{
"type": "cover",
"slide_number": "00",
"tag": "今日速评",
"tag_icon": "⚠",
"title": "主标题（10字以内最佳）",
"subtitle": "副标题或来源说明",
"highlights": ["核心要点1", "核心要点2", "核心要点3"]
}
经典纵排卡片，每张有彩色左边框。适合并列的多个知识点/要点。
{
"type": "content",
"slide_number": "01",
"tag": "分类标签",
"tag_icon": "📋",
"title": "这页的主题",
"sections": [
{
"title": "小节标题",
"content": "正文内容（50-100字为佳）",
"highlight": "需要高亮的关键句（可选）",
"border_color": "red"
}
]
}
大编号圆球 + 连接线，适合按步骤操作的教程/流程。
{
"type": "steps",
"slide_number": "02",
"tag": "操作步骤",
"tag_icon": "⚡",
"title": "三步搞定",
"steps": [
{
"title": "步骤标题",
"content": "步骤说明（40-80字）"
}
]
}
2列网格布局，顶部彩色边框。适合踩坑/技巧/对比/特性列表。
{
"type": "grid",
"slide_number": "03",
"tag": "避坑指南",
"tag_icon": "⚠",
"title": "四个常见坑",
"cells": [
{
"icon": "❌",
"title": "单元格标题",
"content": "说明文字（30-60字）"
}
]
}
居中大字金句 + 下方解释卡片。适合核心观点/名言/关键结论突出展示。
{
"type": "quote",
"slide_number": "04",
"tag": "核心观点",
"tag_icon": "💬",
"quote": "一句话核心观点（20字以内最震撼）",
"source": "来源或补充说明（可选）",
"details": [
{
"label": "标签名",
"text": "详细解释（40-60字）"
}
]
}
引用框总结 + 行动建议列表。固定用于最后一页。
{
"type": "summary",
"slide_number": "05",
"tag": "总结",
"tag_icon": "💡",
"title": "核心观点",
"summary_text": "一段话总结全文（80字以内）",
"action_items": ["行动建议1", "行动建议2", "行动建议3"]
}
文章转知识卡片不是"凭感觉拆"，而是有一套完整的理论体系支撑。 提取和制卡是一体的——提取什么、怎么提取，必须由卡片的需求反向驱动。
┌─────────────────────────────────────────────────────┐
│ Phase 1: 提取（从文章中拿什么） │
│ ┌───────────┐ ┌───────────┐ ┌──────────────┐ │
│ │ 金字塔逆向 │ │ 5W1H 扫描 │ │ MECE 分组检验 │ │
│ │ 拆解层级 │ │ 不漏要素 │ │ 不重不漏 │ │
│ └───────────┘ └───────────┘ └──────────────┘ │
├─────────────────────────────────────────────────────┤
│ Phase 2: 组织（按什么顺序排） │
│ ┌───────────┐ ┌───────────┐ │
│ │ SCQA 叙事 │ │ LATCH 选型│ │
│ │ 情冲问答 │ │ 点线面块收 │ │
│ └───────────┘ └───────────┘ │
├─────────────────────────────────────────────────────┤
│ Phase 3: 呈现（怎么排版展示） │
│ ┌───────────┐ ┌───────────┐ ┌──────────────┐ │
│ │ 认知负荷 │ │ F型阅读 │ │ 格式塔原理 │ │
│ │ 7±2法则 │ │ 视觉动线 │ │ 接近/相似 │ │
│ └───────────┘ └───────────┘ └──────────────┘ │
└─────────────────────────────────────────────────────┘
提取不是"读完文章概括一下"，而是带着卡片的目标反向拆解原文。
用金字塔原理（Barbara Minto）从原文中逆向还原作者的论证结构：
原文（散乱的段落）
↓ 逆向拆解
一级：全文核心结论（1句话） → 将成为 cover 标题
二级：支撑结论的 2-4 个分论点 → 将成为每张卡片的主题
三级：每个分论点的证据/数据/案例 → 将成为卡片内的 sections/cells/steps
操作方法：
对提取出的信息做 5W1H 完整性检查：
| 要素 | 问题 | 遗漏风险 | 卡片中的位置 |
|---|---|---|---|
| What | 核心事件/观点是什么 | 低（通常最先提取） | cover title / quote |
| Why | 为什么重要/为什么发生 | 中（容易被当作背景跳过） | content sections |
| How | 怎么做/怎么实现 | 低（教程类文章的主体） | steps |
| Who | 涉及谁/影响谁 | 高（容易遗漏利益相关方） | content / grid |
| When | 时间节点/截止日期 | 高（容易被当作细节忽略） | cover subtitle / content |
| Where | 在哪里/适用范围 | 中 | content / grid |
不是每篇文章都有完整的 6 个 W，但必须主动扫描一遍确认哪些缺失是合理的。
提取出的信息块必须通过 MECE（Mutually Exclusive, Collectively Exhaustive）检验：
检验方法：把所有卡片标题排列出来，问两个问题：
提取出来的素材按以下优先级筛选，每张卡片空间有限（≤200字），必须取舍：
优先保留 优先删除
───────── ─────────
① 数据和事实（"增长了300%"） ① 过渡句（"众所周知"、"值得注意的是"）
② 具体案例（"比如某公司..."） ② 重复论述（同一观点换说法再说一遍）
③ 核心观点（作者的独特判断） ③ 背景铺垫（读者已知的常识）
④ 行动建议（"建议你..."） ④ 情感修辞（"令人震惊的是"）
⑤ 对比/转折（"但是"、"相反"） ⑤ 补充说明（括号里的解释、脚注）
Barbara Minto 的 SCQA 框架决定卡片的叙事顺序：
| SCQA | 含义 | 对应卡片 | 对应布局 |
|---|---|---|---|
| S Situation | 情境：发生了什么 | 第1张 | cover |
| C Complication | 冲突：问题/矛盾是什么 | 第2张 | quote |
| Q Question | 问题：怎么解决 | 第3-N张 | steps / content / grid |
| A Answer | 回答：结论和行动 | 最后1张 | summary |
金字塔原理要求每层下面最多 3 个支撑点（MECE 分组），所以：
Richard Saul Wurman 提出世上所有信息只有 5 种组织方式（LATCH），根据信息的"形状"匹配布局：
| LATCH | 含义 | 信息形状 | 对应布局 |
|---|---|---|---|
| Location | 按空间/位置 | 块（并排） | grid |
| Alphabet | 按字母/索引 | 块（并排） | grid |
| Time | 按时间顺序 | 线（流程） | steps |
| Category | 按分类 | 面（展开） | content |
| Hierarchy | 按重要性层级 | 点（突出） | cover / quote |
简化记忆：点（突出最重要的）→ 线（有顺序的）→ 面（要展开的）→ 块（要对比的）→ 收（总结行动）
心理学家 George Miller 的 7±2 法则：人的工作记忆一次只能处理 5-9 个信息单元。
核心原则：每张卡片是一个独立的认知单元（chunk），文字总量≤200字，要点≤5个。
| 规律 | 内容 | 在卡片中的应用 |
|---|---|---|
| F 型阅读 | 人眼先横扫标题，再沿左侧竖扫 | 标题放顶部，关键信息靠左 |
| 格式塔-接近性 | 靠近的元素被认为相关 | 卡片内分组，组间留白 |
| 格式塔-相似性 | 外观一致的元素被认为同类 | 同级内容统一样式 |
| 视觉层级 | 大的、亮的、有色的先被看到 | L1-L6 字号阶梯（240px→42px） |
| 对比度 | 差异越大越抓眼 | 强调色只用在关键信息，不滥用 |
每张卡片 = 核心论点 + 案例/数据支撑 + 行动清单（可选）
各布局的论点-支撑映射：
| 布局 | 论点位置 | 支撑位置 | 行动位置 |
|---|---|---|---|
| cover | title | highlights | — |
| content | card-title | card-content | card-highlight |
| steps | main-title | step-content | — |
| grid | main-title | cell-content | — |
| quote | quote-text | details | — |
| summary | summary-text | — | action_items |
原文
↓ ① 提取：金字塔逆向拆解（一级结论→二级分论点→三级证据）
↓ ② 检验：5W1H 扫描不漏要素 + MECE 检验不重不漏
↓ ③ 筛选：按优先级取舍（数据>案例>观点>行动，删套话/重复/铺垫）
↓ ④ 排序：SCQA 叙事（情境→冲突→问题→回答）
↓ ⑤ 选型：LATCH 匹配布局（点/线/面/块/收，至少3种不同布局）
↓ ⑥ 成卡：每张≤200字，论点+支撑+行动，F型阅读动线
根据用户输入类型获取文章内容：
curl 或浏览器抓取网页正文Agent 需要：
根据内容性质选择最合适的布局，每篇文章尽量使用3种以上不同布局，避免单调：
| 内容类型 | 推荐布局 | 原因 |
|---|---|---|
| 文章开头/核心结论 | cover | 大标题抓眼球 |
| 一句话核心观点/名言 | quote | 居中大字突出冲击力 |
| 操作步骤/安装流程 | steps | 编号+连接线，流程感 |
| 并列知识点/详细说明 | content | 卡片分区，信息密度高 |
| 常见问题/技巧/对比 | grid | 2列并排，一目了然 |
| 全文总结/行动建议 | summary | 引用框+清单收尾 |
red, yellow, green, cyan, orange, purple常用标签+图标组合：
将 JSON 保存为临时文件，调用脚本生成图片：
# 默认风格（dark-green）
python ~/.claude/skills/article-poster-generator/scripts/generate_posters.py \
--input /tmp/posters_data.json \
--style dark-green \
--output ~/Desktop/posters/
# 指定风格
python ~/.claude/skills/article-poster-generator/scripts/generate_posters.py \
--input /tmp/posters_data.json \
--style cyberpunk \
--output ~/Desktop/posters/
# 风格选项: dark-tech | cyberpunk | minimal-biz | guochao | dark-green
脚本会打印每张图片的绝对路径，格式如：
[OK] slide_00_cover.png -> /path/to/slide_00_cover.png
[OK] slide_01_quote.png -> /path/to/slide_01_quote.png
...
Agent 使用 MEDIA:/path/to/file.png 格式逐张发送给用户。
在输出目录（YYMMDD-主题/）下生成 copy.md 文件，包含多平台适配的发布文案：
# [主题] 发布文案
## 公众号封面摘要（一句话）
一句话概括全文核心，适合公众号推送的摘要栏。
## 公众号正文引导（配合信息图）
2-3段引导文字 + "👉 左滑查看 N 张信息图"。
语气正式但不刻板，突出数据和核心变化。
## 朋友圈（精简版）
3-4句话，无标签，口语化，适合直接复制发朋友圈。
## 小红书/小绿书（带标签版）
分点列要点，末尾加 #标签。
语气活泼，适当用感叹号，突出"终于"/"重磅"等情绪词。
## Twitter/X（英文版）
英文要点式，bullet list，简洁有力。
文案撰写原则：
教程类文章：cover → quote(核心思路) → steps(操作流程) → content(详细配置) → grid(踩坑) → summary
新闻/评论类文章：cover → quote(核心观点) → content(背景) → content(影响) → grid(各方反应) → summary
工具推荐类文章：cover → grid(工具对比) → content(详细介绍) → steps(使用方法) → quote(使用感受) → summary
所有风格统一遵循以下5级字号阶梯，确保跨页面视觉一致性：
| 层级 | 用途 | 字号范围 | 设计原则 |
|---|---|---|---|
| L1 英雄 | 封面大标题 | 240px | 全页视觉主体，一眼抓住 |
| L2 页标题 | 各页标题 | 160px | 每页最大文字（封面除外） |
| L3 区块标题 | 卡片/步骤/网格/金句标题 | 100-120px | 区块内最大文字 |
| L4 大正文 | 副标题/总结/要点/行动建议 | 76-88px | 重要但非标题的文字 |
| L5 正文 | 所有正文内容 | 64px | 统一正文基准 |
| L6 标注 | 标签/元信息/页码 | 42-52px | 辅助信息 |
| 元素 | 字号 | 字重 | 层级 |
|---|---|---|---|
标签 .tag | 52px | 600 | L6 |
装饰编号 .slide-num-bg | 520px | 900 | 装饰 |
页码 .page-indicator | 42px | 600 | L6 |
页面标题 .main-title | 160px | 900 | L2 |
| 元素 | 字号 | 字重 | 层级 |
|---|---|---|---|
封面标题 .cover-title | 240px | 900 | L1 |
封面副标题 .cover-subtitle | 76px | 500 | L4 |
要点文字 .highlight-list li | 76px | 400 | L4 |
编号方块 .highlight-num | 42px | 800 | L6 |
| 元素 | 字号 | 字重 | 层级 |
|---|---|---|---|
卡片标题 .card-title | 120px | 800 | L3 |
卡片正文 .card-content | 64px | 400 | L5 |
卡片高亮 .card-highlight | 64px | 600 | L5 |
卡片元信息 .card-meta | 42px | 400 | L6 |
| 元素 | 字号 | 字重 | 层级 |
|---|---|---|---|
步骤标题 .step-title | 120px | 800 | L3 |
步骤正文 .step-content | 64px | 400 | L5 |
步骤编号 .step-num | 52px | 900 | L6 |
| 元素 | 字号 | 字重 | 层级 |
|---|---|---|---|
单元格标题 .grid-cell-title | 100px | 800 | L3（半宽适配） |
单元格正文 .grid-cell-content | 64px | 400 | L5 |
单元格图标 .grid-cell-icon | 80px | — | 装饰 |
| 元素 | 字号 | 字重 | 层级 |
|---|---|---|---|
金句文字 .quote-text | 110px | 800 | L3 |
来源说明 .quote-source | 60px | 400 | L5 |
引号装饰 .quote-mark | 200px | — | 装饰 |
详情标签 .quote-detail-label | 56px | 700 | L4（强调色） |
详情正文 .quote-detail-text | 68px | 500 | L5 |
| 元素 | 字号 | 字重 | 层级 |
|---|---|---|---|
总结正文 .summary-text | 88px | 400 | L4 |
行动建议标签 .action-label | 72px | 700 | L4 |
行动建议项 .action-item | 80px | 400 | L4 |
行动编号 .action-num | 44px | 800 | L6 |
引号图标 .summary-quote-icon | 100px | — | 装饰 |
space-evenly 自动分配，确保填满页面cyberpunk（赛博朋克）：
dark-tech（暗夜科技）：
dark-green（暗夜青绿）：
guochao（黑金奢华）：
minimal-biz（极简清新）：
border-top: 1px solid rgba(255,255,255,0.04) 微弱高光，增加金属质感\n 在 JSON 里手动控制换行位置拆分 JSON 时按以下思路：
\n 手动控制换行，确保词组完整dark-green用户: "帮我把这篇文章做成海报：[文章内容]"
Agent 操作流程: