How to Customize the UI Screenshot Template for Different Platforms

To customize the UI screenshot template for different platforms, edit the JSON definition in data/style-library.json and synchronize the documentation in 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 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 (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 (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

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

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 with platform-specific styling and content structure:

{
  "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 constructs the LLM instruction by mapping JSON fields to prompt text:

// 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:

<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) stores the canonical template definition with platform-specific fields like layout, style, and constraints at lines 225-238.
• Documentation in docs/templates.md provides human-readable guidance that must stay synchronized with JSON changes.
• The prompt builder in 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 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 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 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 and embeds the updated templates into the frontend bundle, making new platform definitions available to end users immediately.

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