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

相关推荐
全栈弄潮儿4 小时前
不要先问“用哪个 AI”,先盘点你的开发工作流
aigc·openai·ai编程
杨杨杨大侠5 小时前
大模型的权重到底怎么用?拆开一个 token 的生成过程
aigc·openai·ai编程
吴佳浩 Alben5 小时前
Agent 怎么做自动化评测?构建端到端的 Agent Evaluation 体系
人工智能·语言模型·架构·自动化·ai编程
小虎AI生活6 小时前
从四大模型一周连发看企业 AI 落地,为什么 95% 的试点不赚钱
ai编程
孟健6 小时前
Gemini 3.8 Flash 没涨价,干活却贵了 40%?
ai编程
举个栗子。9 小时前
SwarmForge:AI 智能体协同编程框架,让多个 Agent 在隔离工作区并行协作
人工智能·开源·ai编程
MuYi042011 小时前
71.6 万行 Flutter 重写成 112.5 万行原生双端:一次 AI 驱动的百万行架构迁移复盘
ai编程
晚安code11 小时前
Claude Fable 5.1 发布解读:科研智能体跑分翻倍,Agent 成本降45%
ai编程·claude
9i编程11 小时前
15.对SKILL进行一次全新尝试,改为框架+细节方式的实践及验证:三次联调(4)——第一次测试与事故
人工智能·openai·ai编程
程序员老刘11 小时前
现在回头看,Dart取消宏是无比正确的决定
flutter·ai编程·dart