codebuddy开发小程序实战

## 来源
https://my.feishu.cn/wiki/CIYJwt4ZcitnZIkFIThczf4JnSf

## 优点

*   GPT 全家桶，国内唯一对接了 GPT codex 模型的 IDE

![](/media/202606/2026-06-06_1005050.64308098343145.png)

*   三种模式

1、Craft 类似 Agent 模式，什么事都能干

2、Plan 计划模式，可以很好的拆解需求

3、Ask模式

*   支持自定义智能体，子代理
    
*   唯一支持 skill的多内 IDE
    
*   具备设计->开发->部署-> 上线 全套流程的能力

# 实战

## 1、创建小程序

注意 : 尽量不要用 AI 编程工具来创建小程序，使用小程序开发者工具来手动创建小程序，选择云开发平台

## 2、链接 cloudbase, 初始化CloudBase到项目中

这一步要尽量早点做，初始化 CloudBase 是为了尽早把对应的 rules 放到 codebuddy 中

## 3、生成一个PRD文档

这一步是为了得到你的想法的具体描述，让 AI 工具能初步掌握整个项目的具体框架

提示词如下： 我现在需要做一个点咖啡的小程序，包含的页面有首页，商品列表页，个人中心页面。，核心功能是用户浏览小程序，选择咖啡进行下单，在后台系统能查看订单进行订单状态变更操作。请你帮我生成一份\*\*格式统一、结构完整的标准 PRD Markdown 文档\*\*，

遵循以下章节结构：

项目名称

一、产品定位与目标

二、目标用户

三、核心功能需求

四、信息架构与页面结构

五、页面说明（逐页说明）

六、UI 配色与视觉规范

七、交互与状态设计

八、可扩展功能建议

生成规范：

1.  输出必须是 Markdown 格式；
    
2.  不包含任何 AI 提示词或解释；
    
3.  每个章节都要完整；
    
4.  对于 UI 配色和页面结构，请使用你最合理的推断；

## 3、使用 Figma 等设计工具，把想法变成具体的页面

如果会设计，直接用 Figma的 Design 功能，如果不会，使用 Figma 的 Make 功能，输入你PRD 里面的页面结构说明和全局样式规范

![](/media/202606/2026-06-06_1005050.7306596103962463.png)

## 4、将Figma设计文件转Codebuddy 代码

### 方法 1：使用 Codebuddy 自带的 Figma 转代码组件

*   在 Make 代码的结果页面，点击拷贝

![](/media/202606/2026-06-06_1005060.8217335758965906.png)

*   在 Design 新建一个项目

![](/media/202606/2026-06-06_1005070.6317460596494789.png)

Make每个页面都需要新建一个 design 页面，然后进行复制

![](/media/202606/2026-06-06_1005080.9805803411107923.png)

点击 layers 整块或者某个组件，会出现转换的按钮

![](/media/202606/2026-06-06_1005090.08697809100660914.png)

点击后，会到 codebuddy 的对话框，这一步就是，将 Figma 这个页面或者组件的代码加到了 Codebuddy 上下文

*   新建一个 design.md ，写上通用的转化内容，防止 codebuddy 将代码转换成了 html 代码

# **figma 代码转换要求**

当你在转换 figma 代码时，需要将转换后的代码放到 wechat/miniprogram 目录，并将代码转换成微信小程序的原生代码，以下是目录结构

*   images 目录，存放 图片文件，底部图标等
    
*   utils 工具类

使用模拟数据完成页面的展示，图片可以使用开源的图片或者占位符

# **注意**

你必须完全按照 figma 的设计方案来进行转化，不要参考任何文档的设计元素

### 方法2： 下载Figma源代码

![](/media/202606/2026-06-06_1005090.016514224686002277.png)

下载完成后，放到项目的目录里面，然后使用以下提示词进行转换

将 “你的figma 代码目录”中的所有的代码，图片 1:1 转换成小程序原生代码，放到wechat/miniprogram 目录中，使用模拟数据完成交互

这种情况很有可能会丢失一些样式或者图片，需要每个页面都进行检查和修复

## 5、生成数据库文档

这一步的目的，是让后端服务不管是小程序还是后台系统都能遵循一套数据库集合的标准

如果你有编程基础，最好是自己设计数据库，如果没有且项目比较少，可以交给 AI 来读取项目，从中推理出数据库大概结构

请阅读 @prd.md 文档和 wechat/miniprogram 下所有的页面中的模拟数据，帮我设计一份微信云数据库集合，符合 cloudbase 标准，设计完成后需要将数据库设计文档存放到根目录，每个字段需要有中文注释

在通用 rules 做一个引入

\---

description:

alwaysApply: true

enabled: true

updatedAt: 2025-12-19T07:09:58.058Z

provider:

\---

# 项目介绍

本项目是一个包含前后端的商城点咖啡小程序，核心功能是浏览商品，进行下单

# 项目架构

*   admin 系统的后台管理系统，架构为 element-ui+typescript
    
*   wechat 小程序端，使用小程序的原生语言

# 全局规则

使用 cloudbase 作为后端服务

如果需要使用和设计云数据库，请参考 database-design.md, 如果是新增表和字段，请同步更新到database-design.md

## 6、使用Plan模式完成后台系统搭建

先搭建后台系统，方便小程序使用真实的数据库进行对接,使用一个页面一个页面的方式来完成

我现在开始要做后台管理系统，目录在 admin, 先完成第一个页面，内容如下：

商品管理模块

1、商品分类管理（新增，编辑，列表页），

2、商品基本信息维护，商品价格录入，增加编辑商品

注意，使用 element-ui-plus 框架进行开发，所有的数据必须对接 cloudbase, 你需要初始化数据库或者生成初始化数据库的语句，具体数据参考 @database-design.md 文档., 功能可以阅读 @prd.md ,admin 是一个空的项目，你需要初始化 element-ui-plus 框架

\*\* 注意：

在这里如果 Codebuddy 没有初始化数据库，你需要再单独使用以下提示词，让 codebuddy 初始化数据库到 cloudbase 中

请按照 @database-design.md 中的数据库设计，初始化到 cloudbase 中

```JSON
执行 yarn install 进行安装
```

后台系统生成完成后，进行以下的步骤

*   检查页面是否有异常，UI 展示，图标，内容的对齐方式等等
    
*   检查是否请求后端获取数据

如果出现上传图片的错误，需要在 cloudbase 里面配置安全域名

https://tcb.cloud.tencent.com/dev?envId=cloud1-0grjk2dv5eef3560#/env/safety-source

![](/media/202606/2026-06-06_1005100.8075937550038599.png)

*   检查页面中管理的元素是否缺少，如果缺少进行对话补充

在分类管理中缺少icon图标的上传入口，请添加，上传文件的方法和存储可以参考 src/pages/admin/ProductForm.vue

然后继续下一个页面

阅读src 里面关于商品和分类管理的方法，特别是对接cloudbase， 现在需要完成订单的后台管理，包括订单列表查询，订单状态变更，具体的 cloudbase数据库可参考 @database-design.md

阅读src 里面关于商品和分类管理的方法，特别是对接cloudbase， 现在需要完成会员的后台管理，包括会员列表查询，会员状态变更，具体的 cloudbase数据库可参考 @database-design.md

在 src/pages/admin/ProductForm.vue 商品管理中，缺少规格相关的信息，请参考 database-design.md

## 7、小程序端页面对接后端接口

将微信小程序 wechat 目录下所有页面的模拟数据替换为从 cloudbase 数据库获取真实数据，确保保持原有小程序界面的数据结构不变。具体要求如下：

1\. 基于提供的数据库设计文档 @database-design.md 进行对接

2\. 仅需修改数据获取方式，将原有模拟数据替换为 cloudbase 数据库查询

3\. 保持所有页面组件和视图层的数据结构完全一致

4\. 确保数据获取逻辑变更不会影响现有UI渲染和业务逻辑

5\. 实现时需考虑网络请求的异步处理和错误捕获机制

## 8、部署上线

![](/media/202606/2026-06-06_1005110.40696886520906406.png)

# 总结

codebuddy 将设计->开发->上线的所有流程都打通了。目前实战中的核心关键点包括：

*   使用 Figma 的 make 功能生成界面
    
*   使用 codebuddy 的 figma 代码转换插件将代码转换成小程序原生代码
    
*   生成数据库设计文档
    
*   使用 codebuddy plan模式 生成后台管理系统
    
*   小程序端对接cloudbase 真实数据