从UI稿到代码优化,看Trae AI 编辑器如何帮助开发者提效

我正在参加Trae「超级体验官」创意实践征文, 本文所使用的 Trae 免费下载链接: www.trae.ai/?utm_source...

2025年1月20号,字节发布了一款能与AI协作完成编码的 beta 测试版本的IDE编译器:Trae。目前支持免费使用Claude 3.5 Sonnet和 GPT-4o 两个主流的编程大模型。

根据初步的体验,目前 Trae 提供了两种方式,Chat 模式和 Builder 模式

  • Chat模式:通过聊天的方式提供代码分析结论、代码建议、出码
  • Builder模式:
    • 分析代码文件
    • 创建和编辑代码文件
    • 创建和运行控制台指令
    • 分析指令运行结果并提供建议

Builder VS Chat

Trae 编辑器中具有两种模式,一种是 Chat 的模式,一种是 Builder 模式,目前看对于实现功能的最终目标上差异不大,两种模式都能够进行代码和工程的创建和功能的补全,但Chat模式下,需要手动进行应用代码,而 Builder模式可以直接修改到代码中,可以通过审查模式确定是否要接受,如果不接受可以恢复源代码

Chat模式下,如果出码量比较多时,还可能出现错误,此时会中断出码,需要重新提供prompt,重新出码的现象

但Builder模式下,如果修改失败,则会自动重新进行修改,直到分析完成并修改完成

不仅如此,在Builder模式下,若终端运行脚本过程中出现了错误,会立即提醒并提供修复建议,不需要额外进行提问,所以试用了下,感觉Builder模式可能更适合我这种懒人

从0到1实现项目

Builder 模式下,创建项目到项目运行,一整个被AI实现掉了,手动只需要点几个按钮,直到最后运行成功即可

根据已有代码实现需求

可以在Builder中提供需求说明,让其分析项目代码并根据需求说明实现对应代码

此时,会分析整个项目,提供相关的修改内容,我们只需要运行并应用一下,同时 Trae 提供了即时预览功能,在builder 模块中可直接打开预览进行验证

而我们只需要跑一下demo验证一下即可。

也可以指定分析的文件、文件或者函数

若分析的内容中存在的一些冗余和无效代码,会影响代码分析,最终影响到需求的实现,此时则需要在验证时手动修改一下。若比较复杂的话,手动修改起来也会有些复杂,需要先理解AI 提供的代码实现逻辑。

图片生成代码

可以通过直接将ui稿发送给AI,让其创建一个页面。在输入框直接粘贴复制的ui稿即可

根据ui稿的复杂性,AI生成代码的耗时也不一样,生成的代码质量也不一样,能完成大框架上的布局,比较细节的仍旧需要手动调整

需求是这样的:

实现是这样的:

大差不差吧,还是需要再花点时间改的

自动补全代码

在写功能代码时,会自动推荐后续代码

如果代码中有异常代码时,也会提供AI修复功能,在内连聊天中进行AI协助。但有些情况下,不会自动帮助修复,会提供注释提供修复建议

有些时候,也不得不说,即使按照建议进行修复了,仍旧会出现一样的修复建议,比如上述模块已经安装了,仍旧提示找不到模块时。或许是因为没能够分析整个项目的代码,只根据当前代码进行分析得到的修复建议结论吧

内联 Chat

除了上述的代码异常检测可通过AI 修复自动唤起内联Chat之外,在编写代码中,可以在光标位置,通过快捷键 Command + I 手动打开,在编写代码过程中通过prompt的方式增强或者提示当前代码

但是此种方式只会在当前文件中进行修改,并不会分析项目,全功能实现,可用此种方式优化代码,但实现完整功能则需要看场景应用了。

最后

对于使用 vscode 的开发者来说,此ide的学习成本几乎为0,除了一些图标不一致外,连插件模式都和 vscode 一致,增强的AI功能目前看上手也很容易。作为懒人,Trae 的 Builder 模式深受我的喜爱。之前由于一直拖着没写的2个前端功能,也在 Trae 的帮助下实现,耗时不到2个小时,确实在一定程度上提效了,后面的时间得好好挖掘挖掘需求了。目前还没有遇到比较复杂的应用场景,只期待等我真的遇到时,Trae 的 Claude 3.5 Sonnet和 GPT-4o 还是免费的状态。

相关推荐
m0_748238275 分钟前
项目升级Sass版本或升级Element Plus版本遇到的问题
前端·rust·sass
升讯威在线客服系统35 分钟前
如何通过 Docker 在没有域名的情况下快速上线客服系统
java·运维·前端·python·docker·容器·.net
AsBefore麦小兜36 分钟前
Vite vs Webpack
前端·webpack
LaughingZhu37 分钟前
PH热榜 | 2025-02-23
前端·人工智能·经验分享·搜索引擎·产品运营
道不尽世间的沧桑3 小时前
第17篇:网络请求与Axios集成
开发语言·前端·javascript
diemeng11194 小时前
AI前端开发技能变革时代:效率与创新的新范式
前端·人工智能
bin91536 小时前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
晴空万里藏片云7 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
曦月合一7 小时前
html中iframe标签 隐藏滚动条
前端·html·iframe
奶球不是球7 小时前
el-button按钮的loading状态设置
前端·javascript