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:

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:

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

When to Query Memory

Query design memory at the START of every generation request:

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:

# 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

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

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

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

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

Batch Generation

For multiple assets, run sequential codex exec calls:

# 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

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

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

# 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

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:

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

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

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