PM可视化技能

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

功能特性

• 智能布局: 自动排列“原因、内容、方式”三栏，并为“用户旅程”创建水平流向。
• 颜色编码: 通过颜色进行视觉区分：问题（原因 - 黄色）、解决方案（内容 - 绿色）、实施（方式 - 蓝色）以及流程（旅程 - 红色/粉色）。
• 分组元素: 文本与容器正确绑定，确保它们可以一起移动。

工作流程

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

   

   • 标题: 功能或产品名称。
   • 原因: 问题陈述、业务目标，或“我们为什么要构建这个？”。
   • 内容: 解决方案需求、功能特性，或“它是什么？”。
   • 方式技术实现细节、API策略或"我们将如何构建它？"。
   • 旅程：用户旅程或流程的顺序步骤列表。

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. 报告：通知用户文件已在输出路径准备就绪。

示例

用户："可视化一个新的'使用Google登录'功能。为什么？减少摩擦。什么？登录页面上的Google按钮。如何？OAuth2。旅程：用户点击按钮 -> 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