为了能够更好的利用 AI 帮我写 App，这些天，我将自己利用 AI 开发开发的办法总结，沉淀为了一套方法论，按照这个方法来，AI 开发的效率最低水平可以达到 5 倍，最快可以提升 10+倍。笔者使用这套方法，3 天上线一个多达 40 款工具的小程序。5 天上线一个“妙鸭相机”，5 天上线一个球场预定管理系统，这些系统，任意一个拿出来，少说也是以月为单位来计算的。我们在开发的过程中，基于方法论，积累的一定量的配方，有了这些配方，后面无论是应对移动端应用、web 项目，小程序，还是 h5应用，我们都可以做到 5-10 倍的效率提升。
那么，为什么有很多人说，AI 开发的引入，反而还因为调试、调整、等等因素反而效率有下降呢？其实这里面是有一些技巧在的，并不是说你拿到屠龙宝刀就可以为所欲为，你其实还需要有驾驭屠龙宝刀的秘籍才可以。
你是核心引擎，AI 是助手而已，不要搞错了角色
一部分人认为 AI 开发就是我让他 AI 做一个微信，他就乖乖的给我做出来了，实际情况是，这么样去玩，永远是不可能完成一个微信 App，那么，究竟怎么玩呢？其实就是需要将需求明确的告诉他，而不是一句话需求，让他做个什么什么。所以，最好的方式，我应该是准备一个 markdown 文档给到 AI，告诉他：
我的需求是什么，这里我应该怎么描述需求呢？我打算使用什么样的架构来实现，是纯前端、前后端分离、还是 next.js 这样的全栈？我的模块是怎么划分的？我的分层是怎么做的？...还有很多的问题，这些都是需要先明确的。
当然上面所提到的是项目的整个顶层的设计，有了这个相当于 AI 就知道了我的整个对这个需求的设计思想。
然后，对于我需求中的具体的实现，我想也应该有对应的 markdown 文档来知道，比如：
- • 前端方面：
-
- • 一个页面的实现的 markdown 对应文档
- • 一个组件的实现的对应的 markdown 文档
- • 后端方面：
-
- • 数据库的设计是怎么样的
- • API 接口开发和配套的自动化测试是怎么样的
有了这样的一套自顶向下的顶层设计，和一套自底向上的实现规范，这样才可以更加高效的利用 AI 帮助我们完成软件开发。
AI高效开发的钥匙：自顶向下的设计+自底向上的实现
没错，说到这里，可能大家已经稍微有点感觉了，AI 高效开发的路子实际上就是要让 AI 知道你知道的，让 AI 知道的全部的想法，但是 AI 毕竟是有 context 的限制的，怎么办？？这就是我的方法论。
对项目顶层设计+ 和对细节自底向上的实现。那么，我们如何来写这样的文档呢。
1. 项目顶层设计文档
1.1 需求描述
在开始开发之前，准备一个详细的需求描述文档，明确列出以下内容：
• 项目概述：简单介绍应用的目的和核心功能。
• 用户需求：定义主要用户角色以及每个角色的核心需求。
• 主要功能：列出关键功能模块，并简要说明每个模块的功能及预期行为。
• 技术需求：确定项目的技术需求，包括性能、安全性、兼容性、可维护性等方面的要求。
1.2 技术架构说明
在需求分析的基础上，描述所选择的技术架构，并说明选择的原因和适用场景。可以包括：
• 架构类型：如纯前端、前后端分离、或全栈框架（如 Next.js）。
• 技术栈选择：前端、后端、数据库、部署等技术栈的选择。
• 架构设计图：简单绘制项目的架构设计图，标明各模块及其关系。
• 数据流动：描述数据在前后端之间的流转方式、传递协议等。
1.3 模块划分
在项目架构的基础上，对项目模块进行划分，为每个模块创建单独的文档。确保各模块在文档中具有清晰的职责和边界。例如：
• 用户模块：注册、登录、用户信息管理
• 内容管理模块：内容创建、更新、删除、查询等
• 消息通知模块：消息推送、邮件通知、短信提醒等
1.4 分层结构
将系统划分为不同的层次，并在文档中列出每一层的职责：
• 表示层：用户交互的前端界面
• 业务逻辑层：处理业务逻辑的核心代码
• 数据访问层：负责与数据库进行交互
• 服务层：整合不同服务的逻辑（如果有）
2. 具体实现文档
2.1 前端实现
页面实现文档
为每一个页面准备独立的文档，包含以下内容：
• 页面概述：说明页面的主要功能及使用场景。
• UI 设计：简单的布局图或说明。
• 页面逻辑：页面中的业务逻辑，例如如何获取数据、展示和用户交互。
• 数据接口：页面需要从后端获取的数据接口，以及数据的格式。
组件实现文档
对项目中的每一个独立组件，准备一个文档说明：
• 组件功能：简要描述组件的用途。
• 属性与事件：列出组件的输入（props）、输出（事件）及其类型。
• 使用场景：示例说明组件在页面中的应用方式。
2.2 后端实现
数据库设计
准备数据库设计文档，包含以下内容：
• 数据库结构图：标注表结构、字段、主键、外键等信息。
• 表描述：每个表的用途、字段类型及约束条件等。
• 索引设计：对需要优化查询的字段进行索引设计，解释选择的理由。
API 接口开发文档
为每一个 API 接口准备独立的文档，包含以下内容：
• 接口功能：描述接口的作用。
• 请求方法和路径：如 GET、POST，以及对应的 URL。
• 请求参数：列出所有请求参数及其数据类型。
• 响应数据：定义返回数据的格式及字段。
• 错误处理：列出可能的错误代码和对应的错误信息。
自动化测试
为后端 API 接口的自动化测试准备文档，包括：
• 测试用例：列出测试的具体用例、期望输入和输出。
• 测试工具：描述用于测试的工具和框架。
• 测试结果：记录测试过程中的问题及解决方案。
3. 使用 AI 工具协作的建议
在完成上述文档后，可以按以下方式来与 AI 工具（如 Claude、ChatGPT 等）协作：
1. 需求分析：将“项目顶层设计文档”交给 AI，明确说明项目的总体需求和架构，帮助 AI 理解项目的大框架。
2. 模块开发：在每个模块或子模块的开发阶段，向 AI 提供对应的模块文档和分层说明。
3. 代码编写与优化：对前端和后端的各类组件或接口，逐步将相应实现文档提供给 AI，请求代码示例、优化建议或特定的实现方式。
4. 自动化测试：将测试文档提供给 AI，要求其生成测试用例代码或帮助优化测试流程。
5. 代码评审和改进：完成初步代码开发后，利用 AI 对代码进行审查，找出可能的优化点。
这样一套从顶层设计到逐步实现的指南，能帮助你更加有序和高效地利用 AI 工具参与到整个开发流程中。
一个球场预定系统的案例
球场预定管理系统 - 整体设计
1.1 项目概述
球场预定管理系统，支持学员、教练和管理员三种角色。学员和教练可以在线预定球场，管理员负责管理场地和预定。
1.2 用户需求
- • 学员：查看空闲时间，预定球场，取消预定。
- • 教练：预定球场用于授课，查看授课记录。
- • 管理员：管理球场资源，查看所有预定记录，解决冲突预定。
1.3 主要功能
- • 用户注册与登录
- • 球场管理
- • 球场预定
- • 预定记录管理
2. 系统模块划分
graph TD
User[用户模块]
Court[球场模块]
Reservation[预定模块]
Admin[管理员模块]
User --> Reservation
Court --> Reservation
Admin --> Court
Admin --> Reservation
-
- 系统架构设计
graph LR
UI[前端表示层]
BL[业务逻辑层]
DAL[数据访问层]
DB[(数据库)]
UI --> BL
BL --> DAL
DAL --> DB
-
- 分层结构说明 • 前端表示层：负责用户界面交互，包括页面和组件。 • 业务逻辑层：处理预定和用户权限逻辑。 • 数据访问层：与数据库交互。
自底向上的实现文档
前端实现部分示例
功能：预定页面
1. 功能描述
用户可以在预定页面查看球场的可用时间段，选择时间并提交预定。
2. 数据接口设计
- • 接口：
GET /courts/:courtId/availability -
- • 请求参数：
courtId- 球场 ID - • 响应数据：返回球场的空闲时间段数组。
- • 请求参数：
- • 接口：
POST /reservations -
- • 请求参数：
courtId、startTime、endTime - • 响应数据：预定成功后返回预定详情。
- • 请求参数：
3. 数据结构
- • 预定数据：
{ courtId: string, startTime: Date, endTime: Date }
4. 依赖的可复用模块
- • 全局状态：使用 zustand 存储用户信息、身份状态，在@/stores 下面。
- • 本地存储： localforage存储用户的 token 用于自动登录。
后端实现部分示例
功能：预定接口
1. 功能描述
后端预定接口负责接收预定请求，检查时间段冲突，返回预定结果。
2. API 设计
- • POST /reservations
-
- • 请求参数：
-
- •
courtId- 球场 ID - •
startTime- 预定开始时间 - •
endTime- 预定结束时间
- •
- • 响应数据：返回预定详情或错误信息（如时间冲突）
3. 自动化测试
使用 Mocha 和 Chai 编写测试，确保接口功能：
- • 成功预定：给定合法的
courtId和时间段，返回预定详情。 - • 预定冲突：给定已被占用的时间段，返回冲突错误。
- • 未授权请求：用户未登录，返回权限错误。
4. 依赖的可复用模块
- • 数据库连接模块：用于管理 MongoDB 连接。
- • 权限验证模块：用于验证用户身份和权限，防止未授权访问。
这样，整体设计文档和实现细则文档分别独立，简洁地描述了需求、模块划分、架构设计等内容，利用 mermaid 图可视化结构。而实现文档聚焦于具体模块的功能、数据接口设计和依赖模块，使实现步骤清晰易懂。
我们在开发的过程中，基于方法论，积累的一定量的配方，有了这些配方，后面无论是应对移动端应用、web 项目，小程序，还是 h5应用，我们都可以做到 5-10 倍的效率提升。关键是思路要清晰,步骤要细致,这样开发起来才不会乱。
希望我这套经验能帮到你们。要是你们也有啥好方法或者说想深入了解学习我们的方法,欢迎私信交流!
