# Key Patterns for Charts & Infographics Templates in GPT-Image2

> Discover key patterns for GPT-Image2 charts and infographics. Learn about Common Text, Advanced JSON, and Scale-Zoom templates for standardized, high-quality data visualization generation.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: best-practices
- Published: 2026-08-26

---

**GPT-Image2 standardizes data visualization generation through three distinct prompt patterns—Common Text, Advanced JSON, and Scale-Zoom—stored in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) and processed via [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/community.jsx) handles template injection and preview logic, while [`src/community.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.

```text
生成[主题：明确、具体，避免宽泛。例如：“老年人日常健康管理指南”]信息图，目标读者为[人群:细化人群特征，如年龄段、职业、兴趣等]。结构：标题区 + [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.

```json
{
  "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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.

```text
为[主题]生成一张科学尺度缩放信息图。结构：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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.

```javascript
// 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:

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), while [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) handles execution and [`src/community.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), organized by section anchors such as `tpl-infographic`, with styling support provided by [`src/community.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/community.css) and backend logic implemented in [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.