介绍
# PM Visualizer Skill
此技能将非结构化的产品经理思路转换为结构化的 Excalidraw 可视化图表。
## 功能 - **智能布局**：自动排列“为什么、做什么、怎么做”栏目，并为“用户旅程”创建横向流程。 - **颜色编码**：在问题（为什么 - 黄色）、解决方案（做什么 - 绿色）、实施（怎么做 - 蓝色）和流程（旅程 - 红色/粉色）之间进行视觉区分。 - **分组元素**：文本正确绑定到容器，以便它们一起移动。
## 工作流程
1. **分析请求**：从用户的提示或上下文中提取以下部分： * **标题**：功能或产品名称。 * **为什么**：问题陈述、业务目标或“为什么要构建这个？”。 * **做什么**：解决方案需求、功能或“它是什么？”。 * **怎么做**：技术实施细节、API 策略或“我们将如何构建它？”。 * **旅程**：用户旅程或流程流程的步骤顺序列表。
2. **准备数据**：创建具有此结构的 JSON 文件（例如 `temp_visual_data.json`）： ```json { "title": "Feature Name", "why": ["Reason 1", "Reason 2"], "what": ["Feature 1", "Feature 2"], "how": ["Tech 1", "Tech 2"], "journey": ["Step 1", "Step 2", "Step 3"] } ```
3. **生成图表**：运行 python 脚本生成 `.excalidraw` 文件。 ```bash python3 skills/pm-visualizer/scripts/layout_diagram.py temp_visual_data.json ~/Downloads/Documents/PM_Visuals/Output_Name.excalidraw ``` *请确保输出目录首先存在。*
4. **清理**：删除临时 JSON 输入文件。
5. **报告**：通知用户文件已在输出路径准备就绪。
## 示例
**用户**：“可视化一个新的‘使用 Google 登录’功能。为什么？减少阻力。做什么？登录页面上的 Google 按钮。怎么做？OAuth2。旅程：用户点击按钮 -> Google 弹窗 -> 重定向到仪表盘。”
**Codex 操作**： 1. 创建 `login_spec.json`： ```json { "title": "Login with Google", "why": ["Reduce friction", "Increase conversion"], "what": ["Google Sign-in Button", "Profile Sync"], "how": ["OAuth 2.0 Flow", "Google Identity SDK"], "journey": ["User clicks 'Sign in with Google'", "Google permissions popup appears", "User approves access", "System verifies token", "User redirected to Dashboard"] } ``` 2. `mkdir -p ~/Downloads/Documents/PM_Visuals` 3. `python3 skills/pm-visualizer/scripts/layout_diagram.py login_spec.json ~/Downloads/Documents/PM_Visuals/Login_Spec.excalidraw`