Design Partner Plugin for Claude Code

Explore ideas—guided
by a virtual design partner.

Design Partner turns conversations into visuals. Describe what you're imagining, and see it instantly.

/dp:start Let's design a minimalist habit tracker
Turns conversations into visuals through guided design sessions. Learn more

Design Partner works two ways:

1. Guided sessions: Use /dp:start [project-name] to begin a structured design thinking session with context capture, idea generation, and image creation.

2. Natural language: Just describe what you want to see—phrases like "show me", "visualize", or "what would this look like" automatically trigger /dp:visualize to generate images.

Other commands:

/dp:visualize [idea-id] - Generate images for specific ideas
/dp:providers - Configure DALL-E 3 or Gemini
/dp:cost - View usage and costs

The Concept

Design thinking,
powered by AI.

Design Partner brings structured design thinking to Claude Code. Start with a problem, explore ideas, generate visuals, and iterate - all through conversation.

No design tools needed. Just describe what you're imagining. The plugin handles visual generation through DALL-E 3 or Gemini, tracks your session, and keeps artifacts organized.

Capabilities

From ideation to implementation, all in one conversation.

  • Natural language visual generation with DALL-E 3 or Gemini
  • Guided design thinking sessions with state persistence
  • Autonomous idea generation from multiple perspectives
  • Visual refinement and iteration workflows
  • Automatic artifact tracking and organization
  • Cost tracking and daily budget limits

Installation

Quick setup with API keys.

Requires Claude Code and API keys for image generation (OpenAI for DALL-E 3, or Google Cloud for Gemini).

# 1. Add the marketplace (in Claude Code) /plugin marketplace add danielraffel/generous-corp-marketplace # 2. Install Design Partner /plugin install design-partner@generous-corp-marketplace # 3. Set up API keys export OPENAI_API_KEY="sk-..." # For DALL-E 3 # OR export GOOGLE_API_KEY="..." # For Gemini # 4. Configure provider (in Claude Code) /dp:providers # 5. Restart Claude Code # Quit and reopen Claude Code to load the plugin
View on GitHub →
Zero build steps required. Installs directly from marketplace.

Natural Language Examples

Just describe what you want to see.

Design Partner detects visual intent in natural conversation and automatically generates images.

Visual Exploration
Show me what this looks like as a mobile app
Automatically detects visual intent and generates mockups.
Iterative Refinement
Make it darker with more spacing
Refines previous visuals with natural language edits.
Structured Sessions
/dp:start Build a meditation timer
Starts guided design thinking with state tracking.
Idea Generation
/dp:ideas Give me 5 different approaches
Autonomous agent generates diverse perspectives.

Cost Information

Transparent pricing with budget controls.

Design Partner tracks costs and enforces daily budgets. You control spending through provider selection and budget limits.

Provider Model Quality Cost per Image Images per $5
OpenAI DALL-E 3 Standard (1024x1024) $0.040 125
OpenAI DALL-E 3 HD (1024x1024) $0.080 62
Google Gemini Imagen 3 Standard (1024x1024) $0.040 125

Budget Controls: Set daily limits with /dp:cost. Default limit is $5/day. The plugin tracks spending and stops generation when you hit the limit.

Cost tracking resets daily at midnight UTC. View current spend with /dp:cost.

FAQ

Common questions.

How does natural language visual generation work?

Design Partner uses a hook that detects visual intent phrases in your messages like "show me what this looks like", "visualize this", or "create a mockup".

When detected, it automatically calls the /dp:visualize command with your context, generating an image through your configured provider (DALL-E 3 or Gemini).

You can also explicitly use /dp:visualize [description] for full control over the generation.

Which image provider should I use?

DALL-E 3 (OpenAI): Better at understanding complex descriptions, especially UI/UX mockups and product concepts. More artistic interpretation. HD quality available.

Gemini Imagen (Google): Faster generation, good for quick iterations. Strong at photorealistic images and natural scenes.

Both cost $0.040 per standard quality image. Try both and see which fits your workflow. You can switch providers anytime with /dp:providers.

How does session state work?

Design Partner saves session state to .claude/dp.local.md in your project. This includes your design challenge, constraints, ideas explored, artifacts generated, and cost tracking.

When you restart Claude Code, the SessionStart hook detects the existing session and offers to resume where you left off.

All generated images and specs are saved to artifacts/ and automatically tracked in the state file.

What's the idea generator agent?

The idea-generator is an autonomous agent that creates 5 diverse idea directions from different perspectives when you're stuck or want alternatives.

Each idea challenges a different core assumption and includes a description, risk assessment, and explanation of what makes it unique.

Use /dp:ideas to invoke it, or just say "give me more options" during a session.

Can I use this without API keys?

You can use all design thinking features (ideation, critique, synthesis) without API keys. However, visual generation requires either an OpenAI API key (for DALL-E 3) or Google Cloud API key (for Gemini).

If you try to generate visuals without a configured provider, Design Partner will guide you through setup with /dp:providers.

How do I refine generated images?

Use /dp:refine [changes] to iterate on the last generated image. For example: /dp:refine make it darker with more spacing.

The plugin maintains context from the previous generation and applies your refinements, creating a new image while preserving the original.

All versions are saved to artifacts/images/ with timestamps for comparison.

What happens when I hit my daily budget?

Design Partner tracks your spending in real-time. When you hit your daily limit (default $5), the plugin blocks new image generation and shows your current spend.

You can check remaining budget anytime with /dp:cost or adjust your limit in the settings.

The budget resets daily at midnight UTC. This prevents unexpected API bills while exploring design ideas.