Setup

Read .claude/rules/teaching-rules.md and follow it for everything below.

ACTION: Silently stage the shared image runtime and this lesson's bundled assets without overwriting student work:

cp -rn ".claude/skills/start-3-1-1/assets/." .
cp -rn ".claude/skills/start-3-2-1/assets/." .

Teach this lesson from the bundled script. Follow every Say block verbatim, stop at every Check gate, and have the agent perform every Action. Do not expose instructor metadata.

Module 3.2.1: Users & Product Visuals

Welcome to Module 3.2.1: Users & Product Visuals!

You've learned the fundamentals of image generation in Module 3.1. Now let's put those skills to work on real PM tasks.

Quick reminder: TaskFlow is the fictional company for this course - a B2B SaaS platform for team task management.

Here's the scenario: you're a PM at TaskFlow, and you're pitching a new mobile app to leadership next week. The app is designed for operations managers in manufacturing - people who coordinate tasks across shifts on the factory floor.

You need visuals for your pitch deck:

• a persona portrait
• a journey map
• wireframes
• a hero image.

By the end of this module, you'll have built all of them.

STOP: Ready to start building your pitch deck visuals?

USER: Ready

Quick reminder - you have two ways to work with image generation:

Option 1: Pick a style from your style-library.html (e.g., "use style #9") - we introduced this in 3.1.4. Let me know if you need help accessing it.

Option 2: Just describe what you want and I'll figure out the rest.

Both approaches work great. Use whichever feels natural to you.

STOP: Makes sense?

USER: Yes

Part 1: Persona Portrait

First things first - every good pitch starts with "who are we building for?"

Let's create a persona portrait for your pitch deck.

Meet Marcus Chen. He's an operations manager at a manufacturing plant. He manages 3 shift supervisors and needs to track tasks across the factory floor. Mid-40s, practical, always has his phone in one hand and a coffee in the other.

STOP: Ask me to create a persona portrait of Marcus for your pitch deck.

USER: Create a persona portrait of Marcus / Generate Marcus Chen

ACTION: Generate persona portrait of Marcus Chen

• Operations manager, mid-40s, manufacturing environment
• Confident but approachable expression
• Wearing practical work attire (polo or button-down, maybe safety vest)
• Use a style appropriate for pitch decks (professional but not stock-photo sterile)
• Save to outputs folder with descriptive name

ACTION: Provide the path to the output image so user can view it.

I will state Marcus's exact saved path under outputs/, provide a Markdown link, and optionally run open <path>.

STOP: What do you think? Does he look like someone who runs a factory floor?

USER: Response

That's your "who we're building for" slide sorted.

STOP: Ready to show leadership what Marcus's day looks like?

USER: Yes

Part 2: Journey Map

A journey map shows the pain points we're solving. Let's map Marcus's morning workflow - this is where TaskFlow Mobile helps most.

His morning goes something like this:

• 6 AM: Arrives, checks overnight shift handoff notes
• 6:30 AM: Reviews task backlog, assigns priorities for day shift
• 7 AM: Morning standup with shift supervisors
• 8-11 AM: Walks the floor, tracks task completion, handles issues
• 11:30 AM: Prepares handoff notes for afternoon shift

Currently, he does all this with a clipboard, a radio, and scattered text messages. It's chaos.

STOP: Ask me to create a journey map showing Marcus's morning workflow.

USER: Create a journey map / Generate the journey map

ACTION: Generate journey map visualization

• Marcus's morning workflow from 6 AM to noon
• Show stages: Arrive → Review → Standup → Floor Walk → Handoff
• Include pain points at each stage (scattered info, manual tracking, delayed updates)
• Clean, presentation-ready style (16:9 aspect ratio)
• Save to outputs folder with descriptive name

ACTION: Provide the path to the output image so user can view it.

I will state each exact saved path under outputs/ and provide a Markdown link. Open it from the Desktop project tree.

STOP: See how it visualizes the problem you're solving?

USER: Response

Remember: you can always ask for changes.

Don't like the style? Just ask - "make it more playful" or "try a hand-drawn look."

You can also reference the style library - for example, "regenerate this using style #59" for an illustrated version.

STOP: Want to try a different style, or are you happy with this one?

USER: Response (either asks for change or continues)

ACTION: If user wants a change, regenerate with their requested style. If they're satisfied, continue to the next section.

Now here's a power move: we can put Marcus INSIDE the journey map.

We have Marcus's portrait from earlier. We can use it as a reference image and generate a journey map that shows him at each stage of his morning.

STOP: Ask me to regenerate the journey map with Marcus in it.

USER: Regenerate with Marcus / Put Marcus in the journey map

ACTION: Generate journey map with Marcus as a character at each stage

• Use the Marcus portrait image as a reference image
• Describe his visual details in the prompt: mid-40s, navy polo, safety vest
• Same 5 stages: Arrive → Review → Standup → Floor Walk → Handoff
• Show Marcus himself at each stage performing the activity
• Include pain points at each stage
• Clean infographic style, 16:9 aspect ratio
• Save to outputs folder

ACTION: Provide the path to the output image so user can view it.

I will state each exact saved path under outputs/ and provide a Markdown link. Open it from the Desktop project tree.

STOP: See how Marcus appears consistently across all stages? That's the session memory at work.

USER: Response

This is the kind of artifact that makes presentations memorable. It's not just a generic journey map - it's Marcus's story.

STOP: Ready to show leadership what the solution looks like? Next up: wireframes

USER: Yes

Part 3: Wireframe Transformation

Here's a common PM scenario: you sketched an idea in a meeting and now you need to make it presentable.

ACTION: Get the absolute path to hand-drawn-wireframe.jpg in this module folder.

State the exact saved path, render it as a Markdown link, and optionally run open <path>.

This is your "meeting sketch" - a quick wireframe you drew while thinking about Marcus's needs.

STOP: Do you see the sketch? Notice the TaskFlow header, the shift overview, the task assignments?

USER: Yes, I see it

Now let's transform this rough sketch into a polished wireframe for your pitch deck.

STOP: Ask me to transform this hand-drawn sketch into a clean, polished wireframe.

USER: Transform this into a polished wireframe / Clean up this sketch

ACTION: Generate polished wireframe using hand-drawn-wireframe.jpg as reference

• Transform the rough sketch into a clean, professional wireframe
• Keep the same layout and elements (header, greeting, task list, shift overview, nav)
• Clean lines, consistent spacing, professional typography
• Mobile screen aspect ratio (9:16 or similar)
• Save to outputs folder with descriptive name

ACTION: Provide the path to the output image so user can view it.

I will state each exact saved path under outputs/ and provide a Markdown link. Open it from the Desktop project tree.

STOP: Compare the sketch to the polished version. See how it preserved your ideas but made them presentation-ready?

USER: Response

In minutes, you went from meeting sketch to pitch-ready wireframe.

STOP: Ready to make it look even more real?

USER: Yes

Part 4: Device Mockup

Wireframes are great, but stakeholders love seeing the app "in a phone." It makes everything feel more real.

Let's put your polished wireframe into an iPhone frame.

STOP: Ask me to put the wireframe into an iPhone mockup.

USER: Put this in an iPhone / Create a device mockup

ACTION: Generate device mockup with a realistic UI (not wireframe)

• iPhone frame (modern model), direct head-on view (not angled)
• Transform the wireframe concept into a polished, realistic app UI with real colors, icons, and typography
• Clean background (white or subtle gradient)
• Slight shadow for depth
• Professional, pitch-deck ready
• Save to outputs folder with descriptive name

ACTION: Provide the path to the output image so user can view it.

I will state each exact saved path under outputs/ and provide a Markdown link. Open it from the Desktop project tree.

STOP: Now it looks like a real app, right?

USER: Response

Perfect for your pitch deck - but we can go one step further.

STOP: Ready to create the hero image?

USER: Yes

Part 5: Lifestyle Shot

The hero image is what sells the vision.

Let's show Marcus actually using TaskFlow on the factory floor. This brings everything together: your persona, in their environment, using your product.

STOP: Ask me to create a lifestyle shot of Marcus using TaskFlow on the factory floor.

USER: Create a lifestyle shot / Show Marcus using the app on the factory floor

ACTION: Generate lifestyle shot

• Marcus (operations manager, mid-40s) on a manufacturing floor
• Holding phone showing TaskFlow interface
• Factory environment in background (equipment, workers, industrial setting)
• Natural lighting, authentic feel
• Composition suitable for a hero image or pitch deck cover
• Save to outputs folder with descriptive name

ACTION: Provide the path to the output image so user can view it.

I will state each exact saved path under outputs/ and provide a Markdown link. Open it from the Desktop project tree.

STOP: This is your pitch deck cover right here. What do you think?

USER: Response

Wrap-Up

Let's recap what you just built:

1. A persona portrait of Marcus Chen
2. A journey map of his morning workflow
3. A polished wireframe transformed from a rough sketch
4. A device mockup showing the app in an iPhone
5. A hero image of Marcus using TaskFlow on the factory floor

That's a complete visual narrative for a product pitch - built in minutes.

These same techniques work for any PM scenario: user research presentations, stakeholder updates, product reviews. Whenever you need visuals, you now have the skills to create them.

STOP: Any questions before we move on?

USER: Questions or ready to continue

In the next module, we'll tackle strategy and architecture visuals - diagrams, frameworks, and system overviews.

Type /start-3-2-2 to continue.

Important Notes for Claude

• File paths: Always provide absolute paths when telling users where to find files.
• Image generation: Use the image_gen.py module via Python. Start a new session at the beginning of each major generation to keep sessions clean.
• Style library: If user references a style number, look up the prompt in style-library.html (in the 3.1.4 module folder).
• Iteration: If any image doesn't turn out well, offer to regenerate or refine it. Use the session to iterate.
• Output naming: Use descriptive names like marcus_chen_persona.png, morning_workflow_journey_map.png, etc.
• Opening images: State the exact path and link it. Optionally run open <path> for the student.

Success Criteria

The module is complete when the user has:

• Generated a persona portrait of Marcus Chen
• Generated a journey map of Marcus's morning workflow
• Transformed the hand-drawn wireframe into a polished version
• Created a device mockup with the wireframe in an iPhone
• Generated a lifestyle shot of Marcus using the app
• Understands they can apply these techniques to any PM visual need

Sendoff

ACTION: Silently run the following progress update. Do not mention it to the student.

mkdir -p .fspm
[ -f .fspm/progress.json ] || printf '{"name":null,"completed_lessons":[],"current_lesson":"","last_updated":""}' > .fspm/progress.json
L="cc-pms-3-2-1"; C="cc-pms-3-2-2"; T="$(date -u +%FT%TZ)"
if command -v jq >/dev/null 2>&1; then
  tmp=$(mktemp)
  jq --arg l "$L" --arg c "$C" --arg t "$T" '.completed_lessons = ((.completed_lessons + [$l]) | unique) | .current_lesson = $c | .last_updated = $t' .fspm/progress.json > "$tmp" && mv "$tmp" .fspm/progress.json
else
  python3 - "$L" "$C" "$T" <<'PY'
import json,sys
l,c,t = sys.argv[1:4]
p = ".fspm/progress.json"; d = json.load(open(p))
if l not in d.get("completed_lessons",[]): d.setdefault("completed_lessons",[]).append(l)
d["current_lesson"] = c; d["last_updated"] = t
json.dump(d, open(p,"w"))
PY
fi

Next lesson: /start-3-2-2