# UI & Interfaces GPT-Image2 Template Category: Capabilities, Templates, and Use Cases

> Explore the UI & Interfaces GPT-Image2 template category to generate high-fidelity interface screenshots, product mockups, and more with component-level prompting and advanced templates.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: capabilities
- Published: 2026-09-06

---

**The UI & Interfaces GPT-Image2 template category provides structured prompts for generating high-fidelity interface screenshots, product mockups, social media posts, and live-stream overlays through four core capabilities: component-level prompting, standard textual templates, JSON-advanced templates, and specialized sub-templates.**

This category in the `freestylefly/awesome-gpt-image-2` repository enables designers, developers, and AI agents to synthesize realistic visual assets with precise control over layout, styling, and content. Whether you need a quick iOS mockup or a deterministic JSON-driven workflow, the UI & Interfaces templates offer both manual and programmatic generation paths.

## Four Core Capabilities of UI & Interfaces Templates

The capabilities are organized into layered abstraction levels, from freeform text prompts to machine-readable schemas.

### Component-Level Prompting

The foundational capability defines **UI components**, **page hierarchy**, and **visual style** through descriptive language. This approach enforces clear information architecture with ample whitespace and screenshot-realistic textures.

As documented in [[`README.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/README.md)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/README.md#L85-L88), this layer handles:

- Component specification (buttons, cards, navigation bars)
- Visual style descriptors (minimal, tech-focused, skeuomorphic)
- Hierarchy and whitespace requirements
- Output texture definitions

### Standard Textual Template

The **text-only template** provides a concise, human-writable format for rapid prototyping. Found in [[`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) (lines 16-22)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md#L16-L22), this template structure includes:

| Element | Purpose |
|---------|---------|
| Platform | iOS, Android, Web, Desktop |
| Product type | E-commerce, social, productivity, etc. |
| Core functions | Key features to visualize |
| Visual theme | Color palette, typography, mood |
| Layout | Structural organization |
| Output constraints | Aspect ratio, readability, fidelity |

### JSON-Advanced Template

For **agent-driven generation**, the JSON schema eliminates textual ambiguity by separating metadata from content blocks. Located in [[`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) (lines 26-45)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md#L26-L45), this structured format enables deterministic UI generation when consumed by LLM agents like the `gpt-image-2-style-library` skill.

The schema distinguishes:

- **UI metadata**: `type`, `platform`, `layout`, `style`
- **Content blocks**: `header`, `cards`, navigation elements
- **Constraints**: Fidelity requirements, text legibility, aspect ratios

### Specialized Sub-Templates

The category extends into **platform-specific visual assets** through dedicated sub-templates in [[`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) (lines 48-84)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md#L48-L84):

- **Social media screenshots**: TikTok (抖音), WeChat Moments (微信朋友圈), X/Twitter
- **Live-stream UI overlays**: Shopping streams (带货) vs. talent streams (才艺)

Each sub-template mandates specific fields: account avatars, usernames, verification badges, interaction metrics (likes, comments, shares), and strict constraints against placeholder text or garbled characters.

## Practical Code Examples

### Text-Only Prompt (Quick Manual Use)

```text
为电商类移动应用生成一张Android界面图。
核心功能：搜索、商品列表、购物车。
视觉风格：极简，主色蓝色，强调色橙色。
布局：顶部导航 + 卡片流，信息层级清晰，留白充足。
输出：高保真UI截图，文字清晰可读，比例16:9。

```

Feed this directly to GPT-Image2 for immediate results without additional tooling.

### JSON Prompt (Agent-Friendly)

```json
{
  "type": "UI Screenshot",
  "platform": "Android",
  "product": "E‑commerce App",
  "layout": "Card-based feed with bottom navigation bar",
  "style": {
    "theme": "Light Mode",
    "primary_color": "Blue",
    "typography": "Rounded sans-serif"
  },
  "content": {
    "header": "Featured Deals",
    "cards": [
      {"title": "Smartphone", "data": "$299", "button": "Buy"},
      {"title": "Headphones", "data": "$59", "button": "Add to Cart"}
    ]
  },
  "constraints": "High fidelity, readable text, 16:9 aspect ratio"
}

```

Execute via the `gpt-image-2-style-library` skill:

```bash
gpt-image-2-style-library generate --json ecommerce-android.json

```

### Social-Media Screenshot (Platform-Specific)

```text
生成一张抖音内容截图，深色模式。
整体比例：9:16，手机截图风格。

核心内容：
- 账号信息：头像描述 为「可爱卡通形象」、用户名 「小明的创意屋」、认证标识 「已认证」。
- 正文内容：「今天分享我的AI绘图流程，快来试试吧！」（包含指定中文）。
- 互动数据：点赞 1543、评论 87、转发 12、收藏 34。

界面元素：
- 顶部：状态栏、搜索栏。
- 底部：输入框、点赞/评论/分享图标。

约束：文字必须准确显示指定的中文，禁止乱码和占位文本，比例固定。

```

Swap `抖音` for `微信朋友圈` or `X` to generate platform-native screenshots with authentic UI conventions.

## Key Source Files and Their Roles

| File | Purpose | Location |
|------|---------|----------|
| [`README.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/README.md) | Category overview, gallery navigation, case counts | [[`main/README.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/main/README.md)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/README.md) |
| [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) | Full template definitions, "避坑指南" (pitfall avoidance guide), JSON schemas | [[`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) |
| [`agents/skills/gpt-image-2-style-library/SKILL.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/SKILL.md) | Agent integration guide for JSON schema consumption | [[`agents/skills/gpt-image-2-style-library/SKILL.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/SKILL.md)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/SKILL.md) |
| [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) | Generated data powering website UI selector and skill shared state | [[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) |

## Summary

- **Component-level prompting** enables freeform description of UI elements, hierarchy, and style with enforced whitespace and information architecture.
- **Standard textual templates** provide a concise, human-writable structure for rapid manual generation of platform-specific mockups.
- **JSON-advanced templates** deliver machine-readable schemas for deterministic, agent-driven UI generation without textual ambiguity.
- **Specialized sub-templates** extend capabilities to social media screenshots and live-stream overlays with platform-native conventions and strict content constraints.

## Frequently Asked Questions

### What platforms does the UI & Interfaces category support?

The templates explicitly support **iOS**, **Android**, **Web**, and **Desktop** platforms for product mockups, plus **TikTok (抖音)**, **WeChat Moments (微信朋友圈)**, and **X/Twitter** for social media screenshots. The platform field in both text and JSON templates determines visual conventions, aspect ratios, and UI element styling.

### How do I use the JSON template with an AI agent?

Pass the JSON file to the `gpt-image-2-style-library` skill as implemented in [[`agents/skills/gpt-image-2-style-library/SKILL.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/SKILL.md)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/SKILL.md). The skill parses the structured schema and generates deterministic outputs via CLI: `gpt-image-2-style-library generate --json <file>.json`. This eliminates the variability inherent in freeform text prompts.

### What constraints prevent text garbling in generated screenshots?

All UI & Interfaces templates enforce **readable text requirements** and **prohibit placeholder text** through explicit constraints. The specialized social media and live-stream sub-templates additionally mandate accurate Chinese character display with strict prohibitions against乱码 (garbled characters), ensuring generated screenshots match real platform content.

### Where are the live-stream UI templates documented?

Live-stream overlay templates—including both **shopping streams (带货)** and **talent streams (才艺)** variants—are defined in [[`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) (lines 48-84)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md#L48-L84). These specify layered UI components (top bars, comment feeds, product cards), color modes (dark/light), and layout variants unique to Chinese streaming platforms.