Handling Platform-Specific UI Differences for X, Douyin, and Xiaohongshu in Awesome-GPT-Image-2

The awesome-gpt-image-2 repository solves platform-specific UI generation for Douyin and Xiaohongshu through a Prompt-as-Code architecture that encodes platform constraints in a centralized JSON style library, injects them via frontend React components or Agent skills, and processes them through a platform-agnostic backend API.

The freestylefly/awesome-gpt-image-2 repository implements a sophisticated approach to handling platform-specific UI differences for X, Douyin, and Xiaohongshu without hardcoding platform logic into the generation pipeline. By leveraging a declarative style library and separation of concerns, the system ensures that aspect ratios, layout hierarchies, and platform-specific chrome are explicitly defined in prompts before they reach the image generation service.

The Prompt-as-Code Architecture

The repository organizes functionality into three distinct layers that work together to handle platform-specific requirements:

• Template / Style Library: Stored in data/style-library.json, this centralized catalog contains prompt templates, styles, scenes, and platform-specific guidance that drives both the website UI and the Agent skill.
• Backend API: Implemented in api/generate-image.js, this layer validates prompts, reserves user credits via Supabase RPC, and forwards requests to the Ciyuan GPT-Image-2 service without any platform-specific logic.
• Frontend (React + Vite): Components in src/main.jsx and src/community.jsx load the style library to build category panels and inject platform-specific constraints into prompts before transmission to the backend.

This separation ensures that platform knowledge lives in one place—the JSON style library—while the backend remains agnostic to whether it is generating a Douyin live-stream screenshot or a Xiaohongshu 9-grid poster.

How Platform-Specific UI Templates Work

Template Definition in the Style Library

Platform-specific constraints are encoded in the UI Screenshot System template (ID: ui-screenshot-system) within data/style-library.json. This template explicitly requires users to "Lock platform, aspect ratio, layout hierarchy, and exact visible text" as documented in lines 41-45 of the style library. The template includes a guidance block that specifies platform-specific UI elements such as status bars, navigation tabs, and comment layers that must be present in the generated output.

Frontend Prompt Construction

When a user selects a specific platform in the React frontend, the code injects the appropriate platform hint into the prompt string. For Douyin live-stream screenshots, the system constructs prompts specifying 9:16 aspect ratios and live-stream UI elements:

Generate a 9:16 screenshot of a Douyin live stream featuring a beautiful woman livestreaming, selling pantyhose and underwear, viewer count 99996, popularity rating 18+.

For Xiaohongshu 9-grid posters, the prompt shape shifts to accommodate the platform's distinctive 3×3 vertical grid layout:

Generate a 3×3 vertical 9-grid poster for Xiaohongshu, clean premium style, large text, gentle color palette, each grid a standalone card but visually unified.

These patterns are stored in the markdown case files (docs/gallery-part-2.md lines 1152-2365) and referenced by the frontend components to ensure consistent platform-aware generation.

Backend Processing

The api/generate-image.js endpoint validates prompt length, reserves a credit (or free generation) via Supabase RPC, and calls the Ciyuan GPT-Image-2 endpoint. Crucially, no platform logic exists in the backend; the prompt already contains fully-specified platform constraints, ensuring the image model receives an unambiguous request. This design keeps the API clean and future-proof for new platforms.

Agent Skill Integration

The same style library is packaged as an Agent skill located at agents/skills/gpt-image-2-style-library. When an automated agent requests a Douyin UI layout, it queries the skill, retrieves the template metadata including platform guidance, and synthesizes the prompt automatically. The skill reads directly from data/style-library.json (lines 24-36), ensuring that agents and human users operate from identical specifications.

Code Implementation Examples

Using the Agent Skill with Node.js

The following example demonstrates how to programmatically build a Douyin-specific prompt using the style library skill:

import { gptImage2StyleLibrary } from 'gpt-image-2-style-library';

// Load the UI template
const uiTemplate = gptImage2StyleLibrary.getTemplate('ui-screenshot-system');

// Build a platform-specific prompt
const prompt = [
  uiTemplate.guidance.en[0],                         // "Lock platform, aspect ratio, layout hierarchy..."
  'Platform: Douyin live stream',
  'Aspect ratio: 9:16',
  'Subject: Beautiful female streamer selling pantyhose',
  'Viewer count: 99996',
  'Popularity rating: 18+'
].join('\n');

// Send to the generation API
await fetch('https://gpt-image2.canghe.ai/api/generate-image', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt, caseId: 123 })
});

React Frontend Integration

The React components dynamically inject platform hints based on user selection:

import styleLib from '../../data/style-library.json';

function buildPrompt(base, platform) {
  const platformHint = platform === 'douyin'
    ? 'Platform: Douyin live stream\nAspect ratio: 9:16'
    : 'Platform: Xiaohongshu 9-grid poster\nLayout: 3×3 vertical grid';
  return `${base}\n${platformHint}`;
}

// Usage inside a generation button handler
const prompt = buildPrompt(userPrompt, selectedPlatform);
await fetch('/api/generate-image', {
  method: 'POST',
  body: JSON.stringify({ prompt, caseId })
});

Direct API Access via cURL

For direct API usage without the frontend, specify the complete platform constraints in the prompt:

curl -X POST https://gpt-image2.canghe.ai/api/generate-image \
  -H "Content-Type: application/json" \
  -d '{
        "prompt": "Generate a 9:16 screenshot of a Douyin live stream featuring a beautiful woman livestreaming, selling pantyhose and underwear, viewer count 99996, popularity rating 18+.",
        "caseId": 254
      }'

Why This Architecture Works

• Single Source of Truth: Both the website and the Agent skill consume the identical data/style-library.json file, guaranteeing that platform guidelines stay synchronized across all interfaces.
• Explicit Guidance: Templates contain guidance and pitfalls sections that force prompt authors to mention platform-specific UI elements, reducing ambiguity for the image generation model.
• Separation of Concerns: The backend does not need to know about Douyin or Xiaohongshu; it merely forwards the fully-qualified prompt. This makes the API agnostic and easily extensible to new platforms like X (Twitter) or Instagram.

Summary

• The awesome-gpt-image-2 repository handles platform-specific UI differences through a centralized data/style-library.json that serves as the single source of truth.
• Platform constraints are injected at the frontend or Agent level, not hardcoded in the api/generate-image.js backend, maintaining API neutrality.
• The UI Screenshot System template explicitly locks platform, aspect ratio, and layout hierarchy for consistent generation across Douyin (9:16 live streams) and Xiaohongshu (3×9 grids).
• Both React components (src/main.jsx) and the Agent skill (agents/skills/gpt-image-2-style-library) consume the same JSON library to ensure parity between manual and automated prompt construction.

Frequently Asked Questions

How does the system handle aspect ratio differences between Douyin and Xiaohongshu?

The system encodes aspect ratio requirements in the platform hints injected during prompt construction. For Douyin live streams, the React frontend or Agent skill appends "Aspect ratio: 9:16" to the prompt, while Xiaohongshu 9-grid posters receive "Layout: 3×3 vertical grid" specifications. These constraints are defined in the data/style-library.json template metadata and injected before the prompt reaches the api/generate-image.js endpoint.

Where is platform-specific UI guidance stored?

All platform-specific UI guidance resides in data/style-library.json, specifically within the UI Screenshot System template (ID: ui-screenshot-system). This template includes guidance fields that instruct prompt authors to lock platform-specific elements such as status bars, navigation tabs, and comment layers as seen in lines 41-45 of the style library file.

Can I use the style library without the web interface?

Yes. The repository packages the style library as an Agent skill located at agents/skills/gpt-image-2-style-library that can be installed via NPM and used in Node.js environments or integrated with AI coding assistants like Claude Code and Codex. This skill reads directly from the same data/style-library.json file used by the web interface, ensuring consistent behavior across programmatic and manual usage.

How does the backend remain platform-agnostic?

The api/generate-image.js backend intentionally contains zero platform-specific logic. It validates prompt length, reserves credits via Supabase RPC, and forwards the request to the Ciyuan GPT-Image-2 service. Because the frontend React components or Agent skills have already injected platform-specific constraints (aspect ratios, UI chrome descriptions) into the prompt string, the backend simply passes through a fully-specified generation request without needing to understand Douyin or Xiaohongshu UI patterns.

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