custom-infographic

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/.md

Style Gallery

Full definitions: references/styles/.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/-.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/-.png where is a 2-4 word kebab-case name and 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/.md and style from references/styles/.md.

Combine:

1. Layout definition from references/layouts/.md
2. Style definition from references/styles/.md
3. Base template from references/base-prompt.md
4. Structured content from Step 2
5. All text in confirmed language

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

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/-.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/-.png already exists, rename it to imgs/--backup-YYYYMMDD-HHMMSS.png before writing. Never overwrite silently.

Step 7: Output Summary

Report: topic, layout, style, aspect, language, output path (imgs/-.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/.md — 21 layout definitions
• references/styles/.md — 21 style definitions
• references/workflow-example.md — Example workflow when image generation is unavailable

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.

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.