本文作者:kk,老“拉文克劳”,TRAE 产品经理,致力于打破技术门槛,让人人都能轻松实现创意和自定义产品分享体验。
最近我用 TRAE 里的 SOLO Builder 搭建了一个“哈利波特分院帽测试器”的前端网页。哈迷肯定都知道,它是一个根据你的性格测试,会判断出你是一个斯莱特林还是格兰芬多的分院帽测试器;在此基础上,我还添加了一个分享页面,它会根据你的个人信息生成出一张长得很酷炫的 3D 卡片,这样你就可以把它分享给好友也进行测试。
哈利波特分院帽测试器
中文分院帽测试器
搭建这个网站的起因很简单:不知道大家有没有观察过,每过一段时间,朋友圈或者小红书总是会有一波“测试风”,比如色彩人格测试、MBTI 测试、网易云音乐性格测试等等。但也有很多有名的心理学测试或者小游戏测试,在网上是搜索不到 App/小程序版本的,所以作为一个“拉文克劳”,我就想用哈利波特分院帽测试器来试一试,我能不能搭建出一个自定义的测试器,并把结果分享给朋友。
作为一个不会写前后端代码、平时主要用 Python 来搭建模型和分析数据的人,做网页 App、个人网站、小程序对我来说是这辈子都不可能做到的事情.....每次看到朋友那些体面的个人网站,展示着他们的人生故事、爱好照片墙、项目和经历,还都是以非常美观,可交互的形式呈现,就很心动也想要自己做一个。
虽然网站本身并不复杂,基本都是前端展示逻辑为主,但光是想到这是别人大学四年在计算机系学习的功底,而我需要自己在 B 站/YouTube 找各种教程从零学习,第一步就彻底劝退了。所以,“搭建个人网站”这个事情,也仅停留在把各种“教小白学习前端开发”的教程放进收藏夹,最终以吃灰为结局 ,直到最近 Vibe Coding 的风潮兴起。
用 Vibe Coding 搭建自己的软件,我其实抱着一点图一乐的心态:就算是看到前段时间有个博主开发的“小猫补光灯”,花了几个小时做出来的 App 最后真的上架到了 App Store,还有用户付费,看起来很简单容易上手,但一想到其实背后从上架到维护,也是有很多“除了开发之外”的额外流程,就十分让我痛苦。
如果只是代码报错,我还可以每次把 error 丢给 GPT,再一次一次跟它痛苦地对话尝试解决;可如果是类似于部署,或者测试,或者上架之类一系列流程性的问题,我只能自己去 Google,再去类似 reddit, stack overFlow 等 10086 个社区,跟着大家的流程挨个走,碰到卡点跟 GPT 也解决不了,因为我大概率连问题都描述不清楚......
基于这样的背景,我在用 TRAE 里的 SOLO Builder 时候,本来是没有抱着一次就能成的心态的,但居然真的用 2-3 轮对话就生成了一个可以分享给朋友的产物。让我大大体会到什么叫:
“就像会剪视频不应该是限制人们表达自己灵感创意的门槛,会写代码也不应该成为大家为自己创造工具的阻碍”。
在抖音出现之前大家会说,“表达创意也不一定要拍视频,还可以通过文字、绘画、拍照等等很多方式”,但现在,人人都能随手拍抖音,自媒体更是热门职业。再没人质疑“用视频表达自我”的合理性——它平常得仿佛宇宙诞生之初就存在的事。同样的,每个人都会有一些奇奇怪怪的个人小习惯,那些犄角旮旯的小需求,常因过于小众、商业价值不足而被主流应用忽略。
于是,我们只能自己做着重复的手工操作。比如我的朋友很喜欢植物,但市面上没有一款应用,可以共享所有用户识别的结果,并在地图上定位出来。她就通过 TRAE 搭建了一个叫做**“植物地图”的 App:这是一个用户共建的项目。用户拍照或从本地选择带有地点信息的植物照片进行上传,会从图片中提取地点信息(使用时请务必开启位置权限),并进行植物识别。将植物上传到地图后,所有已登录用户都能在地图上看到植物。用户也可查看自己上传过的植物记录。**
植物地图 App,可以看到所有用户上传的植物
个人植物发现
所以我真的很相信,AI Coding 软件类似于 TRAE,真的会让人人都成为开发者成为现实。虽然很多人甚至从来都没有想过要自己开发一点什么东西,但总有一天,大家都会用上自己开发的网站或应用。
下面是非常简单的哈利波特分院帽测试器的搭建过程,总共才 2 轮对话,你真的一点代码基础都不需要就可以复刻一样结果。
第一步:打开SOLO,提出想法
打开 TRAE,你可以用语音或者文字告诉 SOLO Builder:“帮我生成哈利波特分院帽测试器”。如果想要给 SOLO Builder 一些风格或者功能上的实例,你可以截图或者贴网页链接,提供想要的图风格供参考。SOLO Builder 支持多模态输入,它可以准确理解各种形式的上下 Context。
多模态输入,图片输入样式
发送指令后,SOLO Builder 会生成产品需求文档(PRD),梳理前端页面、App 的功能思路及后端链路,如不同页面设计和后端流程图等。先跟 SOLO Builder 聊几轮,通过 PRD 的形式来帮我理清思路是我个人特别喜欢的功能:很多情况下,开始开发的时候,我拥有的只是一个非常模糊的想法,比如“想要搭一个记账本”,但对于具体需要哪些模块功能,前后端应该怎么实现,完全没有仔细想过。
如果没有 SOLO Builder 的 PRD 生成功能,我会先找一个任意的 AI 聊 5-10 轮,才能靠自己梳理出一版产品需求文档。但有了 SOLO Builder,这些前置工作就全部不需要了,它会很聪明的自主拆解我想要的产品,并跟我确认功能需求、产品后端逻辑流程图、页面设计等等,大大节约了一来一回自己梳理思路的时间,非常方便。 等确认需求没有问题后,就可进入下一步开发。
SOLO Builder 会 PRD
第二步:实时跟随,监控进度
SOLO 是智能的上下文工程师 Context Engineer ,SOLO Builder 会利用各类工具理解上下文并拆解执行任务,人只需实时跟随,AI 能自动检查并解决报错。
"Context Engineering is the discipline of designing and building dynamic systems that provides the right information and tools, in the right format, at the right time, to give an LLM everything it needs to accomplish a task." 上下文工程是设计和搭建动态系统的学科,具备在合适时间以合适格式,向 LLM 提供完成任务所需的正确信息与工具。 (Schmid, P. (2025, June 30). The New Skill in AI is Not Prompting, It’s Context Engineering. Retrieved from https://www.philschmid.de/context-engineering )
上下文不仅仅是一次发送给 LLM 的单条提示词,而是模型生成回答之前“看到”的所有内容。SOLO Builder 会使用用户提示、长期记忆、可用工具等所有它可以检索到的信息,从写代码、修 Bug、到交付功能,SOLO Builder 会自主地拆解并闭环式执行任务。
Context is everything the model sees before it generates a response (Schmid, P., 2025)
确认开发后,我们可以点击**“Flow 实时跟随”的按钮。** 作为一个非常智能的上下文工程师 Context Engineer,SOLO Builder 就会使用 prompt 输入的上下文,自主调用到右侧面板中的工具去拆解任务并执行:编辑器、终端、浏览器、文档。
在这个一体化的环境里,SOLO Builder 内部所有的流程都会 share 上下文,不需要人一轮一轮手动去复制粘贴 AI 生成的结果,并粘贴给回到 GPT 再去执行下一步流程。SOLO Builder 通过理解并用 agentic 的方式去调用工具去主导整个流程,不需要人的参与。 我们只需要看他干活就行了。
“Flow 实时跟随”的按钮,让 AI 主导整个流程
SOLO Builder 自主调用到右侧面板中的工具,拆解任务并执行
下面是我用仅一轮的 prompt 就生成的结果,耗时大约 5-6 分钟:
分院帽测试过程
生成 3D 卡片并分享给好友
可以看到 SOLO Builder 80-90% 还原了我们想要的需求,包括测试器风格、测试题目内容的合理性、问题跳转、个人卡片生成(包含 3D 效果)等。 作为一把出的结果,从美观程度到功能完整度,都是超乎我整体预期的。在这个基础上,我只需要去做局部功能和风格的微调,就可以达到完全可用的状态。
第三步:内置预览,精准修改
若发现第一轮结果可能未达预期,比如某些按钮颜色不好看,或者想要局部微调文字内容,我们也可通过**“选择元素”的按钮,进行元素级别的修改;直接点击文字框,就可以修改文字;** 我们可与 AI 对话,直至生成符合需求的结果。
选择元素,进行元素级别的修改
第四步:一键部署,直接上线
在调整一轮之后,我觉得这个版本基本达到了我想要的样子。这个时候,就可以点击线上部署按钮 ,部署完成后点击链接,即可在任意浏览器打开并将版本分享给他人。如果没有 SOLO,我需要自己上传网页文件、配置服务器、测试和维护等,是一个多步骤的过程;特别是对于小白来说,很可能倒在任何一步,让好不容易开发好的 Vibe Coding 项目,在最后一步功亏一篑。
但是 SOLO 集成了 Vercel 的能力,让用户在开发完成后一键部署: Vercel 是一个面向前端开发者的云平台,提供一站式服务,包括网站和应用程序的部署、托管,以及全球分发。它会自动检测并为项目所用的框架设置最佳构建配置和部署配置。
项目预览后,自动调起部署卡片
无需跳转,内置一键 Vercel 部署
此时这个项目就是一个可以分享给朋友尝试的完整网页啦。从非常模糊的需求,到上线部署完成,耗时一共才大约 12 分钟。 在没有 AI Coding 的昨天,就算是这样一个偏前端的网页开发,最好的人类工程师也需要至少半天到一天的时间,才能完成开发到分享,还得基于有设计有需求文档的情况下。
当然,生成个人应用只是特别小特别单一的应用场景,我相信更多可以在投入生产使用的应用场景,一定会在不远的将来实现。正如 TRAE 的全称一样,The Real AI Engineer,我们希望 TRAE SOLO 可以融入 5-10 人的开发者团队,作为一个 Context Engineer 真正自主闭环地解决问题,为团队提效,让人和 AI 并肩作战。