Navigate to WaytoAGI Wiki →
Home/Question List/Question Detail

Build On Trae

Answer

以下是关于 Build On Trae 的相关内容：

在 17 号 Waytoagi 举办的“AI 编程从入门到精通 - Build on Trae”共学中，跟随大雨在 Trae 里输入“用 Matter.js 做一个有意思的画面”，屏幕上呈现出有趣的交互体验，色块如雪花般生成并降落，具备重力、碰撞、弹性效果。有人瞬间想到将此效果融入消消乐游戏，很快初步的消消乐效果诞生。为让游戏更具挑战性和趣味性，开始加关卡，但关卡逻辑未实现，随后向 Trae 反馈并提出把彩色色块换成 emoji 的新想法，Trae 修改后效果活泼生动。之后又提出在消除 emoji 时添加音效，因音效库不够用，灵机一动播放 emoji 对应的英文单词音效。体验地址：https://pipipeter.github.io/xiaoxiaole/

Trae 的使用步骤：

  1. 在电脑上新建一个文件夹，可自行取名，如“helloworld”。
  2. 使用 Trae 打开这个新建的文件夹，打开后左上角能看到选中的文件夹名称。然后点击右上角的“Builder”按钮，切换到 Builder 模式。
  3. 在对话框输入需求，如输入用 p5.js 画分形树的提示词，点击发送按钮，AI 开始工作。还可以在此基础上继续强化，也可以在 https://openprocessing.org/ 查看各种创意，复制代码放到 Trae 里用 AI 对话优化。
Content generated by AI large model, please carefully verify (powered by aily)

References

在Trae中的一次无心对话，竟然做出了消消乐游戏

在17号Waytoagi举办的“AI编程从入门到精通-Build on Trae”共学中，跟随大雨在Trae里输入“用Matter.js做一个有意思的画面”，如下图：神奇的事情发生了，屏幕上立刻呈现出一种有意思的交互体验：点击空白处，色块如雪花般生成并降落，重力、碰撞、弹性效果一应俱全，交互体验新奇有趣。我瞬间被这个效果吸引，脑海中闪过一个念头：要是能把这效果融入消消乐游戏，岂不是别有一番风味？说干就干，如下图：很快，初步的消消乐效果诞生了。看着屏幕上那些色块按照物理规律移动、碰撞、消除，感觉还是很有意思的。为了能让游戏更具挑战性和趣味性，就开始加关卡：向Trae提出增加关卡功能的想法，更新代码后，我满怀期待地测试，却发现关卡逻辑并未实现。然后并向Trae反馈。同时，提出一个新想法，把彩色色块换成emoji，说不定能带来更有趣的视觉效果。Trae按照建议进行修改后，emoji的加入让游戏画面瞬间变得活泼生动，效果如下：我迫不及待地想要进一步完善游戏。于是提出在消除emoji时添加音效，让游戏体验更丰富。然而，随着游戏中的动物emoji越来越多，发现音效库不够用了。这可怎么办？灵机一动，干脆播放emoji对应的英文单词音效，这样一来，玩游戏的同时，还能顺便听听英语，一举两得。哈哈~?体验地址：https://pipipeter.github.io/xiaoxiaole/

AI编程与炼金术：Build on Trae

因为AI生成的代码，需要有地方存起来，所以请你先找一个地方，新建一个文件夹，文件夹的名字可以自己取，比如叫“helloworld”[heading3]第二步：使用Trae打开这个文件夹[content]点击后，在弹出的弹层里选中前面你新建的文件夹：打开后，会是下图的状态：左上角能看到选中的文件夹是“helloworld”。下一步是点击右上角的“Builder”按钮，切换到Builder模式，切换后是这样的：

AI编程与炼金术：Build on Trae

解释：p5.js是一个专门用来创建图形和交互式体验的代码库，分形树是一种数学上的概念，可以生成很美的图形，常见的有雪花等。这里我们尝试用代码来画出一些美丽的图形。把这个提示词，复制粘贴到对话框内，点击右下角发送按钮，就可以看到AI开始工作了：看视频：[分形树_mPPcRmTvYGH.mp4](https://bytedance.feishu.cn/space/api/box/stream/download/all/TjFwb1nBoorRUfxabGbcv1U8nWb?allow_redirect=1)怎么样，是不是够简单？你还可以在这个基础上继续去强化：完成后可以看到效果变化了：大家可以沿着这个方向继续去挖掘，比如：现在就变成更加绚丽并且有色彩变化的动效了：[分形树_QCjLVDWIkJ5.mp4](https://bytedance.feishu.cn/space/api/box/stream/download/all/U8iLb6ohJoS9qlxZGM5ceCgQn0d?allow_redirect=1)类似这样的玩法，我们可以打开https://openprocessing.org/在里面查看各种创意，然后复制代码放到Trae里面，就能够用AI对话去优化，我给大家录个屏：[分形树下载代码_a1lSEtehMij.mp4](https://bytedance.feishu.cn/space/api/box/stream/download/all/OKLjbFKADoxk1IxmnVUcHYynnHd?allow_redirect=1)

Others are asking
Trae生成产品UI
以下是关于使用 Trae 生成产品 UI 的相关信息： 1. DeepSeek 驱动的网页金句卡片生成： 先开发基础版本的浏览器插件，包括选择文字、自定义生成图片，图片底部包含文章标题和链接二维码。 使用 AI Rules 的 Chat 模式完善产品需求（PRD），Trae 运行后会创建 readme 文档，可在其中修改，带有章节选择。 使用 Builder 模式开发产品，在 AI Rules 里指定技术方案，在 readme 里指定产品需求，然后让 Trae 自动化开发。开发完成后在 Chrome 浏览器内加载扩展程序进行调试，第一次报错可能是未创建浏览器插件图标，将截图发给 Trae 处理后重新加载。但需注意 Claude 3.5 模型不具备直接生成图片的能力。 2. 保姆级使用指南： 有控制按钮（开始、暂停、重新开始）和游戏说明。 可生成任务清单应用，输入相关需求即可。 能根据 UI 设计图自动生成项目代码，如输入“使用 html 技术实现如图大屏页面”，但生成效果可能不完美，可让 Trae 调整。 总结：Trae 高效代码生成能力强，支持多技术栈，有动态调整潜力。 3. 智能纪要： 基于 Tree 的海关归类项目及商业化探讨，包括固定随机种子、开发记忆大模型、搭建爬虫工作流、实现全参量归类、解决技术问题、项目成果展示和商业化探讨。 利用 AI 实现工作流封装并面向 C 端的项目介绍，包括前端开发尝试和小程序落地实现，后端接入处理时不会接 API 可让 Trae 帮忙。
2025-03-25
如何运用Trae设计实现前端代码并转化为原型图
以下是运用 Trae 设计实现前端代码并转化为原型图的相关内容： 1. 控制按钮（开始、暂停、重新开始）和游戏说明。 2. 生成任务清单应用：在输入框中输入“使用 Web 技术开发一个任务清单应用”，可得到一个朴素但功能俱全的任务清单应用。 3. 根据 UI 设计图自动生成项目代码：从站酷上找设计图，输入提示如“使用 html 技术实现如图大屏页面”，页面虽不完美但可调整，如“调整一下，给图表设置合适的宽高比例，自适应页面大小”，能使图表大小正常。 总结： Trae 表现可圈可点，具有高效代码生成能力，能在几分钟内生成完整框架，代码结构清晰且功能齐全，能自动处理依赖项和运行命令。 支持多技术栈，从 HTML5、响应式 CSS 布局到 Echarts 图表实现，对 Web 技术掌握良好，生成的代码可直接运行且无明显语法错误。 具有动态调整潜力，虽未完美复现设计图，但能根据用户反馈快速调整样式，自适应布局的实现展现了迭代能力。 现在的 AI 越来越强大，小白不需要懂代码也能用 AI 编程工具进行程序开发，这让程序员感到深深的危机感。
2025-03-21
Trae怎么使用Col
Trae 是字节跳动推出的智能编程助手，具有以下特点和使用方法： 特点： 提供基于 Agent 的 AI 自动编程能力，通过自然语言对话实现代码编写。 除传统 IDE 功能外，还具备智能问答、实时代码建议、代码片段生成、从 0 到 1 开发项目等功能。 下载： 官网下载地址：https://www.trae.ai/download ，支持 Mac 系统、Windows 系统，未来支持 Linux 系统。 国内版可在官网 trae.com.cn 下载，有 Windows 版、macOS Intel 芯片版、macOS M 系列芯片版。 使用方法： 安装：下载完成后按照界面提示一步步安装。 登录： 安装完成后点击右侧登录按钮。 程序会自动打开网页提示登录，无账号需先注册。 登录完若出现“App Unavailable”，需开启科学上网，网页登录成功后可关闭科学上网，再点击中间大按钮。 初始设置： 启动 Trae 后选择主题（暗色、亮色、深蓝）和显示语言（简体中文、English）。 可从 VS Code 或 Cursor 中导入配置。 安装“trae”命令行，便于在终端中快速操作。 提供 Google 账号、Github 账号、邮箱三种登录方式，无账号可新注册。 使用界面： 左侧类似 VS Code 界面，上手容易。 右侧为 AI 区域，分为 Chat 问答模式和 Builder 项目模式。
2025-03-15
Trae 能用来做什么？有教程吗
Trae 是一款与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力的 IDE 工具，对中文用户更加友好。其特点和用途包括： 1. Trae Windows 版本已于 2 月 17 日 9:00 全量上线，即日起全系统可用。 2. 标配 Claude3.5sonnet 模型免费不限量，而竞品工具同一模型每月 140 大洋且限量使用 500 次。 3. 编辑器所有功能原生支持中文，上手门槛大大降低。 4. 相比 IDE 插件类的 AI 代码助手，Trae 这样 AI 原生的 IDE 有两个跨越式的突破： 补全不局限于向后追加，而是可以删除代码，多行全方位的自动补全。 具备 Agent 的能力，无须人工干预的情况下，可以完成代码生成、代码调试、程序运行等一系列的工作。 使用方面，例如： 1. 生成一个任务清单应用，在输入框中输入相关描述即可。 2. 根据 UI 设计图自动生成项目代码，可对生成效果进行调整。 从实际体验来看，Trae 高效的代码生成能力，对多技术栈的支持以及动态调整的潜力表现可圈可点。
2025-03-14
Trae能干什么
Trae 是字节跳动旗下的 AI 原生编程工具，具有以下功能和特点： 1. 对国内用户友好：具有中国官网、中文界面、国内模型，稳定且快速。 2. 免费使用：无需购买会员，下载后可直接使用，支持豆包 1.5pro 和满血版 DeepSeek R1、V3 模型。 3. 内置预览插件：写完代码一键运行，所见即所得。 4. 功能丰富： 提供传统的 IDE 功能，如代码编写、项目管理、插件管理、源代码管理等。 具备智能问答功能，在编写代码时可随时与 AI 助手对话，获得代码解释、注释和错误修复等帮助。 提供实时代码建议，AI 助手能理解当前代码并实时提供建议，提升编程效率。 支持通过自然语言描述需求生成代码片段，甚至能编写项目级或跨文件的代码。 可以从 0 到 1 开发项目，告诉 AI 助手想开发的程序，它将提供相关代码或自动创建所需文件。 5. 提供两种模式：Chat 模式根据描述进行代码生成、解释、分析问题或解决问题；Builder 模式帮助从 0 开发一个完整的项目，对代码文件的任何更改都会自动保存。 下载地址：https://www.trae.ai/download ，支持 Mac 系统、Windows 系统，未来支持 Linux 系统。 使用方法： 1. 安装：下载完成后按照界面提示一步步安装。 2. 登录：安装完成后点击右侧登录按钮，若没有账号需先注册。登录时可能需要科学上网，网页登录成功后可关闭，再点击中间大按钮。 3. 进入客户端后，可在对话框右下角选择三种大模型：Claude3.5Sonnet、Claude3.7Sonnet、GPT4o 。 使用案例：如生成一个贪吃蛇游戏，在 Builder 模式下直接输入需求，排队完成后 Trae 进行思考和代码编写，期间需手动接入进行文件审查，全部接受后代码生成完成，Trae 自动运行命令启动页面，即可看到实现的游戏效果。
2025-03-14
怎么用Trae进行threesjs建模
以下是使用 Trae 进行建模的相关内容： 1. 进入 Trae 客户端后，查看对话框右下角，有三种大模型可供选择：Claude3.5Sonnet、Claude3.7Sonnet、GPT4o。Trae 提供了两种模式，Chat 模式可根据描述进行代码生成、解释、分析问题或解决问题；Builder 模式能帮助从 0 开发一个完整的项目，对代码文件的任何更改都会自动保存。 2. 使用案例： 生成一个贪吃蛇游戏：打开 Builder 模式，直接输入“使用 web 技术栈生成一个贪吃蛇游戏”，排队完成后，Trae 开始思考和代码编写过程，期间需要手动接入进行文件审查，在提示中点击“全部接受”。代码生成完成后，Trae 自动运行命令启动页面，点击运行，在 Webview 中即可看到实现的游戏效果。 克隆 next.js 网站：先明确目的，如做出完整效果但暂不处理细节样式问题。然后逐步实现文章列表部分和底部导航栏，通过提示词让 Trae 生成相应效果。注意不要直接点击全部接受，先检查效果是否符合需求，可让 AI 解释新增代码作用或添加注释以精准修改。 制作消消乐游戏：在 Trae 中输入相关提示词生成初步效果，然后增加关卡、更换元素、添加音效等完善游戏。 希望以上内容对您有所帮助。
2025-03-07