大家好，我是苍何。

5 月 14 号，我写了一篇腾讯的 AI 插件的文章。

意外获得了十万加的阅读。

文章地址：

那个时候，CodeBuddy 还是个代码 copilot 助手，内嵌在各种 IDE 中。

被人喜欢，也被人诟病着。

22 号，CodeBuddy 发布全新的 AI IDE，你可以理解成是 Cursor，也不是 Cursor。

和 Cursor、Trae 一样，同样属 AI 编程原生 IDE，不同的是，CodeBuddy IDE 定位是产设研一体的 AI 全栈工程师。

它可以直接将 Figma 设计稿转成代码，然后部署上线，可以体验一站式创造产品的**。

内嵌这个是别的 IDE都没有的一种全新交互模式👍

不过相对比来说，CodeBuddy IDE 控件有些多，而且可能是他们刚上线太忙了，没有出新手引导，小白上手有些难。

所以很多小伙伴还在等我的教程。

和邀请码😄。（文末有获取方式）

废话不多说，直接开启使用教程。

下载地址在这：https://www.codebuddy.ai/

需要魔法外加谷歌登录，然后下载 IDE：

现在 CodeBuddy IDE 发布的是国际版，可使用 Claude 4 等国外大模型。

之后需要邀请码，目前向朋友要了一些，获取方式见文末。

填完邀请码后登录成功。

本地安装后，和 Cursor 一样，一眼的 Vscode 味道，不同的是右边 Chat 多了不少控件。

选择或者新建一个项目文件，你就能看到这样一个看着很 cute 的界面。

我在想以什么样的形式出教程，是单独每个控件介绍，然后教怎么使用？这个感觉挺无聊和乏味的。

想了很久，我决定以需求的角度出发出这一篇教程或许对读者是最友好的。

一共包含三种产品产生形态：一句话需求出产品、Figma 设计稿转产品、MCP 辅助开发。

稍微解释一下，Figma 是用来做设计的，可以做用户界面（UI）设计和原型制作工具。很多的产品经理和设计师都在用。

好啦，下面开始沉浸式体验下 CodeBuddy IDE 如何使用吧。

直接在 Chat 对话框提出需求：

模式选择 Craft 模式，模型选择 Claude Sonnet 4.

Craft 模式像是 Cursor 中的 Agent 模式，会自动执行逻辑，而 Chat 模式是用来对话用的。

觉得提示词太过于简单，也可直接点击 Boost Prompt。来优化提示词。

这里点了 Boost Prompt 之后，这个按钮会闪几下，然后才对话框中出优化好的提示词，我觉得不大友好，网速慢的话，用户会觉得咋没反应呢？

这是优化好后的提示词：

你应该注意到了，当我们选择 Craft 模式后，会多 2 个控件，分别是：设计模式和 Plan Mode。

第一次使用还有点猛，这 2 个开关干啥用的啊？

使用下来，发现打开设计模式，就能根据需求直出产品设计原型图，开启 Plan mode，就能根据需求生成开发计划方案。

别管三七二十一，这 2 功能都挺有用，全部开启吧。

可以看到，它显示根据需求，开始制定设计计划：

看了在 Chat 中的设计方案很 nice，但放到文档中的方案就有些简陋了，是没做同步写入吗？

然后开始制定开发计划了，你还别说，整个计划排的挺好，不过从技术经理或者项目经理角度来看，缺少交付标准，关键里程碑、开发时间、风险评估。

这里我感觉可以把这些设计文档啊，开发计划文档啊，都写入到 md 中来，光放在 Chat 中，也没法沉淀，而且要是能在设计方案和计划的时候给一个确认入口让人工 check，我感觉会更好，毕竟需求设计阶段，这可太重要了，不然开发好了再来改，贼麻烦。

接下来就可以看到，它开始自行安装依赖，开始开发了，整个开发过程速度非常快。

可惜出现错误后，它就卡在那了。

要点一下，才能继续。（自动修错误就好了）

有个很 nice 的能力，每完成一个任务后，就会更新开发计划状态，然后继续下一任务开发。

一顿操作后，写完了代码，一共 8 个页面、20+组件、9 个系统功能，3000+行高质量代码。

可惜并没有一次就成功，好在可以直接在内部 IDE 中将错误发给它，自己修复吧。

也能理解，写程序的过程出点 bug 正常，要看下他自行修复的能力。点击下 preview 就行。

ps：如果出现错误，直接跟他说：请自行检查所有代码，保证项目可运行。

可以看到，并没有示例图片，提示词中没加限定，我们可以继续向它提出要求：

使用高清场景图展示商品（如宠物使用产品的实拍图），页面布局层次分明，交互动效轻快灵动，使用风格统一的卡通化 icon 而不使用 emoji。

经过几轮修改，总算出来了，视频如下：

说几点感受吧，开发计划中 IDE 依旧没法自行测试验证每一个模块的功能可用性，导致会出一些 bug，其次，对于页面配图，对 context 的理解有待提高，选择图片有些不吻合。

好的地方是整体能快速开发出来东西了，且可以直接在 IDE 中预览并发送错误代码到 Chat 中，快速修复。

而且可以支持局部修改，具体可以看下这个case：

在 codebuddy 中支持直接连接 Figma 设计稿，并按照设计来写代码。这个是首创，非常方便。

点击后会直接在 IDE 内部打开 Figma 页面，第一次需要做一波登录操作

但是如果你的账户没有 Figma 设计稿怎么办？

为了保证大家都能快速上手，我想了个骚操作，先用 html to design 这个插件，将任意网页转成 Figma 设计稿，然后再到 codebuddy 中连接  Figma 设计稿开始 code。

在 Figma 草稿设计页面，搜索并选择  html to design  插件：

这个插件直接集成在了 Figma，方便将任意网站一键转为 Figma 设计稿。

填入网址，开始转换，这里我选择复刻的网站是腾讯 codebuddy. ai 这个网站。

这是转换完成的效果：

和原站完全一致，爽：

然后去 IDE 中选择该草稿。

进去后全选，将页面直接就带入到 ide 了：

好，直接开始开发，我们看下基于 Figma 设计稿出来的网站，和原网站的效果对比。

这个效果，不能说完全复刻吧，但已经非常相近了，而我也只是把 Figma 设计稿一链接。

这比较适合在 Figma 已经设计好的项目，直接拿来 codebuddy ，就很方便。

目前 codebuddy 内置了 Figma MCP，选择配置 MCP：

先要获取 API key，在 Figma 中点击个人头像，选择 Settings，选 Security，选择 Generate new token：

把几个权限都全部拉满。（至少是读权限）

这里我选择魔塔社区 SSE 连接 MCP 的方式，将自己的 key 复制到这里，然后生成专属的 SSE 链接：

然后复制到 codebuddy 中：

其他的 MCP 配置方式就都一样了，点击手动配置。

也希望 codebuddy 尽快多内嵌一些常用的 MCP 吧。

比如我可以连接高德地图 MCP + 即梦 MCP + 12306 MCP 实现精美的旅行站点网页。

之前在Cursor中还需要再连接下腾讯的 edgeone-pages-mcp 一键把网页直接部署。

现在在 codebuddy 中，点击部署，就能快速发布到线上并分享预览，一步到位。

在 codebuddy 中同样也可以一键部署上线。

还有 2 个功能，是选择组件和配置集成。

当点选择组件的时候可以看到有三个组件可以选择：

相信懂设计的朋友用的都比较多了，其中TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。有非常多的设计资源：

选择不同组件，决定了不同的设计样式。

最后一个就是配置集成，一共有 2 个。

这里配置是确定你的数据需要存在哪个地方。基本就是登录绑定一下自己的账号就好了。

以上就是今天文章所有内容了，当然还有一些功能我还在深度测试，比如前后台系统，数据存储。

这些天，大厂们太卷了，据说 GitHub 也推出了自己的 AI IDE，

但卷起来是好事，能够推动 AI 编程更快的发展。

未来的 AI 编程一定是端到端的自动化，无论是上下文工程师还是 AI 全栈工程师，其实要解决的都是一个东西。

那就是整个研发的全生命周期统统 AI 化，全部都能融入到一个 AI IDE 中。

比较乐观的是，这一天或许，很快就会到来。

到那时，人人都是开发者的时代真的要来了。

下面是邀请码赠送环节，目前一共有 20 个邀请码，我会从留言中最靠前的 20 位朋友中选出直接赠送。

三连被赠送的概率更高哦。当然经常留言和互动的小伙伴也有希望获得我置顶的机会。