| name | start-3-2-1 |
| description | Module 3.2.1: Users & Product Visuals - Create personas, journey maps, wireframes, and lifestyle shots for product pitches. Use when the student types /start-3-2-1.
|
| disable-model-invocation | true |
Setup
Read .cursor/SCRIPT_INSTRUCTIONS.md and follow it for everything below.
ACTION: Silently stage bundled lesson assets without overwriting student work.
cp -rn .cursor/skills/start-3-2-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:
- 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 the AI
- 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:
ACTION: Before wrapping up, record this lesson as complete by running this WITHOUT NARRATING the raw output:
fspm progress complete cursor-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
