trae api教程

手把手教你用 tree 做出漂亮的 ui。 今天我们用到的工具是谷歌最新推出的 stitch 和 tree。 stitch 的 详细教程可以看我之前的视频。 首先我们要在 stitch 里设计 ui 界面，这是我在 stitch 里上传参考图后生成的 ui 设计稿，操作特别简单，大家可以看一下最终效果，还原度还是非常高的。然后点击右上角的导出按钮，点击下载 zip 包作为我们的素材备用。 接下来我会带大家从零开始用 tree 搭建一个 view 项目，新手可以完全跟着这个教程操作。我本身对 view 比较熟悉， 如果你更擅长 react， 也可以用同样的方法创建 react 项目核心流程是完全一致的，这是 tree 全自动创建项目的完整过程。看完项目创建，我们再来看用 stitch 导出的文件， 我把下载好的文件放到了项目目录中，里面包含一个 html 页面原文件和一张 png 参考图。先运行这个 html 文件看看效果，这是一个标准的 u i 模板， 而现在前端开发主流是用框架实现，所以接下来我会带大家把这个页面完整转换成 view 代码，一步步复刻成 view 电商项目的首页，这里是我用的提示词。参考 stitch 目录下的文件 包含 html 文件和 png 参考图，将当前 html 页面完整复刻为 vivo 组建，要求 ui 支持自适应，严格遵循 html 中的样式规范，实现一比一完美复刻。我选择了 glm 五大模型来完成这个转换，这个模型的表现非常出色， 稍等片刻， tray 就 能一次性完成转换。我们运行一下看看实际效果，页面被完美复刻，没有任何偏差。 由此可见，用好初 a a 不 仅能做出精美的 ui 界面，掌握更多技巧后，甚至可以用它开发出可交付的完整产品。好啦，你学会了吗？关注我，学习更多 ai 编程小技巧！

祝大家新年快乐，这个视频是一行代码没有写，全靠 tree 加 scale 自动生成的， 这个视频是用 remote scale 生成的， remote 是 一个用编程方式创建视频的框架，之前我们也分享过 tree 的 scales 怎么用，如何部署，今天直接实操，手把手分享利用 scales 生成二零二六年新年祝福视频的方法。 这个 remote skills 可以 来到这里获取，我们打开之后，在这里我们输入 remote， 可以 搜索一下，看到的第一个就是这个 skills 技能，在这里我们选择 code， 然后选择登录的 vip， 保存到本地之后我们打开保存的文件，然后找到 这个 remote 这个文件，把它拖出来，拖出来之后，然后我们右键创建一个 z i p 的 压缩包，然后我们选择确定在这里创建 z i p 的 原因，是因为我们在 tree 里面可以直接去上传，这样不用我们手动去找目录。关于 tree 使用 skills 的 方法， 前面也分享了几种，如果感兴趣大家可以看一下往期内容，然后在桌面上我再新建一个文件，主要就是创建我们的视频生成的一个项目，在这里我们命名为二零二六， 然后下一步我们打开去选择我们刚刚创建的二零二六，然后选择文件夹，下一步就需要上传我们的 skills， 在 这里我们选择加号设置这里，然后选择规则和技能， 在这里我们选择创建，然后在这里上传我们刚刚创建的 z i p 压缩包，我们选择 remotion z i p， 在 这里我们选择项目就是只针对本项目生效，然后我们选择确认好，这时候就上传完成了，我们可以看一下项目，这里已经起用， 然后下一步就是输入提示词，在这里我们给它的提示词就是使用 remotion bet 报表 says， 帮我生成一个二零二六年新年动画视频，写上祝福语，新年快乐，祝大家二零二六四方梦想皆如愿以偿。 在这里我们强调了这个 scales 的 这个名称，因为 scales 它是根据关键词去触发的，在这里我们为了让它能触发，我们直接写了这个 scales 的 名称，然后下一步我们就选择发送， 在这里需要我们去输入一个字母，我们输入 y， 然后回车 好了，这时候就生成完成了，然后我们打开文件夹，我们看一下生成的视频， 可以看一下这就是利用 skills 生成的一个二零二六动画视频，关于这个视频的风格还有配色都是可以直接在提日词里面去指定的，大家可以丰富提日词，让它生成更加绚丽的一个视频风格， 比如在这里我们可以还让它丰富，我们输入提示词，就是视频配色要是红色风格，然后增加鞭炮元素，在这里我们切换一个模型来尝试一下，然后我们发送 好了，现在生成好了，可以看一下增加的这些元素，现在我们来预览一下， 现在就是红色的风格，然后增加了一些元素，这就是 ai 赋能编程的魅力，不仅是写代码，是更高效的创造。好了，到这里祝大家四方梦想皆如愿以偿，我们下期再见。

哈喽啊车友们，春节将至，我用吹 solo 做了个赛博福字生成器，只需要用手对着摄像头写一个福字， ai 呢，就会生成一张属于你的福字图片。原理其实并不复杂，摄像头捕捉手势书写的轨迹提供给 ai， ai 呢，在基于你笔画的福字去生成书法风格的福字图片。这个想法呢，我是直接丢给吹 solo 的， 不用先想架构，把要做的事情说清楚就行。打开 plan， 让 solo 的 给你出方案。 后面呢，再一步步补齐完整能力。好了， solo coder 很 快把我们的想法变成了 demo， 所以 第一步其实就是一件事，让我们能够真的用手写字。 下一步就是把 canvas 上实时绘制书写的轨迹记录下来给 ai， 这会帮助 ai 去理解你写这个字的感觉，方便它完成最终基于你的风格生成福字图片的目标。你看，这里， solo coder 还给轨迹数据加了一个导出的功能， 我们可以点击下载下来的。当然，光能写还不够，我的这个 idea 是 希望能够把真正的 ai 接进来。生图这里我直接告诉 solo coder， 我 想接入豆包生图模型， 让它一步一步引导我去接。 solo coder 已经帮我实现了完整的前后段调用链路，包括它在网页上增加了一个紫色的生图按钮。然后它还告诉我如何去配置我的 api key。 我们按照他的指南一步步来。首先我们打开项目根目录下的这个文件，然后在对应的这个位置填入我们的 api key 以及我的接入点 id。 最后呢，我们再来补充一条 promt， 让 ai 伸出的福字图片有我们想要的那种新春的氛围。 ok， 我 们现在再来试一下。 好啦，这就生成好了，果然是有根据我的笔触，并且结合了春节新春的氛围和元素，生成了一张符合我们需求的福字图片。但是这上面似乎还缺少一个可以把图片下载下来的功能，我们再加一下， ok， 在 我加上了图片下载和创意控制滑块功能后，我觉得这个应用的完成度已经不错了， 我们一起来试一试。我们食指拇指捏合，对着摄像头来写福， 这里写完，其实你就可以点击这下面红色的下载按钮，把你的这个手势写出来的福字下载下来了。但是我觉得我自己写的比较丑，所以我需要 ai 来帮我美化一下。那么就点击这个紫色的生成图片按钮，这里其实有一个默认的提示词，然后呢，你可以在这上面进行一些更改，比如说我只希望有金色的墨镜， 我就把黑色删掉，那你也可以根据你的需求去定制这个提示词，下面还有 ai 创意程度的花块，我希望 ai 能够帮我把这个福字变得更好看一些，所以我让它多自由发挥一点，我们开始生成。 哎，这个福字确实是我满意的效果，哎，我赶紧点击下载，把它保存下来，根据这个思路，你也可以用退休了为你的春节增添一点赛博氛围。那么我在这里呢，也借这个福字生成器，祝大家新春快乐，马年马上福到！

那很多人呢说这个国产 ai 编程工具啊不行，然后国产模型拉跨，顶多做做这个 demo 项目。但是呢我今天却用一套国产组合，直接在一个前后端分离的开源项目上，从零到一的完整开发了三个功能。 更关键的是呢，我今天这个视频会把中间所有的真实踩坑经历，怎么反馈的，怎么修复的，怎么连调的全程给大家展现出来。那看完这个视频呢，你就能直接把这套流程运用到自己的项目当中去。 ok， 咱们话不多说，直接开始。首先呢我们介绍一下今天的开刀工具啊，它就是 tree 的 国内版，加上字节最新发布的 seed 二点零这个模型， 虽然说我用的是个人版，但它是完全免费的，并且它这里呢也是可以去切换其他模型的。开源项目的话呢，我们用到的是这个路由 view， 它是一个前后端分离的项目，架构呢也是比较新。 那接下来我们就实现第一个功能吧，在现有的这个项目当中呢，我们想要去增加一个博克管理的模块，这里的话呢，我们首先切到这个 solo 模式，然后呢打开 开这个 plan mode， 这里呢是我的一个提示词，大家可以暂停看一下。那现在的话呢，我们就让这个 tree 来执行，首先呢他会去查看当前项目的一个结构，然后了解到一些关键配置和代码风格，包括一些业务代码和架构风格。然后呢他就生成了一个这样的实现计划。那我们点开来看一下 啊，他这边写的还是非常详细的啊，包括数据库的一个准备，给他的一个约定是在多克容器里面，对吧？包括我们指定了账号名和密码，然后就是后端开发的一些实体类啊，那这些都是 c l e d 了，就没啥可说。前端开发呢，他说要去添加一个 marvin editor 这样的一个依赖啊， 还有就是下面的一些技术实现的要点，那如果你有一些需要补充的，也可以随意编辑，那我觉得他做的是完全没有任何问题，所以说我就直接让他按照这个计划去执行，然后呢他就开始去拆分子任务挨个执行了， 那这里的话呢，它可以自己调用终端执行这个多款命令啊，并且呢会读取终端的一个输出啊，方便后续的这个执行过程当中去做一个优化和验证。那紧接着呢，它就创建了我们所需的这个表结构啊，还有这个后端实体类啊， map 文件啊，以及这个 xml 文件，包括前端的页面等等等等啊，整体的一个执行速度我觉得还是非常快的。 但是呢，我突然意识到一个问题，就是项目自带的这个表结构 solo 还没有执行啊，我忘了跟他说了， ok， 那 这个时候呢，我们可以去打断这个 solo 的 进程，然后跟他来提一嘴。还有一点很重要，就是若一的这个菜单和按钮权限呢，是需要在数据库当中去做配置的， 而且呢需要给这个 admin 做一个权限的分配，那这一步呢，他也是做对了啊，并且他新插入的这个 menu id 呢，他也是知道从啊什么样那个值开始往上递增， 那这个小细节我觉得是非常的惊喜啊，接下来的话呢，我们就让他翻译启动整个前后端啊，然后下面的话呢，我们就去这个浏览器看一下效果，登录进去是没有啥问题的，但是这边所有的中文都乱码了啊，那于是呢我就反馈了这个中文乱码的问题，那最终呢他也是得到了解决。 接下来的话呢，我们就去这个博客的模块看一下啊，发现是没有任何数据的啊，那于是呢，我就让他去帮我生成了一些测试数据，最后呢我还让他去用网上的一些开源的图片，丰富了这个封面图和文章里面的配图，最终展示的一个效果就大概是这个样子， 然后这个分类管理啊，标签管理啊，以及文章的这个查询分页，包括新增更新也都是没有任何问题的啊，这个需求我觉得他做的非常的快，有一些小问题，但是他也能够一轮就帮我们解决啊，整体还是非常 nice。 那 接下来的话呢，我们就让他去做一个博客网站啊， 那这里的话呢，我们就找到了一个设计稿啊，然后我这边呢导出图片，然后呢让翠来帮我们还原这个 u i 的 设计，那这里呢是我用到的一个高保真还原呢， 这边呢是指定 tree， 采用这个 fondant design 这个 agent skills 来编辑，它也是先熟悉了一下相关的代码和现有的逻辑，然后呢去列了一个具体的实施计划，那我们简单来看一下，那我觉得是没有任何问题的，所以说我就让它按计划执行。 ok， 那 到这里的话呢，这个博客网站就做完了，整体的速度也是非常的快， 我们现在呢就去这个浏览器看一下效果，左边呢是 tree 生成的一个实际的网站的效果，这版的 ui 还原我觉得还是真心不错的啊， 没有那种紫色的或者说礼物风格的那种 ai 位，大家也可以去看一下这个效果啊，如果说满分十分的话呢，你愿意给他打几分呢？最后呢我的一个想法是给这个传统项目增加一点 ai 的 能力啊，我的一个想法是这样的，就是我们想要去写一个定时任务，然后呢每天去抓取指定网站的这个播客内容， 然后呢我们让他去做一个 ai 的 翻译并改写，然后存到这个数据库。但是这里我们先做一个免责声明啊，就是本视频纯粹是为了教学展示用的啊，绝对不会去做任何恶意的抓取或者是洗稿，还有其他的一些侵权的行为。同样的他也会去先熟悉本地的一个代码和相关的逻辑， 然后列计划。这里呢我也是觉得非常的靠谱，所以咱们就直接执行。然后呢我发现了一个很重大的遗漏，就是我们没有告诉他大模型调用相关的一些信息。 所以说呢，我们现在就去这个火山方舟开通一下啊，比如说我们就选择这个多包 c 的 一点八。然后呢我们点击这里的 api 调用 啊，随便取个名字，然后复制下面的调用视例给到 tree， 它会自动地去提取我们这段内容当中的大模型的 u i l， api、 key 这些关键信息啊。然后呢自己去写了一段这个提示词啊，那我们让它继续去执行，那现在整个功能呢就已经执行完毕了，我们手动执行一下定时任务， 看一下这个效果怎么样。那在后台管理系统呢，已经是可以看到刚才我们抓取大模型处理后的这篇薄壳了啊。接下来呢，我们就去到薄壳网站看一下它实际展示的一个效果怎么样。整体我觉得还是非常不错的啊，尤其是在这个 暗夜的这个主题下面啊，显得是更加高大上了，对吧？然后底部这边也是有它的一个原文链接可以去跳转的，还有这个免责声明， ok， 那 到这里的话呢，这套基于弱一的智能薄壳系统已经是完全跑通了，从后台模块增量开发，到前端网站的还原，再到定时抓取 ai 自动生成内容，全部呢是在一个真实的前后段分离项目当中去完成的。这次体验呢，其实也是我最近比较关注的一个点啊，就是 ai 编程真正的价值不是去写页面，而是参与工程的这个构建。刚刚呢，在这个火山的发布会上面，其实也是做了一个很有意思的案例啊，官方呢，用这个 tree 加 c 的 二点零，在 github 上面构建了一个 ai 春节庙会的 web 应用场景。 那在那个庙会当中呢，每个 ai 小 人都有这个环境，感知推理和记忆系统能够自主地去产生行为和互动，这其实呢，也是一个非常复杂的场景，但是通过 tree 和 c 的 二点零的一个配合呢，几轮提示词就完成了整体架构和运行逻辑。 那你会发现呢，不管是庙会这种多智能体场景，还是说我们今天这种真实的工程改造核心能力呢，其实就是一样的啊，理解结构，拆解任务，然后协同执行。那如果说呢，你也在做真实的这种项目，不妨可以上手体验一下。 ok， 那 今天的视频呢，我们就先到这了，下个视频再见， peace。