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

> Understand the complete structure of data/style-library.json. Explore metadata, labels, styles, scenes, and prompt templates powering Awesome GPT Image 2.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: api-reference
- Published: 2026-08-28

---

**The [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) (line 3124), the application retrieves the entire structure to populate category navigation, style selectors, and template galleries dynamically:

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

```javascript
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:

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