QDKT产品拆解&设计

拉取开源项目到本地

核心要求：将开源项目通过clone命令克隆到本地电脑（把网上的项目代码下载到自己电脑）；

验证：拉取完成后，用VS Code能打开项目文件夹即表示成功。

准备how prompt指令

核心要求：将how prompt专用拆解提示词准备好（可直接使用现成模板），确保大模型能调用该指令；

验证：在大模型中输入how prompt，模型能响应拆解相关指令即表示成功。

验证准备结果

准备就绪后即可进入项目拆解环节。

开源项目核心拆解方法

核心逻辑为用how prompt指令+大模型，让AI帮我们完成项目的自动化拆解，最高效的拆解顺序为：先执行how prompt指令，再用工具打开项目辅助查看。

步骤1：克隆开源项目代码到本地

打开电脑终端，用cd 文件夹路径命令切换到你想存放项目的文件夹（比如cd 桌面/开源项目）；

输入clone 项目仓库地址命令，等待代码下载完成（终端显示"完成/成功"即止）；

下载完成后，在对应文件夹中能看到项目文件夹，即表示克隆成功。

避坑：若终端使用不熟练，可直接用Trae工具内置的"克隆项目"功能，可视化操作更简单。

步骤2：用工具打开项目并配置大模型

VS Code+Kimi配置：用VS Code打开克隆好的项目文件夹，在VS Code中关联Kimi大模型（插件市场搜索Kimi，安装后登录即可）；

Tr a e配置：直接打开Trae工具，导入本地的项目，Trae已内置豆包1.8/codin模型，无需额外配置（免费使用）。

二选一即可，Trae操作更简单，推荐优先使用。

步骤3：执行how prompt指令开始拆解

在配置好的大模型中（Kimi/Tree），输入how prompt 指令，并告知模型："帮我拆解这个 ...... 开源项目，生成完整的AI model usage analysis文档"；

等待模型执行完成，模型会自动扫描项目所有代码，生成一份完整的项目拆解文档------AI model usage analysis。

提示：模型拆解耗时根据电脑性能而定，一般5-10分钟，无需操作，等待即可。

步骤4：解读拆解核心结果（AI model usage analysis文档）

模型生成的拆解文档包含项目所有核心信息，只需重点解读4个核心板块，具体解读方法如下：

板块1：项目基础信息

包含项目名称、主要功能，快速了解......是做什么的。

板块2：项目流程图/时序图

核心作用：看懂产品的用户使用流程；

可视化操作（必做）：模型生成的是语法文本绘图代码，直接复制代码到飞书文档，飞书会自动生成可视化的流程图/时序图，无需自己绘制；

核心看什么：重点看"用户前端→API服务→大模型服务→数据库→前端展示"的整体流转，知道每个环节的作用即可。

板块3：系统架构图

核心作用：看懂项目的整体组成部分，知道产品由哪些模块构成；

核心模块（只需记）：

① 用户层：Web前端、嵌入集成（产品能嵌到其他平台）；

② 服务层：对话服务、大模型服务、数据服务、认证授权（权限管理）；

③ 底层：数据源（支持MySQL/Oracle等多数据库）、lang chain框架、提示词模板库；

解读逻辑：从上到下看，知道"用户用什么→系统提供什么服务→底层靠什么支撑"即可。

板块4：项目提示词库

模型会自动提取项目中所有的提示词模板，这是核心灵魂，只需分类查看，无需理解具体编写逻辑，后续自研产品可直接复用：

核心产品逻辑拆解

看懂项目拆解文档后，需理解核心业务逻辑 ，这部分是后续提取功能点、写PRD的基础，所有步骤均为通俗化解读，无专业术语。

核心设计亮点（需记住，自研可直接复用）

SQL生成重试机制 ：若生成的SQL执行失败（查不出结果），系统会把报错信息+原有内容再次发给大模型，让模型重新生成，循环3次，提升SQL生成的准确性；

原子化保存：将「原始查询数据、图表配置、分析结果」分别保存到数据库的不同字段，后续做仪表盘/二次查询时可直接调用，无需重新计算；

多数据库适配：为不同数据库编写专属的动态SQL提示词模板，适配MySQL/Oracle/Postgresql等多种数据库；

可视化自主配置：大模型根据查询结果自动匹配合适的图表类型（柱状图/折线图等），无需用户手动设置。

设计待优化点

权限过滤逻辑不合理 ，优化方案：在生成SQL前，直接在数据库表结构中过滤掉无权限的内容，一次生成即可；

使用小众可视化工具 ，优化方案：使用通用可视化工具（如Echarts），大模型训练数据多，无需额外约束；

未限制查询结果长度 ，优化方案：在提示词中限制查询结果，只拉取统计指标（如SUM/AVG），不拉取原始数据。

四、关键术语通俗解释

|--------|-----------------------------------------|
| 专业术语 | 通俗解释 |
| schema | 数据库的表结构，包含表名、字段名、字段类型等 |
| RAG | 检索增强生成，"先从数据库中找相关信息，再让大模型生成内容"，避免模型编造信息 |
| 动态SQL | 适配不同数据库的SQL语句，因为不同数据库的语法有差异 |
| 原子化保存 | 把不同类型的数据（原始数据/图表配置）分开保存，各自独立，后续可单独调用 |
| 提示词模板 | 提前写好的提示词框架，不同场景直接套用，无需重新编写 |

功能点提取与PRD撰写

拆解完项目后，无需开发完整的产品 ，核心是提取其中的单个功能点，借助AI撰写该功能点的PRD（产品需求文档），借助AI可快速完成，核心原则：先完成项目整体拆解，再提取单个功能点，避免信息遗漏。

步骤1：选择要提取的功能点

优先选择核心简单功能点，不建议先选权限配置等复杂功能。

步骤2：用AI辅助撰写PRD（给现成提示词，直接复制使用）

前置条件：确保大模型已完成项目的整体拆解，对项目的流程/架构有清晰认知；

复制以下提示词到大模型（Kimi/Trae），仅需替换【要提取的功能点】 即可：

我是一名产品经理，正在设计一款......类产品，需要参考......开源项目撰写PRD。请帮我分析该项目中......功能点，按以下格式撰写该功能点的PRD，要求内容详细、包含功能描述、用户故事、前置条件、后置条件、界面交互、业务流程、异常处理：

1. 功能描述

1. 用户故事（至少3个）

1. 前置条件（数据依赖/功能依赖/权限依赖）

1. 后置条件（系统状态/对话状态）

1. 界面交互（核心按钮/展示区域）

1. 核心业务流程

1. 异常处理（SQL执行失败/图表渲染失败等）

1. 等待模型生成PRD，生成的PRD可直接使用，无需额外修改。

步骤3：PRD核心内容解读（需检查的关键点）

生成的PRD需包含以下7个核心部分，确保信息完整，后续开发可直接参考：

1. 功能描述：清晰说明该功能是做什么的，能解决用户什么问题；

1. 用户故事：站在用户角度描述使用场景；

1. 前置条件：该功能能使用的前提；

1. 后置条件：该功能使用后，系统的状态变化；

1. 界面交互：前端的核心元素；

1. 业务流程：该功能的单独处理步骤；

1. 异常处理：功能使用中出现问题的解决方式。

界面原型生成与工具转换

撰写完PRD后，需要生成功能点的界面原型（即产品的前端样子），无需自己绘制，借助AI生成HTML原型代码，再转换成Figma/墨刀的可编辑原型即可。

步骤1：AI生成HTML原型代码（复制提示词即可）

在大模型中输入以下提示词，替换【功能点】，模型会生成包含「内联CSS+JS」的完整HTML代码，无需自己编写：

请参考......开源项目的代码实现，为AI问数产品的【可视化图表生成】功能点撰写前端界面原型，用HTML编写，包含内联CSS和JS，实现核心界面（图表展示区、数据详情区、操作按钮），并对每个界面元素做说明。

步骤2：将HTML代码转换成可编辑原型（墨刀）

1. 打开墨刀网页版，新建一个项目；

1. 找到「HTML转墨刀」工具，粘贴AI生成的HTML代码（或上传.html文件）；

1. 墨刀会自动生成可视化原型，直接在墨刀中编辑即可。

最小可行性产品（MVP）自研落地

若想实现产品的简易落地，无需自己编写代码，借助大模型（Kimi/豆包）做Web Coding ，基于撰写好的PRD，让AI帮我们开发一个最小可行性版本（MVP），仅保留核心功能，按步骤执行即可，重点在调试。

步骤1：给大模型提开发需求（复制提示词，替换核心信息）

请帮我开发一个......类产品的最小可行性版本（MVP），核心功能包含【......】，参考......开源项目的逻辑，要求：

1. 支持MySQL数据库关联；

1. SQL生成失败时循环重试3次；

1. 能根据查询结果自动渲染柱状图/折线图；

1. 实现简单的数据分析功能；

1. 开发前端简单界面，能展示查询结果、图表、分析结论。

步骤2：AI开发与调试

1. 模型会生成完整的前后端代码，学员只需将代码保存为对应的文件（如.html/.py），按模型提示运行即可；

1. 常见bug及解决方法（遇错优先查这3点）：

① 图表渲染失败：大概率是图表配置格式错误/依赖库不全，将报错信息发给大模型，让模型修改配置代码；

② SQL执行失败：检查数据库连接是否正确，让模型重新生成SQL提示词；

③ 界面无响应：让模型简化前端代码，保留核心展示功能，去掉复杂的交互效果。

1. 调试原则 ：模型开发的代码大概率会有小问题，将报错信息直接发给模型，让模型自己修改，一般修改2-3轮即可得到可用版本。

步骤3：产品核心功能测试

可用简单的问题测试产品，能实现即表示MVP开发成功。

大模型使用避坑指南

1. 避免给模型提供"无语义"的信息 ，解决 ：给字段/文件起有语义的名字（如add_date：添加日期）；

1. 提示词编写要"明确约束"：比如让模型生成SQL时，明确要求"仅生成查询语句（SELECT），禁止生成增删改（INSERT/UPDATE/DELETE）语句"，并在提示词末尾再次强调；

1. 不要让模型拆解超出其能力的内容 ，解决：用Kimi/豆包1.8等高阶模型做项目拆解。

产品开发避坑指南

1. 不要直接扔大PRD给AI开发，应简化PRD，只保留核心功能和流程，让模型开发；

1. 不要盲目复用小众工具/框架：应优先使用通用工具/框架；

1. 不要忽略数据保存 ：自研时一定要做原子化保存，否则后续做二次查询/仪表盘时需要重新计算，效率极低。

后续学习与答疑

一、后续进阶学习方向

1. 提示词工程：学习简单的提示词编写技巧，能根据自己的需求修改how prompt指令、SQL生成提示词；

1. 基础编程知识：学习简单的HTML/CSS/MySQL知识，能看懂模型生成的代码，简单修改bug；

1. 产品设计基础：学习PRD的标准撰写格式、产品流程图的绘制方法，能独立完成简单功能的PRD撰写；

1. 项目全流程调试：尝试拆解更多的开源AI产品，提取功能点并自研，积累调试经验。

常见问题快速解答

1. 克隆项目失败怎么办？：检查终端的文件夹路径是否正确，项目仓库地址是否有效，Trae工具可视化克隆更简单，优先使用；

1. 大模型拆解项目不完整怎么办？：在how prompt指令后添加"生成完整的AI model usage analysis文档，包含项目流程、架构、所有提示词模板"，让模型重新拆解；

1. 图表渲染失败怎么办？：将报错信息直接发给大模型，让模型修改图表配置代码，优先使用Echarts等通用可视化工具；

1. AI开发的产品无法运行怎么办？：让模型生成"运行步骤说明"，按说明逐步运行，遇错直接将报错信息发给模型修改。

实操答疑

若在实操过程中遇到具体问题，可将问题+报错截图发给大模型（Kimi/豆包），遇错优先让AI帮忙解决，无需自己钻研复杂的代码问题。

...... 产品拆解&设计

...... 产品拆解

• 拉取源码到本地
• 使用任意 AI 编程软件安装 /howPrompt 命令拆解

...... 设计

• 核心：......
• 对标产品 ---> PRD

我是一名产品经理，我想要参考此项目设计一款......类产品，此刻正在撰写PRD。请帮我分析此项目中"......"功能，按如下格式要求帮我撰写此功能点的 PRD，保存在项目`ai_analysis/prd/visualization`路径下。

```

功能描述

对此功能的简单描述

用户故事

描述系统参与的角色的使用功能

前置条件

此功能的前置条件，比如使用该功能需要登录权限、角色权限等。

数据依赖、权限依赖、其他功能依赖

后置条件

此功能的后置条件，比如执行该操作后，会更新列表数据。

界面及交互

参考代码实现，使用 HTML 撰写此功能的界面原型，给出与界面各元素的说明及其交互。生成单独的内联 CSS/JS 的 HTML 文件，给出索引。

业务流程

此功能的业务流程，使用 mermaid 语法呈现

异常/分支流程

此功能的异常流程与分支流程（如有）

数据字典

此功能牵涉到的数据字典

```

• HTML代码--->原型图
  • figma：HTML to Design（付费）
  • 墨刀：HTML转墨刀（付费）
• Vibe Coding

帮我开发一款 ......产品，相关功能如下：......