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

To add new styles to the style library JSON, edit the 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. 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:

"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:

"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 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

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

Preserved structure context:

"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, 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 using the style id as a class selector.

Summary

• Edit 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 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.

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