原型设计→前端开发→后端开发→支付集成→资源部署，AI 工具链让开发效率巨幅飞跃
大家好！我是喜欢折腾 AI 的开发者 Luke，最近用 AI 工具做了一件很有意思的事情：从零开始，纯AI驱动，Vibe Coding 搭建了一个具备支付功能的商业化小程序 。
💡 为什么要做这个实践？
最近 AI 编程工具满天飞，Cursor、Claude Code、Gemini CLI、Kiro等等，但我学习时发现：
社交网络上使用编程工具秀出的 90%的 AI 编程示例都停留在演示阶段，无法真正商用落地
我也对比了几家公司的产品，比如 Lovable, v0等，他们通过与 Supabase 集成，能完成前后端应用的开发，其中 Lovable 能与 Stripe 支付集成，这样能完成整个流程的闭环，做出海产品没问题，但是当我的产品目标用户在国内市场时，这些为海外服务的产品似乎就“水土不服”了
- 相比 Stripe 的信用卡支付，国内用户更熟悉的是微信/支付宝的支付方式
- 国内企业往往对数据有合规要求，更倾向于使用国内的云服务厂商，Supabase 就不太适合了
那么有没有办法能够找到一条 “本土化” 的 AI 全栈开发 & 落地商用的路径呢，接下来告诉你我怎么做的
🛠️ 我的 AI 工具库
经过一番调研，我选择了这套组合：
核心工具链
各工具详细介绍
🤖 Claude Code CLI - 项目大脑
- 理解和分解复杂的业务需求，生成高质量的代码和架构方案
- 协调各个工具之间的配合
☁️ CloudBase-AI-Toolkit - CloudBase AI 工具 ：
- 提供 CloudBase MCP，实现数据库、云函数、静态托管一体化管理
- 预置的开发模版和 CloudBase 最佳实践 rules
💰 CloudBase 微信小程序支付云模版 - 支付能力
- 开箱即用的支付能力封装，免去复杂的签名、安全验证
- 官方维护，安全性和稳定性有保障
🎨 Figma MCP - AI设计师
- 与 AI 编程工具无缝对接
- 快速迭代和原型验证
📚 Context7 MCP - 智能文档助手
- 智能搜索最新的API文档和最佳实践
- 提供准确的代码示例和配置方案
🎯 AI 开发全记录
第1步：AI设计稿生成
首先通过 Figma AI 完成设计稿设计：
-
Figma 页面中点击 AI 图标，选择 “First Draft”
-
输入提示词如下
生成一个具有设计感的衣物购买电商App，页面要求
- 首页展示商品瀑布流
- 详情页展示商品价格，数量等信息
- 购物车展示添加购物车的所有商品项信息
- 个人中心展示我的订单，收获地址等信息
注意 ：这里 figma AI 会生成一张页面稿子，这张稿子里是将多个页面合并在一起了，但不影响 Claude Code 调用工具理解
第2步：Vibe Coding 项目准备
这里我们按如下步骤做好 Vibe Coding 前的项目准备工作：
- 下载项目模板：CloudBase-AI-Toolkit 提供了微信小程序，Web，Uniapp 跨端等各种开发模版，这里我们下载微信小程序模版
模板的好处是已提供好 CloudBase 最佳实践 rules 以及 CloudBase MCP 配置
- 打开 VSCode/Cursor（或其他编程IDE）， 打开终端，运行 claude，输入 /mcp 可以检查当前默认的 cloudbase mcp server 配置正常
- 打开 Figma 桌面客户端（只支持在桌面端中设置 Figma MCP Server），如图所示选中 Preferences -> Enable Dev Mode MCP Server 启动 MCP Server
- 将 Figma MCP Server 配置（以及 context7 MCP Server）添加至项目根目录 .mcp.json 文件中，如下
```json
{
"mcpServers": {
"cloudbase": {
"command": "npx",
"args": ["-y", "@cloudbase/cloudbase-mcp@latest"]
},
"Figma": {
"url": "http://127.0.0.1:3845/sse"
},
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp@latest"]
}
}
}
> 注意：这里分享一个踩坑经验，我在更新 .mcp.json 配置时发现新增 mcp 配置后 Claude 并没有识别到，在官方文档上找到了手动添加的方式处理
>
> sse 类型添加：claude mcp add --transport sse Figma http://127.0.0.1:3845/sse command 类型添加: claude mcp add context7 -- npx -y @upstash/context7-mcp@latest
三个mcp 配置添加完成后，运行 /mcp 可以看到如下结果：
1. 遵循 Figma MCP 官方 的最佳实践，可以在 CLAUDE.md 末尾补充一个 Figma 的自定义规则
```js
<user_custom_rules>
# MCP Servers
## Figma Dev Mode MCP Rules
- The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided
</user_custom_rules>
这份规则可以避免 Claude Code 从网上任意下载素材资源（有可能下载失败），而采用 Figma 提供的资源
第3步：前端交互开发
- 首先需要登录 CloudBase 云开发环境（需要先在云开发平台上创建环境），对话框中输入 “登录云开发”
- 浏览器会先弹出云开发平台上的授权，授权后弹出环境选择确认框，选择环境后登录完成
- Claude Code 对接 Figma MCP 完成原型稿的前端交互还原
Claude Code能够解读Figma设计稿的组件结构以及生成对应的小程序页面代码
先保证 Figma 当前生成的设计稿属于被选中状态，然后 Claude 命令行对话输入提示词如下
根据figma 设计稿当前选中的，将figma 设计稿转换为代码实现，完成如下应用
一个具有设计感的衣物购买电商小程序，具有4个页面
- 商城首页，瀑布流展示 商品图片
- 首页商品图片点击后，跳转进入商品详情页，可加入购物车 3.购物车页面，展示已挑选的商品项信息，可点击购买
- 个人中心页，展示购物订单信息
注意：
- 你从设计稿中读取 UI 细节时，必须使用 get_code 方法
- 当你完成前端的交互实现后，必须和我确认，没问题后再进行后端开发
输入后，Claude 会调用 Figma MCP Server 的 get_code 工具读取设计稿细节（如下图），然后 Claude 会进行前端交互的还原开发了
第4步：后端逻辑开发和部署
当你通过多轮对话迭代，确认前端交互实现的没问题后，可以要求 Claude Code 开始后端逻辑的开发了，提示词如下
现在我们来实现后端逻辑，使用云函数来完成业务逻辑
- 商品列表页数据读取（可预先往数据库中写入一批商品数据）
- 商品详情数据读取
- 商品下单（生成订单）
- 订单列表查询
- 支付的具体实现暂时空着
Claude Code 结合 CloudBase MCP 完成后端逻辑的编写及资源的部署：
- 生成并部署了 business 云函数，里面涉及获取商品列表，获取商品详情，创建订单，查询订单列表等逻辑
- 创建了 orders, products 两张表，用于存储订单和商品信息，关联的用户信息标识使用了 openid
第5步：微信支付云模版配置
在云开发平台上配置云模版并配置商户证书信息：
-
开通微信支付云模版
- 登录腾讯云开发平台
- 进入模板中心
- 安装微信支付模版
-
安装完成，配置商户信息
img
后续还需要配置接受支付通知的云函数，此时先不用配置，后面会讲到
未启用微信支付公钥则不需要填相关配置
- 微信appId
- 商户号 (mch_id)
- 商户API证书序列号
- 商户API证书私钥
- API V3密钥
- 检查云函数列表，确认已经部署了 wxpayFunctions 云函数
wxpayFunctions 中内置了微信支付的相关流程，如 小程序下单，查询订单，退款等
- 告诉 Claude，调用 CloudBase 的工具将 wxpayFunctions 云函数下载到本地（cloudfunctions 目录），因为后续 AI 需要根据业务逻辑修改云函数代码
第6步：微信支付创建订单逻辑改写
让 Claude Code 结合 Context7 的文档能力 ，基于 wxpayFunctions 模板代码，补充小程序里微信支付下单逻辑：
- Claude Code 命令行对话中输入 “use context7, 参照文档资料帮我实现小程序下单逻辑”，这里也可以手动补充一些微信支付官方的文档链接在上下文中使用
Context7 MCP 调用工具寻找了支付相关的API文档材料
核心支付流程图示（这里后台调用JSAPI 下单不需要我们关注，已内置到模板逻辑中）
- Claude 学习相关文档后会自动编写完成客户端发起下单，成功后唤起收银台，更新订单状态等逻辑。
第7步：微信支付订单回调通知逻辑创建
当用户支付动作完成后，微信支付后台会推一个支付结果通知到云函数，我们需要创建一个云函数来处理这个通知，然后更新订单状态。
-
Claude Code 命令行对话中输入如下提示词
-
为方便实际支付测试，请将调用支付接口时的实际价格除以 1000 再调用
-
请继续实现支付成功后微信的回调通知云函数，可以参考该文档的第5步实现 https://tcb.cloud.tencent.com/cloud-template/detail?appName=wx-pay-v2
注意：回调通知函数是一个新的函数，你可以命名为 wxpayOrderCallback，你的实现应该严格参照该文档第5步
这里我让 Claude 直接读 CloudBase 官方的云模版文档中回调通知示例（把文档链接扔给它），创建了 wxpayOrderCallback 云函数，用于处理微信支付回调通知。
当 wxpayOrderCallback 云函数部署完成后，需要类似第 5 步中配置到模板中的“接受支付通知的云函数”，填入 scf:wxpayOrderCallback，这样当微信支付后台推送支付结果通知时，会调用 wxpayOrderCallback 云函数。
🎉 至此一个极简的电商小程序就完成了
- ✅ 商品浏览和搜索
- ✅ 购物车管理
- ✅ 订单创建和查询
- ✅ 微信支付集成
- ✅ 支付状态实时更新
- ✅ 订单历史管理
当然比起市面上成熟的电商小程序，这个项目还有很多不足，比如：物流发货，地址管理，商品推荐/评论/收藏等，但我相信大家看了本文的内容后，有能力与 AI 一起扩展实现这些功能。
🤔 AI编程的真实体验
整个项目做下来差不多花了两天时间，相比传统的开发模式真的提速不少， 基于 CloudBase + Claude Code + Figma 的这套开发工具链，我总结了如下优势：
- 通过 AI 生成设计稿，可以让不懂设计的同学也能快速做出有设计感的界面
- Claude Code + CloudBase 可以快速实现前后端逻辑 & 资源的部署
- CloudBase 微信支付云模版可以帮助快速实现支付功能，无需关心复杂的支付流程
- 一人开发所花费的各类产品工具成本，相比传统开发模式中雇佣不同专业人士，可以节省大量成本
- AI编程帮助创业者快速验证商业想法，降低试错成本，快速迭代，快速验证，快速调整
💌 写在最后
这次AI驱动的商业化应用实践让我深深震撼了，因为它真的能帮我们做出有商业价值的应用 。AI工具不是要取代程序员，而是让每个有想法的人都能成为创造者。
🔗 相关链接
- Figma MCP 官方文档：https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server
- context7 文档：https://context7.com/
- CloudBase-AI-Toolkit：https://github.com/TencentCloudBase/CloudBase-AI-ToolKit
- CloudBase 微信支付云模板文档：https://tcb.cloud.tencent.com/cloud-template/detail?appName=wx-pay-v2
