Module 2Free2 hours

New to Claude Code? Start with Module 0: Claude Code Basics

Generate Product Visuals with AI

Create mockups, presentation graphics, and social media assets in minutes using DALL-E — no design skills required.

PMs spend hours waiting for designers to create mockups, presentation visuals, and social media assets. This module gives you 6 MCP tools that generate professional visuals on demand using OpenAI's DALL-E. Get a concept illustration for your deck in 30 seconds, not 3 days.

What You Will Learn

Prompt Engineering for Images

Master the four-component prompt structure: subject, style, color palette, and composition — the foundation of every great AI image.

Product Mockups & Wireframes

Generate app screens, dashboard previews, and feature mockups to include in PRDs and stakeholder presentations.

Presentation & Social Visuals

Create concept illustrations, hero backgrounds, and social media graphics that match your brand — no designer needed.

Asset Packs & Variations

Generate coordinated sets of 4 images for campaigns, or explore 3 visual directions before committing to one.

Two Ways to Use This Module

Teacher Mode

6-lesson interactive course on AI image generation for PMs. Exercises, quizzes, and explanations — learn prompt engineering for visuals.

Say: "I want to learn how to generate images with AI"

Usage Mode

6 production-ready MCP tools. Generate images, refine prompts, and create asset packs immediately — skip the teaching.

Say: "Generate a mockup of a notifications dashboard"

Course Structure

Welcome & Setup

10 min

What DALL-E is, why PMs need image generation, and how to set up your OpenAI API key.

Prompt Fundamentals

20 min

The four-component prompt structure, style keywords, common mistakes, and the refine-generate-iterate workflow.

Product Mockups & Wireframes

20 min

Generate app screens, dashboards, and feature previews. Integrate mockups into your PRDs.

Presentation & Pitch Visuals

15 min

Create concept illustrations, before/after comparisons, and hero backgrounds for slide decks.

Social Media & Marketing Assets

15 min

Platform-specific graphics, visual consistency across campaigns, and text overlay workflows.

Advanced Techniques & Workflows

20 min

Variations, asset packs, building a prompt library, and cross-module workflows.

How Image Generation Works for PMs

See how each step of creating product visuals changes when you bring AI into the process.

Product Mockups

Before

Wait 2-3 days for a designer to create wireframes

With AI

Generate a mockup in 30 seconds with a text prompt

Deck Visuals

Before

Search stock photos for 30 minutes, settle for something generic

With AI

Generate exactly what you need: concept, color, composition

Social Graphics

Before

Request a set of 4 posts, wait a week for the design queue

With AI

Create a coordinated asset pack in one command

Variations

Before

Ask for revisions one at a time over days

With AI

Generate 3 style variations instantly, pick the best

Brand Consistency

Before

Write a brief, hope the designer interprets it correctly

With AI

Define a style guide string, apply it to every image

Cost

Before

$50-200 per image from a freelancer

With AI

$0.04-0.08 per image via DALL-E API

Five Core Techniques

These five techniques turn text prompts into professional product visuals.

The Four-Component Prompt

Every effective image prompt has four parts: subject, style, color palette, and composition. Missing any one produces unpredictable results.

Subject

"A web dashboard showing analytics metrics"

What the image is about

Style

"Clean flat design, modern SaaS aesthetic"

The visual language

Color Palette

"Blue (#2563EB) and white with gray accents"

Brand consistency

Composition

"Landscape format, space for text overlay"

Layout and purpose

Example prompt

A web dashboard showing payment analytics with 3 metric cards,
a line chart, and a data table. Clean flat design, modern SaaS aesthetic.
Blue (#2563EB) and white with gray accents. Landscape format,
professional business tool.

Style Presets

The module includes 6 pre-configured style presets that append professional styling to your prompts automatically.

product-mockup

Clean UI mockups for PRDs and specs

presentation

Slide-ready visuals for decks

social-media

Bold graphics for social posts

icon-set

Consistent icons and illustrations

concept-art

Abstract concept illustrations

comparison

Before/after and side-by-side

Refine Before You Generate

Use refine_prompt and review_prompt to improve your prompt before spending API credits. A refined prompt produces better results on the first try.

Start Rough

"I need a dashboard mockup"

Your initial idea

Refine

refine_prompt adds specificity, style, composition

A detailed, structured prompt

Review

review_prompt scores 0-100 and flags issues

Confidence before generating

Explore with Variations

Not sure what style you want? Generate 3 distinct variations of any concept — minimal, bold, and corporate — then iterate on the best one.

A: Minimal

Clean, lots of whitespace, stripped-down

Best for: Modern SaaS, tech companies

B: Bold

High-energy, saturated colors, vibrant

Best for: Social media, marketing

C: Corporate

Polished, muted tones, business-appropriate

Best for: Enterprise, stakeholder decks

Cost tip: Set generateImages to false to preview the 3 prompts first (~free). Then generate only the one you like (~$0.04) instead of all three (~$0.12).

Coordinated Asset Packs

Generate 4 related images that share a consistent visual style. Essential for campaigns, presentations, and product pages.

Social Campaign

Announcement, feature highlight, social proof, CTA

Presentation Set

Title hero, problem visual, solution visual, results visual

Icon Set

4 matching feature icons with consistent style

Feature Highlights

Value prop, speed, collaboration, results

Example

create_asset_pack({
  theme: "AI notifications center launch",
  packType: "social-campaign",
  styleGuide: "Clean, minimal, blue and white, flat design",
  generateImages: true
})

Real-World Walkthrough

The full flow for a PM creating a product mockup for a PRD.

Start with a Rough Idea

1 min

You need a mockup of a notifications center for your PRD. You describe it in plain English: "A web dashboard with a notification bell dropdown."

Refine the Prompt

1 min

Use refine_prompt to transform your rough idea into a detailed, structured prompt with specific UI elements, colors, and layout.

Review Before Generating

30 sec

Use review_prompt to score your prompt (0-100). It flags that you are missing a color palette — you add "blue (#2563EB) and white." Score jumps to 88.

Generate the Image

30 sec

Generate the image with DALL-E. You get a detailed dashboard mockup with the notification panel open. Cost: $0.08.

Explore Variations

2 min

Generate 3 style variations (minimal, bold, corporate). You pick the minimal style for the PRD and the bold style for the launch announcement.

Add to Your PRD

1 min

Paste the image URL in your PRD's Design Considerations section. Stakeholders now have a visual anchor for the feature discussion.

Best Practices

Do

Be specific about UI elements

"3 metric cards, a line chart, and a data table" produces much better results than "a dashboard."

Include hex color codes

Colors like "#2563EB" give you consistent, on-brand results every time.

Refine before generating

Use refine_prompt to add specificity. A $0 refinement saves wasted $0.04-0.08 generations.

Say "no text" for design assets

DALL-E renders text poorly. Generate the visual, then add text in Canva or Figma.

Save prompts that work

Build a personal prompt library. Template your best prompts with [PLACEHOLDERS] for reuse.

Do Not

Use vague prompts

"A nice looking app" gives you random results. Specificity is everything.

Expect pixel-perfect UI

DALL-E creates visual concepts, not production mockups. Use it for direction, not final design.

Skip the style preset

Presets add professional styling keywords automatically. Always specify one.

Generate without reviewing

The review_prompt tool catches issues before you spend API credits. Use it.

Ask for text-heavy images

DALL-E cannot reliably render text. Generate backgrounds and add text separately.

Troubleshooting

Images look nothing like what I described

Cause: Prompt is too vague or conflicting.

Fix: Use review_prompt to score your prompt before generating. Aim for 70+ out of 100. Add specific UI elements, a color palette, and a style keyword.

Text in images is garbled or unreadable

Cause: DALL-E does not render text reliably.

Fix: Add "no text, no labels" to your prompt. Generate the visual background only, then add text in Canva, Figma, or your presentation tool.

Colors do not match my brand

Cause: No hex color codes in the prompt.

Fix: Always include hex codes: "blue (#2563EB)" not just "blue." DALL-E interprets color names loosely.

Asset pack images look inconsistent

Cause: Style guide string is too vague.

Fix: Use specific style guides: "Clean, minimal, blue (#2563EB) and white, flat design, modern SaaS" not "professional looking."

"OPENAI_API_KEY not set" error

Cause: Missing API key environment variable.

Fix: Get a key at platform.openai.com/api-keys. Set it with: export OPENAI_API_KEY="sk-..." in your terminal before starting Claude Code.

Quick Reference

The six MCP tools included in this module.

list_styles

Shows 6 image style presets (product-mockup, presentation, social-media, etc.).

Start here to pick the right style.

generate_image

Generates an image via DALL-E with your prompt, style, and size.

After crafting your prompt.

refine_prompt

Transforms a rough idea into a detailed, structured image prompt.

When your prompt is vague or incomplete.

generate_variations

Creates 3 distinct visual directions (minimal, bold, corporate).

When you want to explore multiple styles.

create_asset_pack

Generates 4 coordinated images with consistent style.

For campaigns, presentations, or icon sets.

review_prompt

Scores your prompt 0-100 and flags issues before generating.

Before every generation to save API credits.

Cost Breakdown

The module is free. You only pay for images you generate via OpenAI's DALL-E API.

Standard quality image (1024x1024)~$0.04

HD quality image (1024x1024)~$0.08

HD landscape (1792x1024)~$0.08

3 variations (standard)~$0.12

4-image asset pack (standard)~$0.16

Full course exercises (all 6 lessons)~$1.00

Most PMs spend less than $2 completing the entire course. Compare to $50-200 per image from a freelance designer.

Download and Setup

Clone the module from GitHub, set up your OpenAI API key, and add the MCP server to your Claude Code config.

View on GitHub

Terminal

git clone https://github.com/anmolgupta824/ai-native-pm.git
cd ai-native-pm/modules/module-2-image-gen
npm install && npm run build

Module 1 — PRD Generator

Module 3 — MCP Integrations