# How to Add New Styles to the Style Library JSON in Awesome-GPT-Image-2

> Easily add new styles to Awesome-GPT-Image-2's style library JSON. Learn how to edit the style-library.json file and define new style objects for enhanced image generation.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-09-11

---

**To add new styles to the style library JSON, edit the [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) file and append a new object to the `"styles"` array with a unique `id`, human-readable `value`, bilingual `title` properties (English and Chinese), and an optional `keywords` array.**

The **awesome-gpt-image-2** project manages its visual style definitions in a centralized JSON configuration. This file drives the UI dropdowns, prompt generation logic, and multilingual display text without requiring JavaScript modifications. Understanding the exact schema and validation rules ensures your contributions integrate seamlessly with the existing build pipeline.

## Locating the Style Library Definition

All style metadata resides in **[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)**. Within this file, the `"styles"` array (starting at line 190) contains every available aesthetic option presented to users. The application reads this JSON at startup, meaning changes take effect immediately after a file save and browser refresh—no recompilation of source code is necessary.

Each style object in this array functions as a standalone configuration that the frontend consumes directly and that the build pipeline references when generating optimized skill files.

## Required Schema for Style Entries

Every new style must conform to a strict four-field schema to maintain compatibility with the UI and localization systems.

### The ID Field

The **`id`** property serves as the internal system identifier. It must be unique across the entire `"styles"` array—duplicate values will cause later entries to overwrite earlier ones. Use lowercase alphanumeric strings with hyphens for readability (e.g., `"vaporwave"`, `"oil-painting"`).

### The Value Field

The **`value`** property defines the human-readable label displayed in dropdown menus and selection interfaces. Unlike the `id`, which is programmatic, the `value` can contain spaces and standard casing (e.g., `"Oil Painting"`, `"Cyberpunk"`).

### Localization Requirements

The **`title`** object requires **both** English (`en`) and Chinese (`zh`) keys for full multilingual support. Omitting either language triggers fallback text or missing labels in the Chinese interface. Structure this as a nested object:

```json
"title": {
  "en": "Neon Noir",
  "zh": "霓虹黑色"
}

```

### Optional Keywords Array

The **`keywords`** array enhances the prompt-generation engine’s ability to match user inputs to appropriate styles. Include relevant terms in both English and Chinese to maximize searchability:

```json
"keywords": ["neon", "night", "glow", "霓虹", "灯光", "夜晚"]

```

## Step-by-Step Implementation Example

Follow these steps to safely append a new style without breaking the JSON structure.

1. Open [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) in your editor.
2. Navigate to the `"styles"` array (around line 190).
3. Insert your new object before the closing bracket of the array, ensuring you add a comma after the preceding entry.

**Example: Adding a "Neon" style**

```json
{
  "id": "neon",
  "value": "Neon",
  "title": { "en": "Neon", "zh": "霓虹" },
  "keywords": ["neon", "glow", "bright", "霓虹", "灯光"]
}

```

**Preserved structure context:**

```json
"styles": [
  { "id": "3d", "value": "3D", "title": { "en": "3D", "zh": "3D" }, "keywords": ["3d", "toy", "render", "玩具"] },
  { "id": "neon", "value": "Neon", "title": { "en": "Neon", "zh": "霓虹" }, "keywords": ["neon", "glow", "bright", "霓虹", "灯光"] }
],

```

4. Validate your JSON syntax using a linter orVS Code validation to catch trailing commas or missing braces.
5. Commit the file and restart your development server if running (`npm run dev`).

## Common Pitfalls to Avoid

When you add new styles to the style library JSON, watch for these specific failure modes that prevent the application from loading:

- **Duplicate IDs:** Reusing an existing `id` like `"3d"` silently overwrites the previous definition, causing inconsistent UI behavior.
- **Missing Localization:** Providing only an English title breaks the Chinese interface display; always include both `en` and `zh` keys.
- **Malformed JSON:** A missing comma or trailing comma after the new object invalidates the entire file, preventing the app from booting.

## Verification and Build Integration

After editing [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json), verify your changes by checking the style dropdown in the local development environment. The UI pulls directly from this file, so your new option should appear immediately without frontend code changes.

The build process in **`scripts/generate-style-skill.mjs`** consumes the `"styles"` array during compilation to generate optimized frontend skill files. You do not need to modify this script; it automatically processes new entries from the JSON when the build runs.

If your style requires custom visual theming (such as specific CSS color schemes), add corresponding rules to **[`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css)** using the style `id` as a class selector.

## Summary

- Edit **[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)** to modify the style catalog.
- Append new objects to the **`"styles"`** array with `id`, `value`, `title` (en/zh), and optional `keywords`.
- Ensure unique IDs and valid JSON syntax to prevent application crashes.
- The **`scripts/generate-style-skill.mjs`** build script processes these entries automatically.
- Verify changes instantly in the UI without recompiling the application source.

## Frequently Asked Questions

### What happens if I duplicate an existing style ID?

The system uses the `id` field as a unique key. If you add new styles to the style library JSON with an `id` that already exists, the later entry in the array overwrites the previous definition. This causes silent failures where the UI shows only the latest version and ignores the original style configuration.

### Do I need to restart the server after editing the JSON?

For the local development server (started with `npm run dev`), simply refresh the browser. The application reads [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) at startup and during hot reload cycles. Production deployments require a rebuild so that `scripts/generate-style-skill.mjs` can regenerate the optimized skill bundles from the updated source.

### Can I add a style with only English localization?

While the JSON will parse, omitting the Chinese (`zh`) title causes display issues in the Chinese interface. The codebase expects bilingual support for all entries; missing translations result in empty labels or fallback text that degrades user experience. Always provide both `en` and `zh` values in the `title` object.