Infographic generator

Skill konglong87/methodology-skills/skills/infographic-generator

[方法论]智能体skills；一键生成公众号文章和贴图、一键小红书信息图 && 技术选型、产品策略、战略分析、MVP、DDD、一次目标追踪器、使命必达skills

Install

npx -y skills add konglong87/methodology-skills --skill infographic-generator

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

7 stars7 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when user needs 公众号配图 or wants to generate rich HTML pages with multi-theme screenshots. Triggers: '生成配图', '公众号配图', '帮我做配图', '生成截图', '生成信息图', 'infographic', or when user provides a writing topic + content/outline for visual article images.

SKILL.md

3.7 KB, as published. Nobody here has run it

信息图 / 公众号配图生成器

概述

一站式配图生成流水线：提供写作主题和内容大纲 → 自动生成精美 HTML 页面（内置 4 种设计风格）→ 自动截图为 PNG 图片。

用户: "帮我做配图，主题「XXX」，要点：A / B / C"
   ↓
Phase 1: 解析内容 → 提取标题、sections、关键信息
   ↓
Phase 2: 生成 HTML → 内置 CSS 变量，4 套主题可一键切换
   ↓
Phase 3: 自动截图 → 4 主题 × N 个 section → PNG
   ↓
输出目录: screenshots/{linear,apple,stripe,muji}/

4 种设计风格

默认全部生成，用户只需挑选喜欢的。

风格	文件夹	配色	适合场景
暗黑	`linear/`	深黑 `#08090A` + 紫色	技术类、SaaS、开发者
明亮	`apple/`	纯白 + 蓝色	产品发布、品牌宣发
人文	`stripe/`	奶油色 + 赭色 + Georgia 衬线	深度长文、人文内容
侘寂	`muji/`	纸白 + 极简去色	生活方式、设计美学

风格选择规则：

未指定 → 4 种全部生成
"只要暗黑" → 只出暗黑风格
"要明亮和人文" → 只出这两种

使用方式

触发关键词：

"帮我做配图" / "公众号配图" / "生成截图" / "生成信息图"
同时提供写作主题和内容大纲/要点

工作流

Phase 1 — 内容解析

从用户输入中提取：

标题（title）—— 文章大标题
副标题（subtitle）—— 一句话描述
品牌名（brand）—— 用于 nav 和 footer
Sections —— 每节的结构化内容
关键数据 —— 数字/指标（可选）

Phase 2 — HTML 生成

根据内容生成单文件 HTML：

内置 4 套 CSS 主题变量（theme-recipes.json 是唯一真相源）
页面结构：Hero → 痛点 → 核心要点 → 流程 → 演示 → 场景 → 数据 → CTA → Footer
右下角浮动主题切换按钮（4 个圆点）
至少 3-5 屏内容以确保截图量充足

Phase 3 — 自动截图

由 wechat-full.js 调用 Playwright 完成多页面截图。

screenshots/
├── linear/   (暗黑)
├── apple/    (明亮)
├── stripe/   (人文)
└── muji/     (侘寂)

截图参数：750×1334 手机竖屏，2x Retina，全页长截图。

文件说明

文件	用途
`SKILL.md`	工作流定义
`theme-recipes.json`	4 套主题 CSS token 定义（唯一真相源）
`generate-garden-page.js`	内容驱动的 HTML 页面生成器

技术说明

依赖：playwright（npx playwright install chromium）
输出格式：PNG，2x Retina，750×1334
主题系统：纯 CSS :root + [data-theme] 变量，无框架依赖
设计配方独立完整，不依赖其他 skill

配合其他 skill 使用

先分析话题（swot-analysis / first-principles / prompt-enhancer），再用本 skill 生成配图
先写文章（wechat-article-writer），再用本 skill 生成配图