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

> Master the UI prompt template for GPT-Image2 with this complete guide. Copy pre-built prompt blueprints from style-library.json to create stunning images effortlessly. Get started now!

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-09-01

---

**The UI prompt templates in GPT-Image2 are pre-built prompt blueprints stored in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.

```text
为[产品类型]生成一张[平台，如 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:

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

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

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

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) following this structure:

```json
{
  "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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) and render in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js), which validates input and executes `generateImage(prompt)` to interface with GPT-Image2.
- **Extensibility**: Adding entries to [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md).

### Where are the UI prompt templates stored in the codebase?

The templates are stored in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) as an array of objects. The React frontend in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.