trae扩展设置

本次升级 tree solo 和 i d e 模式都优化了设置面板，为用户提供了统一的入口，支持用户在设置页面完成通用设置和功能模型配置等统一设置，体验清晰，功能分层，告别配置混乱，支持全区搜索，你可以通过搜索快 快速定位所需配置项，提升设置效率。此外，当你在 solo 模式下开发时，如果希望调整编辑器的某个原声设置，你无需再切回到 i d e 模式，直接在 solo 的 设置面板中即可完成。

现在 tree 中国版和国际版的 solo 模式跟 ide 模式一样，都已经支持自定义模型了。你可以通过 api key 将你的模型直接进入到 tree。 在 使用 ide 和 solo 模式的过程中选择它。操作很简单，只需要四步，而且 ide 和 solo 模式是一样的，所以我们这里用 ide 模式来展示一下。 第一步，在对话框右下角打开模型列表，当然你也可以从设置进入，然后选择模型到这个页面。第二步，我们点击添加模型，选择模型服务商，这也为大家提供了十多种模型服务商，并且在持续新增。 第三步，选择你要接入的模型，你可以直接从列表中选择 tree 为每个服务上预制的模型均为默认版本。或者如果你希望使用其他模型或者使用特定版本的模型，点击列表中的使用其他模型，然后在输入框中输入模型 id 即可。 这里我们选择用 mini max。 第四步，输入你的 api key 就 可以完成配置。然后你还可以在这个模型窗口中管理你的自定义模型，点击编辑删除按钮以执行对应的操作， 然后打开和关闭滑键，代表起用和禁用该模型。被禁用的模型将会保留在设置页面的列表中，但不会出现在 ai 对 话框的模型选择列表中。

ai 真正的使用都是从 ai api 获取开始的啊，今天用豆包演示一下啊，搜豆包，然后呢点入进入下面这个地址， 可以看一下啊，这是需要登录的啊，注册一下，或者是用抖音扫一扫就可以。然后豆包很便宜啊，百万输入才零点一五，然后点体验中心 进去，这里是可以体验你输入信息，然后看豆包输出的信息是不达到你的需求，然后点左下角这个免费的 点进去，然后这里会有很多的大模型，包括 type c 那 个质朴的四点七都有，要豆包自己的，然后 右边的 a p i 接入啊，就可以开始使用，点一下，然后会获得一些信息， 有抖包模式，然后我们开通使用就可以了，这是免费的啊，消费之前会提醒你，基本上不用管，不会超， 然后就会获得这些信息，一个是网站地址，就是相当于是热门，然后还有一个呢，就是一个 api key， 相当于是一把钥匙，豆包的那个 模型型号就相当于是一个名称。打开我们需要使用的 api 的 一个软件啊，这是我们的那个区，然后安装一个我们的比如说创作辅助系统， 接下来的话就可以了。然后等一会左边这里会出现一个图标， 然后点进去，这就是界面，然后拉到那个最下面，左下角有一个 a p i 设置啊，这里填入刚刚获得的信息就可以了， 打开看一下，切到那个页面，然后这是地址复制地址， 然后对应上面的，看一下上面的文字啊，对应上面的信息填入就可以。 如果看完这个你还是完全不会的，那你就把你需要申请的那个，嗯， 那不行。你比如说你用阿里的，或者豆包的，或者 deepsea 的， 或者用什么的，你告诉我，然后你先注册好账号，然后让我去帮你获取这些信息都可以，然后你自己去填入那个 key 的， 就是这个 apikey 的 信息就可以了。这里是模型名称，点击测试，这里报错了，这个地址填错了，用的是那个 openai 的 地图。好点，中间这个样 换个地址就可以再点测试啊。然后连接成功了，现在就可以开始使用我们的那个哎小说辅助系统了。这个软件主要是用来写小说的啊，它里面有很多 模板，然后我们的功能是非常丰富的，但是复杂度肯定是有的，如果是不愿意很费劲的话，大家还是去用网页版的。

相较于像 cursor， anti gravity， 甚至 kynda 还有其他的一些 ide 编程工具的话呢， chris 国内版确实是弱了一些，但是人家不收费啊，而且这半年进化还是蛮快的，整合了像，呃， g m 四点七啊， mini max 二点一啊，甚至呢，还增加了这个 solo 的 solo 模式。 所以整体来说，翠开发一些中小型的应用是足够的。有一些朋友说，翠呢，刚开始是正常的，然后呢，越改越乱，改到最后项目都被废掉了。 呃，实际上这里边呢，其实多方面的原因啊，我总结，比如说你有没有配置智能体啊？呃，再一个，比如说，你 打假如需要云端开发环境，甚至对数据库与函数进行配置的时候，你有没有去配置这个 m c p 啊？还有就是像我们的一些个人规则和项目规则，你有没有去制定啊？ 那这些都是约束呃， ai 在 开发过程当中的一些原则性问题的，它能够有效地改善你的开发错误率，甚至呢，现在我们还可以给它创建这个 skill， 就是 能够节省你的 talk 使用量，甚至让整个开发的效率更高。 翠的国内版的这个 solo 模式其实挺好用的，比如说你已经开发完的一个项目，那么你可以给他制定若干个任务，比如说对页面的一个优化呀， 对数据结构的优化呀，甚至包括对其他的一些体验感的一个优化呀，甚至包括 api 接口的一个调试啊，通过通过它都可以完成。而且呢， solo 模式在这里是可以同时调用好多个智能体来联动的，效果非常好。 总之啊，翠目前是不收费的，相较于其他的动不动一个月二十甚至六十美金的一些 id 工具来说，我认为他满足一些中小型的应用开发已经足够了。 那像网上有一些人一个月交二十美金，甚至说是五十美金，你用完之后你会发现一个问题，就是你的使用量会超的，那超了之后怎么办呢？其实你还是要继续交费， 如果是公司付费的一些项目呢？当然没有问题啊。如果是对个人来说，在你没有接到一些收费比较高的项目，或者说没有项目的情况下，仅仅是学习阶段的时候，每个月付几十上百美金其实没什么必要。 这个界面呢，是 pixel 制作完的一个 ui 界面，我转译过来的，然后我们现在给吹一段提示词，看它 优化的结果如何。然后在这里大模型呢，我选择这个 auto， 因为这里边其实你看有 g m 四点七和 mini max 二点一，都是在全球排名比较靠前的一些大模型了， 很快它就完成了这个修复。啊，那我们现在重新点击一下这个编辑，你看 整个页面的布局和细节，他都做了一些调整，甚至包括按钮的位置都给你重新的排放了，然后这里的调用地图也也完整的解决了。所以 我不知道为什么很多人说用这个翠感觉很不爽我，反正我开发很多项目，我觉得还可以，确实是效率上要比其他的一些国外的这个 id 工具确实差了一些，但是总体上满足一些日常的小项目的需求来说是绰绰有余了。 在视频的最后呢，回答上一期视频粉丝们比较关心的一个技术问题就是如何把在 pixel 里边设计好的一个 ui 界面导入到项目里面进行开发。 首先一点呢，我是建议啊，大家在这里选择 react 模式，而不是选择 html， 因为 react 生成的这个界面的结果它是加了交互的。 生成完成之后呢，我们在预览这个界面啊，实际上还有一个代码模式啊，然后在代码模式的这个位置有一个下载按钮，我们登录， 登录完之后呢，我们要把这个下载下来的文件包解压，解压之后呢，把它导入到这个项目的根目录下， 然后呢，我们把这个文件夹直接的拖动到这个对话框当中，然后再给他写一段提示词啊，当然你后面还可以要求他的风格，比如说 td design 啊，或者说微信小程序的一些原声的一些规范要求啊等等。 这样的话呢，你再去点执行它最后生成出来的可运行的这个交互界面呢，离你设计的界面来说大概有百分之八十到九十的一个接近度。 然后你再去网上找一些 icon， 然后替换掉页面中缺失的一些图标，甚至包括一些颜色的搭配。 呃，用不了多长时间就可以把整个页面的构建工作给完成了，这是我在 pixel 设计的，然后这是在 那个 tree 里面生成的啊，其实除了我自己添加的一些修改之外，本质上没有什么太大的一个区别。好，这一期视频就是这些问题，然后有任何的建议想法需要交流的都可以在评论区留言。

hello， 小 伙伴们好，通过前两个的视频，我们已经装好了编辑器，可以写代码了，我们又装好了浏览器，可以预览代码了，那接下来我们就进入我们 html 的 主体验，来写我们人生的第一个网页。 想做第一个网页啊，哎，咱们分三步来走啊，首先我们先创建一个项目文件夹，因为你想想我们做一个网站里面会用到很多的素材呀，比如说图片、视频、音频，而且码文件都要放到这个文件夹里面，它好管理呀， 所以说那创建的这个项目文件夹呀，我们也称之为根目录啊，根目录文件夹，所以咱们先有文件夹，再去写我们的代码好吗？好，第一步有文件夹之后呢，第二步，我就可以通过我们这一个 tree ai 工具来进行编写我们的代码了， 当然写的时候呢，我们可以通过吹，它里面自带了一些 emoji 语法，写代码会非常的方便。好，我一边讲一边教给大家，那写完代码我们就会通过浏览器来预览喽，只不过我们的浏览器啊，我会教给同学们安装一个小的插件，可以快速打开我们的浏览器，更便捷。 好，脑海里是不是有分三步啊，咱们一步一步的来，首先我们先创建我们的项目文件夹，走着， 在这里呢，我已经在我电脑的 e 盘里面创建了一个 atm 五的文件夹。啊啊，同学们如果想看我们的素材的话，我在这里面都准备好了，你看我分的很清楚，同学们想要我这个讲课的笔记吗？哎，在这个笔记文件夹里面想要看我的视频吗？在视频文件夹里面还有今天的一些配套的资料，我也给同学们准备好了， 现在呢我们专门准备了一个代码的文件夹，我们今天写的所有的代码都要放到这个文件夹里面，其中代码这个文件夹我们就称之为项目文件夹，或者叫根目录了，明白了吗？哎，我提前已经建好了， 好了，那建好完之后呢，接下来我们可以通过编辑器啊来打开这个文件夹，怎么打开呢？同学们还记不记得我们前面教给同学们如何去安装这个插件，安装好了之后呢，就是看到这个界面了， 看到这样了吗？打开文件夹就 ok 喽，选择点击它，然后找到我的电脑一盘啊 atm 五好代码，这个就是我们的文件夹了，选择它点到选择文件夹 好，选完之后呢，这时候会第一次启动看我们这个界面啊，好，是不是允许啊，点试就行了啊，我是此作者，这个电脑就是我的，点击 好，在这里面我们整个界面呢分成了三部分啊，大的三部分，那左边这个呢叫做资源管理器，哎，就说我们想要看到各种各样的素材啊，会在这显示， 那中间这一部分呢与 i 对 话啊，或者是呢写代码的代码区域，还有呢就是我们这个叫提示区域，可以根据我们实际情况需求啊，提出需求，他这呢会给我们帮生成代码分成这三部分啊。 那这样我们先在文件夹里面新建一个文件，有这么几种方式，一种方式呢，我们可以点击这个新建文件按钮，一点击，哎，可在这里面命名我们的文件就行了，这是第一种啊，也比较简单。还有呢，选择文件菜单里面的里面有一个新建文件，看到没有，也可以来进行新建我们想要的文件， 当然了，我更喜欢第三种，同学们只需要在这个空白处啊，双击就行了。哎，就这么简单，一二双击就可以直接创建。比如说我们叫零一杠啊，我的第一个页面一定要加它的后缀名，叫做点 h t m l， 因为我们学的是 atml， 所以 同学们在写的时候呢，千万别忘了在后面写上点 html， 明白了吗？好，输入完毕之后呢，直接敲一下回车就可 ok 了。好，这时候我们发现中间这个就有了变化， 那其中 ctrl 加 i 调开我们内嵌的聊天， ctrl 加右呢，是我们 ai 的 侧边栏聊天，比如说这个呢，我把它关掉了，你想打开，直接按 ctrl 加右键再次打开，只不过刚开始啊，在这里面我们先不用啊，把它关掉就行了。那在这里面怎么写代码呢？很简单，同学们认真听， 我只需要输入一个英文下的叹号，英文下的叹号，这叫做 imit 锁写，看到没有？输入完毕之后呢，直接敲回车就行了，走着。哎，你会发现在我们的 里面生成了默认的一段代码，在这里我们先不关心这个代码是什么意思，你只需要在我们啊，把光标定到这个 body 杠包的中间，然后呢写上一句话就行了。嗯，写什么？咱就不写 hello world 了啊，咱们写我的第一个页面就行了啊。页面 好，写完之后呢，我们记得要进行保存一下， car 加 s 是 保存好，这样呢，我们就写了我们人生的第一个页面了， 好了，那写完毕之后呢？哎，怎么去看这个效果呢？同学们可以这样啊，打开我们刚才的这一个代码文件夹，打开看到没有，里面是不是就有一个叫零一，我第一个页面点 atm 这个文件了，你只需要双击打开，哎，用什么呀？是不是用谷歌呀？以后啊，始终用谷歌打开就行了。始终 好，稍等一下会启动开我们的骨干浏览器，看到没有，咱们的第一个页面是不是已经写出来了啊，就这么简单啊，刚才简单说就是，哎，输入一个叹号生成代码，只需要在保底和杠保底之间去写，这是要求的。 好讲，在这呢，我们稍微的把我们的编辑器啊进行配置一下，让他呢更符合我们的开发需求，比如说你看这代码有点小啊， 哦，我能不能调大一点呀，哎，等等的，那答案是可以的，所以接下来我给小伙伴讲解一下啊，我们如何进行编辑器的配置啊。好，我们看一看，在这里呢，主要是讲这么几部分，第一我可以是我的编辑器的字体啊，来进行调大小。 第二呢，我可以把我的代码字体调大小。第三个呢，我可以设置字体的缩进，这个有要求，一会我会讲好。第四个我可以保存之后呢，自动格式化代码。 那具体这四个分别什么意思？这样啊，我截个图啊，那这来啊， f 三，哎，截图好，然后呢，回到我们的编辑当中，接下来我是不要做这是呃，一共是这四个模块呀，咱们一步一步的来， 大家可以看到啊，我这个文件编辑选择查看啊，这是编辑器的啊，文字大小你想调大也是快捷键是 ctrl 加加号，加放大缩小， ctrl 加加号，喏，是不是变大了？ ctrl 加减号是变小了，对不对？ 好，放大放大放大哦，超级大，缩小缩小缩小都可以，你呢？可以 ctrl 加加号或者 ctrl 加减号，调到你喜欢的那种风格就行了。好，这是第一个，我们调好了。 好，第二个呢是代码的字体大小，记住 ctrl 加加号呢或 ctrl 加减号，是让整个编辑器啊，它里面的来放大缩小，但是代码是不变的，那我们想只调整代码的大小，这个时候呢，同学们，这有步骤呦，我们一步一步的来看啊，我手放大一点点，咱们操作，首先选择文件菜单里面有个首选项， 文件菜单里面有一个首选项，找到了吗？然后呢再往下走，里面有一个设置，看到了吗？设置是 ctrl 加逗号，这快捷键啊，然后点开它走着，然后呢里面有一个叫做 it 的 设置，我们去找找 it 的 设置啊，在哪个地方 往下走一走，哎，找到了，看到没有？ edit 设置，然后呢，里面可以设置字体呀，等等效果，然后我们点一下去设置就可以了。点一下去设置，然后我们可以看到，哎，它默认的字体大小放的 size 呢？是，呃，十三啊，十三像素，我们这儿可以调大一点儿，比如说我可以调成一个十六， 同学们可以看一看，到我调整完毕之后，我们的代码可不可以啊？好，我把它关掉，同学们看一看，能看明白吗？是不？现在的代码就可以变成我们想要的大小了，如果你可以调成十八，它会变得更大， 在这里我又调成十六了，同学们可以根据自己的情况去调整，别忘了文件选项设置 edit， 然后选择里面的 font size 啊，就是字体大小。 好，第二个 over 搞定，第三个设置字体缩进呢？哎，你看， 当我写代码的时候呢，另起一行的时候，你会发现这儿呢，正好有四个空格啊，你看一二三四四个小点，这是四个空格的，但是呢，我们在后面啊， weu 里面一般要求都是缩进两个字母， 就是我在写代码的时候呢，它会两个字母的来进行对齐，现在我在写的时候呢，都是四个字母，所以我们现在先调过来，这是一个好习惯。好了，怎么设置呢？好，同样道理是常用设置里面有个 table size， 那 我们再来一次好吗？哎， 好，然后呢，我们选择文件菜单里面有一个首选项，首选项里面有一个设置好，在设置里面我们往下走一走啊，好，走一走，然后另外 edit 设置去设置里面有一个常用设置，还在常用设置，刚才我们是不是已经设置好了文字大小呀？还有一个看到没有 table size， 它们俩是在一起的，那默认是四，我们手动改成两个字母，这样以后我们学 vivo 的 时候就不需要来进行调整了。 好，第三个也设置好了，我们来看一看有没有生效关闭啊。现在呢，默认的还是四个啊，那我们可以把它关掉，等我再重新新建一个文件的时候，双击啊，还是在空白处双击啊？零二 好。然后呢，设置字体缩进啊，设置字体缩进点。 atm 回车还怎么做？记得吗？ 叹号，回车，同学们发现生效了吗？我来写我的网页啊，我的网页你发现他是不是就缩进默认缩进两个空格了呀，好在写的时候也是两个空格，这就符合我们的要求了呐，这个和这个是两个空格的啊。 好了，那这次呢，我们把我们的第三个字母是缩进也给他搞定喽，接着第四个保存之后自动格式化单吗？这个还是有点意思的， 因为你看啊啊，我们这个当我们写完之后呢，我保存 ctrl 加 s 保存，它可以自动保存的，但是呢我们这里面还写标签，比如说我就写一个屁标签 好，写完了啊，写完之后呢，我的好，我就输入一个英文的屁就行了，然后你敲一下回车会生成一个屁标签好，然后呢是段落文字好，当我写完之后呢，你看我 ctrl 加 s 保存，但是没有对齐的，按道理啊，它俩应该是并行对齐的， 那我们不能手动调呀，我选中之后呢，哎，我手动对齐，这个多麻烦呀。啊，你看我再复制一份呢啊， ctrl c 到这里 ctrl v 啊，这个呢我再进行缩进一下，又没有对齐，那我对齐不能一个一个手动调吧， 在这里我们就可以通过我们自动化一保存的时候呢，就自动来进行对齐。怎么设置呢？哎，还是刚才的操作，还记得吗？文件 首选项设置打开设置完之后呢，我们继续往下去走啊，可以看看它里面有个叫文本格式化的。在哪个地方呢？我们看看啊 id 的 设置啊，先点开它 啊，不是常用设置了，前面三个呢都是在常用设置里面，这次我们选的文本编辑器好展开，在文本编辑器里面有一个叫做格式化的啊，格式化找到了吗？找到格式化，点击一下，同学们一会可以按照我的步骤看视频啊，一步一步来操作就行了。 好，格式化之后呢，你看有里面有一个叫做 for matter on save， 什么意思啊？当我保存的时候呢，我让我们进行格式化，所以说呢，啊，我们直接点一下对勾就行了，就这么简单， 欧啦欧啦啊，我打一个对勾定，现在呢，我把它关掉，关掉同学们再来看啊，我现在要保存喽， r 加 s 走着，嘿嘿， 有点意思，这样我们妈妈再也不用担心我们对不起的问题了啊，只要一保存就对齐，哎哎哎， ctrl 加 s 走着哎，自动对齐，有点意思吧。好了，这样的话，就是对我们这个编辑器啊进行了相关的设置，同学们把我们编辑器这四个一会的时候呢，跟着视频一步一步来设置一下就行了。 那讲到这，有的小伙伴还说啊，老师，你看你的页面写了这么多东西了，我想打开还非得到文件夹，里面还非得找到我对应的 h t r 文件，我双击才能打开，好麻烦呀，能不能老师我写完代码哎，我就能直接打开浏览器呢？ 答案当然是可以的喽，这是我给小伙伴们讲的第二个怎么在编辑器中直接打开浏览器，想学吗？华罗密，我们来一起看一看。 当然了，后面这三个配置啊，我给同学们截了图，如果同学们没有看视频，看着图片也能找到在哪去设置。好了，那接下来我们去讲解一下如何在编辑器中打开浏览器呢？啊，在这里啊，我们需要安装一个小小的插件， 那插有了这个插件呀，叫 live 搜索的插件，就可以让我们在编辑器中直接打开我们的谷歌浏览器了啊，不需要再找到文件夹，再双击打开 好了，那这个插件怎么安装呢？非常简单啊。呃，在我们编辑器中有一个叫插件市场的，输入我们这个 live server 这几个字，就会找到插件安装就行了，安装完之后呢，我们就会在呃编辑器中啊，多了一个 open with live server 的 选项，这个命令啊，我们就可以直接启动浏览器了。 好了，那到底怎么去操作？同学们跟上我。好，现在我们要在编辑器中安装一个插件，就可以直接打开浏览器，插件在哪里呢？ 同学们跟着我来看，在我们整个编辑器的最左侧有这么几个小按钮，这叫资源管理器，这个叫搜索，这个叫源代码管理器，预览还有运行和调试，还有远程资源管理器。最下面就是我们的插件了， 好，那我们点一下它。哎，同学们稍等一下，在这里面就会有一个进行输入，回车进行搜索啊，这是有一些插件自带的，我们安装的是哪个插件嘞？还记得吗？叫做 leave server 啊，你只需要输入 leave 就 行了。然后呢去找这个按钮 啊，就这个形状的啊，不要安装错了啊，就安装这个就行了。然后呢安装都是中文的呀，真好，点安装，稍等一下，它现在呢正在安装这个软件，已安装完之后我就可以直接打开喽。 好了，在这里面啊，我们先把它关掉，不用管它现在有没有安装成功呢，我们点击它一下看一看啊。好，你看，现在提示了，已经安装成功了。好了，那我们怎么知道 它有用了呢？同学们，仔细听，我是不是在这写代码呀？写完代码我只需要右键，然后选在里面，你看是不多了，一个 open with delete 呀，用它就行了。好，当我点它之后走着。同学们，静等一下，怎么样， 是不是启动开了我们这个页面呀？哎，这个英文啊，你可以选择一律不翻译就行了。一律不翻译此网站好，他就不会再提示了。这样是不是打开了我们这个网页？哈，有点意思吧，所以 以后啊，我现在把它再点击折叠啊，再点击点开，后面还有其他的插件，我后面再教给你们。我先把它折叠起来以后我们写上我们的 atm 文件呀，就，呃，就可以直接右击 看我们的浏览器就行了。哎，这时候呢，我就看看我写的代码到底有没有生效了好吗？啊，好，这是我们刚才给学员们讲解的如何在编辑器中直接打开浏览器呢？哦，我们安装了一个叫 live server 的 插件。好的，到此为止，我们就安装好了 live server 这个插件，它这插件的主要作用就是让我们 编辑器写好代码之后呢，直接可以通过右击的方式打开我们的浏览器。好吧， 那讲在这之后呢，我们的主要内容就讲解完毕了，但是呢，我还想给同学们讲解一下常见的开发技巧， 比如说我们写代码的时候还会有哪些技巧呢？同学们，认真看，你看我们写代码的时候最好是左边编辑器，右面就是我们的浏览器，这样我在写代码的时候呢，通过六十二插件呀，可以实时的预览我写的内容，非常的方便。 他的做法是怎么做？看好了，很简单，你可以通过 windows 键加左右箭头的方式，可以把我们的编辑器和我们的浏览器实现放在左边和右边来调整好。怎么操作？同学们，跟着我啊，走，跟上我魔鬼的步伐。 那你想写在这之后呢？我每次我右击打开我的浏览器啊，这浏览器在这看着就挡住我的编辑器了，所以你看啊，我可以这么去做。好，我可以右击重新打开一下我们这一个浏览器。那我可以这样啊，啊，把光标啊定到我们的编辑器当中，我按 windows 键加上左箭头走着， 哎，松手，这时小伙伴会发现我的编辑器就跑到左边了，那剩下你懂吗？我点一下浏览器啊，一点，哎，发现了吗？他们两个就实现左右排列了，你可以呢，把鼠标呢放在中间的位置，稍微的拉动一下， 让这个浏览器稍微小一点点。现在呢，就可以实现左边写代码，右边预览效果了。来，你看啊，而且 delete 插件啊，它最大的好处是在于我左边写了内容，右边可以实时更新的，是不是呢？你看我把这几个字删掉。好， ctrl 加 s 保存啊，一保存走着，会发现 我们的页面是不自动就变了，我再写一个啊，好，再写上一个，比如说我今天很开心写完之后呢，卡夹子保存走着，哎，你会发现浏览器啊，它不需要刷新页面，它自动的就变了，就是因为有这个 live server 的 插件帮我们 一气写完，只要一保存，浏览器会自动更新里面内容，所以接下来的视频我就会按照这种方式来给小伙伴们去讲解喽。啊，小伙伴们知道我是怎么做的，记住，他有两个快捷键，就 windows 加左箭头， 可以让我们这一个编辑器啊，在左边啊，你可以点击浏览器啊， windows 加右箭头，让他到右边来啊。好，这是我们说的这个，但有的小伙伴说，啊，老师，那开发中我就不能用双屏吗？ 啊，双屏就是两个电脑啊，呃，这种这种的双屏形式啊，只不过呢，因为我是要录客吗？如果双屏的话，我就没有办法把这两个屏幕同时录给小伙伴们了，所以我现在就用这种方式了好吗？ ok， 到此为止，我的主要任务就完成了。那到底我这个视频讲了什么内容呢？啊，这一次啊，请我的助教猪爸爸来给小伙伴们做一个系统的总结好吗？来，接下来我们掌声有请猪爸爸！ 好的， pink 老师，那接下来我给同学们去做一个总结喽！第一个问题，书写代码前先需要准备什么工作呢？ 对了，我们需要先新建一个文件夹，把我们的素材呀放到里面去，这个文件夹我们也称之为根目录。好的，我们看一下。第二个问题，我们新建的文件后缀名是什么呢？ 对了，是点 html， 所以 小伙伴们在进行新建文件的时候，千万别忘了一定要加后缀名点 html。 好 了，那 pink 老师又给同学们讲解了一下常用的一些设置，比如说代码文字的大小呀，做齐两个字体都是在常用设置，我们能够看到里面有相应的设置文字大小和缩进字体，同学们可以根据需求来进行调整。 当然了， pink 老师还讲解了一下保存格式化，一保存代码呀，就自动格式化。那我们设置方法哎，这次变了，是在格式化里面的 format or save 这个选项，勾选上就 ok 了。 好的，最后一个问题，我们如何实现左右分屏呢？左边是编辑器，右边是我们的浏览器呢？ 对了，我们可以按键盘中的 windows 左箭头或者是右箭头，这样可以实现分屏效果。而且我们安装了 live server 插件呀，我们代码修改了，浏览器会自动更新哟。 好的，看来 pink 老师讲的很不错呀，小伙伴们赶紧去练习一下吧。

挑战用 ai 做一百件事第二十八期化身程序员昨天我只用一个下午的时间给我的一个远房朋友开发了两个应用程序，帮他省了三千块钱，还治好了他的焦虑。事情是这样的， 这是我用 ai 制作的一个抽奖程序，这看起来界面很简单啊，但是该有的功能他都有，在右上角点击设置，可以在这里上传替换抽奖程序的页面背景。这样呢，他以后给其他商场在做活动的时候，还可以反复使用这个软件在同一个页面呢，还可以选择摄像头，采集顾客微笑的照片所存放的文件夹，然后点击返回开始抽奖， 等待画面滚动三秒即可完成抽奖。并且在这个抽奖页面中，右上角点击历史，还可以用来检查所有的中奖记录和抽奖时间，以及所有的开奖词 次数。而以上的这一切，我就仅靠对话便帮他制作了这么一个软件，这是我教给他之后的反应， 干嘛？我要让你好好退休？接着，我又用十几分钟的时间给他重新开发了这么一个应用程序。首先映入眼帘的是实时的今日进度、本周进度、本月进度和本年进度， 告诉他他的牛马生活才刚刚开始，而且还有多久才能结束。接着，我所制作的应用程序还可以帮他制定一个退休存钱计划。 如果他现在一分存款都没有，但是从今天开始每个月存钱两千块钱的话，到他六十五岁退休还有三十年的时间，按照年化百分之五计算，在他退休的那一刻，他可以手持一百七十万安享晚年。那如果他每个月存款三千块，他还可以抱着两百四十五万从容的面对老年生活，你看这样 再去退休是不是有盼头了？别急，如果他能活到八十五岁，在退休金只有三千块钱的情况下，如果他还想临终之前给子女留下五十万的存款，那他甚至还能每个月靠着存款和退休金，保证每个月有两万以上的可支配收入，美不美？再往后看呢，还能看到他距离退休还有多久， 而立之年已过，国货之年，花甲之年又在何时？等等等等，把这个软件再发给他看看。 那以上我展示的两个应用程序呢？都是我靠自然语言简单的对话就制作出来的应用程序，实用的开发软件就是 trick。 那看到这里的同学老粉可能会说了，我一坐这，你问我的往往都是答过的问题。没错，我在第二十四期的视频中确实讲过用趣的 mcp 服务来编辑代码开发 应用的教程，但是那时候开发出来的应用其实不应该叫应用，严格来说，那就是一个网页文件。这个网页文件呢，只能在特定的环境或者局域网内打开，并且没有办法在用户和用户之间传递，他更倾向于是一个内容展示，而不是一个有交互的应用。 而今天我给大家介绍的是一个可以由 ai 自主执行开发任务，并且可以开发出能够在用户之间传递有交互的、可操作的完整应用程序的全新升级的 ai 编程工具 tree 二点零国际版 tree 二点零中加入了 solo 模式，这个 solo 模式成为了行业内的首个 context engineer， 他解决了过往 ai 在协助软件开发的时候过度聚焦于代码的生成和修正的技巧，却忽视了整个程序设计任务完整性的问题。简单来说，现在有了 treat solo 模式，开发者可以高效的实现从一个想法构思，到内容规划，到程序开发，最后再到封装交付的完整电路。那接下来的 时间里，我将带你一起用吹二点零的 solo 模式，从无到有的开发一个完整的应用程序。那首先呢，要先有个思路，想清楚自己要做什么。前段时间不是一直有个 mbti 测试吗？可以测出自己是爱人还是艺人，甚至爱人和艺人还能再细化成十六种复杂的人格体系。不过我呢，一直都没吃上这口热乎的， 直到现在我都还不知道自己具体是一个什么样的人格属性。那不如我就自己做一个 idti 测试程序，测试一下自己。那咱就一起先想一下，我的测试程序大致是个什么样子的？我想应该是要有个首页，首页有个标题，还有一些测试须知，注意事项和背景原理什么的， 下面有一个按钮，点击按钮开始测试。然后呢，就是有一百道选择题，每道题都有五个选项，完全正确，有点像中立，不太像和完全错误，并且还可以查看上一题和下一题。当答完一百道题之后呢，程序会给我一个测试结果页面，告诉我 我是一个什么样的人格，适合做什么样的职业，适合什么样的沟通风格，学习方法和其他内容。那我的 mbti 测试程序大致就是这个样子了，画面的 ui 效果呢，就要干净的简约风格，并搭配一些基础动画效果就好。当咱们想到这里的时候，其实就把要交给 tree 的提示词写完了，咱们直接上手开始操作。打开 tree 二点零，在 这里将 ide 模式切换为 solo 模式。当然啊，这里还有个难点，目前 solo 模式刚刚发布，还在内测阶段。如果要激活 solo 模式，你一定要先拿到 solo 邀请码， 那我会在视频发布之后把我手里的邀请码分享给大家，不过资源有限，先到先得。那有了 solo 邀请码，激活了 solo 模式之后， 先在左上角新建并打开一个空白文件夹，作为本次程序开发的根目录。然后就把咱们刚刚用想法整理出来的这一整段提示词直接复制到对话框，点击发送即可。你看 ai， 这就开始分析我们的需 求了。这时候你可以看到 solo 模式的右侧有四个窗口，分别是编辑器，在这里显示全部代码编辑的内容和过程终端，在这里运行程序，或者安装依赖浏览器，在这里可以实时查看和测试应用开发的运行效果 文档，这里稍后会记录咱们整个开发过程的需求和说明。转眼间，他已经分析完了咱们给他描述的所有需求，并给我输出了一个非常详尽的需求文档。在这里你可以看到产品概述、核心功能、页面、样式、执行流程、界面设计等等所有的相关信息。 重点来了，在开始让 ai 制作程序之前，你可以直接用鼠标点击并修改这个需求文档。例如我要修改选择题中的五个选项，或者修改用户界面的色调都可以，等你确认整个需求文档 ai 的理解和总结没有问题，或者在你修改好了之后，点击确认开始开发 tri 便会按照最终确认的 需求文档开始制作应用程序了。这里有一个非常关键的一步，由于我把整个开发过程都交给 ai 来执行了，那过程中呢？我不需要进入查看或者调整代码，整个开发过程处于一个托管的状态，我只需要等待他自己工作完了，再看合不合我的心意就行。 那这个关键的一步就是在翠开发的时候，你可以去找一个修驴蹄子的视频看一会，看完了之后，咱们这个 m b t i 测试的程序就制作好了。从首页的结果来看，这里的页面风格、颜色搭配、排版样式其实都非常的干净整洁，基本都符合了咱们刚刚确认过的开发需求文档， 而且也符合了我的审美和预期。那这时候 solo 模式的又一个非常强力的功能来了，就是在这个浏览器页面，你除了可以对整个应用程序进行审阅和测试以外，还可以对所有的局部内容进行交互执行，非常精细的编辑。右上角点击选择 元素，你就可以对这个页面进行非常精细的编辑了。例如我希望这个测试详情的卡片可以被分解成四张卡片，并放置到首页的最下面， 那我就直接选择这张卡片，并点击添加到对话，然后就用非常简单的语言跟他说我的需求就行。例如把这个卡片拆分成四份，并放到首页的最下面，点击发送。你看，这个时候，康泰克斯的 angelia 的战斗力就展现出来了，像这样的二次对话，他不仅能够理解我当前的意图和所指的 ui 元素具体是什么， 还能够基于上下文对画面进行合理的重绘和修改，并教给我一个满意的效果。你看咱们刚才提出的需求，这就轻松的修改好了。接着进入测试环节，既给这个程序做一下测试，也给我自己做个测试 好了。测试完毕，验证了两个事啊，第一，验证了我是一个 e n t p 变 论家型的人格，还给我了一些其他的相关信息。第二，也验证了咱们的程序是可以完美运行的。 ok， 那没什么好说的，我直接再跟他讲，以上的所有设计内容我都满意了，请你帮我打包成一个 windows 系统可用的 exe 程序文件，点击发送。 由于我把整个应用的封装过程又全部交给 ai 来执行了，打包的过程中呢，我还是不需要借助查看或者调整代码，这时候依旧是一个托管的状态。那现在我可以再找一个修复小车的视频看一会， 看完之后，你看咱们这个 mbti 测试的电脑应用程序就制作好了，接着再把软件的根目录打个压缩包，就可以把它分享给我的远房朋友来使用了。最后再说说感受吧。 这次创业 solo 模式的加入，其实让我感受到的呢，不是 ai 能够让我成为程序员或者让程序员失业，而是 ai 让每个职业之间的专业界限模糊了。就拿编程这件事来说 说，一个程序的开发一定少不了产品经理、 ui 设计师、程序员这三方的介入。现在有了 ai， 他们各自都可以做一些自己专业以外的事，各自完成一个程序的开发了。 许在未来不只是职业与职业，也许行业与行业之间的界限也会慢慢消失。未来 ai 究竟会给我们塑造出一个怎样的世界呢？我们共同期待吧！好了，本期视频就到这里了，如果你也喜欢我的视频，记得点赞、关注、收藏！我是报国同学，咱们下期再见！

先说一句实话，现在的智能体已经很厉害了，但很多时候它只是聪明，不是真的懂行。而我最近在用的 open scales， 可以 让 ai 直接变身行业专家，效果非常夸张。举个例子，有了 scale 之后， 我做前端页面不光能跑起来，还能变得好看，配色、布局都帮你想好，直接能上生产环境给用户用，甚至连 ppt 都可以丢给 ai 做，三分钟一套方案，免费，速度快，排版还比很多人更专业。 那 skill 到底是个什么东西呢？我们可以把它想象成给你的智能体，装了一个专家技能库，平时你还是正常跟 ai 聊天，但当他发现你说的事情可以用某个技能来帮忙时，他就会自动去把这个技能加载进来，变成一个懂你业务的 ai 顾问。 这期视频我主要做两件事，第一，带你看一下我是在 windows 电脑上怎么把 open scale 部署起来的。第二，告诉你中间我踩了什么坑，以及我是怎么让 ai 自己把这些坑填上的。 先说部署，我用的是一台 windows 十一的笔记本，上面装了 qin 的 国内版，完 完全按照笔记的步骤来。第一步安装都很顺利，结果到第二步安装技能包的时候， windows 一 路狂爆错，界面上基本都是红字。 这个时候很多人可能就会卡在这一步，要么开始疯狂搜帖子，要么就直接放弃。我这次换了一个方法，把报错信息全部丢给智能体，让他自己去查，自己去分析，又让另外一个智能体做了一轮交叉确认。最后的结论其实也挺有意思，问题不在我， 而是在 open skills 的 一个小 bug， 它在处理路径的时候，底层代码里写了一个不适合 windows 的 方法，相当于把路指错了方向，结果软件装上去以后的话，一字简就报错了。 更有意思的是， ai 不 光帮我找到了这个问题，还顺手给出了一整套具体的修改方案。我要做的事情只有一件，就是把这份方案直接贴回我的智能体，让他按着这个思路自动去改 open skills 的 代码，整个过程的话，我只用嘴，由他来动手。 改完之后，我再重新安装，这一次所有的技能一次性全装好了，面板里面一排的技能全都是绿色的状态， 那一刻真的很有成就感。装草之后的话，用起来其实比你想象的更简单，你不需要记住任何的指令，也不需要懂什么底层原理，就像平时一样，正常的跟你的智能体去沟通。比如把这个手机 app 的 界面按照 电商应用的标准，再给我重新设计一版，给我做一套给老板汇报用的 ppt 大 纲，所有的结构配图都给我整出来。 在这个过程中，智能题会自动的去判断应该调哪些 skills， 需要前端优化，他就会去掉前端相关的技能，需要文案和排版，他就会去掉和文档设计相关的技能。你看到的只是一个输出结果变得更专业的智能题。 拿我自己的一个真实案例来说，我之前做过一个手机的番茄时间管理的 app， 功能完全没有问题， 但是呢，做出来的界面的话，就是一个工程师的一个审美。那么接入 style 以后的话呢，我只写了一句需求，让他帮我全面优化界面的风格， 那么几分钟以后，一套新的界面方案就出来了，配色、控件、布局、细节全部给到我，直接的话就可以把它作为一个成品去进行交付。 如果你已经看到这里，大概率你不是只想玩一玩 ai， 而是想真正的在工作和项目里把 ai 当做一个靠谱的、专业的一个拍档。 那你可以把这期视频当做一个起点，至少你知道了两件事，第一， ai 不 只是会聊天，他还可以通过 skill 这种方式变成真正的行业专家。第二，就算中间遇到一些环境问题兼容罢了，这些坑也可以让 ai 自己帮你排查和选。 后面我会推出更多 skills 的 实战用法，如何用 ai 编程工具提升自己的能力，真正把一个人干成支队伍。最后祝大家马到成功，新年快乐！

今天给大家分享一个 skews， 它可以自动去剪辑口播视频，去 solo， 也是支持了 skews 这个技能。那现在呢，我给大家讲一下这个 skews 在 剧中的用法。 首先呢，第一步，点击设置里面的规则和技能，点击添加 skews， 那 这个 skews 呢，我也放在了粉丝群，大家可以去粉丝群里下载，直接上传我们的 skews 文档就可以了。 那第一步呢，就是使用这个安装环境的 skills， 它会自动帮我安装环境和依赖，自动帮我下载模型。那第二步呢，就是引入这个简口播的 skills， 给它发送视频所在的路径， 然后它会返回你一个审查表，那审查表里面它标记了口误和静音的部分， 然后你给他说删除可恶和禁言的片段，然后他会返回你一个剪辑好的视频以及一个 s r t 字幕。那最后呢，我们给他发送骚录，骚录呢，就是把生成好的 s r t 文件和剪辑好的 mp 四文件合并在一起。 总结，最在 solo 模式下调用 skill 整体来说还是比较顺滑的，但是就是耗费的时间比较长，那原作者用的是 cloud code， 那 写的是十分钟剪辑一个小时的口播视频，那我这里呢大概用了二十多分钟。

我在学校搭建了一个聊天网站，名叫奈克斯 chat， 废话不多说，直接注册一个账号给大家演示。 现在我们也是成功注册了一个账号，并且进入了主页面。点击左上角设置，可拉出右侧设置栏，里面可以更改个人资料 妹保存设置应用个人资料， 点击左侧头像可查看个人资料， 下方可输入消息， 点击这个消息图标可以回复对方消息。 点击垃圾桶图标可以撤回消息。 点击相片图标可以发送图片 man， 当然你也可以看到别人发的。 还有 emoji 选择器，可以插入 emoji 表情，打开设置可以开关提示音， 下面安全设置可以更改密码， 需要确认更改，更改成功后右上角会有提示。 点击他人头像，可以查看他人的个人资料， 差点忘了，还可以发送语音。