# Start 3 2 1 > 3.2.1 Users & Product Visuals. Use when the student types /start-3-2-1. - Skill: `carlvellotti/start-3-2-1` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add carlvellotti/start-3-2-1` - Raw SKILL.md: https://api.skillmd.com/api/skills/carlvellotti/start-3-2-1/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: carlvellotti (https://skillmd.com/u/carlvellotti) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/carlvellotti/start-3-2-1 --- ## 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: ```bash 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 `. 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 `. 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: 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:** State the exact path and link it. Optionally run `open ` 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: ```bash 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`