[FEATURE] Built-in image generation for UI mockups, assets, and visual content

1. TITLE

Built-in image generation for UI mockups, assets, and visual content

2. PREFLIGHT CHECKLIST

• [ ] I have searched existing requests and this feature hasn't been requested yet
• [ ] This is a single feature request (not multiple features)

3. PROBLEM STATEMENT

Claude Code cannot generate images. When I need visual assets for my projects - UI mockups, placeholder images, icons, diagrams, game assets - I must:

1. Leave Claude Code
2. Open a separate tool (DALL-E, Midjourney, Figma)
3. Generate/create the asset
4. Download and save to my project
5. Return to Claude Code and reference the file

This breaks flow and adds friction to visual-heavy projects like landing pages, games, documentation with diagrams, or UI prototyping.

4. PROPOSED SOLUTION

Add image generation capability to Claude Code:

Basic Generation:

> Generate a hero image for a developer tools landing page, abstract code visualization, dark theme

[Claude generates image, saves to project]
Image saved to: assets/hero-image.png

Skill-based Integration:

/generate-image "minimalist logo for a CLI tool called 'fastbuild'"

Iterative Refinement:

> Make the colors more vibrant
[Claude modifies the image]

> Add a subtle gradient background
[Claude modifies the image]

Output Options:

• Save to specified path: --output assets/logo.png
• Multiple formats: PNG, SVG (for simple graphics), WebP
• Size presets: icon (64x64), thumbnail (256x256), hero (1920x1080), custom

Use in Conversation:

> Create a wireframe mockup for the user settings page

[Claude generates wireframe, displays inline]
Here's a wireframe for the settings page. The layout includes:
- Sidebar navigation
- Main content area with form fields
- Save/Cancel buttons at bottom

Should I adjust the layout or implement this in code?

5. ALTERNATIVE SOLUTIONS

Current workarounds:

1. External tools: DALL-E web, Midjourney Discord, Figma - context switch, manual file management
2. Placeholder services: https://placeholder.com/400x300 - limited, not custom
3. ASCII art: Claude can generate text-based diagrams - limited fidelity
4. Manual creation: Draw in Figma/Sketch - time-consuming for quick mockups

What Codex does:
"Using an image generation skill (powered by GPT Image)... Codex built the game by working independently using more than 7 million tokens with just one initial user prompt. It took on the roles of designer, game developer, and QA tester."

Image generation enables end-to-end creative workflows without leaving the coding environment.

6. PRIORITY

• [ ] Critical - Blocking my work
• [ ] High - Significant impact on productivity
• [x] Medium - Would be very helpful
• [ ] Low - Nice to have

7. FEATURE CATEGORY

• [ ] CLI commands and flags
• [ ] Interactive mode (TUI)
• [ ] File operations
• [x] API and model interactions
• [ ] MCP server integration
• [ ] Performance and speed
• [ ] Configuration and settings
• [ ] Developer tools/SDK
• [ ] Documentation
• [ ] Other

8. USE CASE EXAMPLE

Scenario 1: Building a landing page

> Create a landing page for my CLI tool "fastbuild"

[Claude creates HTML/CSS]

> Generate a hero image showing fast compilation, abstract circuit board aesthetic

[Claude generates image, saves to assets/hero.png, updates HTML to reference it]

> Now generate icons for the three feature cards: speed, reliability, simplicity

[Claude generates 3 icons, saves to assets/icons/, updates HTML]

Result: Complete landing page with custom visuals, no context switching.

Scenario 2: Game development

> I'm building a space shooter game in JavaScript with Three.js

> Generate a sprite sheet for the player's spaceship - top-down view, 4 rotation angles

[Claude generates sprite sheet]

> Generate 5 different asteroid variations for obstacles

[Claude generates asteroid sprites]

> Generate a starfield background, tileable

[Claude generates tileable background]

Result: Game assets created alongside game code, all in one session.

Scenario 3: Documentation with diagrams

> Generate an architecture diagram showing:
  - Frontend (React)
  - API Gateway
  - Backend services (Auth, Users, Payments)
  - Database

[Claude generates clean architecture diagram]

> Save this to docs/architecture.png and reference it in the README

[Claude saves and updates README.md]

9. ADDITIONAL CONTEXT

Technical approaches:

1. Native Claude capability: If/when Claude models support image generation directly
2. MCP integration: Connect to image generation APIs (OpenAI DALL-E, Stable Diffusion)
3. Skill-based: Official /generate-image skill that wraps external APIs

Quality considerations:

• For icons/UI elements: vector output (SVG) when possible
• For photos/illustrations: appropriate resolution for web use
• For diagrams: clean, technical aesthetic that matches documentation style

Prior art:

• Codex's GPT Image integration
• Cursor's image generation features
• GitHub Copilot's diagram generation

Limitations to acknowledge:

• Image generation quality varies
• May require API keys for external services
• Not a replacement for professional design work
• Best for mockups, placeholders, quick assets