.jpg?table=collection&id=23f1bad7-8cd0-813d-945a-000b95a76c1e&t=23f1bad7-8cd0-813d-945a-000b95a76c1e)
开发项目前
需求文档
需求文档应不应该有技术细节？
很多人在写需求文档时，若直接让 Al开始生成，它往往会把前端和后端的技术实现混在一起。
但在公司里，产品经理并不会在需求文档里下沉到技术细节。比如，你到底用不用 Next.js，或者数据库选择MySQL 还是 MongoDB，这些都不属于 PRD（产品需求文档）的范畴。
我希望需求文档完全站在“产品视角”。把以下内容讲清楚就够了：产品概述、核心功能、各页面的功能点、UI 布局、交互逻辑，以及产品的差异化亮点。只要这些信息清晰明确，研发同学就能在此基础上各自制定技术方案。
需求文档模版：
使用案例：
使用任何带有Thinking能力的顶级大模型完成这一步。我目前比较推荐的是Claude Opus4.1 和ChatGPT 5-Thinking
原型图
网页端：通过V0
H5/小程序/IOS：
- 使用Claude Code生成HTML版本的原型图
- 使用一个带有UI组件的基础模板（例如TDesign+小程序模板）
原型图生成完成后，请对照你的需求文档逐项核对与修订。优化原型图的同时完善学习需求档，反过来也要依据需求文档调整原型图——这是一个双向迭代的过程。
这一阶段尽量做到精细化处理：把每个页面在“按钮被点击之后会发生什么”都写清楚；涉及跳转的页面，补全具体的跳转逻辑与条件；包含购买后的充值（或扣减）流程，把完整的业务路径与分支也在需求文档中补充完整。
如果你在需求文档 + 原型图上用了足够的功夫，那么后面编码就会轻松很多，能够避免写出屎山代码出来。因为很多时候屎山代码是因为需求描述、前端数据状态和数据库字段频繁变更导致的。
技术准备
原型图 + 需求文档打磨好了，接下来我们要实现的技术相关的准备：
- 技术整体架构
- 技术选项
- 技术难点调研
- 一堆琐事（前期准备工作）
技术整体架构
首先你需要思考的是，技术的一个整体的架构是如何的？需要哪些技术？
是否要进行数据表结构设计？
如果是专业程序的话，一般会在前后端的技术架构选行完之后进行数据库表结构的设计。
但是对于非专业程序员来说，可以只进行技术选型。把数据表结构设计这一步放到后面后面，把前端设计完成之后，再用前端来倒推后端。
技术难点调研 + 文档准备
接下来需要对产品当中你不太熟悉的技术点，阅读对应的文档，在大脑中有一个基础概念，然后去准备相应的文档。
- 微信支付文档：开发前必读_产品文档（V2）|微信支付商户文档中心
- 小程序订阅消息：小程序订阅消息 | 微信开放文档
- 腾讯云小程序COS上传：对象存储 快速入门-SDK 文档-文档中心-腾讯云
- 小程序手机号登陆：获取手机号 | 微信开放文档
对于国内云厂商的相关文档，你最好去看一下 Context7 和 Riff 这样的 MCP 工具到底有没有对应的一个文档。如果没有的话，最好是将核心文档复制下来，保存为markdown的格式，放到之后的项目中。
对了，还有两个经常项目中可能使用到，其实比较难，会被新手忽略的功能需求，分别是视频播放 + 富文本编辑。
我推荐的工具：
- 视频播放：西瓜播放器
一堆琐事
当然，除了技术选型和难点攻克之外，你还需要处理一整套与上线相关的合规与基础设施事项。尤其是做国内项目？
具体来说，包括但不限于：微信公众平台申请小程序、小程序备案、域名注册与 ICP 备案、购买域名、购买服务器等。这些都是一堆要落地的事情，需要提前规划时间与流程，否则会直接影响上线进度。
总结
总结一下，在开发项目中，需求文档和原型图是最重要的，并且这两个是相辅相成的。你写完需求文档后，能够帮助你优化原型图。在优化原型图的过程中，能够帮你理清思路，然后去优化需求文档。
这两个完成之后，就要进行技术选型、技术调研和对应文档阅读准备工作，以及相应的一些琐事的处理。
开发项目中
前端开发
使用UI框架
接下来进入到前端开发。其实我们现在原型图有了，这能够让AI非常方便地通过原型图还原我们的设计，从而进行前端开发。
在这个时候，我建议先在前端的代码中优先引入对应的前端组件，这样开发的效率会高很多。对于网页端，我推荐使用 TailwindCSS 加上 Shadcn/ui 的方式。如果你是开发后台的话，建议使用 Ant-design。
至于小程序开发，如果你是原生的小程序开发，没有使用像是 uni 或者 taro 这样的编译的方式，我推荐使用 vant-weapp 和 Tdesign 这两个。
对于IOS开发，如果你选择Expo框架进行开发，可以选择 React Native Elements 以及 React Native Paper.
使用Mock JSON数据
在项目的实际开发中，有一点需要注意：前端的数据最好抽离出 JSON 的数据格式，而不是写死在HTML或者WMXL代码当中。
你可以输入下面的提示词来让AI将对应的一些数据抽离出来。这对之后进行数据库设计很有用。在设计数据库时，可以说：请参考mock/ 目录的JSON数据来设计数据库。
后端开发
永远先开发登陆功能
在开发后端的时候，永远记得先开发登录功能。因为登录后用户id基本上和所有的功能都有关系，所以永远记住先开发登录注册功能。
基础技术测试（重要！）
把技术和业务先解耦合，用demo页面先将技术跑通。接下来，你可以尝试增加一些不是主流程的页面，放在
/demos/ 的路径下。这些页面可以用来跑通你的一些基础技术栈。比方说，我们刚才提到的微信支付、文件上传功功能、 AI 生成的功能也是个难点。包括数据库部分，你可以做一个非常简单的 CRUD的TODO应用，以跑通对应的数据库逻辑。
生成主CLAUDE.md
完成登录以及基础的技术开发之后，比如说引入了数据库连接、COS对象存储 + 图片上传、微信支付等，这个时候就可以使用 /init 来生成CLAUDE.md 的文件了。这个文件会生成项目架构、编码规范、常用工作流程。
AI自动生成完成后，可以添加对应的自定义的一些规则：
单个功能点开发 + 测试(不要抱有妄念)
接下来就是按功能逐项开发并完成测试。当然，这部分有很多 Claude Code 的使用技巧，我们会在后续课程中以专题形式讲解。
但核心仍然是“一个功能一个功能”地开发。本项目为例，首页的卡片设置和购买、场地预约、课程预约，这些都是一个一个的功能，需要一个又一个的开发并进行测试.
我一般会让AI生成一份对应的
[功能名]-PLAN.md的文档，用于让Claude Code来规划开发中我需要使用的提示词。来一步一步的完成开发需求。以首页的VIP卡购买为例，我会编写这样的一个提示词
这是AI最终生成的VIP卡购买-PLAN.md文件
3.3 使用Git
每当我开发完成一个功能，都需要进行Git保存! 这个我已经在课程里面强调了很多次了，但是怎么强调都不过分。
4. 开发完成项目
最后，在项目开发完业务逻辑之后，有三个点需要注意，但又经常被许多新手给忽略的：
- 区分生产环境和测试环境
- MetaData设置
- 数据埋点
4.1 环境区分
4.1.1 为什么要区分环境？
有的朋友不太明白环境区分的重要性。我们想一下，如果我的这个网球项目上线了，那么在进行真实的场地测试预约时，我是不是会直接抢占用户的场地，那这个会导致我的生意受损。
而且，如果你在开发和测试阶段直接连接的是用户的生产环境的一个数据库，非常容易污染真实的数据库环境。比方说，你可能一不小心删除了一个用户，一不小心去修改了用户的数据，这都是非常可怕的。
所以，咱们在开发和测试阶段一定是不能使用生产环境的。当然，我们项目没上线之前，这个都没关系。
4.1.2 如何区分环境？
1. 区分分支
区分环境的第一步是区分分子。不同的分子对应不同的功能。例如：
- 开发环境对应
dev分支
- 测试环境对应
test分支
- 生产环境对应
main分支。
2. 区分环境变量
那这个时候，在vercel或者zeabur上部署：
- 测试环境：对应的是
test分支。
- 生产环境：对应的就是
main分支
2. 区分环境变量
接下来，不同的分支对应的是不同的环境变量。比如说，我们开发测试环境的数据库，使用的是一个测试的数据库。测试环境请求的一个后端地址，是测试的域名的后端地址。
3. 配置不同环境的域名
同时，不同环境有不同的域名。比方说，前后端服务的域名是不同的；而不同环境的前端请求的后端域名在这个时候也是不同的。我们需要去配置不同的一个域名。
同时还有一个技巧，如果是你测试环境需要公网访问的话，测试的域名可以尽量起得复杂一点。避免线上用户猜测到。例如：
- 测试域名：
dkfljadlfkjn-test.yihui.com
- 线上域名：
yihui.com
4. 掌握正确流程
4.2 MetaData
还有一个细节是，很多朋友可能经常在上线前后忽视的，就是需要去设置 metadata。metadata包含基本的网站信息，这些信息是Google SEO的重要依据。
还有一个被新手忽略的是 OG 图的设置。在 Facebook 或者推特上分享的时候，你的链接会被解析出图片，这个就是 OG 图，如下所示：
这个OG图，对于在社交媒体上的宣传十分有用。需要用心制作。可以使用 ImageSrc 制作。
4.3 数据埋点
最后是数据埋点，不论是网页端、小程序、iOS、Android应用。对于一个商业化的应用，数据埋点+统计工具的加入都是非常重要的。
4.3.1 网页数据埋点 + 统计工具
- Google Analytics
- 神策数据
- 友盟-H5
4.3.2 小程序数据埋点 + 统计工具
- 腾讯广告SDK
- 神策数据
- 友盟-小程序
- 作者:蒋云何
- 链接:https://yunhe.dev/article/26f1bad7-8cd0-80ef-b176-f7ae6490f22e
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
.png?table=block&id=3151bad7-8cd0-80b2-8ac2-df21c5f21755&t=3151bad7-8cd0-80b2-8ac2-df21c5f21755)
