记录一次用Stitch生成UI + Kiro AI驱动后端，实战Uniapp多端开发（H5+App+小程序）
·
系列文章目录
- 半小时一个功能，一天一个项目：0成本0手撸！用Stitch生成UI + Kiro AI驱动后端，实战Uniapp多端开发（H5+App+小程序）
- Stitch深度实战：如何精准生成你想要的UI样式（告别“AI随机发挥”）
- 【预告】Kiro实战：从Spec到完整后端系统，如何让接口真正可维护？
- 【预告】Stitch+Kiro实战：电商APP完整开发流程（前后端+多端发布）
- 【预告】AI全栈上线指南：服务器部署、域名、HTTPS一次讲清
- 【预告】从待办到SaaS：如何用AI快速验证一个产品想法？
前言
完成一个同时支持 H5、小程序和 App 的多端项目，通常需要：
- 设计或绘制 UI 界面
- 前端工程师将 UI 转为代码
- 后端工程师设计数据库、实现接口
- 联调和测试
一个完整功能往往需要几天时间，以及多个角色的配合。
但这次，我想测试一下：在 AI 工具的辅助下，一个人完成这些工作需要多久？
我的测试目标是：
- 从零开始，完成 UI 设计并生成界面
- 开发后端接口支持业务逻辑
- 打包成 H5/小程序/App 多端运行
- 单个功能开发控制在半小时内，完整项目控制在一天内
这篇文章记录的就是这次实测的完整过程
直接上结果
现在的 AI 工具几乎每周都有更新，新工具层出不穷，但哪些真的能落地、哪些只是概念，只有上手做过才知道。
如果你对该篇文章类型感兴趣，或者你也在 AI 浪潮的前线，想第一时间看到 真实的 AI 工具实战案例，可以关注公众号 小刘AI工具实战。我会持续输出 完整的实战项目，每一步都亲自验证。
一、基础篇：认识Stitch+Kiro
1. Stitch + Kiro是什么？AI全栈开发新范式
1.1 Stitch 介绍
Stitch 是 Google 出品的 AI UI 生成工具，基于 Gemini 3.0 Flash，现在完全免费
它强的地方不在于“生成界面”，
而在于生成的是可继续开发的页面结构，而不是一张效果图。
传统流程：
想法 → 设计稿 → 切图 → 前端实现
Stitch 直接变成：
想法 → 可运行页面
它输出的是具备清晰结构和组件层级的页面内容，
可以直接接入接口继续开发，而不是停留在展示阶段。
导出方式
Figma
可编辑、可拆组件、支持协作，适合继续打磨设计。
HTML
结构完整、可直接预览、可接入数据，适合做 MVP 或快速上线。
核心价值不在“自动生成界面”，
而在于压缩想法到可运行页面之间的距离。
主界面
生成页面
导出到figma效果
生成的html页面
1.2 Kiro：亚马逊Claude 4.5驱动的后端开发工具
新账号注册即赠500token，可满足约一周的使用需求，同时支持Claude 4.5模型调用。
1.3 为什么Stitch 和 Kiro 这俩能凑一块？
Stitch 负责 UI，Kiro 负责功能。
Stitch
- 快速生成界面（HTML / 设计稿）
- 让页面“先跑起来”
Kiro
- 实现业务逻辑
- 管理功能结构与上下文
为什么要结合？
- 只有 Stitch → 只是好看的壳
- 只有 Kiro → 有逻辑但没界面
Stitch 做“形”，Kiro 做“魂”。
UI + 功能 = 完整系统。
2. 0成本环境搭建：5分钟准备
2.1 Stitch注册（有谷歌账号就行）
2.2 Kiro安装
二、实战篇：待办事项APP开发
1. 前端：生成待办列表页
1.1 写提示词（就这一段话）
简约现代待办APP主界面，毛玻璃质感背景，待办项采用分离式圆角卡片设计，每张卡片之间有适当间距。卡片左侧有细小的彩色圆点表示优先级，右侧无多余装饰。顶部大号字体显示当天星期几，副标题小字显示农历或天气图标。底部悬浮添加按钮是半透明玻璃质感加细线加号。整体柔和温暖，层次分明，舒适易读。白色底
1.2 Stitch会生成UI
可以一次生成多套方案，从中挑选出最满意的一套
1.3 点击下载，会下载html 和一张png图
1.4 生成前端项目
直接用以下提示词即可生成前端项目
请生成一个 UniApp + Vue3 + TypeScript 纯净基础项目模板：
1. 技术栈
- UniApp（支持微信小程序、H5、App）
- Vue3 组合式 API + TypeScript + Pinia
2. 项目结构
src/
├── api/request.ts # 网络请求封装（拦截器）
├── stores/ # Pinia 状态管理
├── utils/platform.ts # 多端判断工具
├── components/ # 公共组件
├── pages/index/ # 首页
├── App.vue
├── main.ts
├── pages.json # 路由配置
└── manifest.json
3. 核心功能
- 网络请求封装：基于 uni.request，支持拦截器、统一错误处理
- 状态管理：Pinia store 基础结构（空示例）
- 多端适配：rpx 单位 + 条件编译 + 平台判断工具
- 路由配置：pages.json 基础配置
4. 依赖版本
dependencies:
- @dcloudio/uni-app: 3.0.0-4020920240930001
- @dcloudio/uni-app-plus: 3.0.0-4020920240930001
- @dcloudio/uni-h5: 3.0.0-4020920240930001
- @dcloudio/uni-mp-weixin: 3.0.0-4020920240930001
- vue: ^3.4.21
- pinia: ^2.1.7
devDependencies:
- @dcloudio/types: ^3.4.8
- @dcloudio/uni-automator: 3.0.0-4020920240930001
- @dcloudio/uni-cli-shared: 3.0.0-4020920240930001
- @dcloudio/uni-stacktracey: 3.0.0-4020920240930001
- @dcloudio/vite-plugin-uni: 3.0.0-4020920240930001
- @vue/runtime-core: ^3.4.21
- typescript: ^5.3.3
- vite: 5.2.8
- vue-tsc: ^2.0.6
- sass: ^1.77.0
scripts:
- dev:mp-weixin: uni -p mp-weixin
- build:mp-weixin: uni build -p mp-weixin
- dev:h5: uni -p h5
- build:h5: uni build -p h5
- dev:app: uni -p app
- build:app: uni build -p app
- type-check: vue-tsc --noEmit
5. 要求
- 纯净版本，只包含核心必要文件
- TypeScript 类型完整
- 关键位置添加中文注释
- 可直接运行
6. 不需要
- UI 组件库
- 复杂业务逻辑
- 多余示例页面
- 第三方库
- 测试配置
7. 重要文件清单（必须包含）
- index.html（根目录，H5 端必需）
- vite.config.ts（Vite 配置）
- tsconfig.json（TypeScript 配置）
- package.json（依赖配置，包含 overrides 配置）
- .npmrc（npm 配置，包含 legacy-peer-deps=true）
- .gitignore（Git 忽略配置）
- README.md（项目说明文档）
npm install
# 微信小程序
npm run dev:mp-weixin
# H5
npm run dev:h5
# App
npm run dev:app
项目说明文档（README）详细介绍了项目的启动方法
生成以下页面表示生成成功
1.5 将生成code.html 和screen.png 放到生成的前端项目中
在手动创建sucai文件夹下的shouye内容时，请注意：由于stich生成的html文件名称相同，需要做好区分标记。
1.6 将html转换成vue+uniapp
根据一下提示词可以直接html转换为vue+uniapp的代码，因为整理提示词实在是不容易，求关注公众号：小刘AI工具 可以获取详细的提示词
================================================================================
HTML 到 UniApp 转换核心提示词
================================================================================
一、项目结构规范
--------------------------------------------------------------------------------
1. 数据管理
所有静态数据统一放在 src/data/mock/ 目录下的 JSON 文件中
目录结构：
src/
├── data/
│ ├── mock/
│ │ ├── todo.json # 业务数据
│ │ └── config.json # 配置数据
│ └── index.ts # 数据导出入口
├── api/request.ts
├── stores/
└── pages/
数据访问层示例 (src/data/index.ts)：
import todoData from './mock/todo.json'
import { http } from '@/api/request'
const USE_MOCK = true // 开发环境使用本地数据
export async function getTodoList() {
if (USE_MOCK) {
return todoData.list
}
return await http.get('/api/todo/list')
}
更多 请关注公众号
1.7 跑起来看看效果
1.8 进行微调 卡片圆角是与ui不符合的 最终转换的效果与ui一致 前端部分就完了
以下是提示词
卡片圆角跟我提供你的html不符合 要求一致
2 后端
2.1 首先生成后端项目
已测试 百分之90%能直接生成可运行项目，如出现报错可直接询问ai 让其修改问题
Spring Boot 后端项目生成提示词
================================================================================
标准提示词模板
================================================================================
生成一个 Spring Boot 后端项目，要求如下：
技术栈
------
- JDK 1.8
- Spring Boot 2.3.12
- Maven 构建工具
- Lombok（简化代码）
- Hutool 工具库
架构要求
--------
- 采用 MVC 三层架构（Controller、Service、Mapper）
- 统一响应格式封装
- 全局异常处理
- 跨域配置（CORS）
响应格式规范
------------
所有接口必须返回统一的 JSON 格式：
{
"code": 0, // 0 表示成功，其他值表示失败
"data": {}, // 响应数据
"message": "操作成功" // 响应消息
}
项目结构
--------
backend/
├── src/main/java/com/example/backend/
│ ├── BackendApplication.java # 启动类
│ ├── common/
│ │ └── Result.java # 统一响应结果封装
│ ├── config/
│ │ └── CorsConfig.java # 跨域配置
│ ├── controller/ # 控制器层
│ │ └── HealthController.java # 健康检查示例
│ ├── service/ # 业务逻辑层
│ ├── mapper/ # 数据访问层
│ └── exception/
│ ├── BusinessException.java # 业务异常
│ └── GlobalExceptionHandler.java # 全局异常处理器
├── src/main/resources/
│ └── application.yml # 配置文件
├── pom.xml # Maven 配置
├── .gitignore # Git 忽略文件
└── README.md # 项目说明文档
功能要求
--------
1. 配置跨域支持，允许前端调用
2. 提供健康检查接口（/api/health）
3. 统一异常处理机制
4. 响应格式与前端保持一致
5. 纯净项目，暂不包含数据库配置
配置说明
--------
- 服务端口：8080
- 上下文路径：/api
- 日期格式：yyyy-MM-dd HH:mm:ss
- 时区：GMT+8
================================================================================
使用说明
================================================================================
1. 直接使用标准提示词
----------------------
将上述提示词复制给 AI 助手，即可生成完整的后端项目。
2. 自定义修改
-------------
根据实际需求，可以修改以下内容：
修改端口号：
server:
port: 8080 # 改为你需要的端口
修改包名：
将 com.example.backend 替换为你的包名，例如：
- com.yourcompany.project
- cn.company.module
添加数据库支持：
在提示词中增加：
数据库配置
- MySQL 5.7+
- MyBatis-Plus 或 JPA
- Druid 连接池
添加 Redis 支持：
在提示词中增加：
缓存配置
- Redis
- Spring Cache
================================================================================
响应格式说明
================================================================================
成功响应：
{
"code": 0,
"data": {
"id": 1,
"name": "示例数据"
},
"message": "操作成功"
}
失败响应：
{
"code": 1,
"data": null,
"message": "操作失败的原因"
}
状态码约定：
- 0: 成功
- 1: 通用业务错误
- 400: 请求参数错误
- 401: 未授权
- 403: 无权限
- 404: 资源不存在
- 500: 服务器内部错误
================================================================================
快速开始命令
================================================================================
编译项目：
cd backend
mvn clean install
运行项目：
mvn spring-boot:run
打包项目：
mvn clean package
运行 JAR 包：
java -jar target/backend-1.0.0.jar
================================================================================
测试接口
================================================================================
健康检查：
curl http://localhost:8080/api/health
预期响应：
{
"code": 0,
"data": {
"status": "UP",
"timestamp": "2026-03-01 12:00:00"
},
"message": "操作成功"
}
================================================================================
常见问题
================================================================================
Q1: 如何修改响应格式？
修改 Result.java 类中的字段定义。
Q2: 如何添加新的业务异常？
在 BusinessException.java 中添加新的构造方法，或创建新的异常类继承它。
Q3: 如何配置允许的跨域域名？
修改 CorsConfig.java 中的 addAllowedOriginPattern 方法，将 "*" 改为具体域名。
即可直接生成可运行的后端项目
2.2 待办列表接口/新增/更新/删除接口怎么写
完全交给提示词
================================================================================
根据前端 Mock 数据生成后端接口 - 通用提示词
================================================================================
项目已经启动，基于前端的实现参考 mock 数据生成后端功能。
核心要求：
1. 只实现前端需要的接口，不要自行添加其他接口
2. 严格按照前端 mock 数据结构定义实体类
3. 接口路径、请求方法、参数格式与前端调用保持一致
4. 使用内存存储模拟数据（CopyOnWriteArrayList）
5. 初始化数据与 mock 数据保持一致
技术栈：
- JDK 1.8
- Spring Boot 2.3.12
- Maven
- Lombok
- Hutool
响应格式：
{
"code": 0,
"data": {},
"message": "操作成功"
}
请查找前端项目中的以下文件并生成对应的后端接口：
- mock 数据文件（通常在 mock、data/mock 等目录）
- API 调用定义文件（查找包含 http.get、http.post 等调用的文件）
- 请求封装文件（查找 request、http、api 等相关文件）
生成内容：
- Entity 实体类（根据 mock 数据字段）
- Service 接口和实现（包含初始化数据）
- Controller 控制器（根据前端 API 调用）
================================================================================
2.3 后端服务成功启动，运行正常无报错
3. 前后端联调
3.1 根据提示词生成前端调用的代码
================================================================================
根据前端 Mock 数据生成后端接口 - 通用提示词
================================================================================
项目已经启动，基于前端的实现参考 mock 数据生成后端功能。
核心要求：
1. 只实现前端需要的接口，不要自行添加其他接口
2. 严格按照前端 mock 数据结构定义实体类
3. 接口路径、请求方法、参数格式与前端调用保持一致
4. 使用内存存储模拟数据（CopyOnWriteArrayList）
5. 初始化数据与 mock 数据保持一致
技术栈：
- JDK 1.8
- Spring Boot 2.3.12
- Maven
- Lombok
- Hutool
响应格式：
{
"code": 0,
"data": {},
"message": "操作成功"
}
请查找前端项目中的以下文件并生成对应的后端接口：
- mock 数据文件（通常在 mock、data/mock 等目录）
- API 调用定义文件（查找包含 http.get、http.post 等调用的文件）
- 请求封装文件（查找 request、http、api 等相关文件）
生成内容：
- Entity 实体类（根据 mock 数据字段）
- Service 接口和实现（包含初始化数据）
- Controller 控制器（根据前端 API 调用）
前端对接：
- 修改前端配置，将 USE_MOCK 改为 false
- 配置后端接口地址（如：http://localhost:8080）
- 确保前端可以正常调用后端接口
================================================================================
该页面的前端已经完成，后端也已经完成了，完全可以运用在实际开发当中
四、如何打包
可以参考这篇文章
AI生成项目多端适配实战：uniapp打包H5/小程序/App完整记录
五、福利篇：核心价值全在公众号 包括源码和完整提示词
1. 以下项目完全ai生成 感兴趣可 关注公众号 小刘AI工具实战
-
后端管理系统
-
电商APP长这样
-
点餐程序
-
完整教程，公众号回复“进阶”获取
2. 文末福利：公众号一次领完
- 完整项目地址 包括sitch 生成的ui地址 可关注公众号获取
👉 公众号回复“实战”打包带走
小龙虾开发者社区是 CSDN 旗下专注 OpenClaw 生态的官方阵地，聚焦技能开发、插件实践与部署教程，为开发者提供可直接落地的方案、工具与交流平台，助力高效构建与落地 AI 应用
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)