What Is the Purpose of style-library.json in Awesome GPT Image 2?

The data/style-library.json file serves as the centralized taxonomy and single source of truth for all visual concepts, prompt templates, and categorization metadata used across the Awesome GPT Image 2 project's frontend, build pipeline, and agent skills.

The awesome-gpt-image-2 repository by freestylefly relies on this structured JSON configuration to maintain consistency between its user interface, documentation, and AI agent behavior. By encoding the complete ontology of image generation styles, categories, and scenes in one canonical location, the project ensures that the UI, static documentation, and backend prompt construction logic all reference identical definitions.

Core Structure and Schema

The style-library.json file organizes visual generation concepts into six primary data structures that define how users interact with the GPT-Image-2 model.

Categories, Styles, and Scenes

The file establishes a three-tier classification system for image generation:

• categories: High-level groupings such as "UI & Interfaces" and "Charts & Infographics" that organize templates into functional domains (e.g., cat-ui defined at lines 34-41)
• styles: Individual visual aesthetics like "3D", "Brand", or "Photography" that can be applied to prompts, often including optional keywords for search indexing
• scenes: Contextual descriptors such as "Tech", "Commerce", or "Education" that specify the use-case or narrative context for generated images

Prompt Templates

The templates array contains the core prompt engineering logic. Each template object includes a unique identifier, multilingual titles and descriptions, applicable categories, compatible styles and scenes, associated tags, operational guidance, common pitfalls, and reference case IDs. For example, the ui-screenshot-system template (lines 25-41) provides structured parameters for generating user interface mockups.

Localization and Metadata

The tagLabels section provides human-readable multilingual mappings for all tags used throughout the UI, enabling localization without code changes. The file also includes top-level metadata fields—version, repository, and templateDocument—that track the library's own evolution (lines 2-5).

How the Codebase Consumes style-library.json

Several critical components read this JSON file at different stages of the application lifecycle.

Frontend Runtime Loading

The browser-based UI loads the library dynamically at runtime to populate selection controls and filters. In src/main.jsx, the application fetches the configuration directly:

// src/main.jsx – line 3124
fetch('/style-library.json')
  .then(response => response.json())
  .then(library => {
    // library.categories, library.styles, library.templates, …
    initUiControls(library);
  });

This fetch operation ensures the user interface always reflects the current taxonomy without requiring a rebuild of the JavaScript bundle.

Build Pipeline Integration

Node.js build scripts consume the file to generate static assets and documentation. The scripts/generate-style-skill.mjs utility reads the library to produce the skill reference markdown, while scripts/generate-site-data.mjs generates static site data:

// scripts/generate-style-skill.mjs – lines 6-9
import { readFileSync } from 'fs';
import { join } from 'path';

const root = process.cwd();
const libraryFile = join(root, 'data', 'style-library.json');
const library = JSON.parse(readFileSync(libraryFile, 'utf8'));

These scripts ensure the website documentation and the Agent skill definition remain perfectly synchronized with the source taxonomy, as both derive their content from the same style-library.json source.

Agent Skill Reference

The GPT agent skill definition located at agents/skills/gpt-image-2-style-library/SKILL.md points to this JSON file as its canonical data source for template listings (referenced in README.md at line 307). This linkage allows the AI agent to construct prompts using the exact same template definitions and style classifications available to the web interface.

Practical Implementation Examples

When accessing specific template configurations, developers can query the loaded library object directly:

const uiTemplate = library.templates.find(t => t.id === 'ui-screenshot-system');
console.log(uiTemplate.title.en); // → "UI Screenshot System"

This pattern appears throughout the codebase wherever specific prompt parameters need to be resolved from the central configuration.

Summary

• Single source of truth: The data/style-library.json file centrally defines categories, styles, scenes, templates, and localization strings for the entire project.
• Multi-environment consumption: Runtime frontend code, Node.js build scripts, and AI agent skills all read from this file to ensure consistency.
• Structured prompt engineering: Template definitions include comprehensive metadata including applicable styles, guidance, pitfalls, and example cases.
• Localization support: The tagLabels section enables multilingual UI presentations without modifying application code.
• Build automation: Scripts like generate-style-skill.mjs and generate-site-data.mjs derive their output directly from the library to eliminate documentation drift.

Frequently Asked Questions

What specific data structures are defined in style-library.json?

The file defines six primary structures: categories for high-level groupings, styles for visual aesthetics, scenes for contextual tags, templates for prompt definitions, tagLabels for multilingual translations, and metadata fields (version, repository, templateDocument) for library management.

How does the frontend application load the style library?

The React application in src/main.jsx performs a standard fetch request to /style-library.json at runtime (line 3124), parsing the JSON response to initialize UI controls with the latest taxonomy data without requiring a rebuild.

Which build scripts depend on style-library.json?

Two primary Node.js scripts consume the file: scripts/generate-style-skill.mjs (lines 6-8) generates the skill reference markdown for the AI agent, and scripts/generate-site-data.mjs produces static data files for the website, ensuring both documentation sources remain synchronized.

How does the file support internationalization?

The tagLabels object maps tag identifiers to multilingual human-readable strings (e.g., mapping "Art" to {en: "Art", zh: "艺术"}), allowing the UI to display localized text while the underlying logic continues to use stable programmatic identifiers.

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