CodeBuddy IDE 国际版 6000 字评测

01 CodeBuddy  综合评价

继字节跳动将国产 AI IDE - Trae 推向国际市场之后,腾讯终于也拿出了自己的看家本领,祭出了 CodeBuddy IDE 国际版(注意是国际版)。

如果要用一句话总结,使用 CodeBuddy 一周以来,吉米的主要感受,那就是两个字——

舒适!

同时在用 Cursor、Trae、Kiro 等 AI IDE 进行过真实场景产品研发的笔者认为,判断一个 AI IDE(AI 编码工具)是否“舒适”,不在于它是否会读心术、又或者是否收费,而是有几个重要的衡量指标。

一是,真正意义上的 AI IDE

AI 这个词意味着,能否真正实现零手动编码,全靠自然语言对话,就能得到我们想要的成品

而 IDE 这个词意味着,使用这个工具最终产出的,不是 Demo,或仅仅只有前端的 Html 页面,而是从需求到设计、再从设计到研发、再从研发到验收的完整流程均可使用的一站式工具。

二是,能否比人类更加精准快速的解决 BUG

在大多数场景下,处理 BUG 时,能否在用户的提示下,精准定位问题原因,并快速修复故障。而不是反复在改 BUG 时,又增加新的 BUG。虽然我们有时根据经验,会比 AI IDE 更快的定位问题原因,但这不应该成为常态。

三是,是否同时扮演多角色,以软件工程的思路,展开项目的完整生命周期。

真实项目开展,是提质增速、降低后续返工率为重要成功目标,AI IDE 加持下的项目,也不例外。从需求收集、需求澄清、需求范围确认、拆解需求、确定前后端技术栈、最后分解任务、再到按任务实施的全流程,这是软件工程科学性和严谨性的一个重要体现,也是考验 AI IDE 是否能参与真实项目研发的一个重要指标。

从上面三个大的目标来看,综合而言,CodeBuddy IDE 绝对是国内最为出色的 AI IDE ,没有之一。就如同它的名字 CodeBuddy ,这绝对是一个值得信赖的编程好伙伴。

CodeBuddy 综合优点

💡 界面优美、响应速度快、毫无卡顿。

💡 问题修复特别快,几乎是一天一更新。

💡 上下文窗口足够长,偶尔会失忆,但不会出现“老年痴呆”。

💡 可以回滚古早的历史版本(这功能相当实用)

💡 无需人为介入,CodeBuddy 自动下载和安装项目所需要的依赖以及运行各种环境配置命令(闲者时刻)

💡 提供编程最强的 Claude 4.0 Sonnet 模型不限量免费用(30天)

💡 无需你拥有高超的提示词写作技巧,一句话需求也能给你生成高品质的产品。

💡 定位代码中的错误较为精准

💡 解决了代码修改死循环(失忆导致在不同代码版本间徘徊)


CodeBuddy 综合缺点

写在文末,小伙伴可以直接拉到最后。

 02 CodeBuddy  下载与登录

下载地址(需要魔法):https://www.codebuddy.ai/

💡 大家注意看首页,连 Price (价格)菜单都没有,这羊毛还不赶紧薅起来?

安装过程很简单,接着进行初始化设置。


凭自身喜好选择黑或白主题,语言选择中文简体。


直接谷歌登录省去注册。没有谷歌账号的小伙伴可以看我这篇文章👇

国内如何注册使用Claude?(一)如何注册一个谷歌邮箱


进入编辑器的主页。界面非常清爽。

 03 CodeBuddy  使用介绍


和其他的 AI 编码工具类似,基本界面分为功能区、代码区、输入输出区(调试区)和 AI 功能区。

虽然说这种布局没有毛病,但除了 AI 功能区以外,其他的内容基本上和传统的编程 IDE 并无二致。

常规的编程功能,本文不做过多介绍。

重点介绍 AI 功能区,日常 90% 的时间都在用的窗口,其实下图这部分。


分别有“构建模式”,“聊天模式”,“模型选择”,“计划模式”、“设计模式”、“提示词优化” 这几个按钮。


在后文的项目教程中,会说明如何使用这些按钮

你可以选择 CodeBuddy 默认接入的模型。(包括编程能力笑傲江湖的 Claude 4.0 和 Gemini 2.5 pro ,现在拿到邀请码后,可以无限次数免费使用)!


还支持直连 Supabase 数据库。


连接 Supabase 数据库


作者希望同时介绍 Supabase 的基本使用方法,因此不介绍集成后项目研发模式,有兴趣了解的小伙伴可以在评论区留言。

 04 CodeBuddy  完整项目编码实战

电商和博客,是编程界永远的主题。

我们使用 CodeBuddy 打造一个真实的、打通前后端的实际项目——带博客功能的软件商店。

既然是实际项目,那就必须有后端,既然是氛围编码(Vibe Coding),那就既要看结果又要降低使用难度,因此采用 Supabase 作为本项目的后端。

实战开始

首先,点亮设计模式和计划模式。


为了体验 CodeBuddy 的提示词优化效果,我故意没有提关于网站后台的信息,看它是否能意识到:

在当前目录下,构建一个软件销售的电商网站,售卖我制作的个人软件,同时作为我的个人博客网站,网站前端使用自适应布局(同时适应手机和PC),后端使用supabase。功能包括:
1. 注册用户可以浏览博客,评论。
2. 将软件加入购物车,结算购买等
3. 我可以审核用户的评论,同时对用户的评论进行评论。

 


CodeBuddy 将提示词进行了初整理,同时自动加入了后台管理功能,说明 CodeBuddy 完全理解了一个电商网站应该具备的所有高层级展示和控制组成部分。

"在当前目录下开发一个集软件销售和个人博客功能于一体的电商网站,前端采用响应式设计(兼容PC和移动端),后端使用Supabase。主要功能包括:
1. 用户系统:注册用户可浏览博客文章并发表评论
2. 电商功能:支持将软件产品加入购物车、结算购买等完整购物流程
3. 评论管理:管理员可审核用户评论,并能对用户评论进行回复
4. 自适应布局:确保网站在不同设备上都能良好显示
5. 后台管理:提供简洁的界面用于管理软件产品、博客内容和用户评论
要求整体设计简洁专业,注重用户体验,特别是购物流程要流畅便捷。"

 

我们点击 CodeBuddy 左下角的 Craft,进构建模式,将刚才优化好的提示词,直接提交给 CodeBuddy。


你会发现,CodeBuddy 会在项目的主目录下,自动生成这个站点的总体设计文件。


这个文件中包含了,核心特性信息(需求)、技术栈(Tech Stack)、设计要求(Design)、开发计划(Plan)等信息。CodeBuddy 的并未在此文件中记录较多的信息,但我们在对话窗口中可以看到拆分得足够细的项目需求信息,比如技术架构、设计风格、页面结构、元素等等。


软件销售博客电商网站.md

足以看出 CodeBuddy 在需求提示和任务拆解上,确实是一流水平。


产品需求概述


每个页面风格及页面元素设计


研发任务清单

如果对其中分解事项不满意,还可以通过对话进行调整。

💡 CodeBuddy 将过去需要产品经理、技术架构师、UI设计、前端开发、后端开发坐下来一起开几次会才能定下来的活,一分钟就给你干完了。

如果你对技术架构等内容并不了解,完全没有关系,闭着眼睛直接点 “完全符合需求,开始执行” 就完了。


CodeBuddy 开始自动初始开发环境,安装需要的依赖、下载必须的组件……我们要做的,就是泡杯咖啡,拿出报纸耐心等待……


初始化步骤完成之后,CodeBuddy 会开始创建后端需要的代码,这时点击 “我已有Supabase” 项目,让 CodeBuddy 继续生成代码即可。


在 CodeBuddy 进行 Supabase 后端代码匹配设置的同时,我们要进行一个非常重要的环节,那就是

注册 Supabase

注册地址:https://supabase.com/dashboard/sign-up


💡 如果你有 GitHub 的账号,那你可以直接用它来登录 Supabase。

如果没有也不打紧,用邮箱注册一个即可。

注册成功之后,Supabase 会要求我们创建一个组织,这里的 Name 可以随意填写,Type 选个人(Personal),Plan 一定要选 Free(免费套餐)。


💡 Free 套餐只能创建最多两个项目,但已足够我们使用了。

接下来进入创建项目环节。


项目名称(Project name)、Database Password(数据库密码)都可以随意填写。Region (地区),选择默认的美国俄亥俄州,点击 “Create new project” 即可。


连接 Supabase

创建好项目之后,我们要记录几个重要的信息,一是 Project URL,二是 Anon Key。有了这两个信息,才能让我们的项目和 Supabase 数据库进行连接。

接下来一步步告诉大家如何获取这两个信息,并且将这两个信息记录到哪里。

首先,进入项目首页之后,一直向下拉到出现 “

Project API” 部分。 点击右侧的 “Copy” 按钮,分别复制 Project URL 和 API Key 的到记事本中。


打开 CodeBuddy 为我们生成好的环境配置文件 .env.local


将其中的 VITE_SUPABASE_URL 和 VITE_SUPABASE_ANON_KEY 替换为刚才我们暂存的两个值。


创建数据库表结构

在文件列表中,打开 CodeBuddy 为我们创建好的 database-schema.sql 文件。


复制该文件中的所有内容,并回到 Supabase 网页,点击页面左侧菜单中的 “SQL Editor”。


粘贴 database-schema.sql 中的所有内容,点击 “Run”。


出现如下信息,说明所有 SQL 语句执行成功。


到此为止,CodeBuddy 需要我们手动完成的任务,已经全部完成,这时,我们选择第一项,告诉 CodeBuddy 继续进行下一步操作。


由于我们开启的是 “Craft” 模式,因此 CodeBuddy 编码和生成项目文件的过程,并不需要我们手动干预,只需要等待它自动完成即可。

💡 在代码生成过程中,如果出现了大量的红色波浪线也无需惊慌,等待 CodeBuddy 自动修复错误即可。


有时候, CodeBuddy 会因为执行任务过多,而自动停顿,这时需要我们手动点击 “继续”。

确认页面效果

等待 CodeBuddy 生成完所有的页面,我们来确认下前台页面的效果。


看得出来,页面效果还是相当不错的,所有页面都已经实现,而且页面清爽直观。

💡 除了这种清爽配色,你也可以修改整体的网页配色方案。更多的配色方法,大家可以自行研究。

登录与注册

这是关键的一个步骤,也是决定整个项目是否真正可用的分水岭。

一些 AI 编辑器到这一步就很难继续往下推进了,但这些对 CodeBuddy 来说都不是事儿。

让 CodeBuddy 首先为我们创建网站管理员账号。

💡 博客文章需要作者、网站管理后台也需要一个登录账号。因此,创建一个管理员账号在先,填充其他数据在后。

打开 “Authentication” > “Sign in/Providers” > “

User Signups”配置项,去掉“发送确认邮件”选项,确保创建用户时 Supabase 不会给你发确认邮件。

CodeBuddy 很快创建好一个名为:

init-admin.js 的文件,并且自动调用脚本在Supabase 中创建了管理员账户。


注册测试

注册功能正常,并且也自动登陆了,网页微调即可(虽然我让 Supabase 不发送验证邮件,但页面还是显示要进行邮箱确认)


登陆测试

使用刚才提示词中的管理员账号和密码登录,一次性进入管理后台,BingGo!


向数据库填充其他数据

找到 “Authentication” > "Users" 表,第一条就是管理员账户数据,复制 UID。

提示词:
我希望你添加初始数据,
所有页面上的所有数据都从 supabase 数据库中读取,
而不是使用模拟数据。
请生成用于初始化数据的 SQL 脚本
(管理员的用户ID是 “【UID】”),
我会在Supabase中运行他们

 


将下面提示词中的【UID】替换成复制出来的 UID。

交给 CodeBuddy 后,生成了一个数据初始化文件。


同样的,复制 init-database.sql 中的内容,粘贴到 Supabase 的 SQL Editor 中运行(参考【创建数据库表结构】)

替换网页上的模拟数据。

这个步骤 CodeBuddy 需要较多的时间,将原有的页面模拟数据,改为从数据库中获取。这个替换过程值得耐心等待。

💡 这里更建议的方法是,按照先后台后前台的顺序,逐个让 CodeBuddy 替换掉模拟数据。同时对板块的功能进行逐个测试。

后台功能测试

打开后台,一般地址是:http://localhost:5173/,

输入你提示词中的邮箱和密码即可。

可以看到后台包括:仪表盘、评论管理、博客管理、产品管理、系统设置。


写到这里,后续的迭代基本上可以举一反三了,碍于文章篇幅的限制,接下来更多功能的测试、优化与追加,只需要按部就班的与 CodeBuddy 对话,逐个完善即可。

关于 BUG 修复

CodeBuddy 中所有的语法错误,都会直接显示在 “问题” 窗口中。


修复方法也很简单,点击⭕,选择 “Add to CodeBuddy”,让它自动修复 BUG 即可。

关于 Supabase RLS 策略

使用 Supabase 的一个容易出现的问题,RLS 带来的出乎意料的 BUG。

其实最简单的办法,就是把每个表的 RLS 策略截图告知 CodeBuddy,让他来判断应该如何调整  RLS 策略。你不用担心 CodeBuddy 搞不定。


💡 各表的 RLS 策略,在 “Authentication”  > “Policies” 菜单中查看。

 05 CodeBuddy  总结 & 使用建议技巧

虽说 CodeBuddy IDE 国际版,是腾讯推向国际市场的第一款产品,但是可以看出完成度非常高,强烈建议大家入手尝试,尤其是当下可以免费使用 Claude 4.0 Sonnect,机会难得。

下面是一些使用小技巧,可以帮助小伙伴们用起来更加得心应手。

💡 使用小技巧

1、虽然 Craft 模式很好用,但请多使用 Chat 模式。


如果说 Craft  模式是一个全栈工程师的话,那么 Chat 就是项目资讯顾问了。多与顾问讨论和思考,然后再让工程师动手,往往事半功倍。我常用的 Chat 模式的提示词有:

〇 请告诉我你准备怎么办?

〇 你觉得问题出在哪里?

〇 只做这些改变。不要触碰其他任何东西。其他所有东西应该保持原样。

⚪ 我们这里有哪些假设可能是错误的?

⚪ 如果这个做出世界级水平,会是什么样子?

2、解决BUG时,提供详尽信息。

描述 BUG 的时候,尽量把控制台中的信息以及页面呈现的信息、Supabase 中的数据变化,一并截图给 CodeBuddy,帮助它快速定位问题。

3、手动替 CodeBuddy 保存重要项目文档。

由于上下文窗口始终有限,随着对话次数的增加,模型忘记项目的规格(Spec)是常态(哪个模型都一样)。

建议在项目一开始的时候,将 CodeBuddy 分解出的用户需求、技术文档、设计文档等重要文档,从聊天记录中复制出来,手动创建文档,保存在项目中。一方面发送给 CodeBuddy 避免它失忆,另一方面也便于我们对功能进行验收。后续你还能不断完善这些文档,不要嫌麻烦,这些都是宝贵的项目资产

4、数据表文件版本要好好管理。

CodeBuddy 生成所有与数据库相关的文件,都会直接放在项目根目录下,随着数据库的不断修改,会让 CodeBuddy 逐渐进入混乱,搞不清最新的数据表结构究竟为何,从而导致改 BUG 又改出新 BUG 的死循环。

建议将 CodeBuddy 生成的所有与数据库相关的文件,都放置在同一项目文件夹下(比如我放在 database 文件夹下)。同时,对所有此类型的文件,在文件名中加入时间戳,比如将 “fix-blog-display.sql ” 修改为 “fix-blog-display@202508010951.sql”,并且在对话中提示 CodeBuddy 注意查看时间戳,从而避免 CodeBuddy 逐渐陷入混乱。

5、对话框中输出的内容要仔细看。

虽然我们不关心代码的具体实现,但 CodeBuddy 在对话框中会把思考过程和执行过程展示出来,这会透露很多细节。通过这些细节,你可以看到 CodeBuddy 在思考时有一些不全面的地方,甚至是前后文遗忘的地方,这往往会造成新的 BUG。这就要求我们在下一次提示的时候,在提示词中增加一些必要的上下文资料,避免 CodeBuddy 越走越远。

6、超过两次修复同一BUG失败时,赶紧回到原点。

这说明 CodeBuddy 在原地转圈,并没有定位到真正的问题,这时候切换到 Chat 模式,询问它需要哪些信息定位问题原因。并且要求 CodeBuddy 打印执行日志。

 06 CodeBuddy  最后 & 函待解决的问题

最后来说说,个人认为 CodeBuddy 可以继续改进的点。

使用体验需要加强

很明显 CodeBuddy 依然采用的是符合程序员使用习惯的设计,虽然对于程序员而言极易上手。但如果同时面向普通的 Vibe Coding 用户,那么在使用细节上,CodeBuddy 还是有进一步的优化空间。

2. 灰屏问题急需解决

当项目上下文很长之后(比如我达到了55MB),整个对话窗口就变成了这种灰色界面,必须重启 CodeBuddy 才能恢复正常(重启之后一会儿又会出现)。


3. 偶尔会掉连(也许是因为魔法原因)。

4. 规格文档,尤其是过程文档不完整(希望多向 Kiro 学习)

转自:https://mp.weixin.qq.com/s/rH13YVpI5uiu7iX_xYaiqw

文章版权归原作者所有或来自互联网,未经允许请勿转载。如有侵权请联系我删除,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录