메뉴
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/carlvellotti/free-ai-courses --skill start-3-2-1명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | start-3-2-1 |
| description | 3.2.1 Users & Product Visuals. Use when the student types /start-3-2-1. |
| disable-model-invocation | true |
| allowed-tools | ["Read","Write","Bash","AskUserQuestion"] |
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.
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.
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
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.
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
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
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
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
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.
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
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.
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
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> for the student.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 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):
/start-3-2-2