本文介绍了如何使用腾讯新推出的AI IDE CodeBuddy来开发小程序。作者以一个“叮咚决策器”项目为例，详细展示了CodeBuddy在项目搭建、技术栈选择、MCP配置、模式选择以及与Figma设计稿的联动开发过程。通过实际操作，文章肯定了CodeBuddy在Figma还原能力和满足开发痛点方面的优势，并期待其未来的发展。作者还分享了项目使用的uni-app vue3模板wot-demo及其技术栈，为开发者提供了参考。

🤖 **CodeBuddy的AI驱动开发能力**：CodeBuddy作为腾讯推出的AI IDE，能够辅助开发者进行小程序开发。文章以“叮咚决策器”项目为例，展示了如何利用CodeBuddy从零开始搭建项目、配置开发环境，并能与Figma设计稿进行联动，通过文本描述和设计稿的结合，AI能够分析需求、设计方案并生成代码，极大地提高了开发效率。

✨ **与Figma设计稿的无缝联动**：CodeBuddy的一大亮点是其强大的Figma集成能力，无需额外的Figma MCP即可直接从Figma拉取设计稿并进行还原。用户只需在CodeBuddy中打开Figma，选择设计页面并描述需求，AI便能据此生成对应的代码实现，甚至在效果不理想时进行重写，确保了开发效果与设计稿的高度一致性。

🛠️ **技术栈与开发流程展示**：文章详细介绍了项目所使用的技术栈，包括uni-app、Vue 3、Vite、UnoCSS、ESLint、TypeScript、Wot UI组件库、uni-mini-ci、uni-mini-router、Alova以及Pinia。作者还阐述了项目的前置配置，如项目搭建和MCP配置，特别是如何配置context7 MCP以获取wot-ui组件库的文档知识，为开发者提供了清晰的技术实现路径。

💡 **模型与模式选择的重要性**：文章强调了选择合适的AI模型和开发模式对开发效率和质量的影响。作者选择了Claude-4.0-Sonnet模型和Craft模式进行开发，并提及CodeBuddy在设计模式、计划模式和提示词优化等方面提供的细节功能，说明了AI工具的精细化配置能够更好地服务于开发需求。

以子之矛攻子之盾会怎样？我不知道。以鹅厂的CodeBuddy写鹅厂的小程序，我们现在来试试。

在 Cursor 锁区后不久，7月24日，腾讯的 AI IDE CodeBuddy 开放体验了，我们今天使用鹅厂的 CodeBuddy 来尝试写一写鹅厂的小程序，看看会碰撞出什么样的火花🔥。

决策

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

技术栈选择

小程序开发当然要选个好的基础模板，这次我选用我自己开发的 uni-app vue3 模板 wot-demo来作为基础项目进行开发，这样更加贴合实际开发场景。wot-demo 主要由以下开源包组成：

核心：@uni-helper引擎：uni-app打包器：ViteCSS 样式：UnoCSS代码质量：ESLint 和 TypeScript：组件库：Wot UICI/CD：uni-mini-ci路由：uni-mini-router网络请求：AlovaPinia：Pinia

前置配置

我们在开发之前，做一些必要的准备，包括项目搭建、MCP配置等

创建项目

参考 wot-demo 文档，使用 create-uni 创建一个 uni-app vue3 项目。

pnpm create uni <project-name> -t wot-demo

配置MCP

参考文章 用 AI 驱动 wot-design-uni 开发小程序,我们可以使用 context7 MCP来获取wot-ui 组件库文档知识，正好我们借此了解一下 CodeBuddy 如何配置 MCP。

如图，点击MCP按钮就可以进入配置界面。

点击手动配置,如下图，其他的MCP也都是类似的操作。填入context7 mcp的配置：

{  "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 的邀请码赠送给各位，请持续关注