AI Coding 快速入门:10 分钟开发一个网页应用
- Trae 是字节跳动的一款 AI Coding 工具,比较适合新手上手 AI Coding。我们使用其 Web 端,能快速开发一个网页小应用。
浏览器打开 Trae 网站,登录并切换到 Code 模式
输入你的需求提示词,如【帮我开发一个待办事项管理工具,支持简单的增 / 删 / 改 / 查 / 标注功能】。
AI 开始生成详细的 PRD(产品需求文档)之后会询问你的意见。确认后等待几分钟,AI 就能完成一个简单应用的首个版本!

预览 AI Coding 实现的应用首个版本
点击结果中对应的卡片,可以在右侧查看预览页面以及 PRD.md(需求文档)、TechSpec.md(技术规格 / 方案)、代码变更等。

选择预览页面模块,持续对话迭代功能
点击浏览器右边的选择图标,选取页面需要修改的元素,描述修改建议。

将修改说明继续发送到对话框中,AI 会按要求修改代码。

通过上述在网站持续对话的方式,AI Coding 能够完成一个工具和项目的初始形态。
查看并下载 AI Coding 的代码到本地
在网页上开发虽好,但是速度受限。下载 AI Coding 生成的代码,后续在本地进行 AI Coding 迭代会更快、更专注!
点击左侧任务列表对应对话后面的【文件管理】。

查看此次 AI Coding 生成的代码文件。

将此次 AI Coding 生成的代码批量导出到本地。

开始像开发者一样,使用专业的 AI-IDE 持续进行 AI Coding
前面使用的 Trae Code 网页端只是整个 TRAE Work 的一部分,部分功能受限,开发效率较低。
在网页上开发使用的全是云端环境,开发虽然便利,但是速度受限。
并且对于简单的修改无法直接改代码,只能跟 AI 对话,消耗不必要的 Token,持续迭代效率低。
现在,我们打开 TRAE 官网下载 TRAE IDE,进行更专注、专业的开发(依然是 AI Coding)。
TRAE 是 “The Real AI Engineer” 的缩写。
IDE 是集成开发环境(Integrated Development Environment),是开发者必备的代码编写和调试工具。

将下载的代码压缩包解压,打开 TRAE IDE,再打开对应项目。

允许 TRAE CN 访问我们的项目,同时信任当前项目代码,给予其权限,方便后续 AI Coding 稳定且顺利地进行!

之后,所有的 AI Coding 都可以在对话框中继续进行。因为 TRAE IDE 是一个 AI Agent,你也可以向它询问项目中的所有问题,让它改代码、写文档、启动项目、安装依赖,尽情发挥你的想象。

切换成 SOLO 模式,你便是 AI Coding 指挥官!
