메뉴
Lesson 3.2.2: Strategy & Architecture Visuals. Use when the student types /start-3-2-2.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
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-2 |
| description | Lesson 3.2.2: Strategy & Architecture Visuals. Use when the student types /start-3-2-2. |
| 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.2: Strategy & Architecture Visuals!
Your TaskFlow Mobile pitch was a hit - leadership is excited. But now different stakeholders want deeper dives.
The CTO wants to understand the technical architecture. The CEO wants to see feature prioritization. And the board wants to see the product roadmap.
You need visuals that communicate complex ideas clearly. Let's build them.
STOP: Ready to prep for your stakeholder meetings?
USER: Ready
Quick reminder: you can reference styles from style-library.html or just describe what you want.
The Architecture and Framework categories have great options for this module.
STOP: Makes sense?
USER: Yes
First up: the CTO meeting.
The CTO wants to understand how TaskFlow Mobile fits into the existing TaskFlow ecosystem. Let's create a system architecture diagram showing:
This is the kind of diagram that answers "how does it all connect?"
STOP: Ask me to create a system architecture diagram for TaskFlow Mobile.
USER: Create a system architecture diagram / Generate the architecture diagram
ACTION: Generate system architecture diagram
ACTION: Provide the path to the output image so user can view it.
Check the outputs/ folder for your architecture diagram.
STOP: Does this clearly show how the pieces connect?
USER: Response
ACTION: If user wants changes, iterate on the diagram. If satisfied, continue.
The CTO can now see exactly how TaskFlow Mobile integrates with the existing system.
This same approach works for ANY diagram you need - system architecture, data flows, org charts, network topology, whatever. Just describe your components and how they connect.
STOP: Ready for the CEO meeting?
USER: Yes
Next: the CEO meeting.
The CEO wants to see how you're prioritizing features - what gets built first and why. A 2x2 matrix is perfect for this: Impact vs Effort.
Let's map out the key features for TaskFlow Mobile:
STOP: Ask me to create a 2x2 prioritization matrix for TaskFlow Mobile features.
USER: Create a prioritization matrix / Generate the 2x2 matrix
ACTION: Generate 2x2 prioritization matrix
ACTION: Provide the path to the output image so user can view it.
Check the outputs/ folder for your prioritization matrix.
STOP: See how the matrix makes the prioritization logic visual and clear?
USER: Response
ACTION: If user wants changes, iterate on the matrix. If satisfied, continue.
Now the CEO can see at a glance what you're building first and why.
And this works for ANY framework you can imagine - 2x2 matrices, pyramids, Venn diagrams, canvases, funnels, whatever. Same process: describe the structure, list what goes where, specify the style. You can reference the style library or describe what you want from scratch.
STOP: Ready for the board meeting?
USER: Yes
Finally: the board meeting.
The board wants to see the big picture - when does this ship and what's the phased rollout?
Let's create a roadmap showing TaskFlow Mobile over 3 quarters:
This shows a clear path from MVP to enterprise-ready.
STOP: Ask me to create a product roadmap for TaskFlow Mobile.
USER: Create a product roadmap / Generate the roadmap
ACTION: Generate product roadmap visualization
ACTION: Provide the path to the output image so user can view it.
Check the outputs/ folder for your roadmap.
STOP: Does this tell a clear story of how the product evolves?
USER: Response
ACTION: If user wants changes, iterate on the roadmap. If satisfied, continue.
The board can now see the strategic vision laid out over time.
This works for ANY timeline or sequence you need - roadmaps, Gantt charts, release plans, migration schedules. Define your time periods, list what goes in each, describe the style. Same process every time.
STOP: One more thing before we wrap up.
USER: Yes
Remember: you can always add your own styles to the style database.
Found a diagram style you love online? Extract it and save it. Created something in this module that worked really well? Add it to your library.
A great source for framework and diagram inspiration is https://slidemodel.com/ - find a style you like, screenshot it, and use style extraction to clone it for your own purposes.
Over time, you'll build a collection of go-to styles for every situation.
If you need a refresher on how to add styles, revisit Module 3.1.4.
STOP: Makes sense?
USER: Yes
Let's recap what you just built:
Three different stakeholders, three different visual needs - all handled.
These techniques work for any strategic or technical communication:
STOP: Any questions before we move on?
USER: Questions or ready to continue
In the next module, we'll tackle marketing and announcement visuals - ads, feature graphics, and launch assets.
Type /start-3-2-3 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).taskflow_system_architecture.png, feature_prioritization_matrix.png, product_roadmap_q1_q3.png.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-2"; C="cc-pms-3-2-3"; 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-3.