Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add konglong87/methodology-skills --skill infographic-generatorgit clone --depth 1 https://github.com/konglong87/methodology-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/konglong87/methodology-skills/infographic-generator)<a href="https://agentmods.dev/skills/konglong87/methodology-skills/infographic-generator"><img src="https://agentmods.dev/badge/skills/konglong87/methodology-skills/infographic-generator/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/konglong87/methodology-skills/infographic-generator"><img src="https://agentmods.dev/badge/skills/konglong87/methodology-skills/infographic-generator.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00073 | $0.01138 |
| Opus 5 | $0.00036 | $0.00569 |
| Sonnet 5 | $0.00015 | $0.00228 |
| Haiku 4.5 | $0.00007 | $0.00114 |
Grade A, and why
infographic-generator scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
信息图 / 公众号配图生成器
概述
一站式配图生成流水线：提供写作主题和内容大纲 → 自动生成精美 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 生成配图
What ships with it
5 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 128 lines · 73 tokens per session scan A 0e3700f18969
infographic-generator is a skill published in the GitHub repository konglong87/methodology-skills (5 stars, last pushed 1mo ago), licensed MIT. It adds 73 tokens to every session and 1,138 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
amby-design
Design the UI — wireframes, component specs, and design tokens — with a sign-off gate.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
omh-frontend
This is a Hermes-native frontend workflow skill.
omh-visual-qa
This is a Hermes-native visual-qa workflow skill.
omh-accessibility-audit
This is a Hermes-native accessibility-audit workflow skill.