Prompt Kit Builder

An AI-powered tag and prompt generator for image generation workflows. Paste in a creative topic, get a structured kit of tags, color palettes, and parameter controls — then expand your description into 20 ready-to-use prompts.

Powered by Google Gemini. Zero dependencies. Single HTML file.

---

Features

• Smart Kit Generation — Analyzes your topic via Gemini and returns structured tag groups, color palettes, pill selectors, and range sliders.
• Prompt Expansion — Combines your description with selected tags and parameters, then generates 20 distinct prompt variations in one click.
• Inline Editing — Every generated prompt is editable directly in the UI.
• Import / Export — Export prompts as a timestamped .txt file; import existing prompt lists (numbered or paragraph format).
• Local Persistence — State is saved to localStorage automatically (400ms debounce). No backend required.
• No Dependencies — Pure HTML + CSS + JavaScript. No npm, no bundler, no framework.

---

Requirements

• A modern browser (Chrome, Firefox, Safari, Edge)
• A Google Gemini API key

---

Usage

1. Open prompt-kit-builder.html directly in your browser, or serve it with any static file server:

   python3 -m http.server 8000
   # then visit http://localhost:8000/prompt-kit-builder.html

2. Enter your Gemini API key in the top bar. Optionally save it to localStorage.

3. Select a Gemini model (default: Gemini 2.5 Flash).

4. Step 01 — Type a creative topic (e.g. vintage camera design, sneaker photography).

5. Click Generate kit. The app calls Gemini and builds your tag/palette/control kit.

6. Step 02 — Select relevant tags from the generated tag groups.

7. Step 03 — Pick colors, pill options, and adjust sliders.

8. Step 04 — Write a short description. Click Expand ×20 to generate 20 prompt variations.

9. Edit individual prompts as needed, then Export to save them.

---

Supported Models

Model	Notes
gemini-2.5-flash	Default. Fast and cost-effective.
gemini-2.5-pro	Higher quality, slower.
gemini-3.x series	Preview variants (when available).

---

How It Works

Kit Generation

The app sends your topic to Gemini with a structured system prompt requesting a JSON response:

{
  "tagGroups": [
    { "label": "Lighting", "tags": ["golden hour", "rim light", "diffused"] }
  ],
  "extras": {
    "palette": ["#f5c27a", "#3b2a1a"],
    "pills": [{ "label": "Season", "options": ["Spring", "Summer"] }],
    "range": [{ "label": "Grain", "min": 0, "max": 100, "default": 30 }]
  },
  "systemPrompt": "Photorealistic style. Shot on 35mm film."
}

Context Assembly

Selected tags, colors, pill choices, slider values, and the system prompt are concatenated into a context string that is injected into the expansion prompt.

Prompt Expansion

Gemini receives your description + assembled context and returns 20 varied prompts, each differing in composition, angle, mood, or stylistic emphasis.

Resilient JSON Parsing

The parser applies multiple fallback strategies: strips Markdown fences, escapes unescaped control characters, extracts partial JSON, and falls back to plain list parsing if needed.

---

Local Storage Keys

Key	Contents
pkb_gemini_key	Gemini API key (optional)
pkb_model	Selected model ID
pkb_state	Full app state (topic, description, kit data, selections, expanded prompts)

---

File Structure

prompt-kit-builder/
└── prompt-kit-builder.html   # Complete application (~38 KB)

---

Security Notes

• Your API key is stored only in your browser's localStorage. It is never sent anywhere except directly to the Google Gemini API endpoint.
• No telemetry, no tracking, no external scripts beyond Google Fonts.

---

License

MIT