名称： pm-visualizer
描述： 将产品经理的思考（Why、What、How、用户旅程）可视化成一个可编辑的 Excalidraw 图表。当用户要求“可视化需求”、“创建产品经理图表”或“梳理产品思路”时使用。

PM 可视化工具技能

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

功能特性

• 智能布局：自动将“Why、What、How”分栏排列，并为“用户旅程”创建水平流程图。
• 颜色编码：通过颜色进行视觉区分：问题（Why - 黄色）、解决方案（What - 绿色）、实施（How - 蓝色）和流程（Journey - 红色/粉色）。
• 元素分组：文本与容器正确绑定，移动时保持整体性。

工作流程

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

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

2. 准备数据：创建一个具有以下结构的 JSON 文件（例如 temp_visual_data.json）：
   json { "title": "功能名称", "why": ["原因 1", "原因 2"], "what": ["功能 1", "功能 2"], "how": ["技术 1", "技术 2"], "journey": ["步骤 1", "步骤 2", "步骤 3"] }

3. 生成图表：运行 Python 脚本生成 .excalidraw 文件。
   bash python3 skills/pm-visualizer/scripts/layout_diagram.py temp_visual_data.json ~/Downloads/Documents/PM_Visuals/输出名称.excalidraw
   请确保输出目录已存在。

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

5. 报告：通知用户文件已在输出路径准备就绪。

示例

用户： “可视化一个新的‘使用 Google 登录’功能。Why？减少摩擦。What？登录页上的 Google 按钮。How？OAuth2。Journey：用户点击按钮 -> Google 弹窗 -> 重定向到仪表板。”

Codex 操作：
1. 创建 login_spec.json：
json { "title": "使用 Google 登录", "why": ["减少摩擦", "提高转化率"], "what": ["Google 登录按钮", "个人资料同步"], "how": ["OAuth 2.0 流程", "Google Identity SDK"], "journey": ["用户点击‘使用 Google 登录’", "出现 Google 权限弹窗", "用户批准访问", "系统验证令牌", "用户重定向到仪表板"] }
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