How Social Media Screenshot Prompts Differentiate Platform Features in awesome-gpt-image-2

Social media screenshot prompts differentiate platform features by mapping each platform identifier to a unique JSON style configuration that defines aspect ratios, branding assets, and platform-specific prompt templates stored in data/style-library.json.

The awesome-gpt-image-2 repository implements a data-driven architecture where Twitter, Instagram, WeChat, and LinkedIn each receive distinct visual treatment. By encapsulating platform-specific requirements—ranging from dimension constraints to UI chrome descriptions—within modular style objects, the system generates authentic-looking screenshots without hardcoding platform logic into the generation pipeline.

Platform-Specific Style Configuration

The repository treats social media platforms as discrete styles rather than conditional branches in the generation code. Each style is a JSON object stored in [data/style-library.json](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) that configures how the GPT-image model should render the final screenshot.

Aspect Ratios and Dimensions

Every platform enforces strict dimension requirements that match their real-world display characteristics. The style library encodes these as explicit width and height parameters:

• Twitter: 16:9 aspect ratio (1200x675)
• Instagram: 1:1 square format (1080x1080)
• WeChat: 9:16 vertical mobile format (720x1280)
• LinkedIn: 1.91:1 landscape (1200x628)

When [api/generate-image.js](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) processes a request, it extracts these dimensions from the style object and passes them to the image generation function, ensuring the output matches the platform's native resolution.

Visual Assets and Branding

Each style references platform-specific branding assets that make screenshots immediately recognizable:

• Twitter: Logo overlay from assets/twitter.png with "Tweet by @{{username}}" header text
• Instagram: Logo overlay from assets/instagram.png with "@{{username}} • {{date}}" footer format
• WeChat: QR-code generation via [api/community/qr.js](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/community/qr.js) and "公众号 {{account_name}}" labeling
• LinkedIn: Professional header style with connection count display and assets/linkedin.png watermark

The prompt templates in [docs/templates.md](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) include platform-specific instructions such as "Show retweets and likes count" for Twitter or "Add Story highlight bar" for Instagram, directing the model to render the correct UI elements.

The Image Generation Pipeline

The differentiation happens through a standardized pipeline that injects platform configurations into a generic generation flow.

Front-End Request Handling

The front-end entry point in [src/main.jsx](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) constructs a request object containing the platform identifier and user data:

async function createScreenshot(platform, data) {
  const response = await fetch('/api/generate-image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ platform, ...data })
  });
  const { image } = await response.json();
  document.getElementById('result').src = `data:image/png;base64,${image}`;
}

Calling createScreenshot('twitter', { username: 'alice', tweet: 'Hello world!' }) sends the platform identifier to the backend, which triggers the platform-specific rendering logic without the front-end needing to know the implementation details.

Backend Prompt Construction

The [api/generate-image.js](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) endpoint handles platform differentiation by selecting the appropriate style and rendering the template:

import styles from '../data/style-library.json';
import { render } from 'mustache';

export default async function handler(req, res) {
  const { platform, ...params } = req.body;
  const style = styles[platform];
  if (!style) return res.status(400).json({ error: 'Unsupported platform' });

  const prompt = render(style.template, params);
  const image = await generateImageFromPrompt(prompt, style.width, style.height);
  res.json({ image });
}

The code uses the mustache templating engine to inject user data—such as {{username}} or {{viewCount}}—into the platform-specific template strings. The generateImageFromPrompt function receives both the constructed prompt and the platform's exact dimensions, ensuring the GPT-image model generates content that fits the target platform's aspect ratio.

Extending Platform Support

Adding support for new platforms requires only data entry, not code changes. To add TikTok support, you would append a new style object to data/style-library.json:

{
  "tiktok": {
    "name": "TikTok",
    "aspectRatio": "9:16",
    "width": 720,
    "height": 1280,
    "logo": "/assets/tiktok.png",
    "template": "Create a TikTok screenshot showing a video thumbnail for {{username}} with {{viewCount}} views. Include the TikTok logo and the typical UI chrome."
  }
}

Once added, sending platform: "tiktok" to /api/generate-image automatically utilizes the new configuration, demonstrating how the architecture decouples platform-specific requirements from the core generation logic.

Summary

• Data-driven architecture: Platform differentiation resides entirely in data/style-library.json, separating configuration from implementation.
• Template injection: The mustache engine blends user data with platform-specific prompt templates to create contextually accurate image generation instructions.
• Strict dimensional compliance: Each platform enforces exact width and height constraints (e.g., WeChat's 720x1280 vs. Twitter's 1200x675) to match real-world display standards.
• Asset management: Platform logos and unique UI elements (like WeChat QR codes) are referenced per-style and composited during generation.
• Extensible design: New platforms require only JSON configuration entries, with zero changes to api/generate-image.js or the front-end code.

Frequently Asked Questions

How does the system determine which platform style to use?

The system receives a platform identifier in the POST request body sent to /api/generate-image.js. This identifier acts as a key lookup into the styles object imported from data/style-library.json. If the key exists, the corresponding style configuration drives the generation; if not, the endpoint returns a 400 error indicating an unsupported platform.

What makes WeChat screenshots different from Twitter screenshots?

WeChat screenshots use a 9:16 vertical aspect ratio (720x1280) optimized for mobile displays, include QR-code generation via api/community/qr.js, and employ Chinese-language chrome text ("公众号 {{account_name}}"). In contrast, Twitter screenshots use a 16:9 landscape ratio (1200x675), display retweet and like counts in the prompt instructions, and reference assets/twitter.png for branding overlays.

Can I add custom platforms without modifying the core code?

Yes. The architecture supports adding new platforms by solely extending data/style-library.json with a new style object containing the platform name, dimensions, logo path, and template string. The existing code in api/generate-image.js automatically handles any valid key present in the style library, requiring no changes to the generation logic or front-end components.

How are user-specific details like usernames injected into the prompts?

User data passes from the front-end (src/main.jsx) as request body parameters (e.g., username, tweet, date). The backend uses the mustache library's render() function to substitute template variables such as {{username}} or {{date}} with actual values from the request before sending the final prompt string to the GPT-image model.

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