How to Use the Template System for Brand Design Workflows in Awesome-GPT-Image 2

The Awesome-GPT-Image 2 repository provides a data-driven template system that generates complete brand identity kits through structured JSON payloads sent to the /api/generate-image endpoint.

The template system for brand design workflows in freestylefly/awesome-gpt-image-2 enables designers to produce consistent logos, business cards, and touch-point boards using a single structured prompt. By anchoring requests to predefined templates like tpl-brand, the system maps brand attributes to specific visual outputs through a clean JSON interface. This approach eliminates prompt engineering guesswork while ensuring reproducible results across enterprise design pipelines.

Understanding the Template Architecture

All prompt patterns reside in docs/templates.md, where each template is identified by a unique anchor such as tpl-brand. These sections contain human-readable descriptions, anti-patterns to avoid, and sample JSON schemas that define valid payload structures.

Template Metadata and Category Mapping

The data/style-library.json file maps every template anchor to metadata including category classifications, style tags, and scene identifiers. This metadata drives the UI's category card selection and determines which cover images display for each template type. When you reference tpl-brand, the system looks up its associated Brand style tag and Commerce scene tag to guide the image generation model's visual language.

Constructing a Brand Identity Package Payload

To initiate a brand design workflow, assemble a JSON object following the Brand Identity Package schema defined in docs/templates.md. The payload must include core brand attributes and visual specifications that the template translates into generation parameters.

Required Schema Fields

A complete brand payload requires these specific keys:

• brandName – The official company or product name
• positioning – Strategic market positioning statement (e.g., "High-tech, trustworthy AI partner")
• palette – Object containing primary, secondary, and accent hex codes
• typography – Object specifying heading and body font families
• logoUsage – Descriptive string detailing logo construction (e.g., "Geometric neural-node fusion")
• touchpoints – Array of deliverables such as ["Logo", "Business Card", "App Icon"]

{
  "templateAnchor": "tpl-brand",
  "payload": {
    "brandName": "Nova Dynamics",
    "industry": "AI Technology",
    "keywords": ["Innovative", "Minimalist", "Trustworthy"],
    "positioning": "High-tech, trustworthy AI partner for enterprises",
    "palette": {
      "primary": "#0066FF",
      "secondary": "#FFFFFF",
      "accent": "#FFCC00"
    },
    "typography": {
      "heading": "Montserrat",
      "body": "Open Sans"
    },
    "logoUsage": "Geometric neural-node fusion with a star motif",
    "touchpoints": ["Logo", "Business Card", "App Icon", "Website Header"]
  }
}

Executing the Generation API

The runtime implementation resides in api/generate-image.js, which accepts POST requests and extracts the templateAnchor to route prompts to the hosted LLM-image model. The server validates the payload against the template schema before initiating generation.

Direct API Implementation

For vanilla JavaScript implementations, POST the structured payload to /api/generate-image with proper headers:

async function generateBrandBoard(payload) {
  const response = await fetch('/api/generate-image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      templateAnchor: 'tpl-brand',
      payload
    })
  });
  const result = await response.json();
  return result.imageUrl;
}

// Usage example
const brandPayload = {
  brandName: "Nova Dynamics",
  positioning: "High-tech, trustworthy AI partner for enterprises",
  palette: { primary: "#0066FF", secondary: "#FFFFFF", accent: "#FFCC00" },
  typography: { heading: "Montserrat", body: "Open Sans" },
  logoUsage: "Geometric neural-node fusion with a star motif",
  touchpoints: ["Logo", "Business Card", "App Icon", "Website Header"]
};

generateBrandBoard(brandPayload).then(url => {
  document.getElementById('brand-output').src = url;
});

Using the apimartClient Helper

For React or Vite-based frontends, import the helper from src/apimartClient.js to abstract the fetch logic and handle authentication headers:

import { apimartClient } from './apimartClient';

async function fetchBrandBoard() {
  const client = apimartClient({ apiKey: process.env.API_KEY });
  const result = await client.generate({
    templateAnchor: 'tpl-brand',
    payload: {
      brandName: 'Nova Dynamics',
      industry: 'AI Technology',
      palette: {
        primary: '#0066FF',
        secondary: '#FFFFFF',
        accent: '#FFCC00'
      },
      typography: {
        heading: 'Montserrat',
        body: 'Open Sans'
      },
      touchpoints: ['Logo', 'Business Card', 'App Icon']
    }
  });
  console.log('Generated board URL:', result.url);
}

Summary

• The template system for brand design workflows centers on the tpl-brand anchor defined in docs/templates.md, which standardizes brand kit generation through structured JSON schemas.
• Metadata routing through data/style-library.json automatically applies Brand style tags and Commerce scene contexts when processing identity packages.
• Payload construction requires six mandatory fields—brandName, positioning, palette, typography, logoUsage, and touchpoints—to generate complete visual identity boards.
• API execution occurs through POST /api/generate-image, handled server-side by api/generate-image.js, with frontend abstraction available via src/apimartClient.js.

Frequently Asked Questions

What file contains the template definitions for brand design?

The docs/templates.md file houses all template definitions, including the Brand Identity Package section marked by the tpl-brand anchor. This file contains the human-readable descriptions, required JSON schemas, and "avoid-pitfalls" checklists for brand workflows.

How does the system know which visual style to apply to my brand request?

The data/style-library.json file maps the tpl-brand anchor to specific metadata tags, including a Brand style classification and optional Commerce scene designation. These tags inform the LLM-image model to generate enterprise-appropriate visuals rather than casual or artistic styles.

Can I generate multiple brand touchpoints in a single API call?

Yes. Include all desired deliverables in the touchpoints array within your payload—such as ["Logo", "Business Card", "App Icon", "Website Header"]—and the system returns a multi-page board or composite image containing all specified assets. The template processes this array in api/generate-image.js to construct the complete generation prompt.

What is the difference between using the REST endpoint directly versus the apimartClient helper?

Direct fetch calls to /api/generate-image provide maximum flexibility for vanilla JavaScript implementations, while the apimartClient helper in src/apimartClient.js handles authentication headers, error parsing, and request formatting automatically. Use the helper for React/Vite frontends to reduce boilerplate and ensure consistent header management.

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