Claude Code Commands: Image generation within Claude Code

If you just want the command, ready to copy & paste, click here.

Building a Hero Image Generator with Claude Code Custom Commands

Building websites and landing pages always needs images for a wow-effect: the biggest wow effect comes from hero images. But you don't want to spend hours searching stock photo sites or waiting for a designer. I saw someone on X.com showing off their workflow for creating stunning hero sections with animated videos, and it got me thinking - what if I could generate custom hero images right from my terminal using Claude Code? In my recent blog post about Claude Code's hooks I already dabbled a bit with it's capabilities.

Now I took it a bit further and built an image generation into Claude Code using it's custom commands feature. Now I can generate good looking images for any project with a simple /generate-hero-image command, powered by multiple AI image models through Replicate's API or Fal.AI.

What Are Claude Code Custom Commands?

Custom slash commands in Claude Code let you define frequently-used prompts as Markdown files that Claude can execute. Think of them as shortcuts for complex workflows you do repeatedly.

There are two types of custom commands:

• Project commands (/project:) - stored in your repo's .claude/commands/ folder and shared with your team
• Personal commands (/) - stored in your home directory~/.claude/commands/ and available across all your projects without a prefix

Commands support namespacing through directory structures, so you can organize them logically. For example, a file at .claude/commands/frontend/component.md creates the command /project:frontend:component.

The real power comes from passing dynamic values using the $ARGUMENTS placeholder. This lets you create flexible, reusable commands that adapt to different situations.

The Hero Image Generation Command

I created a custom command that connects Claude Code to Replicate's image generation models. Here's how it works:

The command file lives at .claude/commands/generate-hero-image.md and uses frontmatter to specify which tools Claude can use and what the command does:

---
allowed-tools: Bash(ls *), Bash(curl *), mcp__replicate__list_api_endpoints, mcp__replicate__invoke_api_endpoint, mcp__replicate__get_api_endpoint_schema
description: Generates a hero image for websites utilizing various image models through Replicate.
---

The frontmatter is important - it tells Claude Code exactly which tools this command is allowed to use without having to prompt for permission. Without this, Claude might try to use tools that aren't available or appropriate for the task and ask for permissions aswell.

How The Image Generation Command Works

My command gives Claude three different AI models to choose from, each optimized for different use cases:

1. Flux Kontext Max - Best for text-heavy images (logos, posters, banners)
2. Seedream 3 - Best for photorealistic images
3. Ideogram v3 Quality - Good mix of text and photorealism

Claude automatically picks the right model based on what you're asking for, then generates a detailed prompt and calls the Replicate API with the exact parameters needed.

Here's a simplified version of how the command works:

Based on the user request for "$ARGUMENTS" generate a good image prompt and
utilize the Replicate MCP.

Choose one of the following models to invoke with the generate_prediction endpoint:

1. black-forest-labs/flux-kontext-max - if the user wants to focus on text-in-image
2. bytedance/seedream-3 - if the user wants high quality photorealistic images  
3. ideogram-ai/ideogram-v3-quality - if the user wants a mix from photorealism and text

The command includes specific JSON configurations for each model, so Claude doesn't have to figure out the API parameters every time. This makes the whole process much faster.

Setting Up the Requirements

To use this command, you need two things set up:

1. Replicate MCP Server

You need to install and configure Replicate's MCP server, which connects Claude Code to Replicate's HTTP API.

First, get a Replicate API token from replicate.com, then add the MCP server to your Claude Code configuration:

claude mcp add-json "replicate" '{"command":"mcp-replicate","env":{"REPLICATE_API_TOKEN":"your_token_here"}}'

The Replicate MCP server supports all operations in Replicate's HTTP API, letting you use natural language to search for models, run predictions, and fetch metadata.

2. The Custom Command File

Save the command as .claude/commands/generate-hero-image.md in your project. Once it's there, Claude Code automatically recognizes it and you can use /project:generate-hero-image followed by your description.

Why I Optimized the MCP Calls

One thing I learned while building this: Claude Code can figure out MCP endpoints on its own, but it takes time. The MCP system lets Claude discover and run APIs automatically, but that discovery process involves multiple API calls to list endpoints, get schemas, and understand parameters.

By including the exact MCP tool call arguments in my command, I skip all that discovery. Claude doesn't have to:

• Call list_api_endpoints to see what's available
• Call get_api_endpoint_schema for each model
• Figure out the right parameters through trial and error

Instead, it jumps straight to generating the image with the right settings. This turns a 30-second process into a 5-second one.

Using It in Practice

Here's what it looks like in action:

/generate-hero-image modern SaaS dashboard with clean typography and gradients

Claude will:

1. Analyze your request and pick the best model (probably Ideogram v3 for this mix)
2. Generate a detailed, professional prompt
3. Call the Replicate API with optimized settings
4. Download the generated image to your project's assets folder
5. Give you the filename and path

The whole process takes just a few seconds, and you get a high-quality hero image that fits your description.

Real-World Examples

I've used this command to generate images for:

• Landing pages - "modern fintech app hero image with mobile phone mockup"
• Blog headers - "developer coding with multiple monitors, dark theme, professional"
• Product pages - "clean productivity app interface on laptop screen"
• Marketing sites - "team collaboration illustration, bright colors, friendly"

Each time, Claude picks the right model and generates something that works well for the intended use.

But hero image generation is just one example of what's possible with custom commands. Other use cases I see:

• React component generation - /project:react:modal creates a modal component that follows your team's design system, complete with TypeScript interfaces and accessibility attributes
• Isolated feature development - /project:feature:payment-flow creates a new git worktree, checks out a feature branch, and scaffolds the basic file structure for that feature area
• Rust backend handlers - /project:rust:endpoint GET /api/users/{id} generates an Axum handler with your team's standard error handling, request validation, and response formatting
• Database operations - /project:migration add_user_sessions creates migration files that follow your naming conventions and include proper indexes and foreign keys

The Prompt Details & Full Command To Copy

The command includes example prompts to help Claude understand what makes a good image prompt:

## Good examples for image prompts

### Example 1
The text "V3 Quality" in the center middle. A color film-inspired portrait...

### Example 2  
beautiful bauhaus stark typographic poster saying "Ideogram v3 on Replicate", pink and gold

### Example 3
A cinematic, photorealistic medium shot capturing the nostalgic warmth...

These examples teach Claude how to write prompts that work well with AI image models - being specific about composition, style, colors, and text placement.

The command also handles all the technical stuff automatically:

• Sets the right aspect ratio (16:9 for hero images)
• Chooses appropriate output formats (PNG for quality)
• Configures safety and quality settings
• Downloads and names the files properly

Full Markdown File Command To Copy

Simply copy & paste this into .claude/commands/generate-hero-image.md to get started.

Future Improvements (Video Generation, More Variants, Upscaling)

This is just the beginning. I'm planning to add:

Video generation - The original inspiration was someone creating animated hero videos. Replicate has video models I could integrate.

Multiple variations - Generate 3-4 options at once so you can pick the best one.

Style presets - Pre-configured prompts for common styles like "modern SaaS", "creative agency", "developer tools", etc.

Integration with design tools - Automatically resize for different use cases (hero, thumbnail, social media).

Team workflows - Commands that upload generated images to your design system or asset library.

Why Custom Commands Are Amazing

This hero image generator shows what's possible with Claude Code's custom commands. Instead of context-switching between tools, everything happens in your terminal where you're already working.

The real power is in creating workflows that fit exactly how you work. Maybe your team needs commands for:

• Frontend components with consistent styling - /project:react:button destructive small that generates a button component following your design system
• Isolated feature development - /project:feature:user-auth that creates a new git worktree, switches to a feature branch, and sets up the basic file structure
• Rust API handlers with your patterns - /project:rust:handler get_user_profile that generates an Axum handler following your team's error handling, validation, and response patterns
• Database migrations with your conventions - /project:migration add_user_preferences that creates properly formatted migration files with your naming and structure standards
• Component documentation - /project:docs:component Button that generates Storybook stories and usage docs that match your documentation style

Custom commands let you turn any repetitive workflow into a simple slash command. And because they're just Markdown files, they're easy to share, version control, and improve over time.

Getting Started

If you want to try this out:

1. Set up Replicate MCP - Follow the official Replicate MCP documentation to get your API token and configure the MCP server
2. Get the command file - I've included the complete command file above, simply copy and paste it
3. Add it to your project - Save it as .claude/commands/generate-hero-image.md in your repository
4. Try it out - Run /generate-hero-image your description here

You can also check out the official Claude Code slash commands documentation to learn more about creating your own custom commands.

The best part about custom commands is that once you build one that works, your whole team can use it. No more "how do I generate a hero image again?" - just type the command and get back to building.

What workflows do you find yourself repeating in your development process? Custom commands might be the perfect way to automate them. Share your ideas - I'd love to see what the community builds with this feature.