infographic-generator

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