一键把文章变成精美信息图海报，我把这个 Skill 开源了

🦞 我最近一直在用 Claude Code 做一件事：把公众号文章自动拆成小红书/朋友圈风格的信息图海报。

效果出来之后，很多朋友问我怎么做的。

所以，我把它整理成了一个开源项目，今天正式放出来。

这篇文章讲三件事：

• • 它能干什么
• • 怎么用
• • 背后的设计思路

一、先看效果：一篇文章，5 种风格，自动出图

废话不多说，直接上效果。

同一篇文章，5 种完全不同的视觉风格：

<!– 📸 图片位置 A：5 种风格封面横排对比

放 5 张封面页截图，横向并排展示

图片来源：examples/styles/ 下的 dark-green.png、dark-tech.png、cyberpunk.png、guochao.png、minimal-biz.png

–>

暗夜青绿（默认）

暗夜科技

赛博朋克

黑金奢华

极简清新

极客气质

CNC金属质感

霓虹机甲风

邀请函内框

Apple级阴影

每篇文章会自动拆成 5-8 张竖版海报（2400×3600），6 种布局自动混搭：

• • 封面页：大标题 + 核心要点，一眼抓住注意力
• • 金句页：居中大字，核心观点直接砸脸
• • 内容页：卡片式排列，信息密度高但不乱
• • 步骤页：大编号 + 连接线，流程一目了然
• • 网格页：2 列并排，特别适合对比和避坑清单

关键是——你不需要自己排版。

你只需要把文章内容丢给 AI，它会自动分析结构、提取要点、选择布局、生成海报。全程不超过 30 秒。

二、怎么用：两种方式，看你习惯

方式一：AI 对话模式（推荐）

如果你在用 Claude Code 或者 OpenClaw（小龙虾），安装 Skill 后直接对话就行：

Claude Code 用户：

把项目复制到 ~/.claude/skills/article-poster-generator/，然后在对话中说：

代码块
Plain Text
复制

OpenClaw 用户：

更简单，直接跟小龙虾说：

或者命令行一键安装：

代码块
Bash
复制
npx skills add tengj/article-poster-generator -g -y

装好之后，跟小龙虾说"帮我把这篇文章做成海报"就行了。

方式二：直接跑脚本

不用 AI 助手也能用。自己准备好 JSON 数据，直接跑 Python 脚本：

代码块
Bash
复制
# 安装依赖
pip install playwright
playwright install chromium

# 生成海报
python scripts/generate_posters.py \
 --input poster_data.json \
 --style dark-green \
 --output ~/Desktop/posters/

5 种风格随便切换：dark-green（默认）、dark-tech、cyberpunk、guochao、minimal-biz。

三、它到底做了什么：不是"凭感觉拆"

很多人觉得"文章拆海报"就是把文字复制粘贴到模板里。

不是的。

这个 Skill 背后有一套完整的方法论，分三个阶段：

阶段一：提取——从文章中拿什么

用金字塔原理逆向拆解原文结构：

代码块
Plain Text
复制
一级：全文核心结论（1句话） → 封面标题
二级：支撑结论的 2-4 个分论点 → 每张海报的主题
三级：每个分论点的证据/数据 → 海报内的具体内容

然后用 5W1H 扫描确保不漏要素，再用 MECE 检验确保不重不漏。

阶段二：组织——按什么顺序排

用 SCQA 叙事框架决定海报顺序：

步骤

含义

对应海报

S 情境

发生了什么

封面页

C 冲突

问题是什么

金句页

Q 问题

怎么解决

内容/步骤/网格页

A 回答

结论和行动

总结页

用 LATCH 五维选型给每页匹配最合适的布局：

• • 有时间顺序？→ 用步骤页
• • 要对比并列？→ 用网格页
• • 需要展开详述？→ 用内容页

阶段三：呈现——怎么排版好看

• • 7±2 法则：每张海报不超过 200 字，要点不超过 5 个
• • F 型阅读：标题放顶部，关键信息靠左
• • 格式塔原理：相关内容靠近，同级内容统一样式

这些不是我拍脑袋想的，是信息设计领域几十年沉淀下来的经典理论。我只是把它们工程化了。

四、设计上踩过的坑

做这个 Skill 的过程中，我被设计细节折腾了不少。分享几个关键决策：

1）图标不用 emoji，改用内嵌 SVG

一开始用 emoji 做图标，结果不同设备渲染出来五颜六色，跟暗色主题完全不搭。

最后内置了 17 个 SVG 图标，颜色自动跟随主题色。JSON 里写 emoji 会自动映射成 SVG。

2）每种风格有严格的色彩纪律

赛博朋克不是"随便加霓虹灯"，是 80% 暗色底 + 15% 赛博青 + 5% 品红，严格的 80/15/5 法则。

黑金风格只用"黑金红银"四色，出现绿色或橘色就是翻车。

极简风更狠：所有边框、编号、装饰全部统一为一个颜色 #1A7D7D，一个杂色都不能出现。

3）封面标题必须手动控制断行

"Claude身份验证" 不能断成 "Claude身份验/证"。

所以 JSON 里支持用 \n 手动指定换行位置，确保完整词组不被切断。

4）金句页不能太空

一开始金句页只放一句话加来源，整页就两行字，像没写完。

后来强制要求 details 至少 3 条，每条 30-50 字。页面不再空荡，同时金句的冲击力也没丢。

五、技术原理：其实很简单

整个流程四步：

代码块
Plain Text
复制
JSON 数据 → Python 生成 HTML → Playwright 渲染截图 → 高清 PNG

1. 1. Python 的 string.Template 把风格配色注入 CSS
2. 2. 每种布局有独立的 HTML 生成函数
3. 3. Playwright 启动无头 Chromium，viewport 设为 2400×3600

没有 Canvas，没有 PDF 中转，就是最朴素的 HTML → 截图。

为什么选这个方案？因为 HTML+CSS 是最灵活的排版引擎。改个间距、换个配色、调个字号，改 CSS 就行。如果用 Canvas 或者图片处理库，光文字自动换行就够你喝一壶的。

六、配套文案也帮你写好了

生成海报的同时，Skill 还会自动生成一份多平台发布文案：

• • 公众号版：正式但不刻板，带引导语
• • 朋友圈版：3-4 句口语化精简
• • 小红书版：活泼 + 分点 + 标签

直接复制粘贴就能发，不用自己再想文案了。

七、开源地址

GitHub：https://github.com/tengj/article-poster-generator

MIT 协议，随便用。

项目结构非常简单：

欢迎 Star、Fork、PR。如果你有新的风格想法或布局类型，非常欢迎贡献。

最后

做这个 Skill 最大的感受是：AI 时代最值钱的不是代码，是方法论。

5 种风格的 HTML/CSS 代码加起来 1000 多行，AI 分分钟能写。但怎么拆一篇文章、用什么布局、每页放多少字、颜色怎么搭——这些"品味"层面的东西，是需要人去定义的。

AI 帮你执行，你负责审美。这可能就是以后"内容创作"的新范式。

如果你觉得有用，欢迎转发给需要做信息图海报的朋友。

有问题可以在 GitHub 提 Issue，或者在评论区聊。