How to Use the UI Prompt Template for GPT-Image2: A Complete Guide

The UI prompt templates in GPT-Image2 are pre-built prompt blueprints stored in data/style-library.json that you can copy to your clipboard and paste into the generation interface to create high-quality images without writing prompts from scratch.

The freestylefly/awesome-gpt-image-2 repository provides a React-based interface for generating images with GPT-Image2, featuring a comprehensive template system that streamlines prompt creation. Understanding how to use these UI prompt templates allows you to quickly generate consistent, high-quality images by leveraging pre-defined structures rather than crafting prompts manually. This guide walks through the template architecture, storage locations, and practical implementation based on the actual source code.

Where Templates Are Stored and Rendered

The template system relies on a centralized data file and a dedicated UI section to present options to users.

Template Data Source

The application stores all template definitions in data/style-library.json. This JSON file contains an array of template objects, each with metadata including titles, descriptions, and the actual prompt content. When the UI loads, it consumes this data via styleLibrary.templates to populate the interface dynamically.

UI Rendering Location

In src/main.jsx, the templates render inside a dedicated section identified by <section className="templateSection" id="templates">. Each template appears as a card containing:

• A title and eyeline
• A short description
• A "Copy Prompt" button

When you click the copy button, the application executes navigator.clipboard.writeText(template.p_prompt), copying either plain text or JSON content directly to your clipboard for immediate use in the prompt input field at the top of the page.

Template Formats: Plain Text vs JSON

GPT-Image2 supports two distinct template formats, each serving different use cases from manual UI generation to automated agent workflows.

Plain-Text Templates

Plain-text templates provide human-readable prompt structures with bracketed placeholders for customization. These are ideal for direct copying into the web interface.

为[产品类型]生成一张[平台，如 iOS/Android/Web]界面图。
核心功能：[功能点A]、[功能点B]、[功能点C]。
视觉风格：[极简/科技/拟物]，主色[颜色]，强调色[颜色]。
布局：[顶部导航/双栏/卡片流]，信息层级清晰，留白充足。
输出：高保真UI截图，文字清晰可读，比例[9:16/16:9]。

JSON-Advanced Templates

JSON templates offer structured data recommended for agents calling the API directly. These provide granular control over styling, content, and constraints:

{
  "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"
}

Both formats are documented in docs/templates.md under the section 🧩 工业级提示词模板与防坑指南, which includes detailed "avoid-pitfalls" guidance for each template type.

Step-by-Step Workflow for Using Templates

Follow this workflow to generate images using the built-in template system:

1. Open the Templates section – Navigate to the Templates panel in the main interface (<section id="templates">).
2. Select a template – Choose a category that matches your use case (e.g., "UI 与界面" for interface designs).
3. Copy the prompt – Click the "Copy Prompt" button on the template card to copy the p_prompt content to your clipboard.
4. Paste into the input field – Insert the copied text into the Prompt input field at the top of the page. The UI displays a "Template Prompt" label (templatePrompt) to indicate the content originated from a template.
5. Generate the image – Click "Generate" to send the prompt to the backend endpoint api/generate-image.js, which validates the length and calls the internal generateImage(prompt) function to produce the image via GPT-Image2.

Programmatic Usage Examples

You can leverage these templates in automated workflows beyond the manual copy-paste interface.

Using Templates in Agent Scenarios

For backend integration or automated agents, send the JSON template directly to the generation API:

import axios from 'axios';

const jsonPrompt = {
  type: "UI Screenshot",
  platform: "Android",
  product: "Music Streaming App",
  layout: "Bottom navigation bar with cards",
  style: { theme: "Light", primary_color: "#1DB954", typography: "Sans‑serif" },
  content: { header: "Your Daily Mix", cards: [{ title: "Top Hits", data: "30 songs" }] },
  constraints: "Readable text, 16:9 aspect ratio"
};

axios.post('/api/generate-image', { prompt: JSON.stringify(jsonPrompt) })
  .then(res => console.log('Image URL:', res.data.imageUrl));

The backend parses the JSON, extracts the string content, and feeds it to the GPT-Image2 model.

Manual Template Implementation

To replicate the copy functionality in custom code:

// Template card implementation from src/main.jsx
<button onClick={() => navigator.clipboard.writeText(template.p_prompt)}>
  Copy Prompt
</button>

After copying, you can manually construct the prompt variable:

const prompt = `为电商平台生成一张商品主图。核心卖点：极速充电、长续航。视觉风格：极简、科技感。输出：高保真 PNG，比例 1:1。`;

Extending the Template Library

You can add custom templates by modifying the central data file without changing application code.

Add new entries to data/style-library.json following this structure:

{
  "id": "custom-ui-01",
  "title": "Custom UI Prompt",
  "category": "Prompt Template",
  "p_prompt": "为[产品]生成一张[平台]的高保真界面，风格[极简], 主色[蓝色]，布局[双栏]，输出[PNG, 1080p]。"
}

The React frontend automatically detects new entries in the JSON array and renders them as new cards in the template section without requiring a code rebuild.

Summary

• Storage Location: Templates reside in data/style-library.json and render in src/main.jsx within the <section id="templates"> element.
• ** Dual Formats**: Choose plain-text templates for manual editing or JSON templates for API-driven agent workflows.
• Copy Mechanism: The "Copy Prompt" button uses navigator.clipboard.writeText to copy template.p_prompt content for immediate use.
• Backend Processing: Submitted prompts route through api/generate-image.js, which validates input and executes generateImage(prompt) to interface with GPT-Image2.
• Extensibility: Adding entries to data/style-library.json automatically updates the UI with new template options.

Frequently Asked Questions

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

Plain-text templates provide bracketed placeholders for manual customization (e.g., [产品类型]), making them ideal for the web UI where users fill in specific values before generation. JSON templates offer structured objects with typed fields for style, content, and constraints, which are better suited for programmatic API calls where agents parse and populate fields automatically. Both formats are documented in docs/templates.md.

Where are the UI prompt templates stored in the codebase?

The templates are stored in data/style-library.json as an array of objects. The React frontend in src/main.jsx imports this data and maps over styleLibrary.templates to render each template as a card in the <section className="templateSection" id="templates"> container.

How do I add a custom template to GPT-Image2?

Append a new object to the array in data/style-library.json with unique id, title, category, and p_prompt properties. The UI automatically picks up the new template on the next load without modifying any JavaScript code, as the component dynamically renders based on the JSON data source.

Can I use these templates programmatically via the API?

Yes. Convert the JSON template to a string using JSON.stringify() and POST it to /api/generate-image with the prompt as the payload. The backend endpoint validates the request and passes the content to the generateImage(prompt) function, which communicates with the GPT-Image2 model to return the generated image URL.

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