Infographic Design

Create compelling data visualizations and infographics. Transform numbers, processes, and comparisons into visually engaging graphics.

Choosing the path: chart geometry and numbers generated by Gemini are illustrative, not accurate -- bar heights won't match data and digits get garbled. Use HTML/CSS/SVG whenever the graphic plots real data or has more than ~8 short text labels. Use Gemini for illustrated, low-text pieces (icons, scenes, a few big stats), or generate illustrations with Gemini and lay out data in code around them.

Step 1: Load Design Context

1. Read .agents/design-context.md first -- brand colors (hex), fonts, style archetype
2. If missing, use the design-context Default Fallbacks and tell the user defaults were used
3. Infographics rely heavily on a consistent color system for data categories

Gemini Image Generation Path

Pipeline/CLI: image-generation. Prompt craft, cropping, and text-overlay fallback: graphic-design Step 3.