Claude Code's custom commands let you turn complex workflows into simple slash commands - I built /generate-hero-image that generates good looking images using AI models in seconds, and the same approach works for automating frontend components, git workflows, and backend boilerplate that follows your team's patterns.
If you just want the command, ready to copy & paste, click here.
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.
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:) - stored in your repo's .claude/commands/ folder and shared with your team/) - stored in your home directory~/.claude/commands/ and available across all your projects without a prefixCommands 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.
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.
My command gives Claude three different AI models to choose from, each optimized for different use cases:
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.
To use this command, you need two things set up:
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.
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.
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:
list_api_endpoints to see what's availableget_api_endpoint_schema for each modelInstead, it jumps straight to generating the image with the right settings. This turns a 30-second process into a 5-second one.
Here's what it looks like in action:
/generate-hero-image modern SaaS dashboard with clean typography and gradients
Claude will:
The whole process takes just a few seconds, and you get a high-quality hero image that fits your description.
I've used this command to generate images for:
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:
/project:react:modal creates a modal component that follows your team's design system, complete with TypeScript interfaces and accessibility attributes/project:feature:payment-flow creates a new git worktree, checks out a feature branch, and scaffolds the basic file structure for that feature area/project:rust:endpoint GET /api/users/{id} generates an Axum handler with your team's standard error handling, request validation, and response formatting/project:migration add_user_sessions creates migration files that follow your naming conventions and include proper indexes and foreign keysThe 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:
Simply copy & paste this into .claude/commands/generate-hero-image.md to get started.
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.
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:
/project:react:button destructive small that generates a button component following your design system/project:feature:user-auth that creates a new git worktree, switches to a feature branch, and sets up the basic file structure/project:rust:handler get_user_profile that generates an Axum handler following your team's error handling, validation, and response patterns/project:migration add_user_preferences that creates properly formatted migration files with your naming and structure standards/project:docs:component Button that generates Storybook stories and usage docs that match your documentation styleCustom 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.
If you want to try this out:
.claude/commands/generate-hero-image.md in your repository/generate-hero-image your description hereYou 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.