---
name: brand-image-generator
description: Ingests DESIGN.md specifications and Brand DNA to synthesize brand-consistent visual asset prompts and coordinate AI image creation. Translates design tokens (color palette, typography classification, lighting, shapes, elevation) into evocative, high-fidelity prompts for hero banners, UI mockups, icons, and marketing imagery. Use when generating imagery adhering strictly to an extracted brand identity or DESIGN.md file.
license: Apache-2.0
compatibility: Requires python3 and an image generation model or tool (e.g. Gemini Nano Banana, Imagen).
metadata:
  author: ghchinoy
  version: "1.0.0"
---

# Brand Image Generator

Translates machine-readable `DESIGN.md` tokens and `brand_dna.json` attributes into cinematic, style-adherent image generation prompts, and coordinates AI image generation to produce visual assets matching a brand's exact design language.

---

## When to Use This Skill

- Generating marketing imagery, hero banners, UI mockups, lifestyle photography, or brand icons that must strictly adhere to an extracted `DESIGN.md` specification.
- Translating color tokens (`primary`, `background`, `surface`), typography classifications, and elevation rules into physical lighting, composition, and material cues.
- Formulating generation prompts for multimodal models like Gemini Nano Banana (`gemini-3.1-flash-image`), Imagen 3, Midjourney, or FLUX.
- Ensuring brand consistency across multiple generative assets without stylistic drift.

---

## Progressive Disclosure & Reference Architecture

- **Prompt Crafting Guide**: Read [`references/PROMPT_CRAFTING_GUIDE.md`](references/PROMPT_CRAFTING_GUIDE.md) for techniques translating abstract design tokens (hex palettes, corner radius, drop shadow formulas) into camera, lighting, and texture prompts.
- **Prompt Recipes**: Check [`assets/prompt_recipes.json`](assets/prompt_recipes.json) for tested prompt scaffolds across 4 primary asset categories (Hero visual, UI mockup, lifestyle product, brand icon).
- **Prompt Formatting Script**: Run `scripts/format_image_prompt.py` to automatically parse a `DESIGN.md` file and emit an optimized generation prompt.

---

## Procedural Workflow

### Step 1: Ingest Design System Tokens

Locate the target `DESIGN.md` and optional `brand_dna.json` generated by `brand-extractor`.
Extract the key token anchors:
- **Palette**: Primary brand color, canvas background, surface color, and accent colors.
- **Typography Classification**: Neo-Grotesque Sans-serif, Serif, Monospace, Geometric.
- **Elevation & Depth**: Ambient shadows, diffuse lighting, flat vs layered surfaces.
- **Shapes**: Corner radius (sharp, rounded 16px, pill-shaped 9999px).
- **Aesthetic Tone**: Emotional adjectives (e.g. "minimalist", "kinetic", "editorial luxury").

### Step 2: Format Optimized Generation Prompt

Execute `scripts/format_image_prompt.py` with your desired asset archetype:

```bash
# Generate a hero banner prompt
scripts/format_image_prompt.py   --design ./brand-output/DESIGN.md   --dna ./brand-output/brand_dna.json   --type hero   --hint "Modern developer platform dashboard interface"

# Generate a brand motif / app icon prompt
scripts/format_image_prompt.py   --design ./brand-output/DESIGN.md   --type icon   --hint "Cloud telemetry monitoring shield"
```

Supported asset types:
- `hero`: Wide-aspect hero header or editorial key visual.
- `ui`: High-fidelity digital UI mockup or feature card preview.
- `lifestyle`: Physical product context, workspace environment, or editorial photography.
- `icon`: Tactile 3D or flat vector brand motif / application icon.

### Step 3: Execute Image Generation

Pass the generated prompt to the available image generation tool or API:
- **Gemini / Nano Banana**: Use `generate_image` or call Gemini API (`gemini-3.1-flash-image` with `ResponseModalities: ["IMAGE"]`).
- **Aspect Ratios**:
  - `hero`: `16:9` or `3:2`
  - `ui`: `16:9` or `4:3`
  - `icon`: `1:1`
  - `lifestyle`: `16:9` or `1:1`

### Step 4: Quality & Brand Adherence Check

Review generated assets against the source `DESIGN.md`:
1. **Palette Fidelity**: Does the primary color match the exact hex tone (`#1D54D8`, etc.) rather than a generic hue?
2. **Lighting & Elevation**: Does the shadow treatment reflect the soft ambient diffusion specified in the design tokens?
3. **Corner Treatment**: Are UI corners rounded or pill-shaped in accordance with the `rounded` token?
4. **Negative Filtering**: Ensure absence of visual clutter, conflicting gradients, or unrelated aesthetic styles.