字节Trae SOLO实战分享:3小时上线一个网站,全栈开发+自动部署,吊打Claude Code?(附保姆级教程)
【AI编程工具TraeSOLO实战:从零开发到部署全流程】本文分享了使用Trae SOLO开发AI工具站的完整案例。作为字节推出的AI IDE,Trae SOLO实现了需求描述-自动开发-一键部署的全流程自动化。作者详细演示了从需求输入、技术文档生成、前后端开发到Supabase集成的一站式开发体验,特别展示了其图形化界面带来的易用性和部署便利性。案例包含用户端和管理端开发,涉及200+AI工具数
大家好,我是X小鹿~前互联网大厂程序员,自由职业3年+,也是一名 AIGC 爱好者。文章首发于【X小鹿AI工具库】。
记得 23 年刚接触 AI 编程类产品的时候,还仅仅只有代码补全、代码片段生成等一些简单的功能。
而现在,很多 AI IDE 已经能一句话完成一个产品从设计、开发、测试到部署上线的整个流程了。
IDE 的形式也是多种多样。
有图形用户界面形式的 AI IDE,比如 Cursor、字节的 Trae、腾讯的 CodeBuddy IDE、还有阿里不久前推出的 Qoder 等。
也有命令行形式的 AI IDE,比如 Claude Code、Qwen Code、Codex 等等。
之前被问到:编程小白想用 AI 编程开发应用,推荐用什么 IDE?
虽然身边一群人都在说 Claude Code 厉害,但对于之前没接触过编程的人来说,Trae、CodeBuddy IDE、Qoder 等这些有图形界面的 IDE 更容易上手一些。
今天就分享一个用 Trae SOLO 从 0 开发到部署上线的案例。
一、Trae 下载
Trae 国内版:https://www.trae.cn/
Trae 国际版:https://www.trae.ai/
Trae 分国内版和国际版,两者在功能使用上并没有什么太大区别,主要就是模式使用上不同。
国内版的 Trae 主要集成了豆包、Kimi、Qwen、GLM、DeepSeek 等国内主流的大模型,而国际版 Trae 主要集成了 Claude、Gemini、GPT 等国际主流的一些大模型。
选择适合的版本下载安装就可以了。
打开 Trae 后,在左上角可以看到 Trae 有两种模式:IDE 模式 和 SOLO 模式。(点击可以切换)
Trae SOLO 模式,是 Trae 在 7 月新推出的一项功能。
❝Trae SOLO,是行业首个 Context Engineer。用户只需要描述任务需求,Trae SOLO 就能智能获取到上下游的各类上下文,并自动规划、调用各种工具来实现从需求设计、开发、测试、部署上线的全流程。
下面的案例,就是在 Trae SOLO 模型下完成的。
二、项目背景
这个案例是从零开发、上线一个 AI 工具站(含用户端和管理端),涉及前端、后端、数据库操作等。
用户端:
用来展示工具、根据分类和关键字快速检索工具;
管理端:
用来添加、删除工具和更改工具的信息。
数据来源:
为了简单,就直接用我之前维护的一份飞书文档来填充数据,里面有 200 多个 AI 工具及工具教程。
下面是这份文档的部分内容:
这个案例之前用 CodeBuddy IDE 实现过,同样的案例,来看看 Trae SOLO 的表现如何。
三、输入需求
我们只需要在对话框中简单描述下任务需求,点发送,就可以看 Trae 帮我们干活了。
你也可以通过上传图片或 Figma,来规定具体的样式。比如这里就简单上传了张草图,来描述每个 item 的大概样式。
点「优化」按钮,可以对现有提示词进行优化。右图是优化后的提示词。
四、设计
Trae SOLO 在接到需求后,就开始干活了。
它先是创建了「产品需求文档」和「技术架构文档」,用于指导后续的开发。
产品需求文档:
包含了产品概述和核心功能定义、用户角色设计(普通用户和管理员)、详细的页面功能模块规划、用户界面设计规范和响应式设计策略、完整的用户流程设计等。
技术架构文档:
包含了架构设计、完整的路由定义和 API 接口设计、详细的数据库模型设计、完整的 SQL 建表语句和安全策略配置等。
如果有需要调整的,可以在对话框中继续输入或者在文档中修改。
点「查看变更」,可以看到修改前后的对比。
五、开发
如果没有问题, Trae 就可以开始开发了。
Trae 先是根据技术架构文档,创建了项目的脚手架,并自动安装了所需的依赖包。
然后创建了一份待办事项列表:
Trae SOLO 会根据待办事项列表来逐步完成开发步骤。
每完成一项,都会更新状态。让我们清楚它的进度。
所有任务开发完后,点「预览」,就可以在右侧的「浏览器」中,查看效果了:
对于不满意的地方,可以继续在对话框中提需求。
比如,在它一开始展示工具的时候,并没有用到飞书文档中提供的数据,而是自己随便拟了 5 个 AI 工具来展示。
那么就可以继续追问。
Trae 分析了可能的原因,并给出了解决方案,最后还是决定,直接从飞书文档中导出一份 CSV 文件给它。
之后它自己写了「数据清洗」的脚本和「批量导入数据库」的脚本,将清洗后的数据成功导入了数据库。
小技巧
分享一些小技巧。
比如程序报错了,在控制台里点「添加到对话」,就可以一次性将多个报错信息告诉 Trae,让它修复。
再比如,想对画面中的某个元素进行修改,可以直接选择这个元素,「添加到对话」进行针对性的修改。
集成 Supabase
因为项目涉及后端服务和数据库操作,比如数据库的存储和操作、图片的存储、以及登录管理端的身份验证,这些都是需要用到 Supabase 的。
Supabase 数据库存储:
Supabase 图片存储:
Trae SOLO 直接将 Supabase 服务集成了进来,不需要我们了解太多数据库和后端技术了,大大简化了上手难度。
第一次连接需要授权。
在 Supabase 里新建一个项目:
授权连接 Supabase、选择项目后,Trae 就可以自动帮我们完成数据库建表、增删改查及用户认证等操作。
比如,下面这些,建表、插入数据、添加策略、写批量插入数据的脚本啥的,完全不需要自己动手,Trae 全部帮我们做了。
也可以在「集成」里管理 Supabase 服务:
六、部署上线
以往部署上线一个项目,需要自己在服务器上安装、配置各种服务,还需要开放端口、绑定域名等各种操作。
对于非程序员来说,有一定难度。
而 Trae SOLO 支持将开发好的项目一键部署上线。
点对话中的「部署卡片」、或浏览器右上角的「部署按钮」:
第一次部署需要授权
部署好好后,就可以直接把链接分享给朋友了。
如果后续有新的修改,修改后可以点「部署新版本」。
七、项目结果展示
最后来看下用 Trae SOLO 实现的效果吧~
用户端:
完整版视频演示:见原文
管理端:
完整版视频演示:见原文
八、写在最后
以上就是今天的分享,用一个小案例,来演示了 Trae SOLO 的主要功能和玩法。
从需求提出,到编写产品需求文档和技术架构文档,再到前后端开发,及最后的部署上线,整个过程都非常顺畅。
不需要懂太多的编程技术、数据库操作和服务器操作,直接用大白话沟通需求、描述问题就行了。
记得几个月前,用 AI 编程工具改一个需求时,还经常修改好几遍都改不好。
而现在,明显提升,只要表述清楚,基本一两遍就能改好。
曾以为「AI 提效」只是个遥远的口号,如今,它用实实在在的生产力作出了有力的回答。
感兴趣的快去试试吧~
更多推荐
所有评论(0)