跳至内容
10 分钟网页应用

AI Coding 快速入门:10 分钟开发一个网页应用

  1. Trae 是字节跳动的一款 AI Coding 工具,比较适合新手上手 AI Coding。我们使用其 Web 端,能快速开发一个网页小应用。

浏览器打开 Trae 网站,登录并切换到 Code 模式

输入你的需求提示词,如【帮我开发一个待办事项管理工具,支持简单的增 / 删 / 改 / 查 / 标注功能】。

AI 开始生成详细的 PRD(产品需求文档)之后会询问你的意见。确认后等待几分钟,AI 就能完成一个简单应用的首个版本!

在 Trae Code 模式中输入应用需求

预览 AI Coding 实现的应用首个版本

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

预览 AI Coding 生成的应用与项目文件

选择预览页面模块,持续对话迭代功能

点击浏览器右边的选择图标,选取页面需要修改的元素,描述修改建议。

在预览页面中选择需要修改的元素

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

通过对话继续迭代应用功能

通过上述在网站持续对话的方式,AI Coding 能够完成一个工具和项目的初始形态。

查看并下载 AI Coding 的代码到本地

在网页上开发虽好,但是速度受限。下载 AI Coding 生成的代码,后续在本地进行 AI Coding 迭代会更快、更专注!

点击左侧任务列表对应对话后面的【文件管理】。

打开 Trae 的文件管理

查看此次 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 IDE,再打开对应项目。

在 TRAE IDE 中打开本地项目

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

允许 TRAE 访问并信任当前项目

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

在 TRAE IDE 中继续对话开发

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

切换到 SOLO 模式

查看 Trae 官方文档,积累和提升 AI Coding 工具的使用熟练度

Trae IDE 快速上手文档

最后更新于