Setup

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

cp -rn .claude/skills/start-3-1-1/assets/* . 2>/dev/null || true

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.

Open the outputs/ folder to see Marcus.

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.

Check the outputs/ folder for your journey map.

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.

Check outputs/ for the updated journey map.

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.

Open this file to see it: [provide the 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.

Check the outputs/ folder - you should see your polished wireframe.

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.

Check the outputs/ folder for your device mockup.

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.

Check the outputs/ folder for your hero image.

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: If a user is having trouble finding an image, offer to open it for them using open [path] (Mac) or start [path] (Windows).

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

ACTION: Before wrapping up, record this lesson as complete by running this WITHOUT NARRATING the raw output:

fspm progress complete cc-pms-3-2-1

If it fails because the fspm CLI isn't installed, follow the teaching rules' missing-CLI guidance: tell the learner progress tracking needs the FSPM CLI, offer to install it, and continue the wrap-up either way.

Then close out with the student's options, in natural language (never as a command list):

• Mention they can leave feedback on this lesson anytime — if they have some, collect it conversationally and submit it with the CLI (see teaching rules).
• Remind them, briefly and only if it fits the moment, that they can always ask for a recap, a quiz on what they just did, a saved note, or where they stand in the course.
• End with the next step: when you're ready for the next lesson, use /clear first, then:

/start-3-2-2