carlvellotti 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:
- A persona portrait of Marcus Chen
- A journey map of his morning workflow
- A polished wireframe transformed from a rough sketch
- A device mockup showing the app in an iPhone
- 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.pymodule 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: 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, start a fresh chat (New Chat), then:
/start-3-2-2