1、概述
工具简介
CodeBuddy IDE他是属于一款AI IDE，它是一款非常酷的飙车助手，全球首个"产设研一体"AI 全栈工程师 ，它能帮助我们开发者更快速更轻松的写代码。其实腾讯内部各个产品也都有用到这款工具，以前是以插件形式出现在大众的视野，那么这次则以独立开发工具出现在各位的眼前。你不管是学生还是我们个人开发者，还是说团队，都能去使用CodeBuddy。他能更好的帮助你提升工作效率等，他能理解我们的自然语言，我们用能听懂的话告诉他我们的需求，那么他也能明白我们的意思从而去执行。比如"创建一个2048的网页 "以及"我的项目哪里出错了，帮我修复这个BUG"等，他都能轻松应对。或许还有更厉害的，他能帮助你拆解十分复杂的项目，让你看得懂。在主要内容上还能加上注释，完美解决了记不住的问题。综上所述CodeBuddy更像是一个你的贴身小伙伴，陪你一起照亮编程路上的这盏明灯。
测评目标
本次测评的目的是通过这次内测，来看看CodeBuddy现在他能做什么，对比以前有什么优势，是否能提升我们的开发效率？以及他自带的AI表现能否符合使用需求。说句能理解的话就是，看他到底能不能够格，被称之为AI IDE。
测评环境
- 操作系统：macOS 14.4.1
- 硬件配置：Apple M1 / 16GB RAM
- IDE版本：CodeBuddy v0.1.242272（内测版）
2、UI界面概
favicon
IDE界面
对话框
响应区域
3、功能性评估
智能结构化PRD文档自动生成
我们在使用部分AI工具的时候，会产生他不能够理解你的意思。那么他的思考方式会类似于产品需求文档，比如你需要实现什么功能，或者实现什么样的布局。其实这一块主要就是测试他的理解能力如何，生成出来的内容是否符合我们的场景。
测试内容
我们输入内容：Develop the basic features of a social media platform.
我们来看看他是否能正确理解 生成PRD文档呢？
内容完整性与结构性
- 在相应区域输出的内容整体来说比较的完整，包含了产品概述和核心功能等。
- 其次列出了项目功能模块，包括产品的用户注册、社交互动、消息推送、搜索功能等内容，我们发现这些都是社交平台最基础的核心功能。
- UI设计指南也在他的考虑范围，写了我们所需的外观风格以及设计需求等，能够为我们的前端开发提供详细且具体的视觉参考。
适用性与灵活性
- 这个PRD文档其实非常详细，你作为原型设计师，你可能看到这些需求你就知道怎么去画UI图了。
- 对于开发人员来说也是很不错的，需求详细，能够帮助团队快速完成项目并且完成上线。
- 他所生成的内容涵盖了UI设计到功能开发的关键点，也人性化的考虑到不同平台的需求。
技术选型与架构
- 对技术选型方向很清晰，技术选择不老旧
- 使用React、Node.js、MongoDB等技术栈，符合现代开发趋势。
- Socket.io等实时功能使用的还是比较明确的，保障了用户交互的流畅性。
快速原型交叉生成
这一步的测试简单粗暴，要么就是我们把界面转化成提示词。然后用提示词丢给AI，看他能否大致的还原界面。要么就是我们把图片丢给AI，然后告诉他我们要复刻这个界面，看看这个AI能不能完成。这一步是怎么来的呢？其实我们一般在产品的初期，我们通常会很快速的出一版交互原型，那么这个时候他就非常能体现出优势了。
图片测试内容
那么为了方便，我们直接丢图片给他，让他生成出来。你们可以找一个界面，然后截个图粘贴到对话框即可。这里我们输入Please generate an exactly identical interface for me.
我们看到右下角有一个星一样的图标，他这个是对提示词进行优化，我们输入内容之后可以点击一下。等待内容润色完毕。
我这里多点了几下，然后我们看响应区域的输出，看看他生成的如何。
我们这里看到他生成了一个html文件和一个css文件。生成完毕之后直接就会弹出预览，这个功能是比较不错的，也是非常实用的。不用每次测试都打开浏览器了。
整体设计与布局
- AI复刻的界面还是比较一致的，包含了一些关键的元素。
- 界面微改大致就能实现我们原图效果了。
- 保持了原有的层次结构，方便查找。
其实这个参考意义是有的，但是我们要清楚，这个其实还得看提示词。提示词强，AI容易理解等都是导致这些生成结构的一些原因。
文字测试内容
这里我用了一段提示词，看看他能不能理解到我们的意思，从而生成出和我们原本大差不差的界面。
具体的提示词我就截个图，具体就不放在文章当中，可以自己转一下文字，也是比较方便的。那么我们一起来看一下。
我们把这个提示词输入到我们的对话框当中，左侧就开始代码编写了。
这里看到，就生成了两个文件，一个html和css文件。生成的网站预览界面如下：
整体界面是非常符合我的要求的，还原度还是很高的，右侧换成自己的个人图片或者工作照也都是可以的。这一块能看到他的能力还是非常突出的。这个界面样式参考了一位开源大佬@decadences的作品生成的提示词。
我们来看看原来的界面长什么样，对比一下复刻的效果是不是很好。
整体来说通过这种方式来复刻界面的效果是很好的，可以去尝试一下。当然你如果有图片什么的可以提前准备好图片，告诉他什么地方用什么图片。
Figma深度融合，视觉稿秒还原前后端代码
连接Figma
在CodeBuddy当中，内置了Figma能力，不是MCP，虽然也自带了一个Figma MCP，但是这样会更好的去使用，如果你使用的是Figma的应用，那你们就能去用Figma MCP，这里我们演示的为IDEA当中自带的Figma能力。我们在对话框，鼠标移动到图片当中的位置，左上角第一个，鼠标移动上去会显示Figma，我们点击。
我们点击之后，IDE不会跳转浏览器，而是这边直接进入这个界面，参考如下图。这里我们登录账号即可。
我们进入到我们需要实现的内容前，这里以官方模板为例子，进行一个展示。
这里选择这个项目，然后进入项目找到你想实现的板块。
这里我们选择一个我们要实现的界面，一定要选择布局网格，不然可能会缺失内容。选择完成之后，我们看到右侧会出现内容。
实现界面
自动识别我们的画布，而且默认自带语句，如果没出来可以使用@Figma 进行使用，Implement selected figma content. 其实这里我们直接回车就可以了，我们来看看效果。
这里是生成结束截的图，大概就是生成了三个文件，html、css、js文件，同时生成完毕之后和上面一样，直接就预览。
这个界面有点压缩了，我们打开浏览器看看，看看界面是否还是这样的。
界面是这样的，整体还可以，有百分之九十还原了。这一块可以各位自行探索一下，AI每次生成出来的都会有一些细微的差别，各位到时候能自己调整一下就可以。这里的功能当然不止这些还需要各位到时候自行去探索了。
一键部署至沙箱环境
这里以上面的一个项目直接做一下测试，一键部署至沙箱环境，并生成可分享链接，方便团队快速验证反馈。
这里各位可以打开一个可部署的项目，我们一起来试试。（将当前项目部署到远程）
我们在对话框输入，Deploy current project to remote，然后直接回车。
这里输出完毕之后这里有个Publish CloudStudio （发布到CloudStudio），我们这个时候点击一下。
这个回复目前不管你是任何语言，他回答的都是中文，这一块官方的工作人员也在改的。在发布会之前应该会修复完毕，所以到你们手上使用的版本应该是正常的。我们能看到他会一步一步的去执行，相当于就是这个流程图上的过程。
执行第三步的时候，右边有一个✅，就代表该步骤已经执行完毕了。他会按照这个顺序一步一步的去部署。
这里就是最终完成部署的样子，我们可以通过给出的链接或者扫描二维码对已经部署成功的项目进行访问。这里还有一个小细节就是他会对生成出来的二维码进行美化，我试过几次，每次生成出来的二维码颜色都会不一样，这其实还是蛮不错的。目前与产品团队交流的时候也问过这个二维码的有效时间是多久，他们的回答是说暂时是永久的。当然我举得随着用户基数的扩大，肯定会变成有效期一小时这种。
我们访问公开链接，都是能够去进行访问的。这一点我觉得是非常不错的，之前想要预览一般会用到Edge One Pages，然而现在基本上一个软件直接搞定。那么这里的沙箱环境我还是很满意的，我们继续探索其他板块。
内置BaaS服务，开箱即用的后端支持
这里我们测试一下自带的Supabase使用体验如何，我用一个简单的图书管理系统来进行演示，技术栈使用的是React+Supabase的案例。那么在开始前需要绑定一下账号，并且进行授权。他的整体和上面说的Figma是很相似的，他们属于内置，但一定不是属于MCP，所以这种方式会让适配性更好，让他能更理解我们的项目。
绑定账号
我们在设置界面找到Integration （集成）然后点击右侧的Manage （管理），进入到账号绑定界面。
这里会弹出是否打开外部网站，这里点击打开，当然你也可以复制到其他浏览器进行打开并且授权。
进入到浏览器之后，这里会让你登录/注册账号，这里根据实际情况进行下一步即可，如果已经登录的这一步可以忽略。
登录之后会弹出授权界面，这里就不截图了，授权完毕之后会弹出下面这个界面。
这里会有一个倒计时，结束了会自动跳转到CodeBuddy当中，这里就会出现下面的这个界面了。
由于我这没有项目，我们去新建一个新项目，这里就叫做text ，然后选择即可。
这些步骤走完了也就代表绑定成功了，记住你需要用到它的时候，每次新建项目都需要绑定来获取授权。
初始化React
我们经过一段时间的等待，一个可访问的React项目就已经出来了。
这里我们看到他开了3000端口，那我们本地访问试试。
这里我们看到初始界面已经有了，那么我们进入下一步。
创建表
来到你刚刚绑定的supabase项目当中，直接进入到官网。
这里我们来到Table Editor界面，右侧有Create a table，我们点击一下
右侧会弹出这些，可以自行填写一下，我这里给各位一个小小的参考。
我是这样配置的，可以直接照搬，然后我们进入下一步
点击Insert然后再点击Insert row，会出现右侧栏，这里会有内容需要你输入。
这里就跟你刚刚内容是一样的，这里就不展示了，自行填写就行。
内置到哪？
这里有小伙伴会问了，都手动输入了，为什么还要叫内置？这里其实不输入，你把要求和内容告诉它，它也能完成。这里其实就需要一定基础了，这里不展开。还有一点内置就是，它不需要你手动配对Project API 他能自动输入，这对于开发者来说无疑是巨大的好处。
大概也就是这一块内容，内置其实对我们开发已经非常友好了，能让我们的经历能更佳集中到更核心的内容上去。
数据展示到首页
这里我已经对话完毕了，我们一起回顾一下我们的内容。
你们可以参考一下我输入的内容，他这里安装好依赖之后创建了一个.env文件，来存放我们的密钥，这里的密钥是它自动获取的。
这里我怕各位看不清，所以把界面放大了一些。这里对话完毕之后会有一个Connect Supabase 的按钮，我们点击一下。
这里和上面一样，也会一步一步的来，类似于一个工作流。这种JSON也是能进行实现的。这里依然还是只能显示中文。
那么我们来看看这一步结束之后的成品长什么样。
他这确实是有根据我们要求的来，能看到我们之前输入的作者等信息都被展示出来了，说明我们数据库是连接成功的。
添加删改
我们继续指令，看看他能给我们什么样的效果。
我们看到我们要求的内容都添加完毕了，界面也还算不错。
这里的添加新书也能正常添加，能看到界面中在两本书的基础上添加了一本，然后我们来编辑试试。
这里也都是正常的，说明我们项目构建的非常成功，那么到这里你对内置的supabase有何看法呢？是不是更熟悉了。我相信这种方式能帮助我们快速提升编码效率。防止我的码被窃取，我已经将项目删除。
4、模型及请求
可以看一下我们现在已有的模型有很多，都可以根据自己的需求去选择模型，这里就不展开了。如果可以可以试试每个模型他们官方的调教如何，因为虽然模型一样，但是大部分厂商的调教区别还是蛮大的。
我们再到官网看一下，目前内测并没有说有什么付费的，我觉得可以参考一下这张图。可以自行判断后期是否收费，或者后期的收费费用是多少。目前按照这个形式来说是按照请求量来算的，当然现在还是完全免费的。
5、总结与建议
优点
根据以上的文章内容，优点还是很明显的。这里我就简单列举几条内容。
- 功能的集成，让开发更顺畅，无阻碍。
- 简洁直观的界面，能大大提升用户的使用体验。
- 强大的代码补全功能以及大模型能力，十分突出。
改进建议
国产的IDE想要做到真正的脱颖而出其实是非常困难的，我们都知道这里的关键还是AI大模型技术。我们可以把团队更多的精力放到编程性AI模型的训练上面，让这款工具从而具备扎实的底子。我觉得整个团队还是缺乏沉淀。正所谓，静心打磨产品，才能走得更远；我们应用中需要具备的功能一定要跟上大部队，不要因为一些其他的内容分散注意力，比如搞一些其他的小内容，这些都会让用户不满意。
- 我觉得要把流式输出改掉，这样用户体验会更好。
- 希望支持更多的语言，界面的引导更清晰，更明确。
- 希望持续训练AI，不要出现越用月听不懂人话的情况。
- 希望更好的结合腾讯自家的产品生态，配置不再麻烦。
未来展望
用户留给CodeBuddy的时间还很多，我们这几天使用下来感觉是很不错的，能看出来它具有巨大的潜力。或许我们在不久的将来它就能成为我们开发者必不可少的开发工具。
