# How to Customize the UI Screenshot Template for Different Platforms

> Learn how to customize the UI screenshot template for different platforms. Edit the JSON definition and update documentation to deploy your custom templates easily.

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

---

**To customize the UI screenshot template for different platforms, edit the JSON definition in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) and synchronize the documentation in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), then regenerate the site data to deploy your changes.**

The `freestylefly/awesome-gpt-image-2` repository provides a flexible system for generating platform-specific UI screenshots through configurable templates. By modifying the **style library** and associated documentation, you can add support for new operating systems like WearOS, Web, or proprietary mobile platforms. This guide walks you through the exact file locations and code changes required to customize the UI screenshot template for different platforms.

## Understanding the Template Architecture

The system stores UI template definitions in two synchronized locations. The **style library** at [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) contains the structured JSON template (`ui-screenshot-system` entry at lines 225-238) that defines fields like `platform`, `product`, `layout`, `style`, `content`, and `constraints`. The **human-readable guide** in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) (section `### UI 与界面`) documents the plain-text template syntax and JSON structure for manual copy-paste usage.

When rendering UI screenshots, the application imports the style library via `import { styleLibrary }` in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) (lines 2875-2879) and feeds the selected template to the LLM prompt builder. The prompt builder concatenates these fields into a single instruction string that the language model interprets to generate the visual output.

## Step-by-Step Customization Guide

### 1. Extend the JSON Definition in [`style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/style-library.json)

Add your new platform to the `"platform"` field within the existing `ui-screenshot-system` entry, or create a dedicated template by copying the entire object and assigning a new `id` like `ui-screenshot-wearos`. This ensures the LLM receives the correct platform token to generate UI elements matching the target OS design language, such as circular navigation for WearOS or responsive grids for Web applications.

### 2. Update the Markdown Documentation

Edit the `### UI 与界面` section in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) to include platform-specific conventions. For example, document that "WearOS uses circular navigation and larger tap targets" or that "Web applications require responsive breakpoint considerations." This keeps the human-readable guide synchronized with the JSON structure for users who reference the documentation directly.

### 3. Adjust the Frontend Selector (Optional)

If you created a new template `id`, modify the selector UI in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) around line 2875. The code loops over `styleLibrary.templates` to populate the dropdown; ensure your new template appears in this iteration so users can select it manually from the interface.

### 4. Regenerate Site Data

Run the build script to embed updated templates into the static site:

```bash
node scripts/generate-site-data.mjs

```

This command updates the JSON used by the frontend without requiring a full rebuild, making your new platform template immediately available to end users.

## Code Examples for Platform Extensions

### Adding a WearOS Variant

Extend [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) with platform-specific styling and content structure:

```json
{
  "id": "ui-screenshot-wearos",
  "type": "UI Screenshot",
  "platform": "WearOS",
  "product": "Fitness Tracker",
  "layout": "Circular dashboard with bottom swipe",
  "style": {
    "theme": "Dark Mode",
    "primary_color": "Teal",
    "typography": "Rounded sans-serif"
  },
  "content": {
    "header": "Today's Steps",
    "cards": [
      {"title": "Steps", "data": "8,200", "icon": "foot"},
      {"title": "Heart Rate", "data": "78 bpm", "icon": "heart"}
    ]
  },
  "constraints": "High fidelity, readable text, 1:1 aspect ratio"
}

```

### Prompt Builder Implementation

The template processor in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) constructs the LLM instruction by mapping JSON fields to prompt text:

```javascript
// Extract the UI template the user selected
const tmpl = styleLibrary.templates.find(t => t.id === 'ui-screenshot-system');

// Build the LLM prompt
const prompt = `
Generate a UI screenshot for ${tmpl.platform} ${tmpl.product}.
Layout: ${tmpl.layout}. Theme: ${tmpl.style.theme}, primary color ${tmpl.style.primary_color}.
Include ${tmpl.content.cards.map(c => `${c.title} (${c.data})`).join(', ')}.
${tmpl.constraints}
`;

```

### Frontend Template Selector

Expose the new template in the React component to allow manual selection:

```jsx
<select onChange={e => setSelectedTemplate(e.target.value)}>
  {styleLibrary.templates.map(t => (
    <option key={t.id} value={t.id}>
      {t.id === 'ui-screenshot-system' ? 'Default UI' : 'WearOS UI'}
    </option>
  ))}
</select>

```

## Summary

- The **style library** ([`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)) stores the canonical template definition with platform-specific fields like `layout`, `style`, and `constraints` at lines 225-238.
- Documentation in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) provides human-readable guidance that must stay synchronized with JSON changes.
- The **prompt builder** in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) (lines 2875-2879) consumes these templates to generate LLM instructions.
- Run `node scripts/generate-site-data.mjs` to deploy changes to the static site without full rebuilds.
- Create dedicated template IDs (e.g., `ui-screenshot-wearos`) to support radically different platform conventions beyond simple parameter changes.

## Frequently Asked Questions

### Where is the UI screenshot template defined in the codebase?

The primary definition resides in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) under the entry with ID `ui-screenshot-system` (lines 225-238). This JSON object defines the schema including `platform`, `product`, `layout`, `style`, `content`, and `constraints` fields that control the generated screenshot appearance.

### Do I need to modify the React code to add a new platform?

Only if you want the new template to appear in the manual selector dropdown. The core prompt generation in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) dynamically reads from `styleLibrary.templates`, so new entries are automatically available to the LLM builder. However, to expose the option in the UI selector around line 2875, you may need to update the component's rendering logic.

### How do I document platform-specific design conventions?

Update the `### UI 与界面` section in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) to include specific guidance for your platform. For example, note that iOS requires specific safe area insets while Android uses Material Design elevation shadows. This ensures users referencing the Markdown documentation understand the visual constraints specific to that platform.

### What file do I need to regenerate after editing the templates?

Run `node scripts/generate-site-data.mjs` to rebuild the static site JSON. This script processes [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) and embeds the updated templates into the frontend bundle, making new platform definitions available to end users immediately.