AI开发小程序无从下手？CodeBuddy：我来助你！

以子之矛攻子之盾会怎样？我不知道。以鹅厂的CodeBuddy写鹅厂的小程序，我们现在来试试。#AIIDE #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 项目。

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

配置MCP

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

如图，点击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 的邀请码赠送给各位，请持续关注