Infographic Generator

Adapted from baoyu-infographic v1.56.1 (ported via Hermes Agent) for opencode, then customized by j3ffyang to comply with the opencode standard and this repo's imgs/ convention. Image generation uses OpenRouter image models through the bundled scripts/generate_image.py, which requires OPENROUTER_API_KEY in the environment.

Two dimensions: layout (information structure) × style (visual aesthetics). Freely combine any layout with any style.

When to Use

Trigger this skill when the user asks to create an infographic, visual summary, information graphic, or uses terms like "信息图", "可视化", or "高密度信息大图". The user provides content (text, file path, URL, or topic) and optionally specifies layout, style, aspect ratio, or language.

Note: Image generation needs OPENROUTER_API_KEY set and an image-capable model (default google/gemini-3.1-flash-image). If the key is missing or the call fails, still produce analysis.md, structured-content.md, and prompts/infographic.md for external use — see references/workflow-example.md.

Options

Layout Gallery

Full definitions: references/layouts/<layout>.md

Style Gallery

Full definitions: references/styles/<style>.md

Recommended Combinations

Default: bento-grid + craft-handmade

Keyword Shortcuts

When user input contains these keywords, auto-select the associated layout and offer associated styles as top recommendations in Step 3. Skip content-based layout inference for matched keywords.

If a shortcut has Prompt Notes, append them to the generated prompt (Step 5) as additional style instructions.

Output Structure

infographic/{topic-slug}/
├── source-{slug}.{ext}
├── analysis.md
├── structured-content.md
└── prompts/infographic.md

final image → imgs/<YYMMDD>-<slug>.png

Working files live in infographic/{topic-slug}/; the final image always lands in imgs/ following this repo's YYMMDD-slug filename convention (see ai-thoughts/AGENTS.md).

• {topic-slug}: 2-4 words kebab-case from topic. Conflict: append -YYYYMMDD-HHMMSS.
• Final image name: imgs/<YYMMDD>-<slug>.png where <slug> is a 2-4 word kebab-case name and <YYMMDD> is the current date — or, when the source is an ai-thoughts article, the article's own YYMMDD prefix so the image shares it.

Core Principles

• Preserve source data faithfully — no summarization or rephrasing (but strip any credentials, API keys, tokens, or secrets before including in outputs)
• Define learning objectives before structuring content
• Structure for visual communication (headlines, labels, visual elements)
• Communicate concisely with the user — provide actionable updates rather than verbose explanations unless asked for details

Workflow

Step 1: Setup & Analyze

Load references: Read references/analysis-framework.md from this skill.

1. Save source content (file path or paste → source.md using write)
   • Backup rule: If source.md exists, rename to source-backup-YYYYMMDD-HHMMSS.md
2. Analyze: topic, data type, complexity, tone, audience
3. Detect source language and user language
4. Extract design instructions from user input
5. Save analysis to analysis.md
   • Backup rule: If analysis.md exists, rename to analysis-backup-YYYYMMDD-HHMMSS.md

See references/analysis-framework.md for detailed format.

Step 2: Generate Structured Content → structured-content.md

Transform content into infographic structure:

1. Title and learning objectives
2. Sections with: key concept, content (verbatim), visual element, text labels
3. Data points (all statistics/quotes copied exactly)
4. Design instructions from user

Rules: Markdown only. No new information. Preserve data faithfully. Strip any credentials or secrets from output.

See references/structured-content-template.md for detailed format.

Step 3: Recommend Combinations

3.1 Check Keyword Shortcuts first: If user input matches a keyword from the Keyword Shortcuts table, auto-select the associated layout and prioritize associated styles as top recommendations. Skip content-based layout inference.

3.2 Otherwise, recommend 3-5 layout×style combinations based on:

• Data structure → matching layout
• Content tone → matching style
• Audience expectations
• User design instructions

Step 4: Confirm Options

Use the question tool to confirm options with the user. Ask all three questions in one call:

Q1 — Combination: Present 3+ layout×style combos with rationale. Ask user to pick one.

Q2 — Aspect: Ask for aspect ratio preference (landscape/portrait/square or custom W:H).

Q3 — Language (only if source ≠ user language): Ask which language the text content should use.

If the user already specified all options, skip Step 4.

Step 5: Generate Prompt → prompts/infographic.md

Backup rule: If prompts/infographic.md exists, rename to prompts/infographic-backup-YYYYMMDD-HHMMSS.md

Load references: Read the selected layout from references/layouts/<layout>.md and style from references/styles/<style>.md.

Combine:

1. Layout definition from references/layouts/<layout>.md
2. Style definition from references/styles/<style>.md
3. Base template from references/base-prompt.md
4. Structured content from Step 2
5. One text-accuracy block — the only place strings are enumerated. Every renderable string goes in the CRITICAL: Text Accuracy block near the top of the prompt, and nowhere else. The rules that make duplication impossible:
   • Wrap every renderable string in backticks. Write every meta-reference to a string (a constraint sentence, a "spell X exactly" note, a per-cell imagery hint) as plain text without backticks — so backticked spans are exactly the renderable set and nothing more.
   • Do not append a second label dump at the end of the prompt. The base template deliberately has no Text labels: tail; do not reintroduce one.
   • Do not repeat cell headings in the layout/style guidance or in the per-cell imagery notes — refer to cells by position instead.
   • Prose must carry meaning, not restate labels: if a sentence would contain an exact label string, rephrase it.
   • State that each string appears exactly once, and that no word outside the block may be rendered as text.
   • For CJK (Chinese/Japanese/Korean) content the block must ALSO (a) name every rare or look-alike character explicitly with its forbidden substitutes (e.g. 菂 not 药、蔷 not 蓄、茄 not 茹、蕊 not 芯), and (b) state that every string and every card/element appears exactly once.
   • Never tell the model to "drop the least important label" without naming the protected lists — it will drop a required chip (this happened: Markdown vanished from a stack cell). Protect list cells explicitly instead.

Aspect ratio resolution for {{ASPECT_RATIO}}:

• Named presets → ratio string: landscape→16:9, portrait→9:16, square→1:1
• Custom W:H ratios → use as-is (e.g., 3:4, 4:3, 2.35:1)

Save the assembled prompt to prompts/infographic.md using write.

Step 6: Generate Image

Pre-flight — no-duplicate gate (hard stop). Before generating, run the checker on the assembled prompt:

python .opencode/skills/custom-infographic/scripts/check_prompt_text.py \
  infographic/{topic-slug}/prompts/infographic.md

It fails (exit 1) when any backticked string appears more than once, when a second label enumeration is present, or — with --strings <file> — when an expected string is missing. Do not generate on failure; fix the prompt and re-run the check. Strings enumerated twice in the prompt are the leading cause of duplicated text in the image.

Run the bundled generator with the prompt from Step 5, writing the final image directly to imgs/ with the repo-convention filename:

python .opencode/skills/custom-infographic/scripts/generate_image.py \
  --prompt infographic/{topic-slug}/prompts/infographic.md \
  --output imgs/{YYMMDD}-{slug}.png \
  --aspect 16:9

• The final image goes to imgs/<YYMMDD>-<slug>.png (repo convention, see Output Structure) — never to infographic/{topic-slug}/.
• Map aspect ratio to the --aspect value: landscape→16:9, portrait→9:16, square→1:1, custom ratios passed as-is (Gemini supports 3:4, 4:3, 21:9, 1:4, 4:1, 1:8, 8:1; map anything else to the nearest named preset)
• Requires OPENROUTER_API_KEY to be set; the default model is google/gemini-3.1-flash-image, override with --model
• On failure, auto-retry once, then report the error to the user
• Backup rule: If the target imgs/<YYMMDD>-<slug>.png already exists, rename it to imgs/<YYMMDD>-<slug>-backup-YYYYMMDD-HHMMSS.png before writing. Never overwrite silently.

Step 7: Output Summary

Report: topic, layout, style, aspect, language, output path (imgs/<YYMMDD>-<slug>.png), files created.

References

• references/analysis-framework.md — Analysis methodology
• references/structured-content-template.md — Content format
• references/base-prompt.md — Prompt template
• references/layouts/<layout>.md — 21 layout definitions
• references/styles/<style>.md — 21 style definitions
• references/workflow-example.md — Example workflow when image generation is unavailable
• scripts/generate_image.py — OpenRouter image generator (Step 6)
• scripts/check_prompt_text.py — Pre-flight no-duplicate gate; fail the run instead of rendering a duplicate (Step 6)

Pitfalls

1. Data integrity is paramount — never summarize, paraphrase, or alter source statistics. "73% increase" must stay "73% increase", not "significant increase".
2. Strip secrets — always scan source content for API keys, tokens, or credentials before including in any output file.
3. One message per section — each infographic section should convey one clear concept. Overloading sections reduces readability.
4. Style consistency — the style definition from the references file must be applied consistently across the entire infographic. Don't mix styles.
5. Aspect ratio support — image_config aspect ratios are limited to what the selected model supports (Gemini: 16:9, 9:16, 1:1, 3:4, 4:3, 21:9, plus extended 1:4, 4:1, 1:8, 8:1); map custom ratios outside that set to the nearest named preset.
6. API availability — generation fails without OPENROUTER_API_KEY or when the model cannot output images. Verify the key is set before starting; if generation is impossible, deliver the prompt-only outputs (analysis.md, structured-content.md, prompts/infographic.md) and tell the user.
7. Text accuracy in image generation — AI image models frequently garble, misspell, or double text. Every prompt MUST include an explicit "CRITICAL: Text Accuracy" block that (a) lists every exact text string the image must render, (b) spells out common pitfalls to avoid (doubled words, garbled section titles, similar-looking words), and (c) instructs the model to prioritize text accuracy over visual density — shrink the number of labels rather than shrinking font size or misspelling words. After generation, verify all text with a vision model (e.g. opencode run with --model openrouter/z-ai/glm-4.6v --file) against the expected text list before delivering to the user.
8. Chinese/CJK glyphs must be verified strictly, glyph by glyph — treat CJK rendering as a hard gate, not a nice-to-have. After generation, compare every rendered glyph against the expected text list, character by character, using a vision model or by reading the image directly. Watch especially for: rare characters replaced by a common look-alike (菂→药、蔷→蓄、茄→茹), Simplified/Traditional swaps, dropped or doubled characters, and wrong-but-plausible variants. If any glyph is not exactly correct, the image is NOT deliverable as-is — stop and discuss with the user, offering: (a) accept the substitution only if it is a documented, acceptable variant, (b) re-render with a different image model, or (c) drop/rephrase the offending label. Never silently ship a mis-rendered name or character.
9. No duplicated data anywhere — text or image — the final image must not repeat any text string (names, labels, sentences, the title, an arc line) or duplicate any imagery (echoed illustrations, cloned cells). Prevent it at the prompt, not at the image: duplication is caused upstream, when the same string is enumerated twice (a text-accuracy block plus a trailing label dump) or repeated in the layout/style guidance. Keep exactly one enumeration (Step 5) and gate generation with scripts/check_prompt_text.py (Step 6) — it fails the run before any cost is incurred. Then verify after generation (Pitfalls #7, #8): scan for duplicated cells, a title/arc rendered twice, names listed twice, and mirrored/echoed illustrations. If duplicates appear, regenerate or simplify the layout — never deliver with duplicated content.

Credits

• Original author: 宝玉 (JimLiu) — the baoyu layout × style system, JimLiu/baoyu-skills v1.56.1.
• Ported & customized by: j3ffyang — OpenCode adaptation and this repo's imgs/ output convention.