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

相关推荐
阿隆_趣编程4 分钟前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
EndingCoder16 分钟前
Electron 跨平台兼容性:处理 OS 差异
前端·javascript·electron·前端框架·node.js·chrome devtools
秋田君31 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
爱隐身的官人32 分钟前
ctfshow - web - nodejs
前端·nodejs·ctf
zhong liu bin32 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
W-GEO32 分钟前
前端安全攻防:XSS, CSRF 等常见威胁的防范与检测指南
前端·安全·xss
2301_8035545235 分钟前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
lssjzmn36 分钟前
Spring Web 异步响应实战:从 CompletableFuture 到 ResponseBodyEmitter 的全链路优化
java·前端·后端·springboot·异步·接口优化
这里有鱼汤36 分钟前
上班族没时间炒股?不妨试试这个隔夜超短战法(附:Python量化源码)
前端
n123523543 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome