零代码开发亲测:用 CodeBuddy 做项目,从 Plan 规划到本地运行的全流程 + 避坑指南

671 阅读4分钟

以下是我用AI IDE开发的一个导航网站全过程,全程没写一行代码

首先我采用plan模式,描述了我的想法,使用了优化提示词的功能。

如下图所示

image.png

从图中可以看到最初输入经过优化后更加合适。

然后点击发送后,codebuddy就开始规划任务了。 从下图中我们可以看到经历了多个过程,这里因为篇幅问题,我就给他折叠起来了。

image.png

感觉codebuddy的plan模式运行时很酷,对比Trae和Cursor来说。 我大概看了下内容,觉得没问题,选择继续.

image.png

实际执行过程中仍遇到了诸多问题。例如,它无法识别目录层级,在执行 npm install 初始化项目时持续报错。我采用中文目录名称"个人文件"作为测试,怀疑这可能是导致问题的原因,随后暂停任务,手动将目录名修改为"myfile",并在历史对话中找到之前的记录后重新启动任务。虽然中文目录本身并无硬性限制,但建议仍应避免使用,以防止意外错误。

另一个典型错误源于命令语法问题:在 Windows 的 PowerShell 终端中执行 && 符号不符合语法规则。对此,我提出两种解决方案:若已安装 Git 工具,可点击下图中的 '➕' 号展开选项,选择 Git Bash终端进行操作;或在规则中明确告知所使用的操作系统及终端类型(如 Windows 使用 PowerShell/macOS 使用 Terminal),使系统能自动适配合适的语法规范。通过上述方式可有效降低或规避

image.png

以上是我得到的教训和经验,但是我这里暂时是没有去调整终端和编写规则的,我想看codebuddy是否能够最终找到正确的目录,在经历多次失败后,他还是做到了,正确的找到了错误❌,并成功的执行了任务。

image.png 在执行的过程中还是出现了一个错误,这里只是说出现错误,并没有说是什么错误,最后发现是我自己的网络问题,点击重试继续任务。

image.png

经过漫长的等待,也是完成了任务,但是可以看到还是有两个错误。

image.png

不慌,直接截图丢给他,让他自己解决。

image.png

这里它解决完错误,提示我可以发布到CloudStudio,不懂。

但我想先在本地跑下看看长啥样,效果都不知道发布啥呀,我就让他本地先跑下

image.png

可以看到它真不长记性啊,还是&&同样的错误

这里其实可以自己打开npm脚本的选项,然后手动启动的,具体见下图。

image.png

经过一番努力,它还是不负所望,完美的的跑起来了,这里不仅直接内置了浏览器,

image.png

而且我发现它这里可以直接发送浏览器控制台的报错信息给CodeBuddy,无需像我以前那样手动复制粘贴报错信息给AI或截图,也不需要使用浏览器MCP工具让AI自行读取控制台日志,只需点击一下Send error即可,非常便捷。另外,如果你对当前界面不满意,还可以直接选择界面元素让它帮你修改。比如这里我们可以看到导航栏中的"网站"二字风格不够统一,我们直接选中这个元素让它进行调整即可。

image.png

经过修改,导航网站四个字已经正常,而且经过测试功能也都正常.

后续有修改直接告诉AI让他修改即可。

image.png

到此为止开发就算结束了,不过我发现腾讯这个Code Buddy还有不少其他功能,比如figma文稿转代码,工具集成,一键部署功能...

这些功能留待以后慢慢探索吧!

image.png

我的经验背景介绍:我是学过一丁点前端、懂一点点后端的开发者,大概水平就是前端能掌握基础的HTML、CSS、JS知识,了解一点Vue框架。若他人达到这个水平,学习一周就可以超过我,少点的话也就三天搞定。后端水平大概能达到开发图书馆管理系统的能力,需要学习15天Java基础、15天Java进阶,再学一个月Web的SSM开发即可达到这个水平。由于我大学专业是机械设计制造及其自动化,24年毕业,属于非科班出身,因此开发能力较为一般。

本次开发感想:试用下来感觉AI的水平是大幅领先于我的,真就是一句话完成开发。未来我都不敢想,因为目前我在南京一家企业做开发,也是非科班出身。工作中几乎完全依赖AI辅助,没有AI我该如何应对呢?一方面在享受AI的便利,同时也很担心自己会被AI取代导致失业。但害怕无用,只能是尽可能多学一点,提升自己的开发水平了。