手把手教你用 Claude Code + CloudBase + Figma 完成商业小程序全栈开发

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

“原型设计→前端开发→后端开发→支付集成→资源部署，AI 工具链让开发效率巨幅飞跃”

大家好！我是喜欢折腾 AI 的开发者 Luke，最近用 AI 工具做了一件很有意思的事情：从零开始，纯AI驱动，Vibe Coding 搭建了一个具备支付功能的商业化小程序。

最近 AI 编程工具满天飞，Cursor、Claude Code、Gemini CLI、Kiro等等，但我学习时发现：

社交网络上使用编程工具秀出的 90%的 AI 编程示例都停留在演示阶段，无法真正商用落地

我也对比了几家公司的产品，比如 Lovable, v0等，他们通过与 Supabase 集成，能完成前后端应用的开发，其中 Lovable 能与 Stripe 支付集成，这样能完成整个流程的闭环，做出海产品没问题，但是当我的产品目标用户在国内市场时，这些为海外服务的产品似乎就“水土不服”了

相比 Stripe 的信用卡支付，国内用户更熟悉的是微信/支付宝的支付方式
国内企业往往对数据有合规要求，更倾向于使用国内的云服务厂商，Supabase 就不太适合了

那么有没有办法能够找到一条 “本土化” 的 AI 全栈开发 & 落地商用的路径呢，接下来告诉你我怎么做的

经过一番调研，我选择了这套组合：

🤖 Claude Code CLI - 项目大脑

理解和分解复杂的业务需求，生成高质量的代码和架构方案
协调各个工具之间的配合

☁️ CloudBase-AI-Toolkit - CloudBase AI 工具：

提供 CloudBase MCP，实现数据库、云函数、静态托管一体化管理
预置的开发模版和 CloudBase **实践 rules

💰 CloudBase 微信小程序支付云模版 - 支付能力

开箱即用的支付能力封装，免去复杂的签名、安全验证
官方维护，安全性和稳定性有保障

🎨 Figma MCP - AI设计师

与 AI 编程工具无缝对接
快速迭代和原型验证

📚 Context7 MCP - 智能文档助手

智能搜索最新的API文档和**实践
提供准确的代码示例和配置方案

首先通过 Figma AI 完成设计稿设计：

Figma 页面中点击 AI 图标，选择 “First Draft”
输入提示词如下

注意：这里 figma AI 会生成一张页面稿子，这张稿子里是将多个页面合并在一起了，但不影响 Claude Code 调用工具理解

这里我们按如下步骤做好 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 文件中，如下

注意：这里分享一个踩坑经验，我在更新 .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 可以看到如下结果：

遵循 Figma MCP 官方的**实践，可以在 CLAUDE.md 末尾补充一个 Figma 的自定义规则

这份规则可以避免 Claude Code 从网上任意下载素材资源（有可能下载失败），而采用 Figma 提供的资源

首先需要登录 CloudBase 云开发环境（需要先在云开发平台上创建环境），对话框中输入 “登录云开发”
浏览器会先弹出云开发平台上的授权，授权后弹出环境选择确认框，选择环境后登录完成
Claude Code 对接 Figma MCP 完成原型稿的前端交互还原

Claude Code能够解读Figma设计稿的组件结构以及生成对应的小程序页面代码

先保证 Figma 当前生成的设计稿属于被选中状态，然后 Claude 命令行对话输入提示词如下

输入后，Claude 会调用 Figma MCP Server 的 get_code 工具读取设计稿细节（如下图），然后 Claude 会进行前端交互的还原开发了

当你通过多轮对话迭代，确认前端交互实现的没问题后，可以要求 Claude Code 开始后端逻辑的开发了，提示词如下

Claude Code 结合 CloudBase MCP 完成后端逻辑的编写及资源的部署：

生成并部署了 business 云函数，里面涉及获取商品列表，获取商品详情，创建订单，查询订单列表等逻辑
创建了 orders, products 两张表，用于存储订单和商品信息，关联的用户信息标识使用了 openid

在云开发平台上配置云模版并配置商户证书信息：

开通微信支付云模版
- 登录腾讯云开发平台
- 进入模板中心
- 安装微信支付模版
安装完成，配置商户信息
- 微信appId
- 商户号 (mch_id)
- 商户API证书序列号
- 商户API证书私钥
- API V3密钥
后续还需要配置接受支付通知的云函数，此时先不用配置，后面会讲到

未启用微信支付公钥则不需要填相关配置
检查云函数列表，确认已经部署了 wxpayFunctions 云函数

wxpayFunctions 中内置了微信支付的相关流程，如小程序下单，查询订单，退款等
告诉 Claude，调用 CloudBase 的工具将 wxpayFunctions 云函数下载到本地（cloudfunctions 目录），因为后续 AI 需要根据业务逻辑修改云函数代码

让 Claude Code 结合 Context7 的文档能力，基于 wxpayFunctions 模板代码，补充小程序里微信支付下单逻辑：

Claude Code 命令行对话中输入 “use context7, 参照文档资料帮我实现小程序下单逻辑”，这里也可以手动补充一些微信支付官方的文档链接在上下文中使用

Context7 MCP 调用工具寻找了支付相关的API文档材料

核心支付流程图示（这里后台调用JSAPI 下单不需要我们关注，已内置到模板逻辑中）

Claude 学习相关文档后会自动编写完成客户端发起下单，成功后唤起收银台，更新订单状态等逻辑。

当用户支付动作完成后，微信支付后台会推一个支付结果通知到云函数，我们需要创建一个云函数来处理这个通知，然后更新订单状态。

Claude Code 命令行对话中输入如下提示词

这里我让 Claude 直接读 CloudBase 官方的云模版文档中回调通知示例（把文档链接扔给它），创建了 wxpayOrderCallback 云函数，用于处理微信支付回调通知。

当 wxpayOrderCallback 云函数部署完成后，需要类似第 5 步中配置到模板中的“接受支付通知的云函数”，填入 scf:wxpayOrderCallback，这样当微信支付后台推送支付结果通知时，会调用 wxpayOrderCallback 云函数。

✅ 商品浏览和搜索
✅ 购物车管理
✅ 订单创建和查询
✅ 微信支付集成
✅ 支付状态实时更新
✅ 订单历史管理

当然比起市面上成熟的电商小程序，这个项目还有很多不足，比如：物流发货，地址管理，商品推荐/评论/收藏等，但我相信大家看了本文的内容后，有能力与 AI 一起扩展实现这些功能。

整个项目做下来差不多花了两天时间，相比传统的开发模式真的提速不少，基于 CloudBase + Claude Code + Figma 的这套开发工具链，我总结了如下优势：

通过 AI 生成设计稿，可以让不懂设计的同学也能快速做出有设计感的界面
Claude Code + CloudBase 可以快速实现前后端逻辑 & 资源的部署
CloudBase 微信支付云模版可以帮助快速实现支付功能，无需关心复杂的支付流程
一人开发所花费的各类产品工具成本，相比传统开发模式中雇佣不同专业人士，可以节省大量成本
AI编程帮助创业者快速验证商业想法，降低试错成本，快速迭代，快速验证，快速调整

这次AI驱动的商业化应用实践让我深深震撼了，因为它真的能帮我们做出有商业价值的应用。AI工具不是要取代程序员，而是让每个有想法的人都能成为创造者。

Figma 原型链接：www.figma.com/design/cJm8…
项目Github 链接：github.com/Mrjing/shop…
Figma MCP 官方文档：help.figma.com/hc/en-us/ar…
context7 文档：context7.com/
CloudBase-AI-Toolkit：github.com/TencentClou…
CloudBase 微信支付云模板文档：tcb.cloud.tencent.com/cloud-templ…

手把手教你用 Claude Code + CloudBase + Figma 完成商业小程序全栈开发

相关推荐