article-poster-generator

Installation
SKILL.md

Article Poster Generator

概述

将长文章自动拆分为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) 卡片微高光,赛博系辅助色,极客气质

6种页面布局

1. cover — 封面页

大标题 + 副标题 + 核心要点列表。标题要大,占页面视觉主体。

{
  "type": "cover",
  "slide_number": "00",
  "tag": "今日速评",
  "tag_icon": "⚠",
  "title": "主标题(10字以内最佳)",
  "subtitle": "副标题或来源说明",
  "highlights": ["核心要点1", "核心要点2", "核心要点3"]
}

2. content — 卡片内容页

经典纵排卡片,每张有彩色左边框。适合并列的多个知识点/要点

{
  "type": "content",
  "slide_number": "01",
  "tag": "分类标签",
  "tag_icon": "📋",
  "title": "这页的主题",
  "sections": [
    {
      "title": "小节标题",
      "content": "正文内容(50-100字为佳)",
      "highlight": "需要高亮的关键句(可选)",
      "border_color": "red"
    }
  ]
}

3. steps — 步骤流程页

大编号圆球 + 连接线,适合按步骤操作的教程/流程

{
  "type": "steps",
  "slide_number": "02",
  "tag": "操作步骤",
  "tag_icon": "⚡",
  "title": "三步搞定",
  "steps": [
    {
      "title": "步骤标题",
      "content": "步骤说明(40-80字)"
    }
  ]
}

4. grid — 网格页

2列网格布局,顶部彩色边框。适合踩坑/技巧/对比/特性列表

{
  "type": "grid",
  "slide_number": "03",
  "tag": "避坑指南",
  "tag_icon": "⚠",
  "title": "四个常见坑",
  "cells": [
    {
      "icon": "❌",
      "title": "单元格标题",
      "content": "说明文字(30-60字)"
    }
  ]
}

5. quote — 大字金句页

居中大字金句 + 下方解释卡片。适合核心观点/名言/关键结论突出展示。

{
  "type": "quote",
  "slide_number": "04",
  "tag": "核心观点",
  "tag_icon": "💬",
  "quote": "一句话核心观点(20字以内最震撼)",
  "source": "来源或补充说明(可选)",
  "details": [
    {
      "label": "标签名",
      "text": "详细解释(40-60字)"
    }
  ]
}

6. summary — 总结页

引用框总结 + 行动建议列表。固定用于最后一页。

{
  "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法则   │  │ 视觉动线   │  │ 接近/相似     │    │
│  └───────────┘  └───────────┘  └──────────────┘    │
└─────────────────────────────────────────────────────┘

Phase 1: 内容提取 — 从文章中拿什么

提取不是"读完文章概括一下",而是带着卡片的目标反向拆解原文。

1.1 金字塔逆向拆解 — 识别信息层级

用金字塔原理(Barbara Minto)从原文中逆向还原作者的论证结构:

原文(散乱的段落)
 ↓ 逆向拆解
一级:全文核心结论(1句话)        → 将成为 cover 标题
二级:支撑结论的 2-4 个分论点      → 将成为每张卡片的主题
三级:每个分论点的证据/数据/案例    → 将成为卡片内的 sections/cells/steps

操作方法

  1. 通读全文,用一句话回答"这篇文章到底在说什么"→ 一级结论
  2. 问"作者用了哪几个论点来支撑"→ 二级分论点(2-4个,每个将成为一张卡片)
  3. 每个分论点下面有什么证据 → 三级素材(数据、案例、引用)

1.2 5W1H 扫描 — 确保不漏关键要素

对提取出的信息做 5W1H 完整性检查:

要素 问题 遗漏风险 卡片中的位置
What 核心事件/观点是什么 低(通常最先提取) cover title / quote
Why 为什么重要/为什么发生 中(容易被当作背景跳过) content sections
How 怎么做/怎么实现 低(教程类文章的主体) steps
Who 涉及谁/影响谁 高(容易遗漏利益相关方) content / grid
When 时间节点/截止日期 高(容易被当作细节忽略) cover subtitle / content
Where 在哪里/适用范围 content / grid

不是每篇文章都有完整的 6 个 W,但必须主动扫描一遍确认哪些缺失是合理的

1.3 MECE 分组检验 — 不重不漏

提取出的信息块必须通过 MECE(Mutually Exclusive, Collectively Exhaustive)检验:

  • 互斥(ME):任意两张卡片的主题不能重叠。如果重叠,说明拆分维度不统一,需要合并或重新分类
  • 完备(CE):所有卡片合起来应该覆盖原文的核心信息。如果看完所有卡片后仍有"少了什么"的感觉,说明遗漏了关键信息

检验方法:把所有卡片标题排列出来,问两个问题:

  1. 有没有两张卡片说的是同一件事?(重复 → 合并)
  2. 原文有没有重要内容没被任何卡片覆盖?(遗漏 → 补充)

1.4 信息筛选优先级 — 留什么删什么

提取出来的素材按以下优先级筛选,每张卡片空间有限(≤200字),必须取舍:

优先保留                              优先删除
─────────                            ─────────
① 数据和事实("增长了300%")          ① 过渡句("众所周知"、"值得注意的是")
② 具体案例("比如某公司...")         ② 重复论述(同一观点换说法再说一遍)
③ 核心观点(作者的独特判断)           ③ 背景铺垫(读者已知的常识)
④ 行动建议("建议你...")             ④ 情感修辞("令人震惊的是")
⑤ 对比/转折("但是"、"相反")         ⑤ 补充说明(括号里的解释、脚注)

Phase 2: 内容组织 — 按什么顺序排

2.1 SCQA 叙事框架 — 决定卡片顺序

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 分组),所以:

  • content 建议最多 3 个 sections
  • grid 建议 4-6 个 cells
  • summary 建议 3-5 条行动建议

2.2 LATCH 选型 — 每页用什么布局

Richard Saul Wurman 提出世上所有信息只有 5 种组织方式(LATCH),根据信息的"形状"匹配布局:

LATCH 含义 信息形状 对应布局
Location 按空间/位置 块(并排) grid
Alphabet 按字母/索引 块(并排) grid
Time 按时间顺序 线(流程) steps
Category 按分类 面(展开) content
Hierarchy 按重要性层级 点(突出) cover / quote

简化记忆:点(突出最重要的)→ 线(有顺序的)→ 面(要展开的)→ 块(要对比的)→ 收(总结行动)


Phase 3: 视觉呈现 — 怎么排版展示

3.1 认知负荷控制

心理学家 George Miller 的 7±2 法则:人的工作记忆一次只能处理 5-9 个信息单元。

核心原则:每张卡片是一个独立的认知单元(chunk),文字总量≤200字,要点≤5个。

3.2 视觉认知规律

规律 内容 在卡片中的应用
F 型阅读 人眼先横扫标题,再沿左侧竖扫 标题放顶部,关键信息靠左
格式塔-接近性 靠近的元素被认为相关 卡片内分组,组间留白
格式塔-相似性 外观一致的元素被认为同类 同级内容统一样式
视觉层级 大的、亮的、有色的先被看到 L1-L6 字号阶梯(240px→42px)
对比度 差异越大越抓眼 强调色只用在关键信息,不滥用

3.3 每张卡片的黄金结构

每张卡片 = 核心论点 + 案例/数据支撑 + 行动清单(可选)

各布局的论点-支撑映射:

布局 论点位置 支撑位置 行动位置
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

完整执行流程(6步)

原文
 ↓ ① 提取:金字塔逆向拆解(一级结论→二级分论点→三级证据)
 ↓ ② 检验:5W1H 扫描不漏要素 + MECE 检验不重不漏
 ↓ ③ 筛选:按优先级取舍(数据>案例>观点>行动,删套话/重复/铺垫)
 ↓ ④ 排序:SCQA 叙事(情境→冲突→问题→回答)
 ↓ ⑤ 选型:LATCH 匹配布局(点/线/面/块/收,至少3种不同布局)
 ↓ ⑥ 成卡:每张≤200字,论点+支撑+行动,F型阅读动线

参考文献

  • Miller, G.A. (1956). The Magical Number Seven, Plus or Minus Two
  • Minto, B. (1987). The Pyramid Principle: Logic in Writing and Thinking
  • Wurman, R.S. (1996). Information Architects
  • Tufte, E.R. (2001). The Visual Display of Quantitative Information
  • Nielsen Norman Group. How Chunking Helps Content Processing

工作流程

Step 1: 读取文章内容

根据用户输入类型获取文章内容:

  • 纯文字:直接使用用户发送的文本
  • 链接:用 curl 或浏览器抓取网页正文
  • 文档:读取文件内容(支持 txt/md 等)

Step 2: 分析文章结构并拆分内容

Agent 需要:

  1. 通读全文,提取核心观点
  2. 根据内容特点选择合适的布局类型
  3. 生成 JSON 数据

布局选择指南

根据内容性质选择最合适的布局,每篇文章尽量使用3种以上不同布局,避免单调:

内容类型 推荐布局 原因
文章开头/核心结论 cover 大标题抓眼球
一句话核心观点/名言 quote 居中大字突出冲击力
操作步骤/安装流程 steps 编号+连接线,流程感
并列知识点/详细说明 content 卡片分区,信息密度高
常见问题/技巧/对比 grid 2列并排,一目了然
全文总结/行动建议 summary 引用框+清单收尾

拆分原则

  1. 第1张(cover):文章标题 + 3-4个核心要点,标题控制在10字以内
  2. 中间N张:根据内容混搭 steps / content / quote / grid
    • 每个 content section 内容控制在50-100字
    • 每张 content 最多3个 sections
    • steps 每步40-80字,建议3-4步
    • grid 建议4个 cells(2×2)或6个 cells(3×2)
    • quote 金句控制在20字以内,details 2-3条
    • 给每个 section 分配不同的 border_color: red, yellow, green, cyan, orange, purple
  3. 最后1张(summary):总结全文 + 3-5条行动建议

标签和图标选择

常用标签+图标组合:

  • ⚠ 警告/风险/避坑
  • 📋 规则/政策/清单
  • 💰 财经/金融/成本
  • 🔍 分析/解读/深入
  • 🌍 国际/宏观/趋势
  • 🛡 安全/防护/保障
  • 📊 数据/趋势/对比
  • 💡 观点/建议/总结
  • ⚡ 快讯/突发/步骤
  • 🔑 关键/核心/重点
  • 🎨 设计/美化/创意
  • 🛠 工具/配置/设置
  • 💬 引用/观点/金句

Step 3: 生成海报图片

将 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

Step 4: 输出图片给用户

脚本会打印每张图片的绝对路径,格式如:

[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 格式逐张发送给用户。

Step 5: 生成配套文案

在输出目录(YYMMDD-主题/)下生成 copy.md 文件,包含多平台适配的发布文案:

# [主题] 发布文案

## 公众号封面摘要(一句话)
一句话概括全文核心,适合公众号推送的摘要栏。

## 公众号正文引导(配合信息图)
2-3段引导文字 + "👉 左滑查看 N 张信息图"。
语气正式但不刻板,突出数据和核心变化。

## 朋友圈(精简版)
3-4句话,无标签,口语化,适合直接复制发朋友圈。

## 小红书/小绿书(带标签版)
分点列要点,末尾加 #标签。
语气活泼,适当用感叹号,突出"终于"/"重磅"等情绪词。

## Twitter/X(英文版)
英文要点式,bullet list,简洁有力。

文案撰写原则

  • 公众号版最正式,小红书版最口语化,朋友圈版居中
  • 所有版本必须包含核心数据(如提交数、平台数等硬指标)
  • 小红书版末尾加 6-8 个相关标签
  • 英文版保持简洁,不翻译中文梗

内容拆分详细指南

如何判断拆分数量

  • 短文(500字以下):封面 + 2张内容 + 总结 = 4张
  • 中文(500-1500字):封面 + 3-4张内容 + 总结 = 5-6张
  • 长文(1500字以上):封面 + 4-6张内容 + 总结 = 6-8张

布局搭配建议

教程类文章:cover → quote(核心思路) → steps(操作流程) → content(详细配置) → grid(踩坑) → summary

新闻/评论类文章:cover → quote(核心观点) → content(背景) → content(影响) → grid(各方反应) → summary

工具推荐类文章:cover → grid(工具对比) → content(详细介绍) → steps(使用方法) → quote(使用感受) → summary

内容精炼原则

  1. 删除过渡句、套话,保留干货
  2. 长句拆短句,每句不超过25字
  3. 数据和事实优先,观点次之
  4. 每个 highlight 是可以独立传播的金句
  5. cover 标题尽量短(10字以内),字越少越大越醒目

字号与间距规范(2400×3600 画布)

所有风格统一遵循以下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 — 封面页

元素 字号 字重 层级
封面标题 .cover-title 240px 900 L1
封面副标题 .cover-subtitle 76px 500 L4
要点文字 .highlight-list li 76px 400 L4
编号方块 .highlight-num 42px 800 L6

content — 卡片内容页

元素 字号 字重 层级
卡片标题 .card-title 120px 800 L3
卡片正文 .card-content 64px 400 L5
卡片高亮 .card-highlight 64px 600 L5
卡片元信息 .card-meta 42px 400 L6

steps — 步骤流程页

元素 字号 字重 层级
步骤标题 .step-title 120px 800 L3
步骤正文 .step-content 64px 400 L5
步骤编号 .step-num 52px 900 L6

grid — 网格页

元素 字号 字重 层级
单元格标题 .grid-cell-title 100px 800 L3(半宽适配)
单元格正文 .grid-cell-content 64px 400 L5
单元格图标 .grid-cell-icon 80px 装饰

quote — 大字金句页

元素 字号 字重 层级
金句文字 .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 — 总结页

元素 字号 字重 层级
总结正文 .summary-text 88px 400 L4
行动建议标签 .action-label 72px 700 L4
行动建议项 .action-item 80px 400 L4
行动编号 .action-num 44px 800 L6
引号图标 .summary-quote-icon 100px 装饰

间距规范

  • 海报内边距:上100px 左右120px 下90px
  • 卡片内边距:60px × 68px
  • 卡片左边框宽度:10px
  • 卡片圆角:28px
  • 元素间距由 space-evenly 自动分配,确保填满页面
  • 网格间距:36px(列间距)

设计规范(经专家评审沉淀)

各风格专属规范(经专家评审)

cyberpunk(赛博朋克)

  • 圆角统一 4px(切角机甲风),不用 28px 圆角
  • 色彩严格遵循 80/15/5 法则:80% 暗色底 + 15% 赛博青 #00d4ff + 5% 品红 #ff007c
  • 标题用纯冷白 #F0F4F6,不用渐变(渐变降低清晰度)
  • 卡片/编号/tag 都有双层霓虹发光 box-shadow
  • 底部有 HUD 装饰码(SYS.REQ // NEON_GRID...),极客点睛

dark-tech(暗夜科技)

  • 辅助色走"单色红系":猩红 #cc4444 + 珊瑚 #e87a7a + 银灰 #a0a0a0,绝不出现黄绿青
  • CNC 金属切割质感:外框 #111111(暗)+ 顶框 #3a3a3a(亮)+ 底部重阴影 + 顶部 inset 内发光
  • 标题纯白 #ffffff,步骤/金句标题用猩红 #cc4444
  • 克制是灵魂:宁可全红也不搞五颜六色

dark-green(暗夜青绿)

  • 辅助色用赛博系(幽灵蓝 #4F8AFF、荧光青 #00E5FF、警戒金 #F5B041),不用红黄蓝
  • 卡片顶部 1px 白色微高光,金属质感
  • muted 文字 #788691(比其他风格亮一档)

guochao(黑金奢华)

  • 严格"黑金红银"四色纪律:暗金 #d4a853 + 复古红 #c43a31 + 铂金银 #a8a8b0,绝不出现绿橘
  • 标题用纯冷白 #FFFFFF(不是暖黄),正文用冷银灰 #A0AAB2,金色只给数字/图标/边框
  • 邀请函内框 1.5px(不是 2px),精致纤细
  • 卡片有暗金色顶部高光 + 底部重阴影,Old Money 质感

minimal-biz(极简清新)

  • 全站单色化:所有卡片边框、左边条、编号全统一为 #1A7D7D,不允许出现其他颜色
  • Apple/Stripe 级弥散阴影:多层叠加,主色调染色(rgba(26,125,125,0.08)),卡片像"浮"在背景上
  • 边框用主色低透明度(rgba(26,125,125,0.15))代替灰色,更通透
  • 背景色来自设计系统 --green-light-bg: #F0F7F7

图标规范

  • 所有图标使用内嵌 SVG,不用 emoji。脚本内置了 17 个常用图标的 SVG 映射(闪电、灯泡、搜索、文件、图表等),颜色自动跟随主题 accent 色
  • 如果 JSON 里写的 emoji 有对应 SVG,脚本自动替换;没有匹配则 fallback 到原始 emoji
  • 这确保了所有设备渲染一致,且不会有多彩 emoji 破坏暗色风格的统一感

色彩规范

  • 辅助色避免"彩虹感":不用默认的红黄蓝绿,改用赛博系同类色(幽灵蓝 #4F8AFF、荧光青 #00E5FF、警戒金 #F5B041),保持未来感
  • 辅助文字对比度:暗色背景下的 muted 文字不低于 #788691,确保移动端可读
  • 浅色风格强调色要深:白底上用 #1A7D7D(deep green),不要用太浅的绿
  • 卡片顶部加 border-top: 1px solid rgba(255,255,255,0.04) 微弱高光,增加金属质感

排版规范

  • 标签边框 1.5px(不是 2.5px),精细风格不宜过粗
  • 左边框统一 8px,全站不混用 8/10
  • 封面标题断行:完整词组不能被切断(如"搜索插件"不能断为"搜索插/件"),用 \n 在 JSON 里手动控制换行位置
  • steps 页内容区加卡片底色,让阅读流更稳定,不会显得单薄
  • grid 单元格 flex column 对齐,防止内容多少不同导致留白不均
  • 引号装饰(❝)透明度 0.15,让它像背景一样沉下去,不干扰阅读

内容密度规范

  • quote 布局 details 至少 3 条,每条 30-50 字,否则页面太空不要用 quote
  • cover highlights 不超过 4 条,太多则单条文字太短
  • cover 标题控制在 10 字以内,字越少越大越醒目
  • 封面 stats-row 必须有样式(字号 48px + 卡片背景),不能漏排

文章拆分方法论

拆分 JSON 时按以下思路:

  1. 提取骨架:通读文章,识别出 3-5 个核心信息块(是什么/为什么/怎么做/怎么选/总结)
  2. 匹配布局:根据每个信息块的"形状"选布局
    • 有对比/并列特性 → grid
    • 有顺序步骤 → steps
    • 有一句话核心结论 → quote
    • 需要展开详述 → content
    • 开头 → cover,结尾 → summary
  3. 检查多样性:确保至少 3 种不同布局,不能全是 content
  4. 控制断行:封面标题用 \n 手动控制换行,确保词组完整

注意事项

  • 所有文字内容必须是中文
  • 内容不要过多导致溢出,每张海报文字总量控制在200字以内
  • 如果用户没指定风格,默认使用 dark-green
  • 如果用户要求特定张数,按需调整拆分
  • 输出目录如果不存在会自动创建
  • 生成过程约需10-30秒(取决于张数)
  • 一篇文章至少使用3种不同布局类型,避免视觉单调

示例交互

用户: "帮我把这篇文章做成海报:[文章内容]"

Agent 操作流程:

  1. 阅读文章内容
  2. 分析提取核心观点
  3. 选择合适的布局搭配(至少3种不同类型)
  4. 构建 JSON 数据(注意封面标题断行、quote 至少3条 detail)
  5. 保存为 /tmp/poster_[timestamp].json
  6. 调用脚本生成图片
  7. 逐张发送给用户
Installs
14
GitHub Stars
9
First Seen
Apr 16, 2026