Menu
Lesson 3.2.1: Users & Product Visuals. Use when the student types /start-3-2-1.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
Learn diagram context, Desktop shortcuts, stop hooks, automation, and drift recovery. Use when the student types /start-advanced-claude-workflows.
Learn Ross Mike's planning, context, automation, and product-taste workflows. Use when the student types /start-ross-mike-workflows.
Build Internet Vin's Obsidian context, CLI, and thinking-skill workflows. Use when the student types /start-vin-obsidian-workflows.
Lesson 1.1: Introduction. Use when the student types /start-1-1.
Lesson 1.2: File Exploration & Visualization. Use when the student types /start-1-2.
Lesson 1.3: Working with Files. Use when the student types /start-1-3.
| 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"] |
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
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:
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
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
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
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:
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
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
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
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
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
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)
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
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
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
Let's recap what you just built:
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.
image_gen.py module via Python. Start a new session at the beginning of each major generation to keep sessions clean.style-library.html (in the 3.1.4 module folder).marcus_chen_persona.png, morning_workflow_journey_map.png, etc.open [path] (Mac) or start [path] (Windows).The module is complete when the user has:
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.