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

> Discover how social media screenshot prompts leverage platform identifiers and JSON configurations to showcase unique features like aspect ratios and branding in awesome-gpt-image-2.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: deep-dive
- Published: 2026-08-26

---

**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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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)](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)](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)](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)](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)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) constructs a request object containing the platform identifier and user data:

```javascript
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)](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:

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json):

```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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main//api/generate-image.js). This identifier acts as a key lookup into the `styles` object imported from [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.