What Data Is Stored in data/style-library.json? The Complete Structure Explained

The data/style-library.json file in the Awesome GPT Image 2 repository serves as the central multilingual catalogue containing metadata, localized tag labels, categories, visual styles, scenes, and full GPT-Image-2 prompt templates that power the application's UI and automated documentation generation.

The data/style-library.json file acts as the single source of truth for the freestylefly/awesome-gpt-image-2 project, driving both the React frontend and build-time automation scripts. It provides a structured, bilingual data layer that enables consistent prompt engineering workflows across multiple languages.

Core Data Structure of style-library.json

The JSON file organizes its content into six primary sections, all designed to support multilingual rendering with English (en) and Chinese (zh) fields.

Metadata and Version Control

The root object contains a metadata section that tracks version, repository, and templateDocument fields. These properties identify the current file revision and map to the human-readable template documentation located at docs/templates.md, ensuring the dataset remains synchronized with its documentation.

Localized Tag Labels

The tag labels section provides a mapping dictionary where each key represents a tag identifier pointing to an object with localized names. For example, "Art": {"en": "Art", "zh": "艺术"} allows the UI to display appropriate translations without hardcoding strings, supporting dynamic internationalization across the application.

Categories, Styles, and Scenes

The file maintains three distinct taxonomies for organizing visual content:

• Categories: High-level groupings such as UI, Charts, and Posters. Each category object includes id, value, anchor, templateAnchor, cover, title, and description fields to drive navigation and filtering interfaces.

• Styles: Visual aesthetic definitions including "3D", "Brand", and "Illustration". These objects contain id, value, title, and optional keywords arrays that serve as shortcuts for prompt generation.

• Scenes: Use-case contexts like "Tech", "Commerce", and "Story". Structurally identical to styles with id, value, title, and keywords, scenes help categorize templates by their intended application domain rather than visual appearance.

Prompt Templates

The templates array constitutes the largest data segment, containing concrete GPT-Image-2 prompt recipes. Each template object includes identification fields (id, anchor, cover), multilingual content (title, description), taxonomy references (category, styles, scenes, tags), and instructional metadata (useWhen, guidance, pitfalls, exampleCases).

Runtime Usage and Integration

The project consumes data/style-library.json through two primary mechanisms: dynamic frontend fetching and static build-time generation.

Frontend Loading in main.jsx

The React application imports this dataset at runtime via a fetch request. In src/main.jsx (line 3124), the application retrieves the entire structure to populate category navigation, style selectors, and template galleries dynamically:

// src/main.jsx
fetch('/style-library.json')
  .then((response) => response.json())
  .then((library) => {
    // `library` now contains the entire JSON structure
    // Example: list all category titles in English
    const catTitles = library.categories.map(c => c.title.en);
    console.log('Available categories:', catTitles);
  });

Build-Time Script Processing

Two Node.js scripts consume this file during the build process to generate derived assets:

• scripts/generate-style-skill.mjs: Parses the JSON to create markdown skill references for AI agents, specifically generating agents/skills/gpt-image-2-style-library/references/style-library.md.

• scripts/generate-site-data.mjs: Transforms the catalogue into static site pages, creating category overviews and template indexes for the documentation site.

Practical Code Examples

Generating Skill Documentation

The following excerpt from scripts/generate-style-skill.mjs demonstrates how the library fuels automated documentation:

import { readFile } from 'fs/promises';
import { join } from 'path';

const libraryFile = join(root, 'data', 'style-library.json');
const library = JSON.parse(await readFile(libraryFile, 'utf8'));

// Build a markdown reference table for all templates
const md = library.templates.map(t => `

### ${t.title.en}

*Category*: ${t.category}
*Styles*: ${t.styles.join(', ')}
*Scenes*: ${t.scenes.join(', ')}
`).join('\n');

await writeFile(
  join(root, 'agents', 'skills', 'gpt-image-2-style-library', 'references', 'style-library.md'), 
  md
);

Accessing Template Guidance

Developers can retrieve specific instructional content from templates using standard array methods:

function getGuidance(templateId) {
  const tmpl = library.templates.find(t => t.id === templateId);
  return tmpl ? tmpl.guidance.en : null;
}

console.log(getGuidance('ui-screenshot-system'));

Summary

• data/style-library.json serves as the master catalogue for all visual style metadata in the Awesome GPT Image 2 project.
• The file provides bilingual support (English and Chinese) across all textual fields through nested en and zh objects.
• Six primary sections organize the data: Metadata, Tag Labels, Categories, Styles, Scenes, and Templates.
• The templates array contains full prompt recipes with guidance, pitfalls, and example cases for GPT-Image-2 generation.
• Runtime usage occurs via fetch() in src/main.jsx, while build-time processing happens through generate-style-skill.mjs and generate-site-data.mjs.
• This architecture ensures a single source of truth that synchronizes the UI, documentation, and AI agent skills.

Frequently Asked Questions

What is the primary purpose of data/style-library.json in the Awesome GPT Image 2 repository?

The file functions as a centralized, multilingual database that defines all available visual styles, categories, and prompt templates. It enables the React frontend to render navigation and selection interfaces while simultaneously providing structured data for build scripts that generate AI agent skills and static documentation.

How does style-library.json handle multiple languages?

Every textual field within the JSON structure uses a nested object format with en and zh keys. For example, titles, descriptions, and tag labels all follow the pattern {"en": "English Text", "zh": "中文文本"}, allowing the application to switch languages by simply selecting the appropriate property key at runtime.

What distinguishes Styles from Scenes in the data structure?

While both objects share identical schemas containing id, value, title, and keywords, they serve different semantic purposes. Styles describe visual aesthetics and artistic approaches (such as "3D" or "Illustration"), whereas Scenes describe contextual use cases and application domains (such as "Tech" or "Commerce").

Which files depend on data/style-library.json during the build process?

According to the source code analysis, three critical files consume this JSON: src/main.jsx fetches it for frontend rendering, scripts/generate-style-skill.mjs transforms it into AI agent documentation, and scripts/generate-site-data.mjs uses it to build static category and template pages for the documentation site.

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