AI编程实战：37分钟开发同城跑腿小程序全流程

AI编程让复杂项目触手可及

一个包含用户端、骑手端、后台管理系统的同城跑腿平台，传统开发可能需要一个团队数周甚至数月的工作量。而现在，借助AI编程工具，一个人在37分钟内就能完成从UI设计到前后端开发的全流程。

B站UP主"芝麻侃侃"发布了一期极为详细的实战教程，以同城跑腿系统为例，演示了如何利用AI工具链（Stitch + Trae/Cursor + UniApp + UniCloud）从零构建一个可跨平台发布的完整应用。本文将梳理其核心开发流程与关键技术要点。

开发流程总览：五步构建完整系统

整个项目的开发流程分为五个清晰的阶段：

1. UI设计：使用Google推出的AI设计工具Stitch一键生成UI草稿和可交互原型图
2. 项目初始化：安装HBuilder X、Trae、微信小程序开发者工具，完成云端环境配置
3. 前端开发：利用AI编程工具将原型图1:1转化为可交互的前端页面
4. 后端开发：通过AI开发数据库和云函数，实现用户端与骑手端的数据联动
5. 打包发布：基于UniApp跨平台框架，一套代码发布至微信、抖音小程序及iOS、Android APP

这套流程的核心理念是：让AI承担绝大部分编码工作，开发者专注于需求定义和流程把控。

技术栈中的关键角色：UniApp与UniCloud

UniApp是DCloud公司推出的基于Vue.js的跨平台开发框架，其核心理念是"一次开发，多端发布"。它通过条件编译和运行时适配层，将同一套Vue代码编译为微信/支付宝/抖音等各平台小程序、H5网页以及iOS/Android原生APP。UniApp之所以能实现这一点，是因为它在底层抽象了各平台的渲染引擎和API差异——在小程序端使用各平台原生渲染，在APP端则通过自研的nvue引擎或WebView进行渲染。与React Native、Flutter等跨平台方案相比，UniApp的独特优势在于对中国本土小程序生态的深度支持，这使其成为国内开发者构建多端应用的首选框架之一。

UniCloud则是DCloud提供的Serverless云开发平台，开发者无需自行搭建和维护服务器，即可使用云数据库、云函数、云存储等后端能力。Serverless（无服务器架构）并非没有服务器，而是将服务器的运维、扩缩容等工作完全交给云服务商，开发者只需编写业务逻辑代码。UniCloud目前支持阿里云和腾讯云两个底层服务商，提供了JQL（一种类SQL的JSON查询语言）来简化数据库操作，还支持DB Schema（数据库表结构定义）来实现数据校验和权限控制。对于个人开发者和小团队而言，UniCloud的免费额度通常足以支撑早期产品验证阶段的需求。

用Stitch完成AI驱动的UI设计

为什么选择Stitch？

相比传统的Figma，Google推出的Stitch在AI辅助设计方面有几个显著优势：

• 无限次调用Gemini大模型生成UI草稿
• 支持提示词一键生成设计稿，并可模块化编辑
• 可将UI草稿一键转化为可交互原型图
• 直接导出HTML/CSS代码，方便后续迁移到开发环境

Stitch是Google在2025年推出的AI驱动设计工具，底层集成了Gemini大模型的多模态能力。与传统设计工具Figma需要设计师手动拖拽组件不同，Stitch采用"提示词驱动设计"的范式——用户用自然语言描述界面需求，AI自动生成符合Material Design等设计规范的UI布局。Stitch的技术核心在于将大语言模型的文本理解能力与UI组件库的结构化知识相结合，使其不仅能生成静态视觉稿，还能理解页面间的导航逻辑并生成可交互原型。其导出HTML/CSS代码的能力，本质上是将设计稿的视觉信息转化为前端可解析的结构化描述，为后续AI编程工具的代码生成提供了高质量的输入素材。

提示词设计的关键技巧

在Stitch中，提示词的质量直接决定了UI生成效果。教程中给出了一个值得参考的模板结构：

• 任务定义：明确开发目标（如"开发同城跑腿小程序用户端的UI和UX"）
• 结构约束：定义底部导航栏按钮数量和对应的根页面（预约、订单、我的）
• 二级页面：列出所有需要的子页面（下单页、订单详情页、未登录页等）
• 语言和风格：指定界面语言为中文，主题颜色以蓝白色为主

模型选择方面，推荐使用Gemini 3 Flash，兼顾生成速度和设计效果。生成根页面后，还需要通过追加提示词来开发二级页面，最终全选所有草稿图一键生成可交互的原型图。

项目初始化与环境配置

三个必备开发工具

• HBuilder X：UniApp官方IDE，负责项目创建、云服务管理和打包发布
• Trae（或Cursor/CodeBuddy）：AI编程工具，负责代码生成和调试
• 微信小程序开发者工具：用于小程序预览和真机调试

Trae是字节跳动推出的AI编程IDE，而Cursor则是由Anysphere公司开发的AI代码编辑器，两者都属于新一代"AI原生"开发工具。与传统IDE中AI仅作为代码补全插件不同，这类工具将大语言模型深度集成到开发流程中——支持通过自然语言对话生成完整代码文件、理解整个项目的上下文进行跨文件修改、以及根据错误日志自动修复Bug。它们通常基于VS Code的开源内核构建，保留了开发者熟悉的编辑器体验，同时在侧边栏或内联位置嵌入AI对话窗口。Cursor主要依赖Claude和GPT系列模型，Trae则集成了豆包大模型，两者在中文开发场景和国内网络环境下各有优劣。

关键配置步骤

在HBuilder X中分别创建用户端和骑手端两个项目，均选择UniApp空白模板并启用UniCloud（阿里云）。核心要点包括：

• 两个端共用同一个云服务空间（如"Uber-Demo"），这是后续实现数据联动的基础
• 分别在微信公众平台注册两个小程序，获取各自的AppID并配置到项目中
• 通过服务号快速注册可以复用资质，省去重复认证的麻烦

AI前端开发——原型图到代码的1:1复刻

这一步是整个流程中最能体现AI编程威力的环节。将Stitch导出的原型图代码拖入AI编程工具，配合精心编写的提示词，即可实现前端页面的自动生成。

提示词编写要点

参考这个原型图1:1复刻开发小程序的前端页面
要求：
1. 底部导航栏有三个按钮，对应三个根页面
2. 二级页面包括：下单页、订单详情页、未登录页等
3. 页面的UI设计要与原型图完全一致

同时需要将项目文件夹拖入提示词上下文，让AI充分了解项目结构。

一个重要的实践经验：前端页面很难一次提示词就完美复刻，通常需要多轮对话反复调整细节。教程作者也坦言自己是"经过多轮对话调整才开发完成的"。建议将用户端和骑手端分为不同的AI对话窗口，避免上下文混淆导致代码出错。

后端开发——数据库与云函数的联动

数据库设计

在HBuilder X中创建order.schema.json数据表，用于存储所有订单数据。用户端和骑手端共享同一张数据表，这是实现多端数据联动的关键架构设计。

云对象开发

云对象（Cloud Object）是连接前端和数据库的桥梁。需要分别为用户端和骑手端创建云对象：

• 用户端云对象：负责将订单信息写入数据库（支持帮我买、帮我送两种订单类型）
• 骑手端云对象：负责从数据库查询订单并展示在抢单页面

云对象是UniCloud提供的一种面向对象的云端开发模式，是传统云函数的升级形态。在传统云函数模式下，每个API接口对应一个独立的云函数文件，当接口数量增多时管理成本急剧上升。云对象则将相关的多个方法封装在一个对象中——例如一个"订单"云对象可以同时包含创建订单、查询订单、更新状态等多个方法，前端调用时就像调用本地对象的方法一样直观。云对象在运行时仍然是以云函数的形式执行，但其面向对象的封装方式大幅降低了代码组织的复杂度。配合DB Schema的权限控制，云对象还能实现自动的数据校验和安全拦截，减少了开发者手动编写校验逻辑的工作量。

提示词中需要详细列出订单包含的字段信息（取货地址、送货地址、物品种类、重量、价格、用户UID等），并将云对象代码文件和数据库schema文件一起附到提示词中，确保AI生成的代码与数据结构完全匹配。

订单状态同步——最核心的联动逻辑

教程中最有价值的部分是订单状态的六级流转设计：

1. 订单已支付 → 2. 骑手已接单 → 3. 骑手正在取货 → 4. 配送中 → 5. 已送达 → 6. 订单已取消

这套六级状态流转本质上是一个有限状态机（Finite State Machine, FSM）的实现。状态机是软件工程中管理复杂业务流程的经典模式，它明确定义了系统可能处于的所有状态、触发状态转换的事件以及合法的转换路径。例如，只有处于"骑手已接单"状态的订单才能转换为"骑手正在取货"，而不能直接跳到"已送达"。这种严格的状态约束能有效防止并发操作导致的数据不一致问题。在真实的跑腿平台中，状态机还需要处理更多边界情况，如骑手超时未取货的自动回退、用户在特定状态下的取消退款逻辑、以及多骑手同时抢单时的并发锁机制等。

每次骑手在骑手端执行操作（抢单、到店、取货、送达），订单状态都会通过云对象同步更新到数据库，用户端刷新后即可看到最新状态。这个过程中遇到了多次数据不同步的问题，都是通过向AI描述具体bug来排查修复的。

调试技巧：当数据没有正确写入或同步时，可以打开UniCloud Web控制台直接查看数据库中的实际数据，对比预期结果来精准定位问题所在。

后台管理系统与跨平台发布

后台管理系统搭建

使用HBuilder X内置的uni-admin模板快速搭建后台管理系统，绑定同一个云服务空间后，通过schema to code功能自动生成订单管理页面。管理员可以在后台查看所有订单的详细信息，包括用户上传的商品图片、地址信息、订单状态等。

跨平台一键发布

得益于UniApp框架的跨平台特性，同一套代码可以直接打包为：

• 微信小程序
• 抖音小程序
• iOS APP
• Android APP

这意味着开发效率直接翻了四倍，一次开发即可覆盖主流平台。

总结与思考

这个教程展示了一个完整的AI辅助开发工作流：Stitch做设计 → Trae/Cursor写代码 → UniCloud做后端 → UniApp跨平台发布。整个过程没有手写一行代码，全部由AI生成。

但需要注意的是，教程作者也明确指出，当前的演示版本距离真正商用还有距离，仍需补充支付模块、用户注册登录、支付回调、数据安全隔离等功能。

从演示到商用的现实差距

这个判断是非常务实的。一个真正可商用的跑腿平台至少还需要补充以下关键模块：支付系统（对接微信/支付宝支付SDK，处理支付回调和退款逻辑）、实时通信（基于WebSocket实现骑手位置实时推送和即时消息）、安全体系（用户隐私号码保护、数据加密传输、接口防刷限流）、以及运营支撑系统（定价算法、骑手调度、佣金结算、客诉处理）。此外，高并发场景下的数据库性能优化、分布式事务一致性保障等技术挑战，也远非当前AI编程工具能自动解决的。这些恰恰说明，AI编程擅长的是快速搭建产品原型和验证业务逻辑，但将原型打磨为生产级系统仍需要深厚的工程经验。

AI编程降低的是编码门槛，但产品设计能力、需求拆解能力和调试排错能力仍然是不可替代的核心技能。

对于零基础的开发者而言，这套流程最大的价值在于：你不需要先学会编程再去做产品，而是可以在做产品的过程中理解编程。这或许就是AI编程时代最大的范式转变。

核心要点