Key Patterns for Charts & Infographics Templates in GPT-Image2

GPT-Image2 standardizes data visualization generation through three distinct prompt patterns—Common Text, Advanced JSON, and Scale-Zoom—stored in docs/templates.md and processed via api/generate-image.js to ensure deterministic, high-quality chart outputs.

The freestylefly/awesome-gpt-image-2 repository codifies best practices for AI-generated infographics through structured templates that eliminate prompt ambiguity. These patterns provide pre-defined schemas for layout, color theory, and information hierarchy, allowing both manual UI input and automated API pipelines to produce publication-ready visuals consistently.

Template Storage and Architecture

All prompt specifications reside in docs/templates.md, organized by thematic blocks marked with anchor identifiers such as tpl-infographic. The system maintains two consumption pathways: human-readable text prompts for direct copy-paste workflows, and machine-readable JSON schemas for programmatic integration. When users interact with the web interface, src/community.jsx handles template injection and preview logic, while src/community.css governs the gallery display of generated outputs.

The Three Core Prompt Patterns

Common Text Template

The Common Text Template provides a concise, fill-in-the-blank prompt structure optimized for quick generation through the UI. It enforces specificity through bracketed placeholders for topic definition, audience segmentation, modular structure (3-5 panels), chart type selection, and stylistic constraints.

生成[主题：明确、具体，避免宽泛。例如：“老年人日常健康管理指南”]信息图，目标读者为[人群:细化人群特征，如年龄段、职业、兴趣等]。结构：标题区 + [3-5]个模块（每模块含图标、短标题、1-2句说明,模块间逻辑：可用箭头、颜色区分或连接线提示信息流或关系等适当的方式）。图表类型：[流程图/对比图/关系图/时间线]。风格：[专业报告/科普插画/儿童教育等]，主色[颜色]，背景[浅色/深色]。输出：信息层级清晰、可读性高的中文信息图。

This pattern includes an anti-pitfall checklist (避坑指南) that advises limiting module counts and maintaining text restraint to prevent visual clutter.

Advanced JSON Template

The Advanced JSON Template transforms the text structure into a machine-parseable schema suitable for automated pipelines. Stored in the same documentation file, this pattern allows dynamic composition through nested objects covering metadata, structural layout arrays, and constraint definitions.

{
  "type": "Infographic",
  "topic": "Urban Metabolism",
  "audience": "General Public",
  "structure": {
    "title_area": "城市生命系统图谱",
    "layout": "Isometric cutaway, 12 numbered panels",
    "modules": [
      { "title": "能源", "icon": "lightning", "text": "Power flows" },
      { "title": "水循环", "icon": "water_drop", "text": "Water flows" }
    ]
  },
  "style": {
    "aesthetic": "Scientific atlas",
    "colors": "Low saturation, color‑coded flows",
    "background": "Light paper texture"
  },
  "constraints": "No cyberpunk, no gibberish text, strict structural layout"
}

The backend endpoint api/generate-image.js accepts this payload, validates the schema, and maps fields to the underlying OpenAI image model parameters.

Scale-Zoom Infographic Template

The Scale-Zoom Infographic Template addresses scientific visualization requirements by enforcing a micro-to-macro progression across 6-8 circular or hexagonal frames. This specialized text prompt requires specific measurement units, 3D render specifications, and strict prohibitions against generic iconography.

为[主题]生成一张科学尺度缩放信息图。结构：6-8 个圆形或六边形框，按从微观到宏观的尺度递进排列。每个框包含：尺度名称、3-5 个词的洞察、测量单位或放大倍率，以及该尺度下的高细节 3D 渲染。用细线连接各尺度，避免重复层级。标题使用“[主题]：AT EVERY SCALE”或“ZOOM: THE WORLD OF [主题]”。风格：科学编辑信息图、精准微距光、清晰层级、文字短而可读。约束：不要通用放大镜图标，不要把所有尺度画成同一大小，不要塞长段正文。

Key constraints include prohibiting magnifying glass icons and uniform sizing across scales to maintain visual distinction between orders of magnitude.

Frontend Integration and API Consumption

The integration flow connects template selection to image generation through three stages:

• Template Selection: src/community.jsx provides UI components that inject the selected pattern into the prompt textarea when users choose the "Infographic" category.
• Payload Processing: Upon submission, the frontend transmits either the raw text or stringified JSON to /api/generate-image, where the backend normalizes the input format.
• Constraint Enforcement: The system surfaces anti-pitfall guidance (避坑指南) during the editing phase, warning users against excessive module counts or verbose text blocks that degrade readability.

// Implementation in src/community.jsx (simplified)
function insertInfographicTemplate() {
  const prompt = `生成[主题...]信息图...`; // Common Text Template
  setPrompt(prompt);
}

For automated workflows, developers can POST structured JSON directly to the generation endpoint:

import fetch from 'node-fetch';

const payload = {
  type: "Infographic",
  topic: "Photosynthesis",
  structure: {
    modules: [
      { title: "Cell", icon: "cell", text: "Chloroplast activity" },
      { title: "Leaf", icon: "leaf", text: "Gas exchange" }
    ]
  },
  constraints: "No generic icons, vary scale sizes"
};

fetch('https://your-instance.vercel.app/api/generate-image', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt: payload })
})
.then(res => res.json())
.then(data => console.log('Generated:', data.url));

Summary

• Three standardized patterns—Common Text, Advanced JSON, and Scale-Zoom—provide deterministic structures for chart generation in GPT-Image2.
• Source definitions live in docs/templates.md, while api/generate-image.js handles execution and src/community.jsx manages the UI layer.
• Anti-pitfall guidelines (避坑指南) embedded in each template prevent common errors like module overcrowding and text verbosity.
• Dual consumption models support both interactive UI usage and automated API integration for batch processing pipelines.

Frequently Asked Questions

How do I choose between the Common Text and JSON templates?

Use the Common Text Template for one-off generations through the web UI where manual customization is needed, and select the Advanced JSON Template when building automated pipelines or agents that require dynamic field substitution and deterministic schema validation.

Where are the infographic templates actually stored in the repository?

All prompt patterns are centralized in docs/templates.md, organized by section anchors such as tpl-infographic, with styling support provided by src/community.css and backend logic implemented in api/generate-image.js.

What are the specific constraints for the Scale-Zoom template?

The Scale-Zoom template strictly requires 6-8 circular frames progressing from micro to macro scales, prohibits generic magnifying glass icons, mandates distinct sizing for each scale level, and limits text to 3-5 word insights per frame to maintain scientific accuracy and readability.

How does the system prevent common generation errors?

Each template block includes an anti-pitfall checklist (避坑指南) that surfaces warnings in the UI about structural limitations, such as controlling module quantities between 3-5 for standard infographics and avoiding long-form paragraphs that compromise visual hierarchy.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}