从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 还是免费的状态。

相关推荐
一份执念9 分钟前
uni-app项目 (vue+vite + uni-UI)中引入umd格式JS文件,微信小程序中导入报错处理方案
前端·uni-app·echarts
ClouGence19 分钟前
2026 年自动化测试工具选型指南:8 款主流工具对比
前端·测试
lichenyang4531 小时前
为什么需要双线程通信、JavaScriptProxy 和 runJavaScript 分别干什么
前端
以和为贵1 小时前
前端也能搞懂 RAG:用 JS 手写一条最小检索增强链路
前端·人工智能·面试
风止何安啊1 小时前
网课倍速痛点解决:一套前端代码实现自由控速播放器
前端·javascript·node.js
牧艺1 小时前
用 Next.js + React Three Fiber 打造 3D 快递仓储可视化
前端·three.js
锋行天下2 小时前
如何用Vite实现Vue组件的按需打包和远程加载
前端·vue.js·前端框架
光影少年2 小时前
原生DOM操作在React 中的注意事项
前端·javascript·react.js
禅思院5 小时前
前端部署“三层漏斗”完全指南:从CI/CD到自动回滚的工程化实战【开题】
前端·架构·前端框架
快乐肚皮5 小时前
深入理解Loop Engineering
前端·后端