AI开发小程序无从下手?CodeBuddy:我来助你!

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

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

决策

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

技术栈选择

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

前置配置

我们在开发之前,做一些必要的准备,包括项目搭建、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 的邀请码赠送给各位,请持续关注

相关推荐
量子位41 分钟前
是个公司都在用AI Agent,但大家真的用明白了吗??| MEET2026圆桌论坛
aigc·ai编程
量子位42 分钟前
Google全链路赋能出海:3人团队调度千个智能体,可成独角兽|MEET2026
aigc·ai编程
Java后端的Ai之路1 小时前
【智能体搭建平台篇】-Dify部署方案介绍
人工智能·chatgpt·aigc·ai编程
用户4099322502123 小时前
Vue3中动态样式数组的后项覆盖规则如何与计算属性结合实现复杂状态样式管理?
前端·ai编程·trae
我家领养了个白胖胖4 小时前
Prompt、格式化输出、持久化ChatMemory
java·后端·ai编程
云闲不收7 小时前
AI编程系列——mcp与skill
人工智能·ai编程
用户3521802454757 小时前
🚀 Milvus 实战部署全记录
数据库·docker·ai编程
麦麦Max9 小时前
本地MCP与Cherry Studio
ai编程
小马过河R9 小时前
Codebuddy使用CloudBase MCP辅助AI编码基于Spec工作流开发的坦克大战小游戏
人工智能·团队开发·ai编程·codebuddy
Mintopia9 小时前
🌐 AIGC驱动的Web内容个性化:技术价值与用户隐私的平衡
人工智能·aigc·ai编程