How to Use Fill‑In‑The‑Blanks Text Templates for GPT‑Image2

The fill‑in‑the‑blanks templates live in docs/templates.md and use square‑bracket placeholders (e.g., [产品类型], [平台]) that you replace with concrete values to create complete prompts for GPT‑Image2.

The freestylefly/awesome‑gpt‑image‑2 repository provides a structured template system for generating consistent, high‑quality images with GPT‑Image2. By using fill‑in‑the‑blanks text templates, you can standardize prompt engineering across UI designs, posters, and other visual genres without rewriting complex instructions from scratch.

Understanding the Template Architecture

The template workflow implemented in the repository follows a five‑stage pipeline:

1. Template Definition – Human‑readable prompts are stored in docs/templates.md (see the UI template starting at line 12).
2. Template Loading – The helper script scripts/generate-style-skill.mjs reads the file (templatesFile = join(root, 'docs', 'templates.md') at line 7) and extracts sections by anchor (e.g., #tpl‑ui).
3. Placeholder Substitution – The script replaces every [placeholder] with values you provide (logic implemented around line 45).
4. Prompt Dispatch – The filled prompt is sent to the backend API (api/generate-image.js), which forwards it to the GPT‑Image2 model.
5. Result Rendering – The generated image URL is returned to the front‑end and displayed in the UI.

Because the templates are plain text, you can use them manually by copying text into a prompt field, or programmatically by calling the generate‑style‑skill script with a JSON payload.

Locating the Right Template

All templates are organized by visual category in docs/templates.md. Each section targets a specific genre:

• UI templates – Use anchor #tpl‑ui for mobile and web interface mockups.
• Poster templates – Use anchor #tpl‑poster for marketing and promotional materials.
• Style‑specific variants – Additional anchors defined in data/style‑library.json map templates to their documentation locations.

Choose the section that matches your intended output format before proceeding with placeholder substitution.

Manual Usage Workflow

For quick, one‑off generations, copy the template text directly from docs/templates.md and replace the placeholders by hand.

Example – UI Template (Manual)

为**健身应用**生成一张**Android**界面图。
核心功能：**步数统计、卡路里、心率**。
视觉风格：**科技**，主色**#0A84FF**，强调色**#FF9500**。
布局：**双栏**，信息层级清晰，留白充足。
输出：高保真UI截图，文字清晰可读，比例**9:16**。

Paste the completed block into the GPT‑Image2 prompt field. The model will produce a high‑fidelity Android UI screenshot matching the described layout and colors.

Programmatic Usage with Node.js

For automated pipelines, use the generateStyleSkill function exported from scripts/generate-style-skill.mjs. This function reads docs/templates.md, locates the requested anchor, and performs substitution.

Example – Programmatic Template Filling

import { generateStyleSkill } from './scripts/generate-style-skill.mjs';

const templateId = 'tpl-ui'; // anchor for the UI template
const values = {
  产品类型: '健身应用',
  平台: 'Android',
  功能点A: '步数统计',
  功能点B: '卡路里',
  功能点C: '心率',
  视觉风格: '科技',
  颜色: '#0A84FF',
  强调色: '#FF9500',
  布局: '双栏',
  比例: '9:16'
};

generateStyleSkill(templateId, values)
  .then(prompt => {
    // Send the prompt to the image API
    return fetch('/api/generate-image', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt })
    });
  })
  .then(res => res.json())
  .then(data => console.log('Image URL:', data.url))
  .catch(err => console.error(err));

The function returns a fully‑formed prompt string that you can send to the /api/generate-image endpoint.

Best Practices for Placeholder Substitution

Follow these constraints to ensure high‑quality output:

• Choose the correct template anchor – Match the template section (e.g., #tpl‑ui, #tpl‑poster) to your target visual genre.
• Supply concrete values – Replace every [placeholder] with specific terms. Ambiguous terms reduce output quality.
• Respect formatting constraints – Observe any “avoid‑pitfalls” notes in the template (e.g., enforce “文字必须准确显示指定的中文” as noted at line 64 in docs/templates.md).
• Verify aspect ratios – Ensure values for [比例] or similar placeholders match supported dimensions.
• Iterate based on output – Review generated images for layout fidelity and adjust placeholder values accordingly.

Summary

• Templates are stored in docs/templates.md and use square‑bracket placeholders like [产品类型].
• The scripts/generate-style-skill.mjs script automates template loading and substitution.
• Manual usage requires copying text and replacing brackets by hand; programmatic usage calls generateStyleSkill(templateId, values).
• Final prompts are dispatched via api/generate-image.js to the GPT‑Image2 model.
• Concrete values and strict adherence to formatting constraints prevent garbled or off‑target results.

Frequently Asked Questions

Where are the fill‑in‑the‑blanks templates stored?

The templates reside in docs/templates.md at the repository root. Each template is a plain‑text prompt containing placeholders wrapped in square brackets, organized under section anchors like #tpl‑ui or #tpl‑poster.

What format do the placeholders use?

Placeholders use square brackets with descriptive Chinese labels, such as [产品类型], [平台], [颜色], and [布局]. You replace these brackets with specific values (e.g., “健身应用”, “Android”, “#0A84FF”) to create a valid prompt.

How do I generate images programmatically using these templates?

Import the generateStyleSkill function from scripts/generate-style-skill.mjs, pass the template anchor (e.g., 'tpl-ui') and a values object mapping placeholders to strings, then send the returned prompt to the /api/generate-image endpoint via POST request.

Which file handles the backend image generation?

The api/generate-image.js file receives the filled prompt from the front‑end or script, forwards it to the GPT‑Image2 model, and returns the generated image URL to the caller.

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