PM 可视化技能

该技能将产品经理的非结构化思考转化为结构化的 Excalidraw 可视化图表。

功能特性

• 智能布局：自动按列排列“Why（为什么）、What（是什么）、How（如何做）”，并为“用户旅程（User Journey）”创建横向流程布局。
• 颜色编码：通过颜色区分不同语义元素——问题（Why，黄色）、解决方案（What，绿色）、实施方式（How，蓝色）、流程路径（Journey，红色/粉红色）。
• 分组元素：文本内容与容器正确绑定，确保移动时整体协同操作。

工作流程

1. 分析请求：从用户的提示词或上下文提取以下部分：

   • 标题（Title）：功能或产品的名称。
   • Why：问题陈述、业务目标，或“我们为何要构建此功能？”
   • What：解决方案需求、功能点，或“它是什么？”
   • How：技术实现细节、API 策略，或“我们将如何构建它？”
   • Journey：用户旅程或流程的顺序步骤列表。

2. 准备数据：创建一个 JSON 文件（例如 temp_visual_data.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 文件。

   python3 skills/pm-visualizer/scripts/layout_diagram.py temp_visual_data.json ~/Downloads/Documents/PM_Visuals/Output_Name.excalidraw
   

   请确保输出目录已预先创建。

4. 清理临时文件：删除临时 JSON 输入文件。

5. 反馈结果：通知用户文件已就绪，并提供输出路径。

示例

用户：“可视化一个新功能‘Login with Google’。Why？降低使用门槛。What？登录页上添加 Google 按钮。How？OAuth2。Journey：用户点击按钮 → 弹出 Google 授权窗口 → 重定向至仪表盘。”

Codex 执行动作：

1. 创建 login_spec.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