konglong87 信息图 / 公众号配图生成器
概述
一站式配图生成流水线：提供写作主题和内容大纲 → 自动生成精美 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 生成配图