我是从业8年的前端开发，小程序不用ai就能写，只是相对于网页稍微麻烦点，之前也写过。

直到上个月，我想用AI把这条路走通，从文档到设计到完成，今天把整个流程拆给你看。

第一步：用AI写需求文档

很多人用AI写代码，第一步就错了——直接让AI"帮我做一个小程序"。

这是不行的，它无法理解你的需求和事项，你得先把想法表达清楚，让它给你生成一个完完整整的需求文档，这样就随时可以找不同的ai工具测试和开发。

我："我想做一个xxx功能的小程序，帮我整理成一份标准需求文档，包括核心功能、页面结构、交互逻辑。"

AI给你吐出来的第一版，别急着用，先自己审核一下，然后让它查漏补缺

核心经验：需求文档写得好，后面AI写UI和代码的质量能明显提升，同时你对自己的需求一目了然，知道ai做的少了什么，又有什么可以完善的。

第二步：把需求文档丢给GPT，生成UI

需求文档有了，下一步是看到样子。

我把需求文档里"页面结构"和"交互逻辑"两部分，直接粘贴给GPT，让它生成UI设计。

我："根据这份需求文档，帮我生成小程序的每个页面UI设计，包括布局、组件、交互说明，如果你需要psd格式，gpt-image2也是可以输出的，在应用中选择ps插件就行。"

gpt-image2出来的效果，说实话，强的不行。

配色、布局、组件层级，它会自己帮你做决定——而你只需要纠偏，不需要从零开始设计。

有几个页面我觉得不太对，直接说：

我："首页的信息层级不对，用户最关心的应该是xxx，把它提到最前面。配色太冷，改温暖一点。"

来回改个两三版，UI就定下来了。

别指望AI第一版就完美。但AI能帮你把80分的底子打好，你只需要改那20分。

第三步：AI写代码，直接出小程序

UI定了，需求文档也有了，最后一步是让AI写代码。

这一步我用的是支持代码生成的AI工具（Claude/codebuddy都行，看个人），我本来想用codex，但是登录卡在手机号那一步了，找了个直播，说可以绕过，但是要20，有点离谱，别的买个虚拟号才几毛，最多5块，所以放弃了，后面发现codebuddy也行，就用的codebuddy写。

把需求文档 + UI说明一起丢给它：

我："根据这份需求文档和UI设计，帮我生成小程序的完整代码，包括页面结构、样式、基础交互逻辑。使用微信小程序原生框架。"

AI给你吐出来的是完整的文件结构——.wxml、.wxss、.js、app.json，全都有。

直接拷进微信开发者工具，能跑。

当然，第一次跑起来肯定有bug，不是白屏就是报错，正常，第一次就成功了那才吓人。

后续做法是：把报错信息直接复制/截图给AI，让它改。它改完你再跑，再报错再丢给它。来回几个回合，基本就能跑通了。

AI写代码的能力现在已经很强了，但你需要做的是当好"产品经理+测试"，而不是去学怎么写代码。你的时间应该花在"这个功能对不对"，而不是"这行代码怎么写"。

整个流程跑了多久？

写需求文档：约1小时（和AI来回三四轮）

生成UI：约30分钟（改了两版）

AI写代码+调试：约2小时

总计不到4小时，一个能跑的小程序demo出来了。

如果是传统流程，这至少是一个产品+一个设计+一个前端，开两三次会，排两三天工期才能出来的东西。

注：没有涉及后端服务开发，下面说

没上线，版本已发布，体验需要每次都审核，所以就不展示了

几个踩过的坑

1. 需求文档不能省略，跳过这步直接让AI写代码，出来的东西会让你怀疑人生。AI不是读心术，它只能根据你给的信息生成结果。

2. UI别追求完美 用AI生成的UI，做到"能看、能用"就停。过度纠结配色和间距，是在浪费时间，第一版粗糙，后续再优化就行。

3. 代码要让AI自己审核，AI写完代码后，让它自己先检查一遍再给你。这样能过滤掉70%的低级错误，省掉你后面来回调试的时间。

4. 抱持"验收心态"而不是"学习心态" 你的目标不是学会小程序开发，而是做出一个能用的小程序。遇到不懂的地方，问AI，让它解释，而不是自己啃文档。

AI工具降低的是门槛，不是标准。

小程序能不能做成，最终还是看你想不想得清楚：用户是谁？他们用什么？你做的东西解决了什么问题？

AI帮你把"想清楚"变成"做出来"，但"想清楚"这件事，还是得你自己来。

整个项目没有涉及服务开发，我是主前端的，而且开始只是测试，所以没有涉及任何服务功能，如果需要也可以继续让ai写。

网上说3天出一个小程序上线，我觉得这个说法有差异，像我这种啥功能都没有的纯前端项目，能上吗？能上。有用吗？没啥用，最基本的数据查询，都是前期写入静态数据，如果没有写入的就找不到，这肯定是不能正式对外的。又或者可以直接让AI上网找免费的api服务，但基本没有，都是按点击收费，或者包月，工具类的可能有，多找找。

如果真的要上线，还需要注册一个公众号，买服务器和备案，其中服务器可以选择海外，或者香港，相对便宜，备案就看小程序类别和功能的完善度了。

如果需要域名，可以去腾讯云，阿里云买，几十到上千都有，看域名的后缀，建议.cn会比较便宜，解析到这个域名，到时候你得小程序也可以网页打开了。

当然也有免费的域名，比如github提供的，uncloud提供的，看个人选择，教程就网上找，不多说。

。

（自测视频，跟实际UI还有点差异）

功能结构（文档生成，ai开发）

├── 首页

│   ├── 拍照识别（核心入口）

│   ├── 搜索药品

│   ├── 我的药品

│   ├── 用药提醒

│   └── 最近识别记录

├── 药品识别结果页

│   ├── 识别信息（名称、置信度）

│   ├── 基础信息卡片（适应症 / 用法用量 / 注意事项）

│   └── 操作区（重新拍照 / 保存到药品库 / 查看完整详情）

├── 药品详情页

│   ├── 药品包装图 + 名称

│   ├── 适应症（可展开）

│   ├── 用法用量（可展开）

│   ├── 注意事项（可展开）

│   ├── 不良反应（可展开）

│   ├── 药物相互作用（可展开）

│   └── 底部操作（返回列表 / 设置用药提醒）

├── 搜索模块

│   ├── 搜索页（搜索框 + 搜索历史 + 热门搜索）

│   └── 搜索结果列表页

├── 我的药品

│   ├── 分类筛选（全部 / OTC / 处方药）

│   ├── 药品列表

│   └── 新增药品（拍照识别 / 手动添加 + 识别历史）

├── 用药提醒

│   ├── 提醒列表

│   └── 新建/编辑提醒（选药 / 时间 / 频率 / 剂量 / 备注）

└── 关于我们

    ├── 产品介绍

    ├── 使用帮助

    ├── 隐私政策

    ├── 用户协议

    └── 版本信息

```