Trae：这款全新免费的AI IDE真香吗？从0构建个人博客、宝可梦游戏、Three.js 3D场景

作者

🍹 Insight Daily 🪺

Aitrainee | 公众号：AI进修生

Hi，这里是Aitrainee，欢迎阅读本期新文章。

Trae，上线了国内版，支持豆包1.5pro和Deepseek R1、V3三款模型。

而海外版是这几个模型：

以前写过Trae的入门教程，而且Trae的所有模型是免费的：

硬刚Cursor！字节发布一款强大的AI IDE工具：Trae，Claude-3.5免费！（TikTok回归，还多了一个新产品）

硬刚Cursor的字节Trae刚刚上线了Windows版

国内版网址：https://sourl.cn/jMzy7T

国外版网址：https://sourl.cn/jMzy7T

本期我们实践操作一下Trae海外版（使用Claude 3.7），会构建一个个人博客、宝可梦小游戏、项目仓库SVG流程图、通过 Three.js（网页3D渲染技术） 展示4D结构。

使用Three.js创建一个交互式4D超立方体
Three.js 里的物理效果，主要是依赖代码定义的物理规则，比如弹跳、重力、碰撞等。这些都是人为设定的数学模型。
我在网上看到一个挺有意思的使用Three.js制作的游戏，他使用Grok3开发。
来源x@Daniel_Farinax，Grok3处理了超过 3,500 行复杂的游戏逻辑。
这是他的构建流程：
此外，以往我们也可以看到许多人使用这个框架构建一些LLM测试用例。

那么我们也来使用Three.js构建一些简单的玩意，下面开始：
最开始通过Chat优化，我是这样提示他的：
最开始他长这样：
那些都控件用不了。。
但第二轮迭代，输了这个自发性提示词（我以前文章研究的这个提示词真的很好用。特别适合从0~1的项目实践，很有效率）之后：
美观多了、功能也多了：
此外，关于这种类型的Three.js实验，我去网上了解了一些信息，并汇总了一下：
使用Three.js的方法，看上面提示词就可以了，并且他不需要配置什么复杂的环境。现在我们看看个人博客案例：

从0到1搭建一个个人博客

我们使用Trae Chat功能，进行需求脑暴，让他写一个PRD文档（产品需求文档） ，包括需求、目标、功能规划。
我的第一段需求提示词如下：

 

它由这几部分组成：

  1. 1. 开发一个博客网站，主要用于展示公众号文章的内容。
  2. 2. 直接使用公众号文章的 HTML 文件，因为公众号文章已经有良好的排版，省去二次调整的麻烦。
  3. 3. 默认展示为英文（海外内容站），但支持中英文切换。
  4. 4. UI/样式规范有一定要求，但后续会逐步完善细节。
  5. 5. 采用迭代方式，我会一段一段提供需求，让它逐步完善 PRD。

 

这是最终的文档：


整个 PRD 文档的优化迭代大概也就三次，毕竟用的是 Claude 3.7：



在Chat模式迭代沟通时。他会提醒我自动处理跨域图片的问题（保证公众号图片正常加载），还有采用两个文件夹来管理不同的语言版本、next-i18next国际化支持、SEO优化等等。。
他也给了未来增量开发的规划：

接着，我们把把PRD文档给Builder开发：
一开始我直接把 PRD 丢给他开发，结果发现文档有点复杂，整个迭代过程变成了一堆报错。然后换成 V0、Bolt，还是一堆报错。
虽然偶尔有一两次成功的，但最终我还是决定按照 PRD 文档拆解成分阶段的提示词，让 PRD 作为开发记录和被引用的参考，而不是直接执行的指令。
然后，差不多6轮迭代之后就得到了最终的网站。
是的，功能都正常，是按照PRD文档来的，当然了，美观度一般，因为提示词中没有刻意强调美观，也没有让他参考其他网站：
我把文章html文件拖进去之后大概是这个样子，保留了原来的排版格式，挺不错的。
如果你想详细了解这个PRD文档，后台回复”trae”即可获得。

宝可梦案例

在Trae Chat模式的帮助下，我的第一段提示词如下（使用了Pokemon Showdown的API）：

给 Trae Builder（Claude3.7）一轮提示它便生成了这个图鉴网页应用：

网上还有使用Deepseek R1来完成同样的任务：
还有Grok3：
整体上来看，还是Claude的3.7好看些。
流程图系列
以前说过：

与其问同事API怎么用，不如直接问AI。

一个技巧：让Trae生成代码库的Mermaid图表，帮助新人快速理解项目结构。当然这个技巧我记得Cline官方也特意提到过，似乎还做了优化。


所以我们尝试把最开始博客项目代码转为流程图，一个是SVG流程图、一个是Mermaid流程图：

最后，快速过一下Trae的一些技巧。
本质上这些AI IDE用起来都一样，在Trae中你可以在终端或代码文件里把报错的信息“添加到对话”：
也可以引用这些代码、文件夹之类的作为上下文给到AI。
整个界面的操作其实很简单，界面做得很优雅，适合国内开发者。
还有，Trae 的远程开发（Remote SSH）功能正在高优开发中。
此外，我在使用这篇文章：从0到1用AI做了个AI服务网站, 全程没写一行代码 中提到的三合一提示词构建AI-Saas服务网站的时候并没有成功，一直对话，一直报错。

总体而言，在整个体验过程中。Trae的Builder模式对于许多简单任务。它可以一步到位的帮你完成，就算是一个新手小白只要在对话框输入需求都可以完成，像日常的自动化办公、小游戏这些。
对于专业程序员，可以使用Trae提效，但是现阶段在一些复杂项目上的能力还有待提升，比如我这里让他构建一个比较复杂的3D卡通村庄场景的Three.js项目就失败了。
理想状态下应该是这样：
来源x@chongdashu
真的很漂亮，也很有氛围感。。
不过，Trae 也构建了卡通村庄场景一部分，我也隐约看到了一些3d模型的场景，只是场景加载不出来，一直迭代报错，解决不了。。
可能还需要我进一步优化提示策略吧。
确实，AI IDE 在复杂场景下，提示词策略很关键，同时也要有开发知识，而且也要熟悉整个AI IDE提供的功能有些什么，还有就是对大模型能力边界的把握，最后就是持续迭代与反馈优化。
当然，Trae作为国内首个AI原生IDE，我们可以期待它不断演进，日趋完善。
以上。
🌟 知音难求，自我修炼亦艰，抓住前沿技术的机遇，与我们一起成为创新的超级个体（把握AIGC时代的个人力量）。

点这里👇关注我，记得标星哦～

（文：AI进修生）

发表评论