How to Use the GPT-Image2 Template System for Automated Image Generation

The GPT-Image2 template system enables structured image generation by substituting placeholders in pre-defined prompts from docs/templates.md, submitting them as either plain-text or JSON payloads to the /api/generate-image endpoint.

The freestylefly/awesome-gpt-image-2 repository ships with an industrial-grade prompt template library containing approximately 21 core templates spanning UI mockups, infographics, and product photography. By leveraging square-bracket placeholders or structured JSON schemas, you can generate consistent, high-fidelity images without manually crafting prompts for each request.

Understanding the Template Architecture

The template definitions reside in docs/templates.md, which organizes approximately 393 specialized cases into 21 thematic sections marked with HTML anchors (e.g., #tpl-ui, #tpl-infographic). Each template includes placeholders wrapped in square brackets such as [平台], [颜色], or [功能点A], which the system replaces with user-provided values before generation.

Every entry also contains 避坑指南 (pitfall-avoidance notes) that enforce critical constraints like "文字必须可读" (text must be readable) or fixed aspect ratios to prevent malformed outputs. According to the source code, these constraints are embedded directly in the template metadata to guide the image-generation model.

Text vs JSON Template Formats

The system supports two distinct input formats that serve different use cases:

• Plain-text templates: Ideal for ad-hoc use in the web UI, these allow direct copy-and-paste of prompts with bracketed placeholders that get string-replaced before submission.
• JSON templates: Designed for automated agents (e.g., bots generating UI screenshots), these specify explicit fields such as type, platform, style, and constraints, which the server expands into deterministic prompts.

Loading and Rendering Templates

When you access the web interface, src/main.jsx fetches the raw markdown from docs/templates.md and parses the headings to present a navigable list. Clicking "Use this template" triggers the UI to scan the selected template for square-bracket placeholders and dynamically generate corresponding form fields for data entry.

This parsing happens client-side, allowing the frontend to validate placeholder keys against the expected input map before constructing the API request.

Generating Images via the API

Once form values are collected, the client sends a POST request to /api/generate-image (implemented in api/generate-image.js). The request body must contain either:

• prompt: "<filled-in-text>" — A complete plain-text string with placeholders already substituted, or
• json: { … } — A structured JSON object following the agent template schema.

The backend handler inspects the payload type, constructs the final model prompt, and returns a JSON response containing the imageUrl.

Submitting Plain-Text Prompts

For browser-based generation, fill placeholders programmatically before sending:

// Simplified logic from src/main.jsx
async function generateFromTemplate(template, values) {
  const filled = template.replace(/\[([^\]]+)\]/g, (_, key) => values[key] || '');
  const resp = await fetch('/api/generate-image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt: filled })
  });
  return await resp.json(); // { imageUrl: '…' }
}

const uiTemplate = `为[产品类型]生成一张[平台，如 iOS/Android/Web]界面图。
核心功能：[功能点A]、[功能点B]、[功能点C]。
视觉风格：[极简/科技/拟物]，主色[颜色]，强调色[颜色]。`;

generateFromTemplate(uiTemplate, {
  '产品类型': 'Fitness App',
  '平台 如 iOS/Android/Web': 'iOS',
  '功能点A': '运动记录',
  '功能点B': '心率监测',
  '功能点C': '社交分享',
  '极简/科技/拟物': '极简',
  '颜色': 'Neon Green'
}).then(console.log);

Using JSON Agent Templates

For programmatic automation, construct a structured JSON object as shown in scripts/generate-style-skill.mjs:

import fetch from 'node-fetch';

const jsonTemplate = {
  type: "UI Screenshot",
  platform: "iOS",
  product: "Fitness App",
  layout: "Card-based feed with bottom tab bar",
  style: {
    theme: "Dark Mode",
    primary_color: "Neon Green",
    typography: "Clean sans-serif"
  },
  content: {
    header: "Today's Activity",
    cards: [
      { title: "Running", data: "5.2 km", button: "Start" },
      { title: "Calories", data: "340 kcal" }
    ]
  },
  constraints: "High fidelity, readable text, 9:16 aspect ratio"
};

const res = await fetch('https://your-instance.vercel.app/api/generate-image', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ json: jsonTemplate })
});
const { imageUrl } = await res.json();
console.log('Generated image:', imageUrl);

Accessing Templates Directly

You can retrieve the raw template definitions for custom tooling without cloning the repository:

curl -L \
  https://github.com/freestylefly/awesome-gpt-image-2/raw/main/docs/templates.md \
  | grep -A3 "### UI与界面"

This extracts specific sections like the UI templates for local parsing or third-party integrations.

Summary

• The GPT-Image2 template system stores definitions in docs/templates.md with square-bracket placeholders and HTML anchors for navigation.
• Plain-text templates suit manual web UI workflows, while JSON templates enable deterministic agent automation via structured fields.
• The frontend in src/main.jsx parses markdown to render dynamic form fields, submitting to api/generate-image.js for processing.
• Pitfall-avoidance notes embedded in templates enforce constraints like readable text and fixed aspect ratios to ensure quality outputs.

Frequently Asked Questions

What is the difference between text and JSON templates in GPT-Image2?

Text templates use bracketed placeholders (e.g., [颜色]) that get string-replaced before submission, making them ideal for quick browser-based generation. JSON templates provide structured schemas with typed fields like platform, style, and constraints, allowing automated agents to generate deterministic prompts without string manipulation.

Where are the template definitions stored?

All template definitions reside in docs/templates.md at the repository root. This file contains approximately 21 core templates organized by category with HTML anchor links (e.g., #tpl-ui), alongside Chinese-language pitfall-avoidance guidelines (避坑指南).

How do I prevent malformed outputs when using templates?

Each template includes embedded 避坑指南 (pitfall-avoidance notes) specifying constraints such as "文字必须可读" (text must be readable) or fixed aspect ratios. When using JSON templates, include these constraints in the constraints field; for text templates, append the guidelines to your final prompt before calling /api/generate-image.

Can I use GPT-Image2 templates without the web interface?

Yes. You can programmatically fetch docs/templates.md via raw GitHub URLs, parse the placeholder patterns, and submit filled prompts directly to /api/generate-image using HTTP clients like curl or fetch. Authentication is handled via src/supabaseClient.js, so ensure you establish a valid session before making API calls.

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