trae工具可以改设计图吗

今天有什么有趣的新闻？瞧瞧？这是我用翠 ide 搭建的一个自定义智能体，他可以通过 mcp 获取我想要的新闻资讯，真正让 ai 替我动起手来，让我在工作之余可以更好的劳逸结合。而整个搭建过程很简单，基本没啥门槛。本期视频我就来手把手教会你。 在开始之前，我们简单过两个概念， m c p 和智能体。如果你最近有关注过科技新闻，很可能已经被 m c p 刷屏了。它的全称是 model context protocol 模型上下文协议 在解决大语言模型与外部数据员及工具之间无缝集成的需求。说的通俗点， mcp 使 ai 不再局限于模型本身的能力，而能够借助强大的外部工具来扩充自己的功能和服务，从而无所不能。而智能体是指能够通过设计其工作流和利用可用工具 代理用户或者其他系统自主执行任务的系统或程序。我之前做过一期有人骗走 ai 五万美元的视频，里面的主角 freesa， 这是一个以守护讲池为己任的智能体，感兴趣的小伙伴可以去看看。 所以 mcp 作为一种连接外部工具与智能体之间的桥梁，我们可以为智能体添加各种第三方的工具或服务，使其具备更强的任务执行与理解能力。这里以趣 id 为例来搭建。为什么选择趣？因为他长得帅， 因为它是国产软件，有中文界面和文档，而且完全免费。当然，我最看重的一点是它可以很方便的自定义智能体。 所以首先你需要下载 train， 他分为海外版和国内版，两者的区别是内置的 ai 模型不一样，大家可以安需使用，另外还需要安装 note gs， 因为许多 mcp 服务需要依赖他来运行。 安装好了之后，打开券注册登录一下，我这里已经登录过了，点击设置图标，选择智能体系统已经内置了两个智能体， build 和 build with mcp， 前者仅包含内置的工具，而后者在前者的基础上会将配置好的 mcp 服务 都添加进来，且不可编辑。当然，我们可以直接创建自定义智能体，在 ai 对话窗口中点击设置图标，选择智能体，再点击创建智能体，或在 ai 对话输入框中点击 at 智能体，再点击创建智能体，都可以进入智能体的配置面板。 比如创建一个新闻百小生的智能体输入提示词，然后我们需要添加一个 hot news 的 m c p 服务，选择添加 m c p servers， 再点击添加 m c p servers， 我们就进入了 m c p 市场。感觉这里的操作流有点重复吧，建议官方可以讲 挂一下。 mcp 市场中提供了社区中热门的 mcp 服务，我们在搜索框中输入 hot news， 点击加号，这里就弹出了一个配置窗口，看上去很专业的样子，我第一次也被这货整不会了。别慌，我们点击页面介绍，找到 npx 配置， 复制粘贴，点击确认搞定。回到智能体配置面板，刚才设置的 hot news m c p 服务就自动添加好了，点击创建后，立即使用自定义智能体就万事大吉了。最后我们来测试一下，在 ai 输入框右下角选择一个 ai 大模型，输入 今天有什么有趣的新闻看看？非常丝滑和流畅，小伙伴们可以尽情发挥自己的创造力，去创建个性化的智能体吧！好了，今天的 ai 小课堂就到这里了，你学会了吗？

最近我只用了两款 ai 工具，就开发了一个完整的 adhd 的 小程序，今天我就把这一套小白也能上手的开发流程分享给大家。 嗯，说到 web coding， 大家可能搜到很多 ai 工具，比如用 stitch 做 ui 设计，用 figman 做界面的展示，再用 google 的 ai studio 去做呃，前端的 app， 嗯，还有 tree， cursor 这些一堆， 不说了解和学习这些 ai 工具有多么的复杂，你单单去开通这么多工具的会员，可能都是一笔不小的费用。而我今天要分享给大家的是， 只用免费的 jammy 和 tree 这两款 ai 工具来实现一个完整小程序的一个开发流程。话不多说，我们进入正题。 首先我会让接下来各位去做深入分析，他来告诉我 adhd 是 个什么东西。然后对于这类人群，我们应该怎么去进入一个心流的状态，他会这样告诉我啊，你要拆解困难问题，要制造正向的反馈，要清理 周边的环境等等等等。嗯，不过我觉得还不够具体，所以我会让他再举个例子，让让我更好地理解他所说的这些事情。 ok， 那 看到这个具体的例子，那这就是我们最核心的功能设计了。然后我再大概构思一下我心目中的这个功能的使用流程应该是怎么样子，再把这些丢给去，让他先做出板的实现。 你看，这第一版的主要功能的流程就这么水灵灵的实现了，但是有一个很致命的问题呢，就是丑哦， 没有色彩搭配，没有过度的动画，也没有排版设计。但是不要慌，咱们打开免费的 gemini， 让他们帮我们做界面的美化，这这一步很关键，让 gemini 输出 tree 能够理解的 html 格式，同时也方便我们很好的去做效果的预览。 有一说一， gemini 给出的直观效果还是很舒服的，而且还有它的设计理念，在基本上抽几次卡我就能找到我相当满意的一个版本了。然后咱们再一鼓捣的把这些 html 丢给 tree， 让它去 呃，以小程序的逻辑去实，重新实现一版，然后我们就这么一步一步一个个页面的调整过来，那咱们的小程序基本上就这么实现了。最后呢，我作为一个十年开发工作经验的大厂程序员，前几年我觉得 ai 工具可能更适合有一定 编程基础的程序员来去使用，但是今天我真觉得，嗯，普通人也能用 ai 工具去做你心目中想要的程序了。

我发现很多兄弟想用 ai 开发小程序 app 啥的，却不知如何下手，那么本期就以程序员的角度从零到一开发一个小程序，当然也同样适用于其他项目。我们需要用到以上三个工具， 全程通过 tree 国内版来编辑代码，毕竟免费就能使用。如果你是氪金马农，随意即可。通过 hbo 的 手动创建拥币 app 项目， 然后导入到 tree， 使用它刚上线的三的二点零模型，分析你的项目需求。只需告诉他项目类型，简单描述相关需求， 它会自动帮你整理以及进行补充，并且细化到每一个功能点。你可以提取这里的关键词，利用内置的 pick 码智能体完成页面的设计。页面我已经提醒设计好，开始使用 send 二点零来写代码，给他一张页面截图， 直接生成 uni app 组建，接着运行到小程序开发工具测试效果，可以看到只使用一句 prompt 就 复刻的 ui 页面，继续编辑右下角图标的新建数据界面，连续对话的方式来完成剩下的页面即可。不管是图文分析还是代码能力，三的二点零都已经超出预期，并不会出现幻觉。 但是现在生成的页面有点生硬，没有任何动画元素，并不会出现幻觉，简单加上一些动画。 这里我已经观念好了。云空间继续使用 sun 的 二点零来对模块页面的数据执行增删改查操作，完成 api 的 设计与调试，编写多个云函数和创建数据库，处理这些逻辑。 当然这些操作都不必手动编写，以 tree 目前的生成能力已经可以轻松完成。前几天官方还通过豆包、二点零和 tree 完成了一个 ai 春节庙会案例，并且源码已经在低 tab 上开源，关键字 tree land 即可获取。

翻箱倒柜啊，从仓库里找了一台不用的小主机，把它清空之后装一装 cloud boot， 把小主机清理干净之后，打开 tree 的 官网，然后点击这里下载，下载完成之后，我们双击安装， 点击同意之后，我们就下一步就可以了。工具安装完成之后呢，默认打开这一个界面，让我们新建项目给他起一个名字啊，他已经改了两次名字了，我用了最新的一个，在这个聊天框输入了这么一句话，帮我 get 开源项目 cloud bot， 他 就开始准备在我的电脑上安装 get。 哦，出问题了，他安装 get 的 时候遇到了一些问题， 当然我还有别的办法安装 git 管他，我就是想演示一下如何自动化的部署 cloud bot， 这个时候他就换了一种方法，这种方法呢，看了一下啊，就是就是下载那个压缩包，看没有在下载压缩包 这边有终端，这边显示了下载的一个进度，我们等他下载完啊，然后呢，你看啊，过几分钟之后，他开始检检查是否下载成功，他发现成功之后呢，就开始告诉我说要解压缩这个项目文件。 跟着他在解压缩的过程当中啊，我们看一下在我建的这个目录里边是否有这个压缩包，看这就是他下载的压缩包，然后把它解压到这里。 ok， 他 已经完成了解压工作，还做了一个总结，炫耀一下 他的工作成绩啊，现在的开发工具啊，已经不是写代码的作用了。在他操作的过程当中呢，我们就可以打开 deepsafe 的 官网，进入平台之后呢，在左侧啊，这里有 a p r t 的配置页面，官网的下方有一个开放平台，点击进入啊，之前我已经配置过几个了，让我们再创建一个新的啊，然后在这里的话，我们就输入一个名称，他就会给你一个密钥的值， 我们再回到翠的开发界面啊，嗯，在刚才我们配置 deepsea 的 过程当中呢，开发工具呢，已经自己罗列了他应该处理的代办事务 啊，然后一顿操作。到了这里的时候呢，就出了一个新的问题啊，是我在上一期视频讲到的，只要使用这些开发工具，你最好先把这个 node 点 js 安装了， 那因为我这个电脑是一个清空的新电脑，也有这个 node 环境，所以呢，翠会帮我进行安装，以前我都是自己手动安装的。 这个安装过程呢，会有点小小的漫长，你可以去泡杯茶，等一会再回来。 看这个大模型有时候也挺神经的，他下载完成之后呢，他告诉自己说我要安装了，但实际上他并没有进行安装的动作，也没有安装成功，搞到半天又说好像是没有安装成功，我还需要下载并安装一个 m v m， 那这个是啥呢？是 node 的 版本管理的一个工具，它又开始安装 nvm 了，然后所以整个过程你会发现就是它不断的执行，不断的安装，你不断的点确认。 以前像这样的工作啊，对于专业的工程师来说呢，都会在的自己的电脑上安装多个 node 的 版本，会安装 nvm 这样的版本管理工具，包括前面提到的 get 工具等等， 都会完全准备好。人们会打开这个 powershell 的 命令窗口，通过命令去下载这个小龙虾的系统，下载完之后呢，通过命令去安装和执行。 那现在对于我们很多非技术出身的小白来说，那种指令型的东西呢，虽然不复杂，但是对你来说一看就会，一学就废。今天都是一个 ai 时代了，那我们要学会用 ai 的 方法来处理这些问题。 你就把这个翠啊，开发工具啊，当一个大模型聊天工具，你就跟他聊，让他去配合你执行自动化。很多人说呢，过程当中会不会涉及到流量啊？所以前面我也说了，翠免费，大胆的用， 我不建议你用那种命令式的安装方式呢。这个原因，比如说在安装这个很多工具的时候，尤其是像 note 工具的时候呢，是要在电脑里面配置一个这个概念啊，要 pass 环境变量的 这个东西啊，是看教程非常简单，真让你操作的时候，那是千难万难呢，很多人就直接懵掉了。所以原来的那种指令型的，在 power 设备窗口的安装方式是不太适合小白用户的。 这里边插一句啊，就是在他的执行过程当中呢，会经常调到这里的终端的命令，可是我们这里的终端呢，受一些权限上的限制，如果你遇到了，他一直告诉你说命令不可执行啊，这种错误，你就在 这个窗口里边输入这么一段英文来记下来啊，这么一段英文，如果实在不会呢，可以去网上找能够解除这个编辑器里边的终端的一个呃，命令的一个执行 啊，快要大功告成了啊，这个项目的依赖已经安装完了，现在是构建项目的一个阶段， 这里他告诉你构建完毕之后呢，实际上你在浏览器输入这个地址啊，会有一段英文的提醒，其实是 u i 界面没有够构建完成，所以呢，他还得继续构建，构建完成之后呢，再输入这个地址就可以了。 我们输入这个地址之后呢，可以打开了啊，能看到底栏的这个对话框了，我把窗口缩小一点啊，能看到了这个样子的，但是这里呢，看一下啊里 连接错误啊，我们把这一段红色的英文告诉编辑器，最后呢，他还贴心的帮我创建了两个启动文件，一个是那个 getv 的， 另外一个是窗口的，每次启动点这两个文件就好了。 好在这台小主机上又成功的装了一个小龙虾。细心的朋友应该听到我视频的最后有狗叫的声音啊，我家里的两只神犬，然后急了想出来玩，所以我就没办法再继续拍视频了， 我就在散步的过程当中就被对今天的这个安装过程做个总结啊。呃，首先一点呢是安装这个东西呢，谈不上复杂，谈不上难， 但是确实对于很多非技术专业的小白来说呢，有一环节呢比较挠头，其中一个呢是 环境的安装，他会反反复复的出错，这个问题呢在视频里其实也很难讲的清楚， 呃，能是有问题大家在评论区留言交流，或者是加入我的公开群交流了。然后第二个呢，就是 在小龙虾官方的文档里边，实际上是没有对国内模型的一个授权的，所以呢，呃，这里面其实是要改动代码的，这个过程呢，你就要借助翠的 a r 开发能力来解决了，所以这个过程我也很难去表述他是怎么改的， 那也只能是在评论区留言交流哈，所以大家有任何问题请关注我，请在评论区留言或加入我的公开群私信我。

大家好，使用 ai 软件十分钟完成一道壁设，今天为大家分享的是仓库管理系统，以下是我们的开发提示词，我们可以提前复制好我们使用的软件呢，仍然是 tree c n 这款软件，我们打开软件，然后打开我们 要生成代码的文件夹，此时我们切换到输入模式，在聊天窗口当中粘贴我们的开发需求，选择 g m l 四点七的模型，点击发送。 好，那这时候呢，我们只需要等待输入库的帮我们完成整个项目的开发， 花了十分钟的时间，我们项目已经开发完毕，接下来我们运行起来啊，大家来看一下整个项目的效果， 那么系统运行起来了，整个系统呢，它是分为了两个模块啊，第一个呢就是前端的 u e 模块，我们运行起来了，那么另一块呢是后端的时分步模块， 这块呢我们也给它运行起来了。好，那这时候呢，我们分别使用两个用户啊，去给它进行登录，第一个呢就是 user， user 一 二三登录好，这是普通用户登录的界面，那么在这里呢，我们能看到仓库管理，商品库存入库和出库等等这些模块啊，那么接下来我们切到管理员使用 admin 账户来登录， 我的命，一二三登录好，那这时候呢，我们能够看到也是对应的一些模块啊，不过管理员的权限啊是会更高一些啊， 前端呢使用的是 element ui 啊，那么以上的话就是这个项目的一个简单演示。好，那么今天的分享就到这里，再见，记得点赞关注哦！