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

相关推荐
PetterHillWater1 天前
千问快速review评审Java工程代码与异步代码智能体
ai编程
小徐_23331 天前
TRAE SOLO 正式发布了?我用它将像老乡鸡那样做饭小程序开源了!
前端·ai编程·trae
陈佬昔没带相机1 天前
Trae + 国产4大开源模型AI编程对比,Deepseek暂时落后
ai编程
袁袁袁袁满1 天前
国产首款视觉理解能力模型-Claude Code测评
ai·ai编程
对角1 天前
用 Gemini 3 复刻了 X 上爆火的复古拍立得,AI 也能写小程序了?
前端·uni-app·ai编程
Captaincc1 天前
AI 能写代码,但它造不出软件
前端·后端·ai编程
孟健1 天前
三小时上线,七天破千刀:AI 出海订阅站的 0-1 全流程复盘
ai编程·产品
飞哥数智坊1 天前
从没写过浏览器插件?我用 TRAE SOLO 2 小时就完成了专属翻译工具
人工智能·ai编程·trae
程序员鱼皮2 天前
Gemini 3.0 发布!
前端·ai编程·gemini
知识浅谈2 天前
Gemini3Pro无限使用手把手教程
ai编程