如今Vibe Coding越来越火，AI大模型编码能力大幅提升，很多前后端开发工作都能交给AI来做。普通人不懂编程，用大白话讲清需求，就能快速做出网页、小程序，开发门槛被彻底打破。

有编程基础的程序员更是如虎添翼，开发和解决问题的能力，远胜过零基础从业者。重要的是，有了Vibe Coding，前后端的边界彻底变得模糊，不用兼顾两边技术，人人都能轻松成为全栈工程师。

行哥近期一直在实践用claude，codex这些顶尖大模型做开发，今天我就用cursor结合大模型，通过vibe coding，从零开发一款在线生图全栈小程序，还接入微信支付和后台管理。带大家看看，现在做一个全栈小程序有多简单。

Vibe code 小程序前端和数据表

由于前端的逻辑相对较多，我们选择codex模型来进行开发，首先我们先用markdown简单写出前端和数据表的需求文档；前端我们使用原生的小程序+TDesign组件库，后端使用腾讯CloudBase一站式云服务，节约我们开发和部署的时间，使用CloudeBase MCP，AI Agent可以轻松的操作数据库，云函数，云存储，为我们节约了大量的时间。

## 创建数据表

- 1. 创建el_images表，表中记录图片所属于用户，标题，提示词，比例，风格，生成时间等信息。
- 1. 创建el_users表，表中记录用户的openid, 昵称，头像地址，当前积分点数，登陆时间。
- 1. 创建el_orders表，表中记录用户支付信息，订单号，支付金额，支付时间，支付状态等。
- 1. 如果需要中间表，请自行创建。

### CloudBase的id为：填写你的cloudbase id
### 请基于cloudbase mcp实现，该需求需要创建对应的云函数、表以及云函数部署

## 请你基于cloudbase + TDesign实现该绘图精灵小程序的开发工作：

### 1. 小程序默认有三个tab: **"首页"**，**"绘图"**，**"我的"**
### 2. **"首页"** 要求如下：

- 顶部右上角会显示当前用户的积分。
- 展示所有人的画作列表，一行显示两张图片卡片，默认显示20行，滚动加载。
- 图片卡片默认展示el_iamges里的图片和标题。
- 点击卡片后进入 **"绘图"** 页面，展示该卡片的图片，提示词，宽高比例，绘图风格等信息。
- 页面右下角会有一个 **"+"** 悬浮按钮，点击它跳转到 **"绘图"** 页面。

### 3. **"绘图"** 页面要求如下：

- 有一个默认的图片预览区域。
- 有一个标题输入框，用于给图片起个名字。
- 有一个提示词输入框，旁白会有一些提示词输入的提示建议。
- 有常见的图片比例选择列表，用户可以选择生图的比例。
- 有常见的绘图风格列表，用户可以方便的选择绘图的风格。
- 页面底部固定悬浮条，里面并排有 **"生成图片"** 和 **"发布图片"** 两个按钮，
- 用户写好提示词，选择生图比例和风格后，**"生成图片"按钮**，等待一会，AI就会根据你的需要生成一张图。
- 图片生成后，**"发布图片"** 按钮变成可以点击状态，用户点击后，小程序会把这张图片，提示词，宽高比，风格等信息保存起来，并记录这是你画的。
- 保存成功后页面会自动跳回 **"首页"，立即可以在最上面看到你刚刚发布的那张新图。**
- 用户登陆后才能使用 **"生成图片"** 和 **"发布图片"**，如果未登陆则跳转到 **"我的页面"** 去登陆。

### 4. **"我的"** 页面要求如下：

- 如果你还没登陆，会看到一个** "微信一键登陆"** 的按钮，点一下，用你的微信登陆即可。
- 如果你已经登陆，能看到你的微信头像和昵称，和当前的积分点数。
- 有一个 **"积分充值"** 按钮，点击后跳转到 **"积分充值"** 页面。
- 下面有一个 **"个人画廊"** 里面是你创作并发布的所有图片列表，一行显示两张图片卡片，默认只展示前20张。

### 5. **"积分充值"** 页面要求如下：

- 显示用户的当前积分，一个积分对应1元钱。
- 显示积分充值的几个挡位列表，比如：5元，10元，20元，50元，100元。用户选择一个价格，点击 **"支付"** 拉起微信二维码支付弹窗，这里先不实现支付逻辑，只做演示。
- 支付成功后要刷新用户的积分显示。

## 总结需求

- 1. **"首页"**、**"我的"**、**"绘图"**， **"积分充值"**，4个页面的前端开发。
- 2. 4个页面都需要获取数据库中的真实数据。
- 3. 我的页面的用户登陆注册逻辑

### 前端组件尽可能的使用，TDesignUI的前端组件实现 https://static.tdesign.tencent.com/miniprogram，设计简约优雅，注意数据库使用SQL型数据库，不要使用文档型数据库就。

安装官方文档先安装好CloudBase MCP，在cursor中选择最新版本的codex模型，用agent模式输入:

@prod.md 按照需求文档帮我生成前端代码并创建数据表。

经过一段时间的等待，codex就帮我们生成好了前端页面，在CloudBase后台也可以看到我们需要的数据表和云函数也创建好了；云存储目录我是手动先建好的，用来存放用户图片。

这个过程不会一步到位，发现有bug或者不满意的地方需要根agent进行多轮对话，修改到满意为止。

接入阿里万象生图API

前端ui和数据库搭建好了以后，我们就可以实现用户生成图片保存的逻辑，之所以没有把生图的需求写在一开始的需求文档里，因为vibe coding最好遵循循序渐进的原则，不要指望一口气吃个胖子，把复杂的问题分布解决，往往才是最省心省力的最佳实践。

这里我们选择阿里万相2.7 image pro的生图模型，应该是目前阿里最强的一款生图模型；接入的步骤很简单，我们先在阿里百炼里注册一个用户，并创建一个用于调用模型的API_KEY，然后我们找到模型的调用文档给AI参考，然后我们就等着AI来帮我们干活。

请帮我完成绘图页面的文生图功能

根据用户的提示词，所选的图片比例和图片风格，调用万相2.7API来实现，这是API调用参考@qianwen.md，请使用异步调用方式实时获取图片生成进度并给到用户反馈，尽量使用openAI的调用规范就，图片生成要在云函数中完成，避免API_KEY在客户端泄露，现在的DASHSCOPE_API_KEY在环境变量.env中。

生成的图片保存在云存储el_images目录下，并将相关的图片数据和用户数据保存在el_images表中，每生成一张图片扣除当前用户一点积分。

如果用户当前积分为0，提示用户并跳转到 "积分充值" 页面。

这里要注意的是，为了避免API_KEY泄露，我们要特别提及让AI在服务端云函数中调用API，而不能在客户端调用而造成安全隐患。

集成微信支付

Vibe Code 管理后台

相对小程序前端，管理后台的前端代码没有复杂的逻辑，这次我们尝试用claude sonnet模型来完成后台管理，根据经验目前claude在生成前端ui方面要优于codex，而codex更擅长复杂的逻辑和规划。

### 前端项目需求说明

## 绘梦精灵后台管理

请在当前项目中初始化一个前端项目，技术栈如下：

- **React**
- **Vite**
- **Ant Design**

#### 一、登录逻辑

项目的默认首页为 **登录页**。

登录逻辑如下：

- 如果用户 **未登录**，默认显示 **登录页面**。
- 如果用户 **已登录**，则自动 **跳转到后台管理页面**。
- 本项目 **只需要登录功能，不需要注册功能**。

> 登录逻辑可以使用前端模拟（例如 localStorage / mock token），无需真实接口。

#### 二、后台管理布局

后台管理页面采用 **后台管理系统常见布局**：

- **左侧：侧边栏菜单**
- **右侧：页面内容区域**

本次只需要完成 **侧边栏菜单结构**，右侧页面内容 **暂时留空即可**。

#### 三、侧边栏菜单结构

侧边栏包含以下 **四个菜单页面**：

1. **仪表盘（Dashboard）**
2. **图片管理（Image Management）**
3. **用户管理（User Management）**
4. **订单管理（Order Management）**

页面要求：

- 点击菜单时切换对应页面
- 右侧页面内容区域 **先留空，不需要实现具体功能**

#### 四、侧边栏底部

侧边栏底部需要包含：

- 当前管理员 **邮箱显示**
- **退出登录（Logout）按钮**

点击退出登录后：

- 清除登录状态
- 跳转回 **登录页面**

#### 五、功能范围说明

本次只需要完成：

- React + Vite + Ant Design 项目初始化
- 登录页 UI
- 登录状态逻辑（前端模拟）
- 后台管理整体布局
- 侧边栏菜单结构
- 页面路由切换

**不需要实现任何真实后台功能或数据接口。**

所有页面内容区域可以 **暂时留空**。

出人意料的意料的是，只需要简单的需求文档，claude就一次性帮我们生成了，几乎不需要做什么修改。

我们可以使用CloudBase的用户名和密码来做后端管理的登陆认证，使用CloudBase MCP完成数据库操作。

基于 CloudBase MCP 帮我完成首页的登录注册功能。使用用户名和密码登录。移除掉默认的假的用户名和密码，以及注册功能。

登录成功之后，才能够去访问管理的后台。如果检测到管理后台没有登录，应该自动跳转到首页。

cloudbase的id为：填写你的cloudbase id

然后我们写提示词让AI帮我接入CloudBase上的真实数据。

让我们来完成仪表盘、图片管理、用户管理、订单管理这四个后台的功能。

1. 仪表盘： 顶部能够查看到用户的订单数、新增用户数、订单金额。在下方显示两个图表，就是近7日的订单数、和订单金额的柱状图。

2. 图片管理：并且设置el_images这个表的数据增删该查操作。

3. 用户管理：能够查看所有的用户数据，也就是el_users这个表的数据。

4. 订单管理：对应el_orders能够查看所有的订单的交易情况数据情况。

虽然只用两天业余时间，就靠Vibe Coding轻松完成了这款带微信支付和后台管理的全栈小程序，开发门槛大大降低。

对程序员来说更是如虎添翼，凭借懂技术细节、会排查问题的专业能力，Vibe Coding妥妥是提升效率的开发利器。

虽说当下Vibe Coding还不能解决所有开发难题，但随着大模型持续迭代升级，未来这些短板都会慢慢补齐，开发也会变得更简单、更高效。