他来了!她来了!CodeBuddy IDE 首发!首批限时内测开启,速来尝鲜!
期待已久的 CodeBuddy IDE 上线啦,感兴趣的小伙伴快来一起参与吧!本文会详细介绍 CodeBuddy IDE 从下载安装、初始化设置到核心功能体验全部内容,为了让大家更好的了解,文章内容可能会比较长,还请谅解!
CodeBuddy IDE
在正式测评 CodeBuddy IDE 开发工具之前,我们先来简单介绍一下,什么是 CodeBuddy IDE?
CodeBuddy IDE 官网地址:https://www.codebuddy.ai/

CodeBuddy IDE 是全球首个产设研一体 AI 全栈高级工程师。致力于构建一个产品、设计、研发无缝协作的共生环境。通过将 AI 深度融入从需求规划、产品设计到代码开发的全流程,实现从一个从想法到产品发布的一站式高效交付平台。成为 打破产品、设计与研发职能壁垒的下一代 AI 全栈高级工程师。
IDE 安装
由于是内测,这里就不再提供下载链接,我们直接进入安装步骤。CodeBuddy IDE 的安装比较简单,这里我的电脑是 Windows 版本,那么直接双击 CodeBuddy-win32-x64-user-0.1.5.1438024-02b2a45e.exe 文件,在弹出的许可协议页面选择【我同意此协议】后进入【下一步】,安装位置默认是 C 盘,这里我指定 D 盘安装

其他选择默认,继续【下一步】,在 选择附加任务 弹框,这里我勾选 【创建桌面快捷方式】,其他选项默认

在最后安装信息确认页面,确认安装信息后点击【安装】完成 CodeBuddy IDE 安装操作

安装完成后运行 CodeBuddy

在上面选择了添加桌面快捷方式之后,就可以在桌面看到如下的 CodeBuddy IDE 开发工具图标

初始化设置
双击运行 CodeBuddy IDE 之后,在 CodeBuddy IDE 初始化设置页面,如果你本地有自己的 VSCode 个性化设置,那么你可以选择【Import from VS Code】导入设置,如果有 Cursor 的话,你可以选择【Import from Cursor】,都没有的话,则可以直接点击【Skip】 跳过导入设置页面

在 【Add command line】设置页面,这里建议是点击安装 buddy 命令行【Install the ‘buddy‘ command】,安装之后可以直接在 CodeBuddy IDE 开发工具的 Terminal 窗口运行命令,操作上多了一种选择。当然,选择【Skip】也是可以的。需要说明的是,目前 CodeBuddy IDE 暂时不能安装 command 命令行

在登录账号页面,如果你有 Google 账号的话,你可以选择登录账号【Log in】,点击登录按钮后会跳转到浏览器登录账号

如果没有 Google 账号的话,那么需要你先注册 Google 账号,然后才可以登录,这里的登录是强制的,不登录的话,点击【Skip】会提示你登录账号。

希望后期可以支持微信登录或者手机号登录,目前仅支持通过 Google 账号授权登录,且国内的网络环境不支持打开 Google 账号页面,需要通过 VPN 切换到海外网络节点才可以登录,(这里说明一下,当你第一次通过 VPN 登录 Google 账号之后,后续进入到 CodeBuddy IDE 操作页面就不用再使用 VPN 也可以,亲测 OK),也就是说,只是在登录账号的那一次需要 VPN,后面就不需要了

这里我们下载了 VPN ,同时也登录了 VPN 账号,开启了系统代理,再次点击【Log in】跳转到 Google 账号登录页面,勾选协议登录账号

在选择账号页面选择想要使用的 Google 账号,选择账号后

选择账号后,在登录 codebuddy.ai 页面,选择【继续】完成 google 账号登录

登录成功后如图

回到我们的 CodeBuddy IDE 开发工具,在输入邀请码页面输入我们的内测邀请码后,点击【Next】

到这里,我们的 CodeBuddy IDE 初始化设置已经全部完成,在完成了初始化设置之后,就可以看到我们的开发工具操作页面了,整个操作页面风格及操作按钮相关位置,和我们日常用的开发工具 VSCode 、IntelliJ IDEA、PyCharm 等都差不多,下面是 CodeBuddy IDE 开发工具的页面

下面是 PyCharm 2024.3.5 (Community Edition) 的开发页面

核心功能体验
那么既然 CodeBuddy IDE 是一个致力于构建一个产品、设计、研发无缝协作的共生环境的开发工具,那么下面我们就通过一个小需求来全流程体验一下 CodeBuddy IDE 在整个产品生命周期中所起到的重要作用。大家都知道,正常的需求需要先经过产品经理将模糊的想法转化成详细的需求文档,然后再将需求文档转化成高清产品原型或者说设计稿,最后是研发人员基于产品原型及设计稿将具体的功能实现并部署到服务器环境进行测试验证。
想法→需求
我这里收到一个需求,需要实现一个会议室预约系统,需要有基础的登录功能,预约功能,会议室预约结果查询以及可预约会议室列表等功能。那么有了这个想法,下面我们就可以将我们的想法告诉 CodeBuddy IDE ,借助 AI 来生成结构化需求文档(PRD)

这里我们看到在 AI 对话区 有三个选项可以选择【Coding】、【Design】、【Chat】,这里我理解这三个选项对应的就是【代码】、【设计】、【需求文档】 那么目前还处在想法转化成需求文档阶段,这里我们选择【Chat】,输入我们的需求内容
当然,如果你觉得你的需求内容描述的过于简单,可能不利于 AI 理解你内心的想法,那么 CodeBuddy IDE 为我们提供了 prompt 润色功能,我们可以点击【Boost Prompt】按钮来让 AI 帮助我们润色我们的需求

润色后的需求内容如下
此时我们觉得内容已经够详细了,就可以直接点击【Send】来发起对话了,这时会弹出弹框询问你是否信任当前文件夹的操作,选择【Yes】

那么 CodeBuddy 在接收到我们的需求之后,会基于我们的需求内容设计一个完整的解决方案,包括技术架构、数据模型、用户界面原型和实现计划。在 AI 对话内容最后,会询问我们是否进一步调整和完善这个方案,如果觉得方案不错,那么我就按照这个方案来生成需求文档

以下是 CodeBuddy 生成的详细的需求文档的内容
到这里的话,我们就实现了第一步,也是过去产品经理的工作,通过自然语言,借助 AI 辅助进行深度需求分析,最终生成详细需求文档的操作。完成了第一步,下面我们就可以进入第二步,从需求文档到设计稿。
需求→设计稿
当我们拿到需求文档之后,我们就可以基于我们的需求文档来生成详细高清的设计稿,这里我们切换到【Design】设计界面,在 AI 对话框中输入我们的要求【基于上面的需求文档生成设计稿】

在接收到我们新的需求之后,CodeBuddy 会自动结合上下文,读取我们上面对话生成的需求文档并生成设计稿页面,由于我们的功能不仅仅只涉及到一个页面,因此这里会自动生成需求文档中涉及的每一个页面

这里我有点疑惑的是,我在 AI 对话框中输入的需求是中文,生成的需求文档也是中文,在 AI 接收到生成设计稿命令后,后面关于 AI 对话内容需求的分析变成了英文。不过没关系,我们这里主要关注的是设计稿页面的生成,对于需求本身,需求文档已经了然于胸了。另外需要注意,由于我们的需求文档涉及到会议室系统的用户认证系统、会议室管理模块、预约功能、查询及报表功能、管理功能等多个和会议室系统相关的内容,涉及的页面?(个人理解,Design 应该是生成设计稿文件,而不是当下生成的 html 页面)比较多,因此在生成 UI 设计稿的耗时可能会比较长,这里需要耐心等待…待所有设计页面全部生成之后,CodeBuddy IDE 会自动调用 node.js 命令部署本地页面,并生成预览页面供我们体验

我们也可以直接在本地浏览器输入 node.js 部署后生成的会议室预约系统设计稿页面,在浏览器中输入:http://localhost:3000/ 下面我们来看一下我们的会议室预约系统的页面吧(到这里,我其实不太理解 Design 的功能,我理解的是生成设计稿,但是目前生成的是 html 代码页面),不过没关系,反正后面 Coding 也是要生成 html 代码页面的,这里算是提前进入了代码阶段

如果是过去的话,不管是前端开发者还是后端开发者,有这样的可以交互的原型图(设计稿),那开发过程简直不要太爽,拿过来只需要修改,无需再写交互或者样式。这里我又尝试点击了其他菜单,页面没有切换,那么个人理解是其他菜单页面还没有生成,那么我们继续让 CodeBuddy IDE 帮助我们生成其他菜单页面,输入我们的需求

此时我们可以看到,在我们指定了分析语言用中文展示之后,再次生成页面时,AI 对话响应区域的需求分析内容就展示为了中文,这样可以更方便我们了解当前生成页面的功能

在 AI 生成设计稿页面的过程中,AI 会自动检测页面的生成进度,当遇到问题时,会自动根据遇到的问题进行分析处理,就像下面的情况,在 AI 生成 equipment.html 页面内容时,页面内容被截断了,CodeBuddy 会自动分析并调用工具来完成截断页面内容的补足

等待所有页面生成完成之后,CodeBuddy IDE 依旧会自动部署页面到本地并生成访问链接,复制访问链接到浏览器:http://localhost:3000/notifications.html 可以看到本次生成的页面内容信息

到这里我其实想说,我上面的需求【继续生成其他菜单页面,AI 分析语言中文展示】其实是想生成红框中菜单的页面,目前是红框中菜单没有对应的页面跳转,上面 AI 可能没有太理解我的问题

那么我换个问题,告诉 AI 我在会议室预约系统页面点击【预约管理】菜单没反应,那么我们的需求就来了【在会议室预约系统,点击菜单 预约管理 没反应,分析处理】,

在 AI 对话框输入我们的需求之后,我们就可以通过自然语言的方式,让 AI 帮助我们检测并修复我们遇到的问题

这里我们看到,其实我们刚才提到的四个菜单对应的页面已经生成了,只是因为在 index.html 页面中,其他导航菜单的链接不对的问题
那么经过 AI 自动修复后的 index.html 页面,我们可以看到我们的【预约管理】菜单已经可以正常点击跳转了

并且,除了【预约管理】 菜单外的其他菜单也可以正常跳转,同时补充了相关的【用户管理】和【设备管理】菜单。到这里,我们的 UI 设计稿基本上就算完成了,但是在点击各个菜单查看功能的时候,我发现左侧菜单会出现丢失的情况,下面用一段小视频展示一下
播放
这里其实对于前端开发者来说,一眼就知道问题,每一个页面左侧的菜单栏目不完全一样导致的,其实也不是什么大问题,我们直接让 AI 接着帮我们修复就可以了,继续输入我们的需求【点击左侧菜单时,切换不同菜单页面,看到的菜单位置及菜单数不一致】

在接收到我们新的命令之后,CodeBuddy IDE AI 辅助会自动分析并对比当点击左侧菜单切换到不同页面时,菜单的位置和数量是否一致。如果不一致则自动检查所有页面的导航菜单,并确保它们完全一致

当分析请求的文件数过多时,可能会触发以下告警信息,这里我们无需担心,直接点击【Continue】继续执行上面的指令即可

等待所有的菜单对应的文件都检查修复之后,我们回到我们的本地访问地址,刷新页面后切换菜单,可以发现所有的操作菜单页面都可以正常切换操作,且不会存在切换到不同菜单页面时,菜单丢失的情况了

到这里,我们已经达到了我们的目前,实现了从需求文档到设计稿的转化,且我们的设计稿是可以点击,有交互的高清动态设计稿。我们来看一下我们借助 AI 生成的设计稿页面,对应 8 个菜单以及其他辅助页面

设计稿→代码
现在既然我们已经有了完整的设计稿页面,那么下一步就是基于现有的设计稿页面转化成真正可以操作的会议室预约系统了。在 AI 对话框中输入我们的需求指令【基于上面的设计稿,生成代码】同时选择【Coding】

这里我们其实也看到,在上面的通过需求文档转化为设计稿的操作中,我们选择的【Design】,但是通过 AI 辅助对话生成的是正经的 html 页面,也就是其实可以算是前端代码的【Coding】已经完成了。对于 AI 来说,当再次收到我们基于上面设计稿生成代码的指令时,就疑惑了

其实通常来说,设计稿的定义范围应该是高清页面图片,或者是原型图什么的,我们这里 AI 已经通过需求文档直接跳转到了前端页面代码开发,如果我们的需求文档不是 CodeBuddy IDE AI 辅助编写的,那么我们也可以通过选择设计稿或者是直接截图的方式让 CodeBuddy IDE 帮助我们生成代码。
由于上面我们通过 CodeBuddy IDE AI 辅助工具开发的会议室预约系统,页面已经部署在本地验证过,那么对于会议室预约系统的话,我们的操作就算告一段落了。那么到这里,既然是产品经理提出的需求,那么让产品经理或者业务来本地看具体的效果页面,是不是不太方便。那么 CodeBuddy IDE 同样为开发者提供了一键部署功能,一键部署至沙箱环境,生成分享链接,方便团队其他成员快速验证反馈。
这里我们直接点击 AI 对话框上面的【Deploy】,CodeBuddy IDE 会自动触发 【Deploy current project to remote】命令部署本地会议室预约系统到远程服务器

等待部署完成之后,可以看到 CodeBuddy 已经为我们生成了访问会议室预约系统的 URL 以及其他各个子菜单的页面请求地址

这里我们点击会议室预约系统的请求 URL,但是打开的页面并不是我们期望的会议室预约系统的样子,而是这样

那么我们直接让 AI 辅助工具帮助我们再次重新部署一次,这里我尝试了几次,通过自然语言的方式部署触发还是不能解决部署后页面不展示的问题,那么我们将问题页面截图后粘贴在 AI 对话框,并输入我们的需求指令【会议室预约系统部署后打开如截图,分析并处理后重新部署】

对于这个一键部署至沙箱环境的操作,可能不是一次两次可以部署成功,比如我经历了第三次部署失败之后,根据 AI 响应的问题,再次尝试部署

再次部署至沙箱环境之后,我们点击生成的链接发现,部署后的请求地址,仪表盘可以正常访问,

但是其他菜单对应的页面不能够正常访问

同样的操作,将我们访问失败的请求地址截图粘贴在 AI 对话框并让 AI 辅助处理,这个部署至沙箱环境的操作,通常情况一次部署并不能达到你的期望,当遇到问题时,比如上面的部署后请求 URL ,但是页面不展示,我们就可以直接将截图抛给 CodeBuddy AI ,让 AI 自动分析处理并重新部署,部署成功后如下图效果

也就是说,我们的最终效果需要经过多轮处理,最后来看下我们的会议室预约系统分享链接可以正常访问,请求地址:http://7f49af71906a4d369bee227128e112e1.ap-singapore.cloudstudio.run/ 到这里,我们就成功实现了从想法—>需求—>设计稿—>代码(含部署)的全流程操作,最终的效果页面如图

到这里,我们本次的会议室预约系统从想法到落地到系统展示就圆满完成了。
生成 API
截止到这里,我们整个会议室预约系统的操作界面是圆满完成了,但是大家点击过页面就知道,目前操作只有前端页面,对应的传输数据的接口 API 还没有。在过去,前后端分离项目,前端页面开发过程中,后端需要手工提供 API 接口文档,那么现在,我们可以无需手工编写 API 接口文档,而是可以直接让 CodeBuddy IDE 来帮助我们生成前端页面需要用到的接口。在 AI 对话框输入我们的需求【会议室预约系统,分析并设计页面用到的接口】

在接收到我们的需求之后,CodeBuddy 会根据我们的需求分析我们当前的前端页面,并整理出需要的接口 API 相关内容

在 AI 对话框,我们可以看到响应的 API 接口内容如下,接口的内容也比较详细,包含了接口请求地址、请求方式、入参、返回参数等,比较符合日常开发的接口文档格式,但是这里需要注意的是这并不是接口文档
作为开发者,我们可能更习惯看的是接口文档,那么我们是否可以让 CodeBuddy IDE 直接帮我们生成接口文档,方便查阅呢?答案是:肯定的。在 AI 对话框中输入我们的需求【按照上述接口生成接口文档】

可以看到,CodeBuddy IDE 会根据上面分析生成的 API 接口内容编写接口文档 meeting-room-api-docs.md 文件 ,同时除了生成接口文档之外,还会为我们生成 会议室预约系统 API 设计总结、会议室预约系统数据库设计、会议室预约系统前后端集成方案、会议室预约系统实施计划、会议室预约系统 API 测试计划、会议室预约系统安全设计方案、会议室预约系统部署指南等等文档,方便我们更高效清楚的了解我们的会议室预约系统,简直比产品经理还要产品经理,只有详尽到极致,没有忽略的需求

这里考虑到文档的英文名字不是那么直观,那么我们可以让 CodeBuddy 帮我们生成中英文文件名的对应关系,就像这样【将文件名的英文替换为对应内容标题的中文】虽然没有中英文替换,但是生成了一个中英文对照关系 .md 文件

这里我们需要注意的是,如果你在使用 CodeBuddy IDE 开发工具时,没有指定打开文件夹,那么 CodeBuddy 会自动为我们创建日期格式的文件夹,

到这里,我们的会议室预约系统,前端页面以及后端的 API 接口文档、设计文档、实施文档等也都补充完全了。会议室预约系统到这里才是真的无懈可击了。
源码地址
这里为了方便大家可以快速体验当前会议室预约系统代码,已将会议室预约系统相关代码文件及接口文档、设计文档、实施文档等上传至开源地址:https://cnb.cool/LYDY-2025/meeting-room-system

补充体验
在上面的操作中,实际上我们并没有体会到从设计稿到代码的过程,因为我们的会议室预约系统等于说是从需求文档直接生成了前端页面代码。那么为了更好的诠释 CodeBuddy IDE 的设计稿转代码的功能,我们必须要试一下设计稿是如何转代码的。为了验证,我们去去腾讯云控制台截了一张图

我直接将截图粘贴在 AI 对话框,并对 AI 输入以下内容【根据当前设计稿截图,生成腾讯云控制台页面】

在接收到我们的需求之后,CodeBuddy 会根据截图内容以及我们的需求生成我们需要的页面,在生成页面结束之后,会对相关的文件进行一个详细的说明,一下是 AI 对话返回的内容

我们通过浏览器打开生成的 index.html 页面,可以看到 CodeBuddy 根据我们的设计稿截图生成的【腾讯云控制台】页面效果


这里我们可以看到我们生成的腾讯云控制台页面是不是和官方的一样,这就是轻轻松松设计稿到代码,一键生成。一键发布我们的【腾讯云控制台】页面项目到 CloudStudio,点击生成的页面访问链接:http://8e20d1fa1e7a4759a01994ef4e6a1534.ap-singapore.cloudstudio.run 看到如下效果

好了,到这一步,我们已经完整体验了 CodeBuddy IDE 的从想法到需求、从需求到设计稿、从设计稿到代码的全流程操作,整个操作过程通过自然语言的方式快速高效实现代码编写,在当下重效率抢市场的内卷时代,真的可以让开发者在卷别人的同时还能让自己不那么累,哈哈,体验真心不错。
最后总结
对于本次 CodeBuddy IDE 的内测体验,在操作界面展示上,和我们日常使用开发工具的布局并没有什么大的差异,比如:VSCode 、IntelliJ IDEA、PyCharm 等,这样有点好处就是,我们在使用新的开发工具 CodeBuddy IDE ,从使用习惯上、心理上都能够快速适应,降低操作难度,提高心理适应度。
在功能上,又比我们现在使用的 CodeBuddy IDE 插件更强大,对于插件版本的 CodeBuddy ,我们日常工作中主要是辅助代码功能开发。而 CodeBuddy IDE 开发工具,则可以实现从想法—>需求—>设计稿—>代码 的产品、设计、研发一体化开发。AI 对话框支持对自然语言的润色,方便对于 Prompt 不熟悉的产品人员快速上手。另外可以直接对接 Figma 设计原型快速生成页面代码,或者通过原型图截图放入 AI 对话框快速生成页面代码,且可以保证生成的页面代码与原型图或者设计稿无差异。
另外,CodeBuddy IDE 还支持生成接口文档,也就是说,你交给 CodeBuddy 一份设计稿,他可以完全复原你的设计稿页面,同时为你生成相应的接口文档,帮助我们快速实现原始需求的落地,投入实际生产应用,降低从想法到落地的时间区间。当然,目前的 CodeBuddy IDE 还处于内测阶段,功能上自然有一点不完善,具体的内容在上面体验的过程中也有提及。
最后,从我最初接触 CodeBuddy IDE 的 0.1.3 版本,到现在的 0.1.8 ,不足两周的时间,已经升级了五次版本,并且还有专门的体验问题反馈群,可以说,CodeBuddy IDE 产研团队一直在不断努力,希望可以打造更好用更强大的开发者工具。那么在这里,真诚的希望 CodeBuddy IDE 越来越好,AI 越来越懂开发者。
版权声明: 本文为 InfoQ 作者【六月的雨在InfoQ】的原创文章。
原文链接:【http://xie.infoq.cn/article/499a46a78f93a4a13afce1322】。文章转载请联系作者。
评论