# Imagegen

> Master UI Designer & Asset Generator with Design Memory and Pencil MCP integration. Combines AI image generation (DALL-E via Codex CLI), design system intelligence, persistent design memory (NotebookLM), and Pencil design tool integration for end-to-end visual asset creation with cross-project learning. Capabilities: - Generate UI assets: hero images, OG images, thumbnails, banners, icons, illustrations - Analyze Pencil designs and generate matching assets - Apply UI/UX best practices (WCAG, Apple HIG, Material Design) - Create design-system-aligned visuals with correct color palettes and brand consistency - Batch generate multiple asset variations - Insert generated assets directly into Pencil .pen files - DESIGN MEMORY: Remember every generation — prompts, styles, colors, feedback — across projects and sessions via NotebookLM. Query past decisions, reuse proven styles, maintain brand consistency over time. Use when asked to: generate/create images, design assets, make visuals, produce UI graphics, create il

- Skill: `erenlokman/imagegen` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add erenlokman/imagegen`
- Raw SKILL.md: https://api.skillmd.com/api/skills/erenlokman/imagegen/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: erenlokman (https://skillmd.com/u/erenlokman)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/erenlokman/imagegen

---


# UI Designer & Asset Generator with Design Memory

Master UI/UX designer skill with AI image generation, persistent design memory,
and Pencil MCP integration. Generates production-ready visual assets that follow
design best practices — and remembers every decision across projects and sessions.

---

## Architecture Overview

```
User Request
    |
    v
[0. Design Memory] ──> NotebookLM: Query past designs, styles, prompts
    |                   "Have I generated something similar before?"
    |                   "What style did I use for Project X?"
    v
[1. Context Analysis] ──> Pencil MCP (get_editor_state, batch_get, get_variables)
    |                      get_style_guide, get_screenshot
    v
[2. Design Intelligence] ──> UI/UX rules, color theory, brand analysis
    |
    v
[3. Prompt Engineering] ──> Craft optimized DALL-E prompts (informed by memory)
    |
    v
[4. Generation] ──> Codex CLI (codex exec) ──> DALL-E
    |
    v
[5. Post-Processing] ──> Verify, optimize, resize if needed
    |
    v
[6. Delivery] ──> Save to disk AND/OR insert into Pencil via batch_design
    |
    v
[7. Memory Commit] ──> Save to NotebookLM: prompt, style, colors, result, feedback
                        Future sessions can recall and reuse this knowledge
```

---

## Prerequisites

- **Codex CLI**: `npx @openai/codex` (v0.135+)
- **Auth**: `codex login` completed (ChatGPT or API key)
- **Pencil**: Optional — only needed for .pen file integration
- **NotebookLM**: Optional — for design memory persistence (Google account required)
- **ImageMagick** (optional): For post-processing (resize, format conversion)

Verify setup:
```bash
npx @openai/codex --version && cat ~/.codex/auth.json | python3 -c "import json,sys; d=json.load(sys.stdin); print('Auth:', d.get('auth_mode','none'))"
```

---

## Phase 0: Design Memory — Query

Before generating, check design memory for relevant past decisions.
This is the skill's "brain" — it remembers every generation across all projects and sessions.

### How It Works

Design Memory uses a **NotebookLM notebook** as a persistent knowledge base.
Each generation creates a "design record" that is stored as a source document.
Future queries can retrieve past decisions using natural language.

### NotebookLM Setup

The design memory notebook must be created once. After creation, store the notebook ID
in the user's CLAUDE.md for automatic access:

```markdown
## Design Memory
- Notebook ID: <your-notebook-id>
```

### When to Query Memory

Query design memory at the START of every generation request:

| User Says | Memory Query |
|-----------|-------------|
| "generate hero image" | "What hero images have I generated before? What styles and colors worked?" |
| "create OG for Labyrinth" | "What is the Labyrinth project's design system? Previous OG images?" |
| "use previous style" | "What was the most recent generation? What prompt and style was used?" |
| "same style but blue" | "What was the last style? Return the full prompt for modification." |
| "same for CatsIO" | "What style was used for the last project? Adapt for CatsIO." |

### Memory Query Command

```
mcp__notebooklm__notebook_query(
  notebook_id: "<design-memory-notebook-id>",
  query: "<natural language question about past designs>"
)
```

### What Memory Returns

- **Past prompts**: Exact DALL-E prompts that produced good results
- **Color palettes**: Colors used per project
- **Style decisions**: Why a certain style was chosen
- **User feedback**: What the user liked/disliked about previous generations
- **Asset catalog**: What was generated, where it was saved, dimensions
- **Brand guidelines**: Accumulated brand knowledge per project

### Memory-Informed Generation

When memory returns relevant results, USE them to inform the current generation:

```
Memory says: "Labyrinth uses warm amber (#C4A235), cream (#FDFBF7), 
organic minimalist style. User preferred photorealistic over illustration 
for hero images."

→ Current prompt should use these exact colors and style preference
→ Don't ask the user again — the memory knows
```

### If No Memory Exists Yet

If this is the first generation or the notebook is empty, skip to Phase 1.
The memory will be populated after Phase 7.

---

## Phase 1: Context Analysis

Before generating ANY asset, gather context. The quality of the output depends on understanding the design environment.

### 1A. If Pencil File is Involved

Use Pencil MCP tools to understand the design context:

```
Step 1: mcp__pencil__get_editor_state      → Get active canvas, selection, file path
Step 2: mcp__pencil__get_variables          → Get design tokens (colors, typography, spacing)
Step 3: mcp__pencil__get_style_guide_tags   → Get available style tags
Step 4: mcp__pencil__get_style_guide        → Get style guide matching the design
Step 5: mcp__pencil__batch_get              → Read specific nodes, components, images
Step 6: mcp__pencil__get_screenshot         → Visual reference of current design state
```

Extract from the design:
- **Color palette**: Primary, secondary, accent, background, surface colors
- **Typography**: Font family, weights, sizes, line heights
- **Spacing system**: Base unit (4px/8px), scale
- **Visual style**: Flat, glassmorphism, minimalist, skeuomorphic, etc.
- **Brand identity**: Logo colors, mood, personality

### 1B. If No Pencil File (Standalone Generation)

Ask or infer:
- Project name and type (wellness, fintech, e-commerce, etc.)
- Target platform (web, mobile, social media)
- Brand colors (or derive from project files like CSS/Tailwind config)
- Visual style preference
- Output dimensions and format

### 1C. Auto-Detect from Project

If working in a codebase, auto-detect design tokens:
```bash
# Check for Tailwind config
cat tailwind.config.* 2>/dev/null | grep -A 20 "colors"

# Check for CSS custom properties
grep -r "--primary\|--brand\|--accent" src/ --include="*.css" -l

# Check for design tokens file
find . -name "tokens*" -o -name "theme*" -o -name "design-system*" | head -10
```

---

## Phase 2: Design Intelligence

Apply UI/UX best practices to ensure generated assets are production-quality.

### Asset Type Specifications

| Asset Type | Dimensions | Format | Key Requirements |
|-----------|------------|--------|------------------|
| OG Image | 1200×630 | PNG/JPG | Brand-aligned, clear at small preview, no critical content in edges |
| Twitter Card | 1200×628 | PNG/JPG | Similar to OG, optimized for Twitter crop |
| Hero Image | 1920×1080 or 16:9 | PNG/WebP | Atmospheric, supports text overlay, responsive-friendly |
| Thumbnail | 400×300 or 4:3 | PNG/WebP | Clear subject, readable at small sizes, high contrast |
| App Icon | 1024×1024 | PNG | Simple, recognizable at 16px, no text, rounded corners safe |
| Favicon | 512×512 | PNG/SVG | Minimal detail, works at 16×16, distinct silhouette |
| Banner | 1920×480 or 4:1 | PNG/JPG | Wide format, text-safe zones, parallax-ready |
| Social Post | 1080×1080 | PNG/JPG | Eye-catching, platform-appropriate, branded |
| Illustration | Variable | SVG/PNG | Flat/vector style, consistent stroke, matches UI style |
| Background | 1920×1080+ | PNG/WebP | Subtle, non-distracting, supports content overlay |
| Avatar/Profile | 400×400 | PNG | Clear face/icon, circular-crop safe |
| Card Image | 600×400 or 3:2 | PNG/WebP | Content-relevant, works with card UI patterns |
| Onboarding | 375×667 (mobile) | PNG | Step-focused, minimal, guides user attention |
| Empty State | 300×300 | SVG/PNG | Friendly, encouraging, matches brand personality |

### Color & Contrast Rules (WCAG AA)

- **Text on image**: Ensure 4.5:1 contrast ratio minimum
- **Overlay strategy**: Use gradient overlays (dark→transparent) for text readability
- **Brand color usage**: Primary for focal elements, secondary for accents, neutral for backgrounds
- **Dark mode consideration**: Generate variants or use colors that work in both modes
- **Color harmony**: Use complementary, analogous, or triadic schemes — never random

### Composition Rules

- **Rule of thirds**: Place focal elements at intersection points
- **Visual hierarchy**: Largest/brightest element = primary focus
- **Breathing room**: Leave 10-15% safe margin from edges for platform cropping
- **Text overlay zones**: Design images with clear areas for text placement
- **Mobile-first**: Ensure the image communicates its message even at 375px width
- **Aspect ratio integrity**: Never stretch or distort — crop or pad instead

### Style Consistency Matrix

| Product Type | Recommended Styles | Color Temperature | Imagery |
|-------------|-------------------|-------------------|---------|
| Wellness/Health | Soft, organic, minimal | Warm (amber, sage, cream) | Nature, serenity, humans |
| Fintech/Finance | Clean, professional, trustworthy | Cool (blue, navy, silver) | Abstract, geometric |
| E-commerce | Vibrant, lifestyle, aspirational | Balanced (brand-led) | Product, lifestyle shots |
| SaaS/Tech | Modern, minimal, functional | Cool-neutral (indigo, slate) | UI mockups, abstract |
| Education | Friendly, clear, accessible | Warm-neutral (teal, orange) | People, illustrations |
| Entertainment | Bold, dynamic, immersive | High contrast, saturated | Action, scenes, characters |
| Food/Restaurant | Appetizing, warm, inviting | Warm (red, orange, brown) | Food photography style |
| Travel | Expansive, inspiring, adventurous | Natural (sky, earth, water) | Landscapes, destinations |
| Creative/Portfolio | Unique, artistic, personal | Variable (personality-driven) | Abstract, artistic |

---

## Phase 3: Prompt Engineering

### DALL-E Prompt Structure

Always structure prompts with these layers:

```
[SUBJECT] + [STYLE] + [COMPOSITION] + [COLOR PALETTE] + [MOOD] + [QUALITY] + [EXCLUSIONS]
```

**Example:**
```
A serene meditation scene at golden hour (SUBJECT).
Photorealistic cinematic photography style (STYLE).
Wide landscape composition with person in lower-third (COMPOSITION).
Warm amber, soft gold, cream white, and gentle earth tones (COLOR PALETTE).
Peaceful, contemplative, premium wellness brand feel (MOOD).
Ultra high quality, professional, detailed lighting (QUALITY).
No text, no watermarks, no logos (EXCLUSIONS).
```

### Prompt Templates by Asset Type

**OG/Social Image:**
```
[Brand-relevant scene or abstract pattern]. Clean, modern composition with
clear focal point. [Brand colors]. Space for text overlay on [left/right/center].
Professional [style] aesthetic. No text in the image. Landscape format.
```

**Hero Image:**
```
[Atmospheric scene matching brand]. Cinematic [wide/panoramic] composition.
[Color palette] color grading. Dramatic lighting with [soft/hard] shadows.
Premium [industry] brand feel. Ultra high quality. No text.
```

**Illustration/Empty State:**
```
Flat vector illustration of [subject]. Minimal line art style with
[2-3 accent colors from brand palette]. Clean white/neutral background.
Friendly and approachable. Modern app illustration style. No text.
```

**Icon/Logo Mark:**
```
Minimalist [subject] icon design. Simple geometric shapes. Single color
[brand primary] on transparent background. Works at very small sizes.
Clean edges, no gradients, no shadows. Vector-style precision.
```

**Background/Texture:**
```
Subtle [abstract/organic] background pattern. [Color palette] tones.
Very soft, non-distracting. Works as UI background with content overlay.
Seamless edges. Gentle [gradient/texture/pattern]. No focal point.
```

---

## Phase 4: Generation

### Core Generation Command

```bash
npx @openai/codex exec \
  --json \
  -s danger-full-access \
  --ephemeral \
  -C <GIT_REPO_ROOT> \
  "Generate an image using DALL-E: <ENGINEERED_PROMPT>. Save it to <OUTPUT_PATH>" \
  2>&1 | tail -80
```

**CRITICAL RULES:**
- `-C <GIT_REPO_ROOT>` is REQUIRED — Codex refuses to run outside a trusted git repo
- Set Bash timeout to `180000` ms (3 minutes) — DALL-E takes 30-60 seconds
- Always `mkdir -p <output_dir>` before generating
- Generated images land in `~/.codex/generated_images/<session-id>/` first, then are copied

### DALL-E 3 Size Options

| Size | Use For |
|------|---------|
| 1024×1024 | Square — icons, social posts, avatars, app icons |
| 1792×1024 | Landscape — heroes, banners, OG images |
| 1024×1792 | Portrait — mobile screens, stories, onboarding |

Include desired size in the prompt when non-square is needed.

### Batch Generation

For multiple assets, run sequential `codex exec` calls:
```bash
# Asset 1: OG Image
npx @openai/codex exec --json -s danger-full-access --ephemeral -C /path/to/repo \
  "Generate: <prompt1>. Save to <path1>" 2>&1 | tail -40

# Asset 2: Hero
npx @openai/codex exec --json -s danger-full-access --ephemeral -C /path/to/repo \
  "Generate: <prompt2>. Save to <path2>" 2>&1 | tail -40
```

---

## Phase 5: Post-Processing & Verification

### Verify Generated Asset

```bash
# Check file exists and get metadata
file <output_path>
ls -lh <output_path>

# Check dimensions (if ImageMagick available)
identify <output_path> 2>/dev/null || sips -g pixelWidth -g pixelHeight <output_path>
```

### Visual Verification

Always use the `Read` tool to display the generated image and verify:
- [ ] Matches requested style and mood
- [ ] Colors align with brand palette
- [ ] Composition supports intended use (text overlay zones, safe margins)
- [ ] No artifacts, distortions, or unwanted elements
- [ ] No text or watermarks in the image (unless requested)
- [ ] Works at intended display size

### Optimization (Optional)

```bash
# Convert to WebP for web performance
cwebp -q 85 input.png -o output.webp

# Resize with sips (macOS built-in)
sips -Z 1200 input.png --out output.png  # max dimension 1200px

# Optimize PNG
pngquant --quality=65-80 input.png -o output.png
```

---

## Phase 6: Pencil Integration

### Insert Generated Image into Pencil

After generating an image, insert it into an active Pencil design using `batch_design`:

```
# Step 1: Get current editor state
mcp__pencil__get_editor_state(include_schema: true)

# Step 2: Find where to place the image
mcp__pencil__find_empty_space_on_canvas(
  filePath: "<file.pen>",
  direction: "right",
  width: 800,
  height: 600,
  padding: 40
)

# Step 3: Insert the image
mcp__pencil__batch_design(
  filePath: "<file.pen>",
  operations: 'img=IMG("<absolute-path-to-image.png>", { width: 800, height: 600, x: <x>, y: <y> })'
)
```

### Replace Existing Image in Pencil

```
# Find the image node
mcp__pencil__batch_get(filePath: "<file.pen>", patterns: [{ type: "image" }])

# Replace with new generated image
mcp__pencil__batch_design(
  filePath: "<file.pen>",
  operations: 'IMG("<new-image-path.png>", { nodeId: "<existing-image-node-id>" })'
)
```

### Design-Aware Generation for Pencil

When generating assets for a Pencil design:

1. **Read the design's style guide**: `get_style_guide` → extract colors, mood, style
2. **Read design variables**: `get_variables` → get exact color values, typography
3. **Screenshot the design**: `get_screenshot` → visual reference for style matching
4. **Analyze the layout**: `snapshot_layout` → understand where images need to go
5. **Generate matching assets**: Use extracted colors and style in DALL-E prompts
6. **Insert into design**: Use `batch_design` with correct positioning

---

## Design System Color Extraction

When working with an existing project, extract the design system to ensure generated
assets match perfectly:

```python
# From Pencil variables
colors = get_variables(filePath) → extract color tokens

# From CSS/Tailwind
grep -r "primary\|secondary\|accent\|brand" tailwind.config.* globals.css

# From package (shadcn, etc.)
cat components.json → extract base color/style
```

Then inject these colors into DALL-E prompts:
```
"Color palette strictly using: primary #C4A235, secondary #2D2A1E,
accent #E8D5A3, background #FDFBF7, surface #F5F0E8"
```

---

## Quality Checklist

### Before Generation
- [ ] Context analyzed (brand, colors, style, target platform)
- [ ] Asset type and dimensions determined
- [ ] Prompt engineered with all layers (subject, style, color, mood, quality, exclusions)
- [ ] Output directory exists

### After Generation
- [ ] Image displayed and visually verified
- [ ] Dimensions match requirements
- [ ] Style matches brand/design system
- [ ] No unwanted text, artifacts, or distortions
- [ ] Optimized for target platform (format, size, compression)
- [ ] Inserted into Pencil design (if applicable)

### Accessibility Check
- [ ] Image has sufficient contrast for any overlay text
- [ ] Alt text prepared for the image
- [ ] Image conveys meaning even in grayscale
- [ ] Image file size is reasonable for web (<500KB for heroes, <200KB for thumbnails)

---

## Error Handling

| Error | Cause | Solution |
|-------|-------|----------|
| `Not inside a trusted directory` | Missing `-C` flag | Add `-C <git-repo-root>` to codex exec |
| `codex: command not found` | Codex not installed | `npm install -g @openai/codex` |
| Auth/token errors | Expired auth | Run `codex login` to re-authenticate |
| Image not generated | DALL-E refusal (policy) | Rephrase prompt, remove sensitive content |
| Wrong dimensions | DALL-E doesn't guarantee exact size | Post-process with sips/ImageMagick |
| Timeout | DALL-E slow response | Increase Bash timeout to 180000ms |
| File not found after gen | Codex didn't copy | Check `~/.codex/generated_images/` for latest |
| Pencil insert fails | Wrong node ID or path | Re-read editor state and verify file path |

---

## Phase 7: Design Memory — Commit

After EVERY successful generation, save a design record to NotebookLM.
This builds the persistent knowledge base that makes future generations smarter.

### What to Save

After generating and verifying an asset, create a structured design record:

```markdown
# Design Record: [Asset Type] for [Project Name]
Date: [YYYY-MM-DD]
Project: [project name]
Asset Type: [hero/og/thumbnail/icon/banner/illustration/etc.]
Output Path: [where the file was saved]
Dimensions: [WxH]
Format: [PNG/WebP/JPG]

## DALL-E Prompt Used
[exact prompt that was sent to DALL-E]

## Design Decisions
- Style: [photorealistic/illustration/minimal/etc.]
- Color Palette: [list hex codes and names]
- Composition: [rule of thirds/centered/etc.]
- Mood: [warm/cool/energetic/calm/etc.]

## Context Sources
- Pencil design: [yes/no, file path if yes]
- Tailwind/CSS colors: [extracted values if any]
- Style guide: [which style guide was used]

## Result Quality
- Dimensions: [actual WxH from generated file]
- File size: [KB/MB]
- User feedback: [accepted/rejected/modified — update after user responds]

## Learnings
- What worked: [notes on what made this generation successful]
- What to avoid: [any issues encountered]
- Reuse potential: [high/medium/low — could this style be reused?]
```

### How to Save to NotebookLM

Create or append to a source document in the design memory notebook:

```
mcp__notebooklm__notebook_add_source(
  notebook_id: "<design-memory-notebook-id>",
  content: "<structured design record above>",
  title: "[Project] - [Asset Type] - [Date]"
)
```

**If NotebookLM MCP is not available**, fall back to local file storage:
```bash
# Append to local design memory log
mkdir -p ~/.claude/design-memory
cat >> ~/.claude/design-memory/log.md << 'RECORD'
---
[structured design record]
---
RECORD
```

### Memory Update on User Feedback

When the user provides feedback on a generated asset (likes it, asks for changes, rejects it),
UPDATE the design record:

- **User accepted**: Mark as successful, high reuse potential
- **User asked for changes**: Record what changed and why
- **User rejected**: Record why, mark style/prompt as "avoid for this project"

### Cross-Project Learning

The memory accumulates patterns across ALL projects:

```
NotebookLM Query: "What styles work best for wellness brands?"

Memory Response: "Based on 5 past generations across Labyrinth and YogaApp:
- Photorealistic with warm amber tones: 4/5 accepted
- Flat illustration: 1/5 accepted (user preferred photo over illustration)
- Recommended palette: #C4A235, #FDFBF7, #2D2A1E
- Composition: wide landscape with person in lower-third works best"
```

### Memory-Only Queries (No Generation)

Users can query design memory WITHOUT generating a new image:

| User Says | Action |
|-----------|--------|
| "what was the previous hero prompt?" | Query memory → return the exact prompt |
| "what colors did I use?" | Query memory → return color palettes per project |
| "when did I last generate an image?" | Query memory → return recent design records |
| "what was Labyrinth's style?" | Query memory → return full style summary |
| "design history" | Query memory → return overview of all generations |

---

## End-to-End Flow Examples

### Example 1: First Generation (No Memory Yet)

```
User: "/imagegen generate hero image for Labyrinth wellness app"

[Phase 0 — Memory Query]
→ NotebookLM query: "Labyrinth project hero images"
→ Result: No records found (first generation)
→ Action: Skip to Phase 1

[Phase 1 — Context Analysis]
→ Detect project: <project-root>/labyrinth (Next.js)
→ Read tailwind.config → primary: hsl(44,55%,52%), background: hsl(40,30%,99%)
→ Read globals.css → --brand-gold: #C4A235, --cream: #FDFBF7
→ No Pencil file open

[Phase 2 — Design Intelligence]
→ Asset type: Hero Image → 1920×1080, PNG
→ Product type: Wellness → warm, organic, minimal style
→ WCAG: ensure text overlay zone with 4.5:1 contrast
→ Composition: wide landscape, rule of thirds, 10% safe margin

[Phase 3 — Prompt Engineering]
→ Prompt: "A serene meditation scene at golden hour. Person in lotus
   position on cliff overlooking misty mountains. Warm amber (#C4A235)
   and cream (#FDFBF7) color palette. Cinematic photography style.
   Wide landscape, subject in lower-third. No text, no watermarks."

[Phase 4 — Generation]
→ npx @openai/codex exec -C <project-root>/labyrinth "Generate image..."
→ DALL-E 3 generates → 1536×1024 PNG, 1.8MB
→ Saved to ./public/images/hero-meditation.png

[Phase 5 — Post-Processing]
→ file hero-meditation.png → PNG 1536×1024 ✅
→ Read tool → display to user ✅

[Phase 6 — Delivery]
→ File saved at: <project-root>/labyrinth/apps/web/public/images/hero-meditation.png

[Phase 7 — Memory Commit]
→ Save to NotebookLM:
  Project: Labyrinth
  Asset: Hero Image
  Colors: #C4A235, #FDFBF7, #2D2A1E
  Style: photorealistic, cinematic, warm
  Prompt: [exact prompt saved]
  Result: accepted
  Learnings: "Golden hour + meditation + amber tones = high quality result"
```

### Example 2: Cross-Project Style Reuse (Memory Active)

```
User: "/imagegen create hero for CatsIO in Labyrinth's style"

[Phase 0 — Memory Query]
→ NotebookLM query: "Labyrinth hero image style and prompt"
→ Result: Found! "Labyrinth hero: photorealistic cinematic, warm amber
   (#C4A235), cream (#FDFBF7), golden hour, meditation scene.
   Prompt: [exact prompt]. User accepted. Reuse potential: HIGH."
→ Action: Use Labyrinth's style as base, adapt subject for CatsIO

[Phase 1 — Context Analysis]
→ Detect project: <project-root>/catsio
→ Read theme → primary: #FF6B35 (orange), background: #1A1A2E (dark)
→ MERGE: Keep Labyrinth's warm cinematic style + CatsIO's color identity

[Phase 2 — Design Intelligence]
→ Hero 1920×1080
→ Adapt: Labyrinth's warm photorealistic → CatsIO's playful but cinematic

[Phase 3 — Prompt Engineering]
→ Prompt (informed by memory): "A playful cat sitting on a sunset rooftop
   overlooking a vibrant city. Cinematic photography style (like previous
   Labyrinth hero). Warm orange (#FF6B35) and deep navy (#1A1A2E) tones.
   Golden hour lighting. Wide landscape. No text."

[Phase 4-6 — Generate, Verify, Deliver]
→ Generated and saved to ./public/images/hero.png

[Phase 7 — Memory Commit]
→ Save: CatsIO hero, style derived from Labyrinth, orange adaptation
→ Cross-reference: "Based on Labyrinth style, adapted color palette"
```

### Example 3: Memory-Only Query (No Generation)

```
User: "what colors did I use in previous projects?"

[Phase 0 — Memory Query]
→ NotebookLM query: "All color palettes used across projects"
→ Result:
  ┌─────────────┬─────────────────────────────────────────┐
  │ Project     │ Color Palette                           │
  ├─────────────┼─────────────────────────────────────────┤
  │ Labyrinth   │ #C4A235 (gold), #FDFBF7 (cream),       │
  │             │ #2D2A1E (dark brown)                    │
  ├─────────────┼─────────────────────────────────────────┤
  │ CatsIO      │ #FF6B35 (orange), #1A1A2E (navy),      │
  │             │ #F5F5F5 (light gray)                    │
  ├─────────────┼─────────────────────────────────────────┤
  │ YogaApp     │ #7CB342 (sage), #FFF8E1 (warm white),  │
  │             │ #5D4037 (earth brown)                   │
  └─────────────┴─────────────────────────────────────────┘

→ No generation needed — display results and done.
```

### Example 4: Pencil Design + Memory Together

```
User: "/imagegen generate card image matching the Pencil design"

[Phase 0 — Memory Query]
→ Query: "Card images for current project, previous styles"
→ Result: "2 card images generated before: flat illustration style,
   using brand primary #6C63FF and white. User accepted both."

[Phase 1 — Context Analysis (Pencil)]
→ get_editor_state → active file: design.pen
→ get_variables → primary: #6C63FF, surface: #FFFFFF, text: #2D3436
→ get_style_guide → modern, minimal, purple accent
→ get_screenshot → visual reference captured
→ Memory + Pencil agree: purple flat illustration style

[Phase 3 — Prompt Engineering]
→ Prompt combines memory (past success) + Pencil (current design):
   "Flat vector illustration of a person organizing tasks on a board.
    Purple (#6C63FF) accent color, white background. Minimal line art.
    Modern app illustration style. Matches existing card design."

[Phase 4-5 — Generate, Verify]
→ Generated 600×400 card image

[Phase 6 — Delivery (Pencil Insert)]
→ find_empty_space → x: 1200, y: 400
→ batch_design → IMG("card-image.png", {width: 600, height: 400, x: 1200, y: 400})
→ Image inserted into Pencil canvas ✅

[Phase 7 — Memory Commit]
→ Save: 3rd card image, same style confirmed, Pencil integration used
→ "Flat illustration + #6C63FF consistently accepted for this project"
```

---

## Quick Reference: Trigger → Action

| User Says | Action |
|-----------|--------|
| "gorsel uret" / "generate image" | Memory → analyze → prompt → generate → verify → save |
| "generate asset for pencil" | Memory → Pencil context → generate → insert → save |
| "create OG image" | 1200×630 landscape, brand-aligned, text-overlay-safe |
| "hero image" | 1920×1080 cinematic, atmospheric, content-behind-ready |
| "create thumbnail" | 400×300 high-contrast, clear-at-small-size |
| "add image to this design" | Pencil: read design → generate matching → insert → save |
| "generate logo/icon" | 1024×1024 minimal, geometric, works-at-16px |
| "create banner" | Wide format (4:1), text-safe zones, brand colors |
| "use previous style" | Memory query → reuse previous prompt/style → generate |
| "same style but [change]" | Memory query → modify prompt → generate → save |
| "design history" | Memory query only — no generation |
| "what colors did I use?" | Memory query only — return color summary |
| "what was this project's style?" | Memory query only — return project style |