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

# 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.