一个基于AI对话的产品战略分析工具，帮助用户快速生成产品画布、SWOT、分析图表等，支持产品规划和决策。
- 产品画布模式：生成和展示产品画布图表
- SWOT分析模式：生成和展示SWOT分析图表
- ECharts图表模式：生成数据可视化图表
- Mermaid图表模式：生成流程图和关系图
- 落地页生成模式：基于提示词流式生成完整 HTML 落地页并实时预览
- 智能对话：基于自然语言的产品分析请求
- 消息发送：用户输入文本请求，支持Enter键快捷发送
- 对话历史：保存并展示用户与AI的完整对话记录
- 消息操作：支持退回、重新生成、删除消息
- SVG图表生成：根据用户请求生成相应的SVG图表
- 图表占位符：对话中显示可点击的图表预览块
- 图表渲染：点击占位符在右侧面板完整展示SVG图表
- 图表存储：本地存储生成的SVG内容，支持历史查看
- 缩放控制：支持图表的放大、缩小和重置
- SVG下载：将当前图表导出为SVG文件
- 图片导出：将当前图表导出为PNG图片格式
- 剪贴板复制：复制图表图片到剪贴板
- 代码查看：查看当前图表的SVG源代码
- 页面预览：对落地页生成结果进行 98% 视窗尺寸的模态预览或一键新窗口打开
- 现代浏览器（支持ES6+）
下载下来用GoLive启动下；或者直接打开index.html
# 构建并运行容器 docker-compose up -d # 在浏览器中访问 open http://localhost:3000docker-compose.yml
version: '3.8' services: product-canvas: image: 935732994/pmtools ports: - "3000:3000" restart: unless-stopped- 点击右上角的"API配置"按钮
- 填写以下信息：
- API URL：您的AI服务API地址
- API Key：您的API密钥
- 模型：选择使用的AI模型（如gpt-4）
- 点击"保存配置"完成设置
- 点击"测试连接"验证配置，先保存再测试
有些API会出现 失败情况
连接测试失败: NetworkError when attempting to fetch resource.这时需要找不失败的💨
产品画布/ ├── index.html # 主页面 ├── css/ │ └── style.css # 自定义样式 ├── js/ │ ├── app.js # 应用入口 │ ├── apiclient.js # API客户端 │ ├── utils.js # 工具函数 │ ├── core/ # 核心模块 │ │ ├── app-shell.js # 应用外壳 │ │ ├── module-registry.js # 模块注册表 │ │ └── module-runtime.js # 模块运行时 │ ├── modules/ # 功能模块 │ │ ├── product-canvas.js # 产品画布模块 │ │ ├── swot.js # SWOT分析模块 │ │ ├── echarts.js # ECharts图表模块 │ │ ├── mermaid.js # Mermaid图表模块 │ │ └── onepage.js # 落地页生成模块 │ ├── services/ # 服务层 │ │ ├── conversation-service.js # 对话服务 │ │ └── storage-service.js # 存储服务 │ └── renderers/ # 渲染器 ├── libs/ # 第三方库 │ ├── css/ # 样式库 │ ├── fonts/ # 字体文件 │ └── js/ # JavaScript库 ├── prompts/ # AI提示词 │ ├── canvas-prompt.txt # 产品画布提示词 │ ├── swot-prompt.txt # SWOT分析提示词 │ ├── echarts-prompt.txt # ECharts提示词 │ ├── mermaid-prompt.txt # Mermaid提示词 │ └── onepage-prompt.txt # 落地页提示词 ├── 设计/ # 设计文件 │ └── 原型.html # 设计原型 ├── 功能概述.md # 功能说明文档 ├── docker-compose.yml # Docker编排文件 ├── Dockerfile # Docker镜像构建文件 └── README.md # 项目说明文档 - 选择模式：点击顶部的模式按钮选择所需的分析类型
- 输入需求：在左侧对话框中描述您的产品或分析需求
- 生成图表：AI将根据您的需求生成相应的分析图表
- 查看图表 / 页面：点击对话中的占位符在右侧查看完整内容
- 导出结果：使用底部工具栏导出、复制或全屏预览
产品画布模式帮助您快速构建产品战略框架：
示例输入： "请为我的社区废品回收智能终端系统生成一个产品画布" 生成的画布包含：
- 问题分析
- 客户群体
- 独特卖点
- 解决方案
- 渠道策略
- 收入分析
- 成本分析
- 关键指标
- 门槛优势
SWOT分析模式帮助您评估项目的优势、劣势、机会和威胁：
示例输入： "请对我的在线教育平台进行SWOT分析" 生成的分析包含：
- 优势(Strengths)：内部有利因素
- 劣势(Weaknesses)：内部不利因素
- 机会(Opportunities)：外部有利因素
- 威胁(Threats)：外部不利因素
- 退回：回退到指定消息，删除该消息之后的所有对话
- 重新生成：针对最后一条AI消息重新请求生成内容
- 删除：删除特定消息及其关联的图表
- 缩放控制：使用工具栏按钮调整图表大小
- 全屏查看：在右侧面板获得更好的查看体验
- 多格式导出：支持SVG、PNG等多种导出格式
- 落地页预览：使用“预览落地页”按钮打开 98% 视窗大小的模态窗口，可再一键在新标签页打开完整 HTML
- 前端框架：原生JavaScript (ES6+)
- 样式框架：Tailwind CSS
- 图标库：Iconify
- 图表库：ECharts, Mermaid
- Markdown解析：Marked.js
- 字体：Inter Font
- 🚀 增加了落地页模块
- ✨ 初始版本发布
⭐ 如果这个项目对您有帮助，请给我们一个星标！