start-3-2-1

name	start-3-2-1
description	Lesson 3.2.1: Users & Product Visuals. Use when the student types /start-3-2-1.
disable-model-invocation	true
allowed-tools	["Read","Write","Bash"]

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: 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: Type /start-3-2-2.