carlvellotti
carlvellotti/free-ai-courses
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/carlvellotti/free-ai-courses --skill start-3-2-1命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| 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