Claude God Tip #8: Make Sophisticated Image Generation So Easy That People Call You a Liar

Published: November 25, 2025 • 12 min read

Remember when I said being lazy when using AI is an important part of boosting your creativity? But you must not simply be lazy. You must combine that with a deep hatred of mediocre-looking work.

In this blog post, I'll share the next Claude God tip, and it is a big tip.

Now, my dear non-technical readers, as you read this blog post, the words and a few technical terms might seem frightening at first. But if you stick to the end of this blog post, I've got a gift for you.

The Question You've Been Asking

Have you ever looked at my case study page and even my projects page and wondered: "Why, she has great design skills. Her hero images are so polished and modern and professional. I wonder what tool she uses to create them."

Well, first, you are right. I do have great design skills.

However, when I have such a tight deadline (18 more days till the end of my SDR Era), I have to get lazy about certain things and not dedicate time to them. However, being lazy is never and should never be an excuse for generating mediocre work or designs.

So let me walk you through what the workflow for generating my hero images is.

The Basic Workflow (Minutes)

I go to Claude and I provide the prompt:

Using HTML, CSS and Javascript, return a single solution file that I can take a screenshot of to act as the hero.png for this project we are working on. Be sure to use the primary, secondary and accent colors we agreed on for the project. I want all the items centered and visible on screen without scrolling.

That right there is the crux of how I generate the fancy-looking images you see on this website.

I simply take the screenshot within Claude itself since Claude is able to render .html files. Or better yet, I download the .html file, open it with my browser, then take a screenshot.

Now I am not talking about a regular screen capture. I use the browser capture tool in Chrome. These are the steps:

I hit the F12 button to open the Developer Tools
Then I use Ctrl+Shift+P to open the Run command window
Then I search for "screenshot"
Then I select "Capture full size screenshot" (this downloads the full image to my computer)
Then if necessary, I use any image editing tool to crop out areas or resize the image to dimensions 1200x630px

All of that right there is how I've been generating the beautiful images you see here, which look like they took hours to make.

If you are curious to see what the HTML file looks like before I take a screenshot, well here is an example. Notice how the page even has animations. You could use the same concept to create videos as well by simply screen recording the full screen of self-contained HTML+CSS+JavaScript projects like that.

The Claude God Tip: From Minutes to Seconds

Now if you've read to this part, you're probably wondering: so what is the Claude God tip?

Well, the step above has taken rapid image generation from days and hours to minutes. But as I have mentioned in previous blog posts, do not be content at any level of automation you get to. You should always ask: How can I make it even faster? How can I optimize this process even better?

When you take a workflow that used to take 2 weeks down to 2 days, that should not stop you from wondering how you can take it down to 2 hours.

You see, I am busy, very busy these days. I only have 18 days until the end of my SDR Era, yet so much to do, especially with the 777-1 project I added to my to-do list just 2 days ago.

I was working on the Seven Subagents case study when I realized that once again, I need to create a hero cover image for it, similar to the ones you see on the case study page. Except this time, I stopped to ask the question: How can I turn this workflow that only takes minutes down to seconds?

And guess what? I found a way!

Custom Slash Commands

But before we get into that, in the blog post yesterday, I talked about slash commands in Claude. However, did you know that you can create custom slash commands by adding .md files to .claude/commands/ in your project or ~/.claude/commands/ for commands that work in any project?

When I first saw that Claude tip, I thought, "Hmm, that'll be interesting to check out," but I had no clue what sort of custom command to create. Then I had this problem, and the light bulb went off in my head. I knew I had to test it out.

And it worked.

So custom commands allow you to define frequently used prompts as markdown files that Claude Code can execute. Then you can call your custom commands using /name-of-command-markdown-file.

Testing the Concept First

So I did this first to test out the idea. I started out by running the prompt below in Claude Code:

Generate hero.html for [project name] with my project colors, then write a Node script that:

1. Opens hero.html in headless browser
2. Takes 1200x630 screenshot
3. Saves as hero.png
4. Deletes hero.html

Run it automatically.

The prompt above only works if you have Puppeteer or Playwright installed. You can easily install them using:

npm install puppeteer
# or
npm install playwright

I used Puppeteer.

After running the prompt above and it worked, I knew I had to convert it into a custom command.

My Custom Hero Generator Command

Here is what my exact custom command at the time of writing this post looks like:

# Hero Generator Command

Generate beautiful animated hero images for projects and case studies.

## Usage

\`\`\`
/hero-generator project:<slug>
/hero-generator case-study:<slug>
\`\`\`

## Examples
\`\`\`
/hero-generator project:ai-web-dev-trainer
/hero-generator case-study:llm-instance-cloning-blog-adaptation
\`\`\`

## Instructions for Claude

When this command is executed:

### Step 1: Identify Type and Read Metadata

**For projects:**
1. Read `src/lib/projectsData.ts`
2. Find the project with matching slug
3. Extract: title, description, tags, colors (primary, secondary, accent), tech stack

**For case studies:**
1. Check `src/content/case-studies/[slug].md` or `[slug]/index.md`
2. Extract: title, excerpt, problem statement, solution approach, key metrics

### Step 2: Design the Hero Image

Create an HTML file that follows this creative approach (inspired by the LLM cloning example):

**Visual Elements to Include:**
- Animated gradient background using project colors
- Floating orb animations (3-4 orbs with blur effects)
- Central content with badge/label
- Large, bold title (project/case study name)
- Subtitle (tagline or one-sentence description)
- Visual flow diagram OR key metrics boxes (3 items max)
- Tech stack badges OR outcome indicators at bottom
- Smooth fade-in animations for all elements

**Design Principles:**
1. **Color Harmony:** Use project&apos;s primary color for gradient start, secondary for gradient end
2. **Typography:** Large headings (72-86px), readable subtitles (28-32px)
3. **Spacing:** Generous padding, centered layout
4. **Animation:** Subtle floating effects, fade-in sequences
5. **Glassmorphism:** Use backdrop-filter and rgba backgrounds for cards
6. **Contrast:** Ensure text is readable (use white text with shadows on dark gradients)

**Template Structure:**
\`\`\`html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1920, initial-scale=1.0">
    <title>[Project/Case Study Name] - Hero</title>
    <style>
        /* Base setup */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            width: 1920px;
            height: 1080px;
            background: linear-gradient(135deg, [primary-color], [secondary-color]);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: &apos;Segoe UI&apos;, Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            position: relative;
        }

        /* Animated background orbs */
        .orb {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            filter: blur(60px);
            animation: float 20s infinite ease-in-out;
        }

        .orb1 { width: 400px; height: 400px; top: -100px; left: -100px; }
        .orb2 { width: 500px; height: 500px; bottom: -150px; right: -150px; animation-delay: 5s; }
        .orb3 { width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 10s; }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            25% { transform: translate(50px, -30px) scale(1.1); }
            50% { transform: translate(-30px, 40px) scale(0.9); }
            75% { transform: translate(40px, 20px) scale(1.05); }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Main content styles with glassmorphism and animations */
    </style>
</head>
<body>
    <!-- Animated orbs -->
    <div class="orb orb1"></div>
    <div class="orb orb2"></div>
    <div class="orb orb3"></div>
    
    <!-- Main content -->
    <div class="container">
        <!-- Badge, title, subtitle, visual elements, tech badges -->
    </div>
</body>
</html>
\`\`\`

### Step 3: Generate Appropriate Visual Story

**For Projects:**
- Badge: "PROJECT SHOWCASE" or "[Category] PROJECT"
- Main title: Project name
- Subtitle: Project tagline or brief description
- Visual elements: Tech stack flow OR feature highlights (3 boxes)
- Bottom badges: Technologies used

**For Case Studies:**
- Badge: "CASE STUDY" or "[Industry] CASE STUDY"
- Main title: Case study title
- Subtitle: Client name or problem statement
- Visual elements: Before/After metrics OR Process flow (3 stages)
- Bottom badges: Key outcomes or technologies

### Step 4: Save HTML and Generate Image

1. Create HTML file: `temp-hero-[slug].html`
2. Determine output path:
   - **Projects:** `public/projects/[slug]-cover.png`
   - **Case Studies:** `public/case-studies/[slug]/hero.png`
3. Run: `node scripts/generate-image.js temp-hero-[slug].html [output-path]`
4. Wait for completion
5. Confirm success

### Step 5: Report Results

Provide:
- ✅ Hero image generated successfully
- 📍 Location: [full path]
- 🎨 Colors used: [primary, secondary, accent]
- 📏 Dimensions: 1920x1080
- 💡 Design approach: [brief description of visual story]

### Error Handling

If metadata not found:
- Ask user to verify slug spelling
- List available project/case study slugs

If colors not specified:
- Use default portfolio colors or ask user

If screenshot script fails:
- Check if puppeteer is installed
- Provide troubleshooting steps

### Creative Guidelines

**Make each hero unique by:**
1. Adjusting gradient angles based on project mood
2. Varying orb sizes and positions
3. Choosing appropriate icons/emojis for visual elements
4. Adapting animation speeds (calm projects = slower, energetic = faster)
5. Selecting font weights that match project personality
6. Creating visual hierarchies that emphasize key information

**Visual Storytelling:**
- **Code projects:** Show architecture flow, tech stack progression
- **Design projects:** Emphasize visual transformation, before/after
- **Writing projects:** Feature key quotes, writing metrics, impact
- **Case studies:** Problem → Solution → Results flow

Remember: Each hero should feel custom-made, not template-generated! Use the attached LLM cloning hero HTML as inspiration for the level of creativity and polish expected.

Now heads up, the backslashes escape the triple backticks just to make the above render correctly. Remove them when using this prompt.

The Image Generation Script

Now you can see in Step 4 of the custom command above, the prompt references a script called generate-image.js.

Here is what is contained in that script:

#!/usr/bin/env node

/**
 * Hero Image Generator Script
 * 
 * Takes an HTML file and generates a 1920x1080 screenshot
 * 
 * Usage: node scripts/generate-image.js <html-file-path> <output-image-path>
 * Example: node scripts/generate-image.js temp-hero.html public/projects/ai-trainer-cover.png
 */

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');

async function generateImage(htmlPath, outputPath) {
  console.log('🚀 Starting hero image generation...');
  
  if (!fs.existsSync(htmlPath)) {
    console.error(`❌ Error: HTML file not found at ${htmlPath}`);
    process.exit(1);
  }

  // Ensure output directory exists
  const outputDir = path.dirname(outputPath);
  if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
    console.log(`📁 Created directory: ${outputDir}`);
  }

  let browser;
  try {
    console.log('🌐 Launching browser...');
    browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    });

    const page = await browser.newPage();
    
    // Set viewport to exact dimensions we want
    await page.setViewport({
      width: 1920,
      height: 1080,
      deviceScaleFactor: 1
    });

    console.log('📄 Loading HTML file...');
    const htmlContent = fs.readFileSync(htmlPath, 'utf-8');
    const fileUrl = `file://${path.resolve(htmlPath)}`;
    
    await page.goto(fileUrl, {
      waitUntil: 'networkidle0'
    });

    // Wait for animations to settle (important for animated heroes)
    console.log('⏳ Waiting for animations...');
    await new Promise(resolve => setTimeout(resolve, 2000));

    console.log('📸 Taking screenshot...');
    await page.screenshot({
      path: outputPath,
      type: 'png',
      fullPage: false
    });

    console.log(`✅ Success! Hero image saved to: ${outputPath}`);
    
    // Clean up temp HTML file
    if (htmlPath.includes('temp-hero')) {
      fs.unlinkSync(htmlPath);
      console.log('🗑️  Cleaned up temporary HTML file');
    }

  } catch (error) {
    console.error('❌ Error generating image:', error);
    process.exit(1);
  } finally {
    if (browser) {
      await browser.close();
    }
  }
}

// Get arguments from command line
const [htmlPath, outputPath] = process.argv.slice(2);

if (!htmlPath || !outputPath) {
  console.error('Usage: node generate-image.js <html-file-path> <output-image-path>');
  process.exit(1);
}

generateImage(htmlPath, outputPath);

Using the Custom Command

Now all I have to do when I am done working on a case study or I add a new project to my projects list is to run the command with appropriate parameters as seen below:

/hero-generator project:ai-prompt-engineering-toolkit
/hero-generator case-study:the-seven-subagents

Amazing, right? You see, when I wrote about my automation love story, this is the type of stuff I was referring to that gets me excited!

For Non-Developers: Simpler Methods

Now, my dear non-developers who stuck with me till the end and are probably thinking, "This is too intimidating! I don't understand anything here! What is a node script? What is a terminal?"

Relax, relax. I've got you!

Method 1: Using Claude with Canva

You can ask Claude to generate the image for you using Canva. You can run the prompt below to do so:

Create a hero image for my [project name] case study. Use these colors:
- Primary: #6366f1
- Secondary: #14b8a6  
- Accent: #f59e0b

Style: [Modern/minimal/playful]
Elements: [Icon/logo, project name, key visual]
Dimensions: 1200x630px

Now I must add that while this method is easier, it definitely limits the level of customization you can get compared to using HTML+CSS+JavaScript.

I have also used Claude to generate starter slides with Canva, especially for the videos I record for this website. When I recorded the video for the first version of the French Writing Playground, the slide generation was good and it adhered to the colors I specified. I still had to make some edits to the slides to get it to the level I wanted, but it was a really good start.

Now, when I attempted the same thing for version 2 of the French Writing Playground, even after 6 attempts at prompting and specifying the colors I wanted, Claude did not do a good job at following my instructions, and I guess that might be a limit from Canva's end. I ended up doing most of the work of creating the slides for that video.

Method 2: Using SVG Generation

There is another method you could use on the web. You can simply generate .svg images using the prompt below:

Create an SVG hero image (1200x630) for [project name]. Use primary: #6366f1, secondary: #14b8a6, accent: #f59e0b. Center all elements. Make it downloadable.

When I ran that exact prompt for the French Writing Playground project, here is the output I got.

You can see that it actually looks good, but not as sophisticated as the version with HTML+CSS+JavaScript.

The Gift: ViteHero

Now what is the gift I talked about at the beginning of this blog post that I had for non-developers?

Well, this workflow inspired me to create an application. It is called ViteHero ("vite" for "fast" in French and "hero" for hero images). It is a bilingual app because I am tired of creating English-only applications.

I am going to attempt to do a sprint, similar to how I did while working at Outlier, building apps in 3-6 hour timeframes, and try to get this application up and running today!

When it is ready, you should be able to access it at www.vitehero.com, and I hope you enjoy using it.

As always, thanks for reading!