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

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#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 (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 (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 (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)

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

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

JSON Prompt (Agent-Friendly)

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

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

Social-Media Screenshot (Platform-Specific)

生成一张抖音内容截图，深色模式。
整体比例：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	Category overview, gallery navigation, case counts	[main/README.md](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/README.md)
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)
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)
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)

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). 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 (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.

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