# JSON Template Examples for UI & Interfaces in awesome-gpt-image-2

> Explore JSON template examples for UI interfaces in awesome-gpt-image-2. Learn to generate high-fidelity app mockups using the ui-screenshot-system template and bilingual guidance.

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

---

**The awesome-gpt-image-2 repository defines a single UI template called `ui-screenshot-system` (anchor `tpl-ui`) in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) that structures prompts for generating high-fidelity application, web, and dashboard interface mockups with platform-specific constraints and bilingual guidance fields.**

These JSON templates serve as programmable prompt recipes that translate high-level UI requirements into concrete generation instructions for GPT-Image 2. Stored centrally in the style library, each template encapsulates metadata, usage scenarios, and constraint definitions to ensure consistent, reproducible interface generation across different platforms and contexts.

## Understanding the UI Template Structure

The **UI & Interfaces** category in the style library follows a rigid schema designed to capture both technical specifications and creative direction. Every template object contains localization support, categorical tagging, and operational guardrails.

### Core Metadata Fields

Each UI template requires unique identification and classification attributes:

- **`id`**: The system identifier (`ui-screenshot-system`) used for internal references
- **`anchor`**: The lookup key (`tpl-ui`) that applications use to retrieve the template
- **`category`**: Fixed value `"UI & Interfaces"` for filtering and organization
- **`styles`**: Array defining applicable aesthetics (e.g., `["UI"]`)
- **`scenes`**: Contextual tags like `["Tech", "Social"]` indicating appropriate use cases
- **`exampleCases`**: Array of integers referencing specific case studies (`[17, 2, 4]`)

The template also carries bilingual content objects for `title`, `description`, `useWhen`, `guidance`, and `pitfalls`, supporting both English (`en`) and Chinese (`zh`) localization.

### Guidance and Constraints

The **`guidance`** field provides actionable instructions for prompt construction, while **`pitfalls`** documents common failure modes to avoid. For UI generation, these fields specifically address platform fidelity, text readability, and interface component specification.

According to the source code in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json), the template instructs users to lock platform specifics, aspect ratios, and layout hierarchies, while warning against vague platform names and generic mockups that lack platform-specific details.

## Complete JSON Template Reference

The full definition for the UI screenshot template resides at lines 224–248 of [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json). This object represents the complete configuration available for UI & Interfaces generation:

```json
{
  "id": "ui-screenshot-system",
  "anchor": "tpl-ui",
  "cover": "/images/case17.jpg",
  "title": { "en": "UI Screenshot System", "zh": "UI 截图系统" },
  "description": {
    "en": "High-fidelity app, web, dashboard, and social interface prompts.",
    "zh": "生成 App、网页、仪表盘、社媒截图等高保真界面。"
  },
  "category": "UI & Interfaces",
  "styles": ["UI"],
  "scenes": ["Tech", "Social"],
  "tags": ["UI", "Dashboard", "Screenshot"],
  "useWhen": {
    "en": "Use for app screens, dashboards, social screenshots, and live interface mockups.",
    "zh": "用于 App 截图、仪表盘、社媒截图和直播界面。"
  },
  "guidance": {
    "en": [
      "Lock platform, aspect ratio, layout hierarchy, and exact visible text.",
      "Specify UI chrome such as status bars, tabs, action rows, or comment layers."
    ],
    "zh": [
      "锁定平台、比例、层级和画面文字。",
      "明确状态栏、Tab、操作区、评论层等 UI 元素。"
    ]
  },
  "pitfalls": {
    "en": [
      "Avoid vague platform names and generic app mockups.",
      "Constrain text readability and platform‑specific details."
    ],
    "zh": [
      "避免平台描述过泛。",
      "约束文字可读性和平台特征。"
    ]
  },
  "exampleCases": [17, 2, 4]
}

```

This structure enables programmatic validation and ensures that every UI generation request includes necessary constraints for platform consistency and visual hierarchy.

## Implementing the Template in JavaScript

Developers can consume these JSON templates directly in Node.js or browser environments to build dynamic prompt-generation pipelines.

### Loading the Template from style-library.json

To retrieve the UI template programmatically, parse the library file and filter by the `anchor` field:

```javascript
import fs from 'fs';
import path from 'path';

// Resolve the library file (relative to project root)
const libPath = path.resolve('data', 'style-library.json');
const library = JSON.parse(fs.readFileSync(libPath, 'utf-8'));

// Find the UI template by its anchor identifier
const uiTemplate = library.templates.find(t => t.anchor === 'tpl-ui');

console.log('UI Template ID:', uiTemplate.id);
console.log('Prompt hint:', uiTemplate.useWhen.en);

```

This approach leverages the `anchor` property as a stable lookup key, insulating your code from potential `id` changes.

### Building Prompts Programmatically

Once loaded, use the template's `guidance` and metadata to construct platform-specific generation instructions:

```javascript
function buildUiPrompt(template, extra = {}) {
  const base = {
    platform: 'iOS',
    aspectRatio: '16:9',
    layout: 'dashboard',
    visibleText: 'Settings – Account – Logout',
    ...extra,
  };

  const instructions = [
    ...template.guidance.en,
    `Platform: ${base.platform}`,
    `Aspect ratio: ${base.aspectRatio}`,
    `Layout: ${base.layout}`,
    `Visible text: ${base.visibleText}`,
  ];

  return instructions.join('\n');
}

const prompt = buildUiPrompt(uiTemplate, {
  platform: 'Web',
  layout: 'admin panel',
  visibleText: 'User Management – Add New',
});

console.log(prompt);

```

This function spreads the template's guidance array into the final prompt, ensuring compliance with the constraint recommendations defined in the JSON schema while allowing runtime customization of platform and layout parameters.

## Key Files and Navigation

Three files govern the definition, exposure, and documentation of UI templates in the repository:

- **[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)**: The canonical source containing all template definitions, including the `ui-screenshot-system` object at lines 224–248.

- **[`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)**: The React entry point that renders template selection UI and generates documentation links pointing to [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md).

- **[`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md)**: Human-readable documentation compiled from the JSON library, providing extended context and usage examples for the `tpl-ui` anchor and related templates.

## Summary

- The **UI & Interfaces** category contains one production template: `ui-screenshot-system` (anchor `tpl-ui`) stored in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json).
- Templates use bilingual objects (`en`/`zh`) for internationalized title, description, guidance, and error prevention content.
- The JSON schema enforces strict metadata including `category`, `styles`, `scenes`, and `tags` for automated filtering and validation.
- Implementation requires parsing the style library and querying by `anchor` to retrieve guidance arrays for prompt construction.
- Pitfall documentation specifically warns against vague platform descriptions and illegible text in generated interfaces.

## Frequently Asked Questions

### How do I reference the UI template in my code?

Reference the template by its **anchor** field (`tpl-ui`) rather than the display `id`. In [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json), the anchor serves as the stable lookup key, while the ID (`ui-screenshot-system`) may vary between versions. Use `library.templates.find(t => t.anchor === 'tpl-ui')` to retrieve the object reliably.

### What platforms are supported by the UI screenshot template?

The template supports any platform specified in the prompt parameters, but the guidance specifically mentions **iOS**, **Web**, **Android**, and **Desktop** contexts. The `guidance.en` array instructs you to "Lock platform, aspect ratio, layout hierarchy, and exact visible text," making the template platform-agnostic while requiring explicit platform declaration.

### Where can I find examples of generated UI outputs?

Check the **`exampleCases`** array in the template object, which references cases 17, 2, and 4. These integers map to specific entries in the repository's case library, with case 17 serving as the cover image (`/images/case17.jpg`) for the UI Screenshot System template.

### Can I extend the template with custom guidance fields?

Yes, the JSON structure supports arbitrary extension, though the frontend renderer in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) expects specific keys (`guidance`, `pitfalls`, `useWhen`) for documentation generation. When extending, maintain the bilingual object pattern (`{en: "...", zh: "..."}`) to ensure compatibility with the repository's internationalization standards.