以子之矛攻子之盾会怎样?我不知道。以鹅厂的CodeBuddy写鹅厂的小程序,我们现在来试试。
在 Cursor 锁区后不久,7月24日,腾讯的 AI IDE CodeBuddy 开放体验了,我们今天使用鹅厂的 CodeBuddy 来尝试写一写鹅厂的小程序,看看会碰撞出什么样的火花🔥。

决策
文章题目该怎么写,中午吃饭吃什么,看到文章点不点赞?这些问题经常困扰着选择困难症的我,决策真是太难了。正好,前段时间在figma上看到了这个Figma-实战项目「叮咚决策器」项目,UI风格很好看,功能也非常贴合我的需求,所以趁着 CodeBuddy 免费体验,来用 CodeBuddy 来实现一下若干页面。

技术栈选择
小程序开发当然要选个好的基础模板,这次我选用我自己开发的 uni-app vue3 模板 wot-demo来作为基础项目进行开发,这样更加贴合实际开发场景。 wot-demo 主要由以下开源包组成:
- 核心:@uni-helper
- 引擎:uni-app
- 打包器:Vite
- CSS 样式:UnoCSS
- 代码质量:ESLint 和 TypeScript:
- 组件库:Wot UI
- CI/CD:uni-mini-ci
- 路由:uni-mini-router
- 网络请求:Alova
- Pinia:Pinia
前置配置
我们在开发之前,做一些必要的准备,包括项目搭建、MCP配置等
创建项目
参考 wot-demo 文档,使用 create-uni 创建一个 uni-app vue3 项目。
bash
pnpm create uni <project-name> -t wot-demo

配置MCP
参考文章 用 AI 驱动 wot-design-uni 开发小程序,我们可以使用 context7 MCP来获取wot-ui 组件库文档知识,正好我们借此了解一下 CodeBuddy 如何配置 MCP。
如图,点击MCP按钮就可以进入配置界面。
点击手动配置,如下图,其他的MCP也都是类似的操作。 填入context7 mcp的配置:
json
{
"mcpServers": {
"context7": {
"disabled": false,
"timeout": 60,
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@upstash/context7-mcp@latest"
]
}
}
}
选择模式与模型
好马配好鞍,好代码得是最好的模型写,所以这里我们选择Claude-4.0-Sonnet作为我们开发的模型,选择Craft模式来开发。
其他配置
一些特性例如设计模式、计划模式和提示词优化,大家可以自行探索,这些小细节 CodeBuddy 做得还挺不错。
结合Figma实现小程序开发
通常我们在AI编程工具中,需要使用 Figma Mcp 拉取设计稿,而在 CodeBuddy 中,我们无需 Figma Mcp 也可以实现对设计稿的还原,在 CodeBuddy 中打开 Figma 并从设计图中选择页面到对话中,然后描述需求发送即可,操作如下图:

我们简单组织一下需求,并选择设计稿首页,选择设计模式,将需求发送给 CodeBuddy,
CodeBuddy 会基于设计稿和需求描述来分析需求、设计方案、给出实施计划。

接下来点击继续,CodeBuddy 会开始执行计划,当生成的效果不太好的时候,我们可以选取对应的设计图告诉他需要重写:

最后首页生成效果对比figma设计稿还挺还原,效果如下图:

继续开发抛硬币功能

开发完成后,CodeBuddy 会给出本次开发的总结

我们直接看下生成的效果,可以看到效果还不错,如下图

总结
小小总结一下,CodeBuddy 的 Figma 还原能力相当强,还有一些特性直击需求痛点,非常不错,期待 CodeBuddy 后续的发展。
欢迎评论区讨论,后续会有 CodeBuddy 的邀请码赠送给各位,请持续关注