Community编程与开发github.com

信息图

制作一张单图编辑信息图(1080x1350),通过双色调标题、一句话摘要、带编号标注和引导线的主视觉、可选侧边备注、带图标的“为何重要”三列布局、作者署名和来源,直观解释一个想法。适用于“一图读懂X”型帖子,涵盖公司动态、框架、架构或趋势;生成的PNG也可用作轮播幻灯片。

信息图 是什么?

该技能允许AI代理自动生成一张1080x1350的编辑风格信息图,用于在社交媒体(如LinkedIn、Instagram)或演示文稿中快速、清晰地传达一个核心思想。其设计灵感源于“Anthropic进入咨询业”这类帖子风格,包含双行标题(第二行为强调色)、一句话摘要、由2-4个带编号标注和引导线组成的主视觉、一个可选侧边事实、一个带图标的“为何发生”三列区域,以及作者和来源行。 主要平台支持包括:信息图可直接作为独立PNG图片使用,适配4:5画幅;也可作为轮播幻灯片的一页,或单独构建16:9的演示文稿版本。输出文件存储在 `out/infographics/<slug>.png`,配置数据存储在 `infographics/<slug>/infographic.json` 中。 该技能的独特之处在于强调简洁和诚实:摘要不超过25个单词,每个标注标题1-2个单词、正文不超过12个单词;“为何发生”区域正好三列。所有事实必须有可命名的来源,不得添加来源未提及的数字,且只能使用推特报道时需加“据报道”等限定词。视觉上,默认使用内置的等比例色块堆叠为主视觉,无需外部图片;也可使用产品截图、图表或用户提供的物体/场所图片(但绝不可出现真人或主持人形象)。AI生成的图片仅在用户明确要求时使用。 用户通过编辑 `infographic.json` 文件中的 JSON 字段来定制内容,包括标题、摘要、标注、主视觉类型、侧边备注、为何区域(带图标)、署名和来源。渲染使用 `pipeline/build_infographic.py` 脚本,大约需要20秒。生成后需手动验证标题、摘要、标注文字是否排版合适、引导线是否到位、为何区域三列是否平衡,以及来源行是否在2行以内。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/qdevery/fringe-lines-video/tree/main/.agents/skills/infographic

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

编辑信息图

参考风格:"Anthropic 进入咨询业" 帖子。该帖子包含:

  • 一个加粗的双行标题,第二行使用强调色;
  • 一句摘要:平实的单句,说明发生了什么;
  • 一个由部件组成的大型主视觉,带有指向它们的编号标签;
  • 一个侧边事实;
  • 一个包含三个图标列的区域 "为什么会发生";
  • 作者行和来源行。

核心是在约10秒内解释一个想法。

格式

  • 默认:一张独立图片,1080×1350(4:5)。适用于 LinkedIn 和 Instagram 信息流,且易于保存。
  • 作为轮播幻灯片: 尺寸与轮播图匹配,因此 PNG 可以直接放入 {"type": "photo", "image": "images/x.png", "fit": "contain"},或复制为封面。
  • 作为演示文稿幻灯片: 4:5 的布局不适合 16:9。如果用户需要,请单独构建 16:9 的布局。

组成部分:

  • 模板:pipeline/remotion/src/Infographic.tsx。
  • 构建脚本:pipeline/build_infographic.py。
  • 每个信息图位于自己的文件夹 infographics/<slug>/ 中,内含一个 infographic.json 和一个可选的 images/ 子文件夹。
  • 输出:out/infographics/<slug>.png。

1. 选择一个有组成部分的想法

适合的类型:

  • 一个包含2-4个部分的举措:例如“Anthropic 进入咨询业”的战略、运营和技术;
  • 一个架构:例如“晨间循环”的源、连接器、调度和输出;
  • 一个框架或之前 → 之后。

如果想法只是一个数字,请使用轮播 graphic 幻灯片或短视频。如果需要超过4个部分,请制作轮播图。

2. 撰写文案(务必精简)

  • 标题: 两行,每行2-4个单词,第二行末尾加句号。第二行是关键信息。
    • 示例:["Anthropic 进入", "咨询业。"],["你的AI", "幕僚长。"]。
  • 摘要: 一句话,最多25个单词:谁做了什么,以及为什么重要。
  • 标注: 2-4个项目。每个项目包含1-2个单词的 title 和最多12个单词的 text。
    • 它们从上到下阅读,因此请按顺序或层次排列(最上层为战略性最强)。
  • 侧边备注: 可选。一个引人注目的事实,最多22个单词,例如“到2027年培训10,000名工程师……”。
  • 为什么: 一个标题,如“他们为什么这样做”或“为什么构建一个”,加上恰好3个项目。每个项目包含2-3个单词的 title 和最多7个单词的 text。
  • 作者署名: {"name", "org"}。来源: 出版物、单集,或“Fringe Lines 播客,<日期>”。

诚信原则:

  • 每个事实都需要一个能在 sources 中命名的来源。
  • 不要添加来源未提及的数字。
  • 当仅有一家媒体报告时,请使用限定词(“据报道”、“根据S-1文件”)。

3. 主视觉

  • 默认:内置的方块堆栈("hero": {"label": "Anthropic"})。它为每个标注绘制一个等距的强调色块,交替偏移,引导线落在每个色块上,标签位于顶部色块。无需图片文件。
  • 图片主视觉: "hero": {"image": "images/hero.png", "fit": "contain"}。使用产品截图、图表、单集屏幕共享中的幻灯片,或用户提供的主体/场所图片。绝不可出现主持人或任何真实人物: 不得使用相机画面或大头照。
  • AI生成的图片(例如参考帖中的混凝土渲染图):仅在用户要求时使用,例如通过 Canva 连接器。不得出现真实人物,也不得伪造真实事件的“照片”。

4. infographics/<slug>/infographic.json

{
  "headline": ["你的AI", "幕僚长。"],
  "dek": "Quinn 的“晨间循环”代理每个工作日早上8点读取他的工作工具,并在打开笔记本电脑前递给他一份简报。",
  "hero": {"label": "晨间循环"},
  "callouts": [
    {"title": "源", "text": "Outlook邮件、日历和待办事项、Slack、Asana、SharePoint。"},
    {"title": "连接器", "text": "经过批准的企业连接器可访问每个源。"}
  ],
  "side": {"title": "闭环", "text": "一天结束时,他会回复简报……"},
  "why": {"title": "为什么构建一个", "items": [
    {"icon": "clock", "title": "赢在起跑线", "text": "9点前完成分类。"},
    {"icon": "check", "title": "毫无遗漏", "text": "它会标记你错过的东西。"},
    {"icon": "plug", "title": "无需新工具", "text": "使用你已经付费的套件。"}
  ]},
  "byline": {"name": "Fringe Lines", "org": "2026年10月30日单集"},
  "sources": "Fringe Lines 播客,2026年10月30日。",
  "accent": "#FF5A1F"
}
  • 图标: chart rings target users bolt shield dollar clock globe check mail calendar plug brain。如果需要,请在 Infographic.tsx 的 Icon 映射中添加新图标:一个 36×36 的描边路径。
  • 强调色: 默认为 Fringe Lines 橙色。参考帖的红色是 #C8231B。

5. 渲染与质量检查

~/.shorts-skill/bin/python pipeline/build_infographic.py infographics/<slug>

渲染大约需要20秒。打开PNG并检查:

  • 标题是否适合两行。如果不行,请缩短,不要缩小字体。
  • 摘要是否在三行或更少。
  • 标注文字是否没有重叠。当有4个标注时,每个文字必须保持两行或更少,因此请删减单词。
  • 每条引导线是否准确落在其色块上。
  • 侧边备注是否没有与“为什么”区域重叠。
  • 三个“为什么”列是否平衡(文本长度相近)。
  • 来源行是否适合两行。
  • 任何地方都不得出现主持人、嘉宾或真实人物。

报告PNG路径、使用的来源,以及任何需要事实核查的内容。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相关技能