Skip to content
UXClaim
Design Systems

Claude ImageGen Skill

AI image generation with design system awareness. Creates DALL-E assets—heroes, OG images, icons—using your design tokens. No API key needed.

View source More in Design Systems

What It Does

ClaudeImageGen is an AI image generation skill for Claude Code that creates production-ready UI assets directly in your projects. It combines DALL-E 3 image generation with design system intelligence, using your project’s colors, typography, and style guides to generate on-brand assets.

How It Works

The skill reads your design context—Tailwind config, CSS variables, Pencil designs—and applies UI/UX best practices like WCAG contrast rules, composition guidelines, and asset-type specifications. It then crafts optimized DALL-E prompts and generates images via Codex CLI using your existing ChatGPT subscription. No separate API key or billing required.

Use Cases

  • Generate hero images, OG images, and thumbnails that match your design system
  • Create illustrations and icons on-brand without hiring a designer
  • Rapidly prototype visual assets during design handoff
  • Build a searchable memory of your design styles across projects

Who Benefits

Product designers, UX teams, and design-system owners who need to generate visual assets quickly without leaving Claude Code or managing separate design tools. Teams using Pencil can insert generated assets directly into their design files.

Frequently asked questions

Do I need an OpenAI API key to use this skill?
No. The skill uses Codex CLI, which authenticates via your existing ChatGPT account (Free, Plus, or Pro). Image generation is included in your ChatGPT subscription—no separate API key or billing required.
How does it match my design system?
The skill automatically scans your project for design tokens: Tailwind config, CSS custom properties, theme files, and Pencil design variables. It analyzes colors, typography, and visual style, then uses that context to craft prompts that generate on-brand assets.
What image types can it generate?
14 asset types including OG images (1200×630), hero images (1920×1080), thumbnails, banners, icons, illustrations, empty states, and more. Each type has preset dimensions and design rules built in.
Can it insert images into my Pencil design files?
Yes. If Pencil is active, the skill can read design context and insert generated assets directly into your `.pen` files. This bridges your code and design tool seamlessly.
What are design memory and NotebookLM integration?
Design Memory stores every image prompt, color palette, and style you've generated across projects in NotebookLM. This lets you reuse and refine successful styles, maintain consistency across projects, and search your design history.
Does it follow accessibility guidelines?
Yes. The skill applies WCAG AA contrast rules, safe margin composition guidelines, platform-specific sizing, and UI best practices automatically. You get accessible assets without manual checks.
How do I install and get started?
Install Claude Code and Codex CLI, then run `codex login` to authenticate. Clone the skill repo or use the one-liner install to add it to ~/.claude/skills/. Then use `/imagegen` commands in any Claude Code session.
Can I use this skill without Pencil or a design system?
Yes. You can generate images from text descriptions alone. However, the skill's power comes from reading your design context—without it, you'll write more detailed prompts manually.

Glossary

Codex CLI
Command-line tool that bridges Claude Code to OpenAI's services, including DALL-E. Uses your ChatGPT account for authentication instead of requiring a separate API key.
Design Memory
A record of all generated images, prompts, color palettes, and styles stored in NotebookLM. Allows you to search and reuse successful designs across projects.
Design Tokens
Reusable design values like colors, typography, spacing, and shadows defined in your project (e.g., Tailwind config, CSS variables). The skill reads these to generate on-brand assets.
Asset Type
A category of image with specific dimensions and design rules (e.g., OG image, hero, icon, thumbnail). The skill knows the correct specs for each type.

More in Design Systems

All →
Design Systems

Claude Code Agent Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language briefs.

MichelSR25
Design Systems

Claude Code Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language descriptions.

MichelSR25
Design Systems

Claude Design Studio Toolkit

AI-powered design co-pilot with responsive UI engine, design tokens, accessibility validation, and multi-agent workflows for code-first design teams.