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

相关推荐
github.com/starRTC5 小时前
Claude Code中英文系列教程25:非交互式运行 Claude Code
人工智能·ai编程
玄同7659 小时前
Trae国际版与国内版深度测评:AI原生IDE的双生花
ide·人工智能·ai编程·cursor·ai-native·trae
乱世刀疤9 小时前
Claude Code实战:生成植物大战僵尸游戏
ai编程
nbsaas-boot10 小时前
如何进行 Vibe Coding:从“灵感驱动”到“可交付工程”的方法论
java·ai编程
LinkZ-Dev12 小时前
521-解决谷歌 Antigravity 软件登录相关问题
ai编程·gemini·antigravity
玉梅小洋1 天前
Claude Code 从入门到精通(七):Sub Agent 与 Skill 终极PK
人工智能·ai·大模型·ai编程·claude·ai工具
-嘟囔着拯救世界-1 天前
【保姆级教程】Win11 下从零部署 Claude Code:本地环境配置 + VSCode 可视化界面全流程指南
人工智能·vscode·ai·编辑器·html5·ai编程·claude code
小小管写大大码1 天前
如何让vscode变得更智能?vscode接入claude实现自动编程
运维·ide·vscode·自动化·编辑器·ai编程·腾讯云ai代码助手
Anarkh_Lee1 天前
【小白也能实现智能问数智能体】使用开源的universal-db-mcp在coze中实现问数 AskDB智能体
数据库·人工智能·ai·开源·ai编程
森之鸟1 天前
2026年AI编程工具全景图:GitHub Copilot vs Cursor vs Codeium,我如何选择?
github·copilot·ai编程