# UI Screenshot Prompt Template in awesome-gpt-image-2: A Complete Implementation Guide

> Implement the UI Screenshot prompt template in awesome-gpt-image-2 to generate high-fidelity interface mockups. Learn how to use text blocks and JSON definitions for detailed UI designs.

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

---

**The UI Screenshot prompt template in awesome-gpt-image-2 provides both human-readable text blocks and structured JSON definitions in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) to generate high-fidelity interface mockups via the `/api/generate-image` endpoint.**

The awesome-gpt-image-2 repository ships with industrial-level prompt templates designed for generating consistent, high-quality AI images. The UI Screenshot prompt template serves as a core component for creating realistic interface mockups, offering both copy-paste text and machine-readable JSON formats that integrate seamlessly with the style library and generation API.

## UI Screenshot Prompt Template Definition in docs/templates.md

The UI Screenshot template lives in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), where it is defined in two complementary representations to serve different use cases.

### Human-Readable Text Format

For quick manual use, the template includes a human-readable text block that can be copied directly into chat interfaces. This format provides a natural language description of the requested UI elements.

```text
为Fitness App生成一张iOS界面图。
核心功能：跑步、卡路里统计、社交分享。
视觉风格：极简、暗色主题、主色 neon green。
布局：卡片式信息流，底部标签栏。
输出：高保真UI截图，文字清晰可读，比例9:16。

```

### Structured JSON Format

For programmatic use, the template provides a machine-readable JSON object stored at lines 26-46 of [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md). This format includes explicit keys that allow agents to fill values programmatically without ambiguity.

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

```

## System Integration Architecture

The UI Screenshot template integrates with the broader awesome-gpt-image-2 ecosystem through three key components that handle registration, API consumption, and agent automation.

### Style Library Registration

The template is exposed to the front-end via the `ui-screenshot-system` entry in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json). This file drives the **style selector** in the user interface, allowing users to pick "UI Screenshot System" and automatically load the JSON skeleton. The entry includes `guidance` and `pitfalls` fields to help users avoid common mistakes.

### API Endpoint Consumption

When clients send generation requests to `/api/generate-image` (implemented in [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js)), the request payload includes a `prompt` field. The back-end treats JSON templates as standard prompts, enforcing only the `APIMART_MAX_PROMPT_LENGTH` limit without requiring special handling. This keeps the UI Screenshot template **agnostic** to the underlying generation engine.

### Agent Skill Automation

The repository includes an **agent skill** at `agents/skills/gpt-image-2-style-library` that can automatically populate the UI Screenshot template. This skill reads the template definition and fills in fields based on user intent before invoking the generation endpoint, enabling automated workflows.

## Practical Implementation Examples

Developers can leverage the UI Screenshot template through multiple approaches depending on their technical requirements.

### Copy-Paste Text Prompt

For manual generation workflows, use the human-readable format from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md):

```text
为Fitness App生成一张iOS界面图。
核心功能：跑步、卡路里统计、社交分享。
视觉风格：极简、暗色主题、主色 neon green。
布局：卡片式信息流，底部标签栏。
输出：高保真UI截图，文字清晰可读，比例9:16。

```

### Programmatic JSON Construction

For applications building prompts dynamically, construct the JSON object with the required schema:

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

```

### Node.js API Integration

To send the template to the generation endpoint, serialize the JSON and POST it to `/api/generate-image`:

```javascript
import fetch from 'node-fetch';

const prompt = /* JSON string from template */;
const response = await fetch('https://your-app.com/api/generate-image', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt, caseId: 17, language: 'en' })
});

const result = await response.json();
console.log(result);

```

The endpoint enforces `APIMART_MAX_PROMPT_LENGTH` but processes the UI Screenshot template identically to standard text prompts.

## Summary

- The **UI Screenshot prompt template** is defined in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) with both human-readable text and structured JSON formats.
- **JSON templates** include specific keys (`type`, `platform`, `product`, `layout`, `style`, `content`, `constraints`) for programmatic manipulation.
- The **style library** at [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) exposes the template to the front-end via the `ui-screenshot-system` entry.
- The **API endpoint** at [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) accepts JSON templates without special handling, only enforcing length limits via `APIMART_MAX_PROMPT_LENGTH`.
- **Agent skills** at `agents/skills/gpt-image-2-style-library` can auto-populate template fields for automated workflows.

## Frequently Asked Questions

### Where is the UI Screenshot prompt template defined in awesome-gpt-image-2?

The template is defined in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) (lines 26-46), which contains both the human-readable description and the structured JSON schema. This file serves as the central documentation for the template's structure and usage patterns.

### What are the required fields in the UI Screenshot JSON template?

The JSON template requires seven top-level keys: `type` (set to "UI Screenshot"), `platform` (e.g., "iOS"), `product` (application name), `layout` (structural description), `style` (object containing theme and color), `content` (object with UI elements), and `constraints` (quality specifications like "9:16 aspect ratio").

### How does the front-end use the UI Screenshot template?

The front-end accesses the template through the `ui-screenshot-system` entry in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json). When users select "UI Screenshot System" from the style selector, the interface automatically loads the JSON skeleton from this registry, allowing users to fill in specific values before generation.

### Can the UI Screenshot template be used with automated agents?

Yes. The repository includes an agent skill at `agents/skills/gpt-image-2-style-library` that programmatically populates the template fields based on user intent. This skill reads the template definition from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) and constructs the final prompt before calling the `/api/generate-image` endpoint.