最近 cloud code 简直火出圈了,今天一期视频带你解锁纯零基础小白如何安装 cloud code? 那 我们直接开始 第一步,安装依赖,我们要准备好运行环境和工作语境,因为 cloud code 是 跑在 node 上的,所以我们需要安装 node 作为运行引擎,并且 cloud code 的 核心功能是写代码和整理文件,因此 get 就 很重要,也需要提前安装。 首先是 windows 环境,后面我们也会讲 mac os 环境,大家先不要着急。第一步大家先打开电脑的终端,可以通过开始搜索终端直接打开,也可以通过 win 加 r 的 快捷键打开。 我们先安装 node 输入命令,检查一下 node 是 否有安装。因为我这里已经安装了,所以会直接显示版本号,如果没有显示对应的版本号,证明没有安装,那么我们直接去 node 官网下载最新的 mfi 版本, 一路点下一步安装就行。安装完成后再次运行对应的命令,此时已经可以显示版本号,证明已经成功安装。 接下来安装 git 输入命令,检查一下 git 是 否已经安装。我这里也是直接显示版本号,如果没显示也是通过网站进行下载,点击第一个超链接进行下载,然后一路按提示进行安装。 安装完成后跟 node 一 样,我们也来检测一下是否安装成功,这里已经显示版本号,证明我们安装成功了。 现在我们来到了 mac os 环境的安装依赖环节,跟 windows 不 同,我们使用 mac os 最受欢迎的软件包管理器 homebrew 进行安装。 大家还是先打开电脑终端,通过 command 加空格键快捷键打开搜索 搜索终端后,直接打开这里,通过命令查看 homebrew 是 否已经安装。因为我这里已经安装了,所以会显示版本。如果没有安装,可以通过官网进行安装,复制对应的安装命令直接运行。 安装完成后,终端输出里会有一段 next steps。 如果你使用的是 m 系列芯片的 mac, 你 需要运行以下两条命令,让系统能找到 brew 命令, 最后通过查看版本确认 brew 安装成功。安装成功后,我们通过 brew 直接来安装 node 和 git。 硬赖安装成功了,那么我们进入第三步,安装 cloud code。 我 们参考 cloud code 的 get 官方的安装方案。这里我比较推荐 npm 的 方式,它能够同时适配 windows 和 macos 的 系统。 我们直接复制代码在终端运行,电脑就会自动从官方仓库把工具下载下来。这里如果报错,如果是 mac, 记得在命令前面加一个 s u d o 的 命令。如果是 windows, 用管理员权限进行运行。 在安装完成后,我们直接输入 cloud 来运行,但是发现此时会提示无法连接,需要检查网络连接和网络设置。 这里我们就需要设置环境变量来解决地域限制。我们通过 set 或者 export 将访问端口修改为我们实际访问 cloud 的 端口,其中 windows 用 set, mark 用 export。 这里的端口号要根据自己的实际情况进行修改,不一定都是七八九零,这里的几个都要记得修改。 都安装完成后,我们进入第四步,账号认证和使用。在完成设置端口号之后,我们再次打开 cloud code, 此时发现已经能够连接了,会提醒我们进行设置选择, 这里默认进入的是需要连接 cloud q 的 账号,我们选择第一个进入 cloud 官网,通过 cloud 账号进行连接,如果进来后没有提示引导操作,我们可以通过命令把对应的登录选项调取,进行类似的操作。 在设置完成之后,现在你就可以在终端里直接给它下达命令了。比如帮我分析一下当前文件夹里的代码逻辑,帮我写一个网页的登录界面,它最强的地方在于能直接读取你本地的文件,不仅能写,还能直接运行和改 bug。 现在我们已经能够使用 cloud code 了,但是还是要提醒一下大家,因为 cloud code 本身的网络限制非常严格,并且 token 价格也非常高,大家记得关注一下自己的账单, 所以主包在平时也会用国内的 a p i 作为替代。下一期会继续讲解 cloud code 如何使用国内模型进行替代,欢迎大家关注。
粉丝33获赞204

今天我们这期视频只讲一件事情,就是普通人如何使用,如何安装 cloud code 并接入国产大模型 deepsafe。 你 是不是也觉得 ai 编程那肯定要写代码吧? cloud code 听起来好高级,跟普通人有关系吗?我的回答是当然有。 当我们接入 deepsafe 之后,可以利用它去写作,和 deepsafe 官网的模型是完全一样的,它不光能写文章,还能帮你去造工具,而且现在超火的 ai 技能插件 skill 最早就是可乐的 code, 玩明白的。安装好之后我们再安装 vs code, 那 它就可以实时操作,可以帮我们去开发网页开发工具,它的功能是非常强大的。 今天这期视频就是专门为你定制的,不用懂代码,不用找可用的支付方式去购买国外的大模型,只要你会复制粘贴,就能在十分钟之内装好可多的 code, 并成功接入国产大模型 deepsafe。 在 这里有一个前提就是网络环境 是处理好的,而且本期分享我会特意使用一台全新的没有安装过任何环境的 windows 十一系统来演示,会把所有遇到的问题给大家解决方法和步骤,让大家只需按照步骤操作就可以安装成功。实操环节,我会分享如何成功安装 cloud code, 第一次使用,如何起用可劳的 code, 如何接入 deepsafe 大 模型,然后如何利用编程应用制作一个个人主页。本期视频分享我们需要安装以下内容, 第一个就是 note 点 gs, 它是一个运行环境可拉的 code, 要靠它才能跑起来。第二个就是 g i t, 一个隐藏但比较重要的工具, windows 十一系统默认是没有安装的,如果没有可拉的 code 会无法使用。下一个就是 cc switch, 它可以一键轻松切换大模型,就像平时我们开关水龙头一样简单。第四个就是 vs code, 它是微软出的免费编辑器,长得就像记事本,但功能强大。以下就是本期分享我们需要安装的东西。 骚掩饰我会先分享 c l i 命令行界面。 altcode 本身是个命令行工具,英文叫 c l i, 意思是你可以在黑窗口里面打字指挥它,但大家别担心,我们装上 vs code 之后,使用插件百分之九十的操作都能用鼠标点出来, 不用死记命令。好了,下面我们直接开始实操,进入实操演示部分,第一步我们就需要安装 note g s, 在 这里我们不用命令安装,直接选择安装包,然后我们运行安装包,在这里我们就直接下一步,然后选择下一步,就直接下一步就可以。 好,这时候就安装成功了。安装好之后我们来验证一下是否安装成功,在这里我们按键盘上的,在这里我们按键盘上的 windows 图标加 r 键,这时候就会弹出运行窗口,在这里输入 cmd, 然后确定,这时候就会出现命令窗口,在这里我们输入 node 杠 v, 然后回车可以看一下,现在出了版本号就证明这个 node js 安装成功了。下一步我们就需要安装 cloud code, 安装 cloud code 我 们需要使用 powershell, 在 这里我们搜索一下, 搜索之后,然后右键选择以管理员身份运行,然后我们输入这条命令,直接回车。 好了,到这里就安装成功了,同样我们也是查看版本号的方法,查看是否安装成功,在这里我们输入一下命令,输入好之后我们回车可以看一下,现在已经出了版本号,二点一点三七,我们的 cloud code 就 安装成功了, 然后我们进入 cloud code, 直接输入 cloud, 然后回车可以看一下,现在进入出问题了,这时候我们就需要安装一下 g i t, 我 们来到 g i t 页面,然后选择保存,我这里保存到桌面上,然后我们开始安装,这里我们也是直接下一步, 下一步这些我们就全部的都是直接下一步 好了,这时候就安装成功了,然后我们再看一下,我们重新打开一个 powershell, 我 们重新打开一个 powershell 窗口,然后我们输入 cloud 可以 看一下。现在我们进入 cloud 是 可以运行了,但它又遇到一个问题,就是它有一个验证,在这里我们需要修改一个配置文件, 在这里我们来到我们的用户目录,我的用户名是 k, 我 这里直接输入,然后回车到这里就可以看到一个配置文件,就是 cloud 点 jason, 然后在这里我们打开编辑一下, 可以看一下,这里就是这个配置文件,在这里我们增加一个参数,增加之前这里我们需要有一个英文的逗号,像这个标点符号是经常会被大家忽略的,有好多朋友遇到问题就是增加配置,但大家增加好之后还是不能使用,就是因为这个标点符号的问题, 在这里我们添加添加这个配置项就可以了,然后我们再返回,然后我们在 c l o u d cloud, 然后回车可以看一下,现在就已经进入了,下一步我们再回车,这个提示就是是否在当前目录,然后我们回车 好了,这时候它就会让我们去登录 cloud 账号,因为 cloud 这个它国外的大模型最让人头痛的一个问题就是经常会被封号,所以在这里我们不使用它的大模型,我们要接入我们国产的 deepsafe, 在 这里我们 cloud 安装好了,然后下一步就是需要去接入 deepsafe 大 模型,在这里还用到一个工具,就是 cc switch, 现在我们再来安装一下, 我们来到 github, 然后我们去找安装包,在这里我们就直接往下拉,拉到底部,在这里我们找到适合我们系统使用的,在这里我选择三点幺零点三,如果是 windows 的 话,大家就选择这个就可以。好,现在保存好了,然后我们直接进入安装, 在这里我们也是直接下一步,下一步安装即可,这时候就安装好了,然后我们运行 下一步就需要我们配置 deepsafe 的 api, 在 这里我演示一下操作流程,在这里我们打开 deepsafe, 然后选择 api 开放平台,然后我们选择 api keys, 在 这里去创建,比如创建 api key c c 三,然后我们创建, 创建好之后我们复制一下这个 api key 的 这个密钥,然后复制,然后我们来到 c c switch 里面,在这里我们就选择右上角的加号,然后选择模型 zip, 然后往下滑,这里我们只需要填写一下这个 api, 然后添加, 这时候就添加好了,然后我们回到命令窗口,我们再进入 cloud, 可以看一下,现在已经不提示登录了,在这里我们输入斜杠 model m o d 可以 看一下,然后我们就选择第一个,在这里已经有了 deepsea v 三点二模型,现在我们去选择一下,就是第五个选项,让我们回车。好,这时候就选择好了, 选择好模型之后,在这里我们对话,我们问他一下你当前是什么模型,然后我们回车 可以看一下。在这里在此次绘画中,我作为 cloud code 实力实际使用的是 deepsafe v 三点二模型,到这里我们就成功地安装了 cloud code, 然后接入了 deepsafe 大 模型, 到这里我们就完成了 cloud code 命令行工具接入 deepsafe 大 模型,下面我来演示一下。我们在 vs code 里面使用 cloud code, 它的一个优势就是格式化操作,它的操作几乎都是用鼠标点击就可以, 然后我们下一步就需要安装 vs code, 在 这里我们选择宏框按钮,然后保存 好,现在保存成功了,然后我们安装在这里选择,我同意,然后我们直接下一步,这里就是选择一下安装目录,如果不选择默认安装到 c 盘,然后我们选择下一步,这里几乎也是全程下一步就可以,然后我们安装 好,这时候安装成功了,我们选择完成,在这里打开之后,它默认的是英文界面,看到英文不用担心,在这里我们需要安装一个插件就可以搞定,我们选择四个方块这里,然后我们输入简体, 我们就安装默认的第一个好,安装成功之后,右下角会有一个重启的一个提示,在这里我们选择重启。好,现在打开就是中文界面了,然后下一步我们就需要找到 colode code 插件,我们输入 colode code, 然后我们选择第一个安装, 在这里我们需要辨别一下官方版本,在这里我们安装,然后我们选择新任发布者和安装好了,这时候成功之后,在右上角就会多一个这样的一个图标,然后我们选择 可以看一下它,这里默认跳出的是一个登录提示,我们有了 c c switch 已经接入了模型,它这里就会跳过,然后在这里我们再输入你当前的模型是什么模型,然后我们发送, 可以看一下我当前运行的模型是 dipstick 为三点二,像这里也是这个 cc switch 在 这里起到的作用,像这里比如接入 glm 大 模型,或者是其他第三方中转的模型,用这个 都是可以搞定的,非常方便。好到这里就安装成功了,也成功接入了,下一步我们就让它帮我们生成一个个人主页,我们一起来看一下,在这里返回桌面,我先新建一个文件夹,然后回到 vs code, 然后文件打开文件夹, 我们选择桌面上的 myweb, 然后选择文件夹,这时候我们就用 cloud code 来对话,在这里我们输入提示词,就是我是一名专业的前端程序员,帮我生成一个自我介绍的个人主页,让大家可以快速的认识我,了解我,然后使用 html 格式,简约风格, 科技感配色,页面元素,要有自我介绍板块,联系方式,二维码区域,在这里就是我们给他的提示词,然后我们发送 好了,可以看一下,现在个人主页已经生成成功了,然后我们预览一下它给我们生成的一个个人主页,就是简历风格的,可以看一下,还是比较丰富的。在这里经过我的测试,就是我们使用可多扣的时候,不管是生成文章还是生成网页, 在这里我们要给他一个语言的提示,就是要生成中文内容,他有时候是默认的生成中文,有时候默认的生成英文,他这个是存在几率问题的。所以在大家生成内容的时候,强调一下生成中文内容, 这是目前想到的一个问题,分享给大家。这就是以插件模式使用的,在 vs code 里面还可以以命令行模式,在这里我们打开终端 使用方法是一样的,在这里我们输入 cloud 可以 看一下,就和我们在命令窗口使用的是一样的, 像这个一个优势,就是命令行模式加格式化窗口的模式可以直接使用,这就是我们所有的实操分享内容。在这里我也写了实操手册,比如安装好之后无法进入,或者是安装之后要验证,像这些遇到问题的解决办法,都有写到手册里面。 好了,到这里我们就完成了一整套从完全零基础到真正用起来的全过程。我们一开始什么都不懂,装好了克拉的 code, 配上了国产大模型 deepsafe, 在 vs code 的 里面,我们让 ai 帮我们生成了一个个人主页。其实克拉的 code 它有很多高阶的玩法, 你可能也听说过,比如 mcp、 gel, 但这些我也会慢慢讲,后面我会分享,但是这些都不着急,也不重要, 真正重要的只有一件事,就是现在先去试一试,先用起来,哪怕只做一件小事。 ai 时代最危险的不是不会用工具,而是以为自己用不了。 老的 code 不是 程序员的专利,它是每个普通人的效率工具。 ai 时代只要有思路就开始动手,就已经超过了百分之九十的人。 ai 时代,我们不用纠结新出了什么东西,哪个模型更厉害, 能帮自己提效的,自己用着习惯的,对自己来说就是完美的模型,完美的工具。好了,本期内容分享就到这里,我们下期再见。

当国内互联网大厂还在拿着旧地图通过发红包抢占用户心智时,新一轮的战争已经在更高维度打响。一边是来自硅谷的 anthropic 上周用 cowork 血写了软件行业,一边是北京的字节用 cdance 二点零颠覆了全球影视行业。这里是财经乌多邦,今天我们就一起来看看,这两家公司到底是怎么 餐桌子的。 上周, ai 在软件业引起了一场腥风血雨,甚至有人直言 sars 行业已死。短短一周,全球软件股蒸发了八千三百亿美元, 大概相当于三个茅台的市值。事情的源头是一家叫 anthropic ai 公司,他们在今年年初一共做了三件事,而且一件比一件狠。第一件呢,是他们在一月十二日推出了一个叫 cover 的工具。和传统 ai 不同,他不再只是回答问题,而是替你执行任务。但是这个工具发布后,没有 引起太大的动静,真正引爆华尔街的是他们做的第二件事情。一月三十日,他们发布了十一个专业的插件。注意,这还不是新的模型,仅仅是十一个新的插件,他们直接统领了财务、销售、法律各行各业。其中最先引起关注的是他在法律专业上的能力。 这里交代一个背景哈,很多律所的工作模式是法务助理加上专业软件。比如说你是一个律师事务所老板,你的律所每天要处理大量的合同, 怎么处理?你得雇一个法务助理买一套专业的软件。比如说唐僧路透的 yslo 软件,他一年的花费大概是五万美元。然后这个助理每天的工作是在这个软件里面查条款,审合同,标注风险点,写合规报告。 现在呢,装这个 ai, 配一个法律插件,后台就可以全自动的审核同标风险,出报告,每月只要一百多刀,从五万的成本直接降到了一百多,这是破天荒的第一次。一家做底层模型的 air 软件,把应用层直接端掉了,并且接管了整个业务的工作流。那现如今呢?整个华尔街陷入了恐慌,并宣称 sars 末日真的来临了。摩尔大通也发文称, anthropic 正在吞噬整个世界,让 sars 商业模式坍塌,且无数可逃。 很快很多人就意识到了不对啊,既然 ai 能够取代法律软件,是不是也能取代其他的软件,比如说金融分析、销售管理、客户支持呢?要知道,传统软件服务行业一共有三大支柱,现在这三大支柱全都面临着巨大的冲击。第一根支柱呢,是按席位收费。 以前一个公司有一百个员工,就得买一百个软件账号,每个软件一年得几千美元,你用不用都得交这笔钱,这是萨尔斯公司最稳定的收入来源。但现在呢,可乐的智能体能把这些专业的软件的活直接干了,而且可乐的不是按习收费,是按照使用量收费,这直接击穿了萨尔斯的商业模式。萨尔斯行业的第二根支柱呢,是 复杂的操作界面。以前软件公司会把界面设计的很复杂,因为复杂的界面能够形成壁垒,用户的学习成本太高,不容易换软件。但现在呢,告诉我,你根本不需要在后台看界面, ai 会自动帮你在后台干活,你只需要告诉他,帮我省一下这份合同,然后等待结果就可以了。第三根支柱呢,是功能的封闭性。 以前软件公司会把功能封闭起来,形成自己的生态。就拿作图软件来说,每个绘图软件都有自己的工程文件,而且其他软件是无法识别的, 你要用这些功能就必须待在他的生态里。但现在呢, cloud 通过一个叫 m c p 的协议,就能够接入各种外部工具。什么叫 s c p? 就是模型上下文协议, 简单说就是一套标准化的接口,让 ai 能够像人一样看到一个新工具,自己琢磨怎么用。这意味着 ai 不需要待在各个软件的生态系统里面,它能够自由的调用各种工具,哪个工具好用用哪个,不存在被绑定的问。 所以你看, sars 赖以生存的三根支柱被全面冲击,这不是简单的优化,而是深层意义的颠覆。所以在 cowork 推出专业插件后,软件股一路暴跌,于是就有了新闻里说的 ai 学习软件业的说法。 但是到这一步还没完,还记得前面说过吗? anthropic 一共做了三件事,现在只收了两件,第一件是推出了工具 cowork, 第二件是上线了十一个专业插件。假如说这两件事情让软件行业一夜入冬,那么第三件事情就是雪上加霜了。第三件事呢,是二月五日推出了 coloordos。 四点六,这是一个新版的基础大模型, 前面说的 cowork 还有专业插件都是在这个基础模型上运行了。说白了,前面的改进是让 ai 更会干活,更懂专业流程,而这个基础模型的作用是让 ai 从根本上更聪明。而且要知道,前面讲的很多事情还只是 anthropic 一家 ai 公司掀起的波澜。这还不算 open ai、 谷歌这些 其他的 ai 巨头,假如说这些 ai 巨头一起行动,对软件业的冲击只会更大,这也是为什么软件公司的投资者会在上周那么的悲观。 接下来呢,我们聊聊字节。最近 say dance 二点零是一个强到令人害怕的模型,没有用过的朋友们呢,可以看一看影视剧峰 team 的最新一期节目, 在节目中做了一个测试,他只上传了一张自己的照片,没有任何音频的输入。结果那个 cdance 二点零生成的视频里,那个数字 team 开口说话了,而且用的是 team 本人一模一样的声音, 说明 team 的生物特征数据,无论是长相还是身文,早就已经被未经 ai 模型了。而细思极恐的是,不仅 team 在训练库里,会不会只要在抖音发布视频的人都已经成为了这个超级模型的一部分了,如果这个功能被滥用,后果不敢想象。这个事件风波呢,也引起了 cindance 二点零下架了支 是真人人脸的功能。除了舆论风波, c 的二点零之所以引起这么大讨论的原因,主要还是因为能力的大幅优化。首先是一致性的问题,过去做 ai 视频最大的痛点是抽卡,同一个角色换个镜头就换了张脸,而字节似乎完美的解决了这个痛点。 大家可以看到,无论是大特写还是远景,这就是同一个人,菜就多练。除了一致性的问题, 很多 ai 模型最让人头疼的就是运镜,但在 cdance 二点零零自己引入了一个类似虚拟摄影机的控制层,大家可以看看这个黑客帝国六的测试。 speed defined here breaking boundaries reshaping reality your battlefield your rules 看着这个怪兽级的模型,我只能 说现在谁也拦不住自己,短时间内只有版权伦理和监管能够拦一拦了。那不管是 cloud 还是 c dance 二点零,真正让我们后背发凉的或许不是 ai 今天能做什么,而是他的进化加速度。好了,本期财经乌托邦的内容就到这,我们下期再见。

这是我被 cloud code 封的第三个号了,申诉也没有用,我现在已经准备放弃官方订阅了,不想折腾了。那 open code 一 直很火,最近我也在开始用它了,尤其是 cloud off 四点六和 gpt 五点三 codex 出来之后, 我现在是多个模型配合去干活。那发挥每个模型的优势,用四点六去做架构设计,用五点三 codex 去做代码执行,如果有前端的一个 ui 需求的话,再拿 gmail 三点零 pro 去做前端的一个 ui。 那 opencode 到底是什么呢?用一句话,它其实就是一个开源版的 curlcode, 功能上的话两者差不多,但 opencode 有 一些独特的优势,就是它是一个任意模型,你可以支持多家厂商的, 你也可以用国产的,你也可以用国外的模型都支持。第二点就是代码完全开源免费,这一点非常重要,你可以自己去改,自己去定制。同时代码开源之后,那开源社区的人就可以去围绕它做很多功能,毕竟人多力量大嘛。比如这个插件 opencode, 这就是社区去搞的,现在已经三十 k star 了。 这个插件其实是一套多 agent 多魔性去协助干活的一个插件,最近我体验下来也挺好用的。它这边准备了十个 agent, 有 主控 agent, 有 去专门干代码的,专门去探索代码的,也专门去做前端 ui 的, 挺好用的。 open code 整个的架构的话,其实跟那个 cloud code 差不多,用户输入成有绘画管理嘛,然后有 agent, 有 plan 就 计划,那 kolco 的 那边也有,那有 build 就是 直接干活的嘛,还有些探索的,其实 kolco 的 那边不是都有吗?以及你制定一些 agent 都有,那调度层这边就有些差别了。关于大模型的调度,因为 kolco 的 那边他只支持 angelic 协议的嘛,那这边的话就是实现了一套支持其他各种供应商的整体的架构的话,其实有很多值得学习的地方,如果大家对 kolco 感兴趣了,可以去他官方原码仓库去拉下来去学一下,那个仓库现在已经一百多 k 了,特别火。 那下面就是这个 oh my open code, 这个是我们今天讲的重点,因为他这一套多 a 镜的多模型的一个机制, 能让一个任务去拆解成各个阶段去开发,有复杂的用复杂的模型,简单的用简单的模型,这种才是一个 理想状态下的一个写作的方式嘛。那它本质上就是我刚才说的,它就是一个插件,通过 open code 暴露的一些钩子去拦截这一个 ai 的 一些行为,它的整个工作流程就是来一个用户输入之后,它去拦截 open code 的 一些钩子,这时候去做一些增强上下文呀,或者去选择多 a 帧特有可能是多个模型去协助,最后返回结果整体的一个流程就是这样子的。 那为什么需要多个代理?哈?他这边说的一个说法是专业的代理去做专业的事情,然后规划和执行分离,可以并行执行,按需去选模型,并且节省成本。那他现在这一个多代理的话, 就像最近 cloud code 新出的那个 agent teams 一 样,只不过 cloud code 它是很久很久之后才出的嘛,这个是老早就有了 omago code, 那 下面是它的一些 agent 的 一个分工,这一个是它的一个主要 agent 是 用了 cloud 的 off 四点六这个模型。 还有一些规划师就是在规划方面以及编排方面,他用的卡尔的最顶尖的模型,那代码磁性这一块的话是用的是 gbt 五点三 codex, 如果是一些比较轻量的任务,你可以用 gm 啊,或者 mini max 啊,以及其他都可以。那些前端这块的话,他用的 jimmy 三 plus 或者 pro, 这样子的话就一个任务进来之后他由这个去规划,规划完了之后,他让 jimmy 五点三去做执行,然后发现有前端任务,他这个时候就用 jimmy。 如果涉及到一些小修小改啊,比如说是一些国际化处理啊,多语言处理,这个时候它就完全可以用很低的那种模型去做这个事情嘛。这样的一个搭配其实我体验下来挺好的。 好,下面我们就开始分别去安装 opencode 和 oemopencode 的 这个插件。桌面端它现在也支持了,支持 macos、 windows、 linux, 我 体验下来的话,它有一些断流的情况,所以说我更推荐大家在使用 cio 版本,我们先来安装一下。 好,它提示我们已经安装了,我们来进去看一下,我们先切到一个免费的模型,你上面搜一个 free 这些模型的免费,我就用 mini max m 二点一吧,我们输入一下测试一下,看它安装好没有。 ok, 如果看到这步就证明你 open code 已经安装好了,这个时候我们就有安装那个插件,因为现在在 ai 时代,其实你安装东西都非常方便,尤其是它如果有文档,有开箱库的话, 你看这一个插件哈,欧麦 opencode 的 一个官方仓库里面直接就告诉你了,你直接用 qq 编辑的去装就行了,我就把这个复制一下,然后粘到刚刚我们开的这个 opencode 的 里面,用免费的 mini max 让他给我们去装,那下面就是他会弹出来让你做一些选择, 可以看到他让我们回答一些问题嘛,你有没有订阅 cloud code, 有 没有订阅 openai, 有 没有一些 jimmy 的 一些 model, 你 就根据自己的情况去选择就行了。强烈建议你不要在 open code 里面去用 cloud 的 模型,通过订阅的方式去用封号的概率非常高。那这边我就说都没有, 待会我也给大家一个配置,直接就可以用了,你只需要去搞一个 api k 过来,你就可以直接把这些模型都用上了,这时候我们都说都没有就完事了,因为这个配置后期都可以去改的。可以看到我们把插件安装成功之后,下面的这一个 a 镜头就变了,变成了 omone code, 它的那一套多 a 型的体系,可以看到它有好几个 a 型的体系可以去用,并且 这个插件那还有个好处,它的兼容性做得比较好。它已经把 cloud code 那 边你有的一些 skills, mcp, 还有那些自定义的命令全部弄过来了,比如说 skills 可以看到我的那些 script 它全部弄过来了,这样非常好。也就是说你可以来回签嘛,你有时候你要回去 copy 到那边用也可以。现在我们开始配模型,你可以通过 connect 这个命令去连接你想要的一些模型, 如果你有恰当的 gpt, 里面就选恰当的 gpt, 你 有其他的你就选其他的。那我这边的话,平时会用 jimmy 三点零去写前端嘛 code, 四点六去写架构和具体的一些代码,然后 gpt 五点三 codex 去做一些代码之星,以及解决一些疑难杂症。我喜欢用每一个模型擅长的能力哈,但是对大家来说的话,你如果像我一样去订阅三家的 ai 模型,其实你要花三分钱。我 订阅的一百刀的 code code, 然后今门来我订阅了两个号,一百四十刀, open ai 我 订阅了二十刀,那加起来就是一百六十刀。并且哈,我们刚也说了,如果你用 code code 的 去 授权到这边 opencode 的 去用的话,你封号的概率特别高。之前我还出了一期视频,专门去讲这个 curlcode 的 大面积去封禁 opencode 的 用户的一个事件, 因为刚开始他是不管的,后面他发现这个 opencode 的 日渐壮大之后,他就开始封禁了,你就不能授权到这里面用。 所以如果你要在 opencode 里面去用 cloudof 四点六的一个模型,我建议大家去用中转站,通过按 api 去计费用多少就算多少。那我这边推荐一个我一直在用的中转站接口 i, opencode 的 这边也已经支持了接口 i, 也就官方支持了嘛。 那前面几期视频我也推荐过,如果我要用到一些国外的模型,按 api 调用的话,我都用的是接口 i, 挺稳定的。最关键的一点,你不需要模仿网络,而且是国内付款的一个方式。 最近他们还专门针对海外的顶尖模型增加了一个套餐的方式,也就是说你可以用一份钱去用国外这些顶尖模型呢,目前有三个档位哈,可以按自己的一个需要去选择,相较于官方 api 按量计费的话,这一个套餐模式帮你省了百分之二十五的钱。 好,下面我们先来去创建一个 api key, 在 这个地方新建,我就随便取一个,我们就取 opencode 的 点击复制。这个时候我们回到 opencode 的 这边 附着 apk 之后,我们供应商选择接口,点 ai 敲击回车,把我们的 apk 输入下,然后保存,这时候你可以看到国内国外的模型都可以用,用一个 apk 你 就解决了多模型的一个适配问题。好,下面我们来进行一些其他的配置。 当你安装完 open code 以及欧曼 open code 插件之后,你会在你的工作目录下面点 config, 下面有一个 open code 目录,这里面有两个节省的配置文件,一个是配置 open code 的 一些模型的,另外一个是配置我们这一个 多 a 帧的协助的时候,它具体用哪些模型。这边的话我给大家直接准备了现成的,你直接到我的一个开源仓库里面直接去复制就可以了。下面来我这一个开源仓库里面,直接把这两个配置可以复制一下,把它粘过去就完事了。 好,我们把它覆盖一下保存,再把 omecode 的 也复制一下回来点击复制。 那这一块的话,你可以根据你自己的需要哈,因为 gpt 五点三这一个扣袋子模型的话,官方是没有出 api 的 版本,那后续如果 open i 那 边出了 api 版本接口, i 这边也会跟上,你就根据自己的需要嘛去看这块要不要注视这个内容,我们来复制一下。 好,我们把它覆盖完了,覆盖完了之后,我们重启一下,你就可以看到 color 的 open 四点六已经可用了, 就这几个 a 帧的,它配置的模型都可用了。那下面我们开始进入实战的一个环节,有了 o my open code 插件之后,我们看一下多 a 帧多模型协助的一个流程。我这边有一个纹身图的 a 帧,我希望让它去加一些功能,在这边加一些删除的动作,能把历史记录删除掉,同时在左下角 做一些设置的动作,可以去更新你的一些头像啊,以及我们那些历史提示词,能支持去快速的复制展开开干, 那提示词的话也比较简单,我们这边加一个 alterwork, 让它去更深入的去工作,去分析。 好,我们切到 opencode 这边,这个就是它的整个架构 agent, 它用的是 off 四点六,那这个的话是干活的 agent, 它用的 gpt 五点三,还有些其他的 agent, 也就说它是多 agent 多模型去写作的一个流程。好,我们把提示词粘过来让它干活, 这里提示 autowork 已经开启了,这个时候可以看到它开启了一个探索的沙背 a 技能吗?用的是很便宜的一个模型,这个过程就跟在 clockcode 的是一样的,这里又开了一个新的, 可以看到它一直在开一些新的沙背 a 技能的任务去做探索。啊。好,这里又开启了一个计划的 task, 也就是一个沙背 a 技能,我可以点进去看一下它在做什么, 可以看到他就是把已有收集到的一些代码信息,整个代码空间来去做一轮分析,让这个 off 四点六做一个计划出来,这个时候他这一个主要的协调 a 技能在等,等他这个后台的这个计划任务完成完了之后,这个时候他再去协调其他的 a 技能去干活。 可以看到它这一个经过几轮的一个探索之后哈它得到了一个突突像,那这个突突像的话,它根据后端、前端以及一些小需求拆成了很多突突像,这个时候它就开始去并行执行修改任务了,可以看到它这里又开启了几个 safari 的。 有一个点要看的话是他的这个三倍镜,他开的时候,他其实这个时候是用的 jamal 三 plus 这个模型,也就说他认为这个任务其你根本就没必要用一个很高的模型去做这个事情,所以说他默认给你路由到了一个简单模型, 它这种规划任务的方式就能把模型最大化的利用起来。复杂的任务用复杂的模型,简单的任务用简单的模型就很完美。可以看到它开始去执行 t 四跟 t 六这两个任务了,而且它依赖关系也找出来了。这个就像前两天发布的 cloud agent teams 的 一个写作流程,只不过这个是老早就有了这个插件老早就有了这种多 a 的 写作,最终被 cloud code 写到一个官方的库里面去了。 然后他们那种通信机制就跟爱信的 tim 是 很像。哎呀妈这个系统通知 coco 的, 其实他很多方案是借鉴了社区的,因为社区搞出来之后, 他觉得确实是 ok, 可以 的,那他就把它集成到 coco 的 里面。所以这 coco 的 从它诞生之后的很多功能迭代都参考了开元社区的一些做法,而且他的也在他的一些技术博克里面有,感谢一些开元社区的人提供了一些解决方案。 就像你做产品一样,你产品迭代的过程中,你光靠产品经理去,有时候发觉不了用户的一些真实的需求,那真实的需求暴露出来之后,社区他就解决了,那你就可以去把一些已经解决的痛点的问题提升到自己的产品里面。 可以看到这所有的凸凸像它全部完成了哈,包含三个任务,我们现在来看一下它整体的效果怎么样。首先是左侧的这个删除功能好,确认删除 ok, 确认可以,并且弹窗也是正常的。其实我们看这个可以复制已有的提示词, 可以复制折叠展开是 ok 的。 下面就是这一个左下角的设置,可以去更新昵称跟头像这一些啊,可以看到他这边其实也做好了。 好,我找一张图像试一下看可以吗?前面加一个我的名字吧,看可以吗? 可以,已经保存了。可以的,这个看起来他做的挺好的,英文啊,英文设置也是 ok 的, 多源设置也是 ok 的。 整体这一次任务的话,他全部搞定了呀,就是虽然不是特别难的,但是他协调了多个 a 镜的去干活,而且都能交付的很完美,中间我没有做任何的介入, 所以说这个工具啊,真的推荐大家去用一下这个多 a 镜的协助真的挺好用的,下面我来总结一下。使用 open code 再加那个插件, open code 再配合你用一个接口外的中转站,可以做到 模型自由稳定,省心,你也不怕被封号。第二个的话是成本灵活,这就是今天所有的视频内容,如果你觉得这期视频对你有帮助的话,可以给我一件善良,谢谢大家。拜拜。拜拜。

有了这个可乐的扣子,这是打开新世界的大门,看我今天弄这玩意打开,哈哈哈,看着啊啊,就写这个,一块卖塑料原料的,我以为我一个球友是卖塑料原料的吗?点击生成 来了,哈哈哈哈。哦, ok 啊,然后呢?把这个,你要这个素材,这这这是比如说素材放在一个文件夹里,然后点击打开,然后他这个素材,对吧? 素材是独取成功,比如说我朋友刚发我的,他送货的一些素材扔里边了,就选一个声音,选个语言,选个 chinese 就 行了。选个 chinese 之后选这个旁白的男孩女孩,我选个女的,再选个 声音,随便选一个,之后语速选一下,试听一下。欢迎使用短视频工厂,这声音行,见证奇迹的时候到了,开始合成,他就开始合成了,看这速度,正在渲染视频,哈哈哈,成功了,测试视频,合成成功我们再打开这个, 这是刚成功的时间啊。这个是什么?十一点四十八分十一点四十八分,看看怎么样?还在为原料发愁,价格忽高忽低, 质量还不稳定,试试这款进口塑胶粒子,哎呦,字幕呢? tv 认证,耐高温、抗老化,流动性超强,注塑零瑕疵,一吨直降八百元,库存仅剩三十吨,扫码立即锁单,错过等三个月哈哈哈哈。

最近 cloud code 非常火,相信关注编程 agent 的 同学应该都已经上手体验过了,不过要把这个工具从入门真正落地到生产环境,光会敲几个简单的命令是远远不够的, 所以这期视频咱们不整虚的,直接带大家从头到尾把 cloud code 的 实战流程彻底走一遍。这个视频呢,一共是分为以下四个部分,第一,环境的搭建与基础交互。 第二,复杂任务处理与终端控制。第三,多模态与上下文管理。最后呢是高级功能的扩展与定制,大家可以看到屏幕上密密麻麻的知识点和时间戳, 这期视频的含金量呢绝对是拉满的,只要你花点时间看完这期视频,我保证你能够彻底吃透 cloud code, 把它变成你手心里最顺手的生产工具。 另外我知道市场上还有其他类似的编程 agent, 比如 codex、 open code 等等,其实它们无论从功能上还是使用上都跟 cloud code 没有什么太大区别,所以我相信在看完了这期视频之后,你一定会一通百通,同类的产品基本上都能够直接上手。好话不多说,那我们直接开始。 首先我们来到 cloud code 的 官方网站,就是这个页面了,然后呢,我们点击这里面的复制按钮,再回到终端粘贴,这样呢就开始安装 cloud code 了。 安装完成后,我们试着用它来做一个代码软件。首先使用命令 m k d i r 来创建一个目录,就叫做 my to do 就 好了,我们所有的代码呢,都放在这个目录里面, 然后我们进入到这个目录里,再执行 cloud 这个命令来打开 cloud code。 刚进来的时候, cloud code 可能会提示你进行登录,如果你像我这样没有被提醒的话,可以执行杠 login 命令来主动触发登录流程。 呃,可以看出啊, cloud code 官方一共是提供了两种标准的接入方式。第一种呢是订阅制,如果你购买了 cloud 的 pro 或者是 max 会员,那就直接选这个就好了。第二个呢是使用官方的 api key, 按照 token 的 用量计,费用多少花多少。 我呢是订阅用户,所以我选择第一项。选择之后, cloud code 会弹出一个网页提示,我授权,我们同意。 可以看出登录成功,我们关掉当前页面,回到终端,这里按下回车登录呢,就结束了。这里顺便提一下, 有些同学可能没有办法使用 cloud 的 官方订阅或者是 api, 这个时候呢,你也可以使用国产模型来驱动 cloud code, 比如说是 g, l, m, mini, max 等等。 cloud code 是 一个通用的编程 agent, 它本身其实并不跟 cloud 的 模型绑定,你完全可以使用其他的模型来驱动 cloud code。 具体使用国产模型的方法呢,这里就不再赘述了,其实很简单,设置几个环境变量就行了,网上一搜一大堆, 有需要的同学可以自己搜索一下。好,言归正传,我们再回到 cloud code 这里开始使用它。前面的我们说过,我们要做的是一个代办软件,那我们现在就把这个需求告诉 cloud code, 让他帮我们实现。给我做一个代办软件,使用 html 实现。可以看到 cloud code 开始工作了,让我们稍作等待。 cloud code 想要创建一个叫做 index dhtml 的 文件,询问我们是否同意, 这里面呢?一共有三个选项,第一项 yes 是 单词授权,意思就是说只同意创建当前的这么一个文件,如果它接下来还需要创建其他文件的话,它还会再次向我们询问确认。 第二项呢是 yes allow all edits during this session。 选中了它就意味着在本次的对话期间,后续所有的文件操作都会自动通过,不会再反复打扰我们。 第三项是不同意,选择了它之后,你可以继续输入你的想法, cloud code 会根据你的输入生成代码,并再次向你确认。呃,为了演示方便,我们这里就选择第二项,开启自动模式,把后续的工作全权交给他 好。选完之后注意看,输入框下方多了一行字,就是这个 accept and it's on。 这个呢,就表示目前的自动同意模式已经开启了。那如果说你后悔了,想换一个模式怎么办呢? 这个时候就要用到 shift 加 tab 键来切换模式了,我们来按一下试试看。现在变成了 play mode, 也就是规划模式,这个模式主要用来探讨复杂的方案,只聊天不执行。具体用法呢,我们后面再细讲。我们再按一次, 注意看,底部的 play mode 消失了,取而代之的是一行灰色的提示问号 for shortcuts, 也就是按问号显示快捷键。大家千万别误会,这个呢并不是什么快捷键模式,这行字呢,只是 cloud code 的 一个小提醒而已,跟当前的模式没有关系。 呃, cloud code 其实在这个时候没有标注当前的模式,而这种没有标注的模式就是默认模式。 不知道你还有没有印象,我们刚进入 cloud code 的 时候用的就是默认模式,在默认模式下, cloud code 表现的最为谨慎,每次创建文件或者是修改文件的时候,它都会先去询问用户的意见,所以大家看出来了吗? shift 加 tab 就 在这三种模式之间循环,让我们稍微总结一下。 第一个是默认模式,也就是显示问号 for shortcuts 的 那个模式,在这个模式下,创建和修改文件之前一定会询问用户最为稳妥。 第二个呢是自动模式,也就是那个 accept edit on, 在 这个模式下, cloud code 会自动创建或修改文件,不会去询问用户,最为方便。第三个是规划模式,也就是那个 plan mode on, 这个模式只讨论不修改文件,适合构思 这个模式,我们后面会详细解释。好。这个呢就是 cloud code 的 三种模式了,我们再按一次 shift tab, 来到 accept add its on 模式。选择好模式之后,我们再回头看看之前 cloud code 给我们写好的文件,我们要打开它, 那怎么打开呢?你可以去文件管理器里面找到这个文件,双击打开它。不过这里我想要教另外一个方法,我们可以直接在 cloud code 里面执行终端命令来打开它。首先呢,我们输入一个叹号, 看 cloud code 有 反应了,现在我们处在 bash 模式下,可以运行任意的中断命令了。紧接着我们来输入 open index 点 html 来打开这个 html 文件 代码。软件做的还算不错,一次成功,这不得不给 cloud code 点个赞。不过这里面有个小坑,他把所有的代码都写到 index 点 html 里面了, 小项目还好,要是项目做大了,维护起来简直是个灾难,所以咱们最好趁早是换成 react, type script 和 white 这种现代架构,把代码分模块儿管理, 我们可以直接向 cloud code 提出这个请求,让它改掉。不过呢,改架构是个大工程,最好是先确定细节再动手。这个呢,就是 play mode 登场的时候啦, 它就是专门用来讨论方案,确定细节的。让我们先关掉当前页面,回到终端这里,然后按一下 shift 加 tab, 进入到 play mode。 然后呢,输入我们的请求,将当前的代办应用重构为使用 react 加 type script 加 white 的 项目。 呃,问题到这里还没有结束,这个时候呢,我们想换行。怎么换行?敲回车吗?敲回车显然是不行的,敲回车的话,我们的问题就提交了。换行呢,是需要按 shift 加回车,然后我们就可以继续写了,保留所有的现有功能。 呃,这里顺便提一句,如果你按 shift 加回车不好用的话,那你大概利用的 cloud code 版本比较旧,需要升级一下。 呃,另外还有一点,有些同学可能会觉得这个终端的输入框实在是太难用了,想用一些比较现代化的编辑器来替代它。这个呢,其实也是可以的,我们可以按一下 ctrl 加 g, 这个时候 cloud code 就 会打开一个 vs code 的 标签页,在这里面编辑就方便多了,回车随便按,也不用担心不小心提交问题了。当然,这要求你先事先装好 vs code, 我 们就在这里把要求补充完,再加一句,且 ui 风格保持一致。 写完了之后,我们保存,然后关掉这个标签页。此时 cloud code 就 会把 vs code 里面的内容全部放到输入框里面,我们直接再按个回车就可以提交请求了,可以看到 cloud code 开始工作了,让我们稍等一下, 计划似乎是产好了,我们把滚动条往上移一移,看一看它这个计划具体是个什么样子的。 这个计划呢,是从这里开始看起来还是挺完善的,目标项目清单、目录结构之类的信息全部都有覆盖。到最后他询问我们是否要执行, 他一共给了我们三个选项,第一个是执行计划,并且进入到同一模式,后续修改文件前就不再询问用户了。 第二个也是执行计划,只不过后续会使用默认的模式,也就是说之后每次写完文件前都需要询问用户。第三项是继续修改计划,如果你对计划不满意的话,那可以在这里面继续输入, cloud code 会根据你的要求再修改这个计划,产出一份新的。 这里假设我们对计划不满意,选择第三项提出我们的修改意见,给每个蛋白事项增加一个优先级,比如高中低,并且用不同的颜色标记出来。然后我们按一下回车,这个时候呢, cloud code 就 开始修改它的计划了,让我们再稍微等待一下。 好, cloud code 又产出了一份计划,具体内容呢,我们就不看了,单从最后的测试部分我们就可以看到,它确实是把我们的优先级的需求考虑进去了,这次差不多了,要不我们就同意吧。 让我们选择第一项执行这个计划,并且进入到自动同意模式,也就是说后续修改文件的时候就不要再询问我们了。好,回车可以看到当前模式切换到了 accept edit it's on, 没问题,这个呢,跟我们的选择是一样的,后面写入文件的时候呢,便不会再麻烦我们了。 现在 cloud code 开始执行计划了,时间估计会比较长,我们慢慢等待一下。 cloud code 暂停了,他现在想用 m k d i r 来创建目录,然后询问我们是否同意。 稍微等一下,这个是什么情况?我们不是跟 cloud code 说过了吗?不需要每次都询问用户的。还记不记得我们是在 accept add it on 这个模式下面,那怎么现在又开始询问了呢? 对,我们确实是说过,不过那只不过是写入文件的时候,不需要询问用户,这个呢,是在执行终端命令。 cloud code 认为执行终端命令呢是一个比较危险的操作,所以需要征得用户同意才会继续。 不仅如此,这里面还没有一个自动执行所有终端命令的选项,即使是第二项,那只不过是告诉 cloud code 以后都可以自由地访问 s r c 目录,不需要询问用户。至于执行别的命令,那还是要问的。 如果你觉得每次选择都太麻烦的话, cloud code 其实是提供了一个比较隐蔽的选项,可以跳过这个选择的步骤,让它想执行什么命令就执行什么命令。这个呢,是需要在启动 cloud 的 时候加上一个选项,叫做 dangerously skip permissions。 我 来给大家新开一个终端标签页演示一下。 我们先进入到原来的这个 my to do 目录里面,然后我们来输入 cloud, 再加上 dangerously skip permissions, 意思就是跳过所有的权限检测,大家注意看这个参数里面的单词, dangerously, 也就是危险的。 官方把危险两个字写在了脸上,意思非常明确,一旦加上了这个参数, cloud code 就 彻底放飞自我了。 进来之后你会发现模式变成了 bypass permissions, 这就意味着接下来它执行任何终端命令都不会再征求你的意见了,无论是安装依赖还是删除文件还是创建目录,都不会再问了。 这个呢,其实是一把双刃剑,往好了说,它能够极大地提升开发效率,全自动干活,不用你一直盯着点。同意, 但是往坏了说,他理论上呢,就拥有了和你一样的终端权限。虽然 cloud code 只有在极度发疯的情况下才能去破坏你的电脑,这种概率呢,可以说是微乎其微。但是作为一个负责任的博主,我必须要提醒大家,这个选项会让 cloud code 彻底的放飞自我。所以理论上呢,还是有一定的危险性的, 是否要为了效率承担这一丢丢的理论上的风险?决定权是在你们手里。好,演示完毕,回到我们原的例子里,我们呢,还是不用这个选项了,我们来选择第二项,只同意它以后可以自由地访问 s r c 目录。回车让 cloud code 继续。 cloud code 询问我们能不能执行 n p m 引导命令,我们选择以后都同意。 这里 cloud code 想要使用 npm run dev 来启动服务器,启动了服务器就可以查看网页的效果了,启动也行。不过呢,这里我们先取消,待会我想用它来给你演示如何手动启动它,并且借这个机会来解释任务相关的一些概念。 cloud code 看我们拒绝了,在询问我们应该要做什么,我们来跟他说一下这个命令呢,等会我自己执行,你确保其他部分都完成了就可以了。然后呢, cloud code 就 开始确认了,好,确认完毕,看起来一切正常。现在我们就可以自己来运行这个命令了,我们来试一下 服务器启动成功,我们来点击这里面的链接,看一下效果怎么样。不错,效果还可以,我们来随便点点,看起来没有什么问题,增加个代办事项也是可以的。 然后呢,我们可以再增加一个其他的代办事项,调一下优先级,再添加,一切完美,我们再回到 cloud code 这里,这里有一点需要给大家强调下, 这个服务的运行呢,是会堵塞 cloud code 的, 比如说我们在这里输入一个 hi, 你 看 cloud code 没有给我们任何回应,那是因为服务还在运行, cloud code 就 没有办法处理这个新的请求。那怎么办呢?很简单,看这里按 ctrl 加 b, 可以 把这个服务放置在后台,我们按一下试试, 好像是起作用了。 cloud code 开始处理我们的请求了,它给了我们一个回复,而且注意这里有一个后台任务正在运行, 我们输入杠 tasks 就 可以查看这个任务。在这里面可以看出,这确实是我们所启动的那个 npm run dev 的 命令, 注意这行提示,按 k 可以 关掉这个服务,不过我们目前还不打算关掉它,我们按 esc 回到原来的那个界面里面,就让这个服务先一直跑着吧,这样的话呢,我们后续的修改也能够实时看到效果。 那现在假设我们想加一个切换语言的功能,目前使用的是中文,我们希望它能够在右上角切换为英文,让我们来输入请求,在页面右上角增加一个切换语言的选项,用户可以选择中文或者是英文,默认为中文。回车, cloud code 开始运作了,让我们稍作等待。 好,可以看到 cloud code 改完了,我们回到页面这里看看。效果不错,确实是加上了切换语言的选项,而且切换的效果呢,也是符合预期的。 不过你转念一下,不对,我的用户都能看懂中文啊,我加这个功能干什么呢?要不就回滚吧。 好吧,那 cloud code 能回滚吗?当然是可以的,对应的命令呢,就是 go reverse, 或者是说呢,有个更简单的办法,你可以直接按两下 esc, 这样呢就进入到了回滚页面。我们每次输入请求的时候, cloud code 都会创建一个回滚点,比如说我们不是想回滚到增加语言选项之前的那个版本吗?那就选择这个回滚点就好了,选好之后按下回车。 然后呢, cloud code 会给我们四个选项,是回滚代码和绘画,还是说是只回滚绘画还是只回滚代码,或者说呢,我们就放弃回滚,我们来选择第一个代码和绘画都回滚。 好,现在回滚成功了,让我们来验证下。打开页面没问题,确实是回滚成功了,没有那个切换语言的选项了,是不是很棒呢? 好,假设,这个时候啊,你觉得 react 加 type script 加 white 这套架构好像是有点过于复杂了, 你在想要不干脆我们就回滚到只有 index 点 html 的 那个版本就好了。好,那继续用回滚功能就行了。不过呢,在这之前,我们最好把 npm run dev 这个后台任务给关掉,毕竟回滚之后相关的文件都没了,这个后台任务呢,也就没有什么用了。 我们回到 cloud code 这里,输入杠 tasks 来查看后台任务,然后再按 k 结束掉当前的这个后台服务。 呃,这个时候 cloud code 提示我们开发服务器运行正常。这个呢,纯属是 cloud code 晕了啊,大家忽略它,我们的开发服务器现在实际上已经被关掉了。服务器关掉之后,我们就可以开始回滚流程了,先按两下 esc, 然后选择一开始重勾代码的那个回滚点。 然后呢,我们再选择第一项恢复代码和绘画。好看起来呢,是已经回滚完成了。我们来看看当前目录下是不是只有 index 域是天秒这个文件。我们使用 ls 这个命令, 这个命令呢,可以用来列举当前目录下的文件列表运行。看结果好像是不太对啊,除了 index 底下是天秒文件,这个目录下还有很多其他的文件,它默认只显示了一部分,我们可以按一下 ctrl o 来显示所有的文件列表, 看起来总的文件数量还不少呢。这个是怎么回事呢?难道是 cloud code 出 bug 了吗? 其实不是,这些文件呢,是之前用终端命令创建的,比如说是 m k d i r n p m install 之类的 cloud code 呢,只能回滚它自己写入的那些文件。至于由终端命令生成的文件, cloud code 是 没有办法回滚的。 所以呢,我建议大家还是不要太依赖 cloud code 的 这个回滚功能了,如果要精准回滚的话,大家还是使用 git 会更好一点 好。不过呢,问题其实不大, index html 呢,是 cloud code 自己把控的,所以呢,这个文件一定是回滚成功了,我们把别的文件都删掉就行了, 说干就干,让我们打开文件管理器,删掉除了 index html 之外别的文件。然后呢,再回到 cloud code 这里,执行一下 ls 命令,可以看到文件确实只剩一个了。然后这个时候呢,我们可以使用 open 命令打开这个 html 来验证一下它的效果。 没问题,跟我们之前的那个 index 表 tm 的 效果呢是一样的,到这里回滚才算是彻底结束了。好,回滚呢,我们就讲到这里,现在假设你对 cloud code 做的页面一直都不太满意,所以呢,你去 figma 上面自己画了一个界面,就大概是这个样子的了, 你希望 cloud code 仿照这个界面来做,那具体该怎么实现呢?很简单,我们只要把这个设计稿图片传给 cloud code 就 可以了。首先我们需要在 figma 上面操作下,把当前的这个设计稿导出为一个 png 图片, 导出的方法很简单,就按这个 export frame 就 可以了。然后呢,我们回到访答这里,可以看到图片导出的非常成功,下面我们的任务呢,就是把这个图片传给 cloud code。 那 怎么做到这一点呢? 有两个方法,其中第一个方法就是直接把这个图片拖到 cloud code 这里,看到这里面的 a 位二了吗?这就代表 cloud code 已经接收到我们的图片了,这个呢只是其中的一个方法。还有另外一个方法呢,就是复制这个文件, 然后来到 collab 这里,按 ctrl 加 v 粘贴。注意啊,这里面我说的这个快捷键呢,是 ctrl 加 v, 不是 command 加 v。 即使你用的是 micros, 你 也要用 ctrl 加 v 来粘贴这个图片,按 command 加 v 是 不起作用的, 这一点要记住了。这样呢,我们就可以继续输入请求,让 collab 根据图片来修改代码儿。 具体的过程我就不演示了,这个方法肯定行得通。不过说实话,很多时候呢,可能还原的并没有那么精确,比如说字体啊,间距啊之类的, cloud code 很 难通过图片做到非常精确的把握。 所以这个时候呢,我们其实还有另外一个方法,一个更为精确有效的方法,那就是使用 m c p 来实现这个还原 figma 设计稿的需求。 m c p 是 大模型与外界沟通的渠道,我之前讲过 m c p 的 使用方法和相关原理,感兴趣的同学可以自己看一下。 figma 提供了一个很好用的 m c p server, 我 们可以接入进来用用。首先呢,我们是需要安装这个 m c p server, 根据 figma 官方的要求,我们需要执行这一行命令, 因此呢,我们先把它复制一下,然后回到 cloud code 这里,先按两下 ctrl c 退出,然后执行这行命令。 可以看到, mcp server 已经是安装成功了。之后呢,我们需要重新打开 cloud code, 不过好像之前的对话全都没了呀,这可怎么办呢?别担心,我们可以使用杠 resume 命令来回到之前的对话。这里面的第一个就是我们刚才的那个对话了,我们按回车来选择它,你看这个对话不就回来了吗? 呃,另外啊,还有一种更为简单的办法,那就是在启动 cloud code 的 时候呢,加上一个参数,我们来试一下。首先退出 cloud code, 然后呢我们执行命令 cloud 空格杠 c, 这里面的 c 呢就是 continue 的 缩写,它的功能就是打开 cloud code, 并自动恢复上一次的对话。好,对话恢复了,我们执行杠 m c p 命令,来查看目前所安装的 m c p 工具, 目前呢只有一个,就是我们刚刚安装的 figma, 可以 看到我们需要健全才能够使用这个工具。我们来选择这个 m c p 工具,然后呢再选择 authenticate, 这个时候呢会自动弹出一个页面,让我们授权我们同意, 然后再回到 cloud code 这里执行杠 m c p, 选择 figma, 这个时候呢可以看到 m c p server 呢就是一个可用的状态了。我们选择 view tools, 就 可以看到这个 m c p server 内部所包含的工具列表, 其中有用来截图的,有创建设计规则的等等,具体呢我们就不看了,我们其实也不用太关心到底该使用哪个工具来完成我们的需求,我们让 cloud code 来判断, 所以呢,我们按 esc 退出这个界面,然后输入我们的需求,修改当前的页面,使它与 figma 搞件保持一致。啊,问题还没完,我们现在回到 figma 页面这里复制这个设计稿的链接, 就点击这里面的 copy link to selection 就 好了。然后呢再回到 cloud code 这里粘贴,再回车,这样呢应该就可以了,可以看出 cloud code 开始工作了, 它首先呢是发现了我们的 figma m c p 可以 解决这个问题,请求调用 get design context 这个 m c p 工具来实现,需求我们同意, 然后呢, cloud code 请求调用 get screenshot 工具获取对应设计稿的截图,我们也同意。 现在调完两工具之后呢, cloud code 就 获取到了全部的设计稿信息了,其中不仅包括设计稿的截图,还有各种组建的间距、字体样式等,非常的详细。拿到这些信息后, cloud code 就 开始紧锣密鼓的修改现有的 html 代码,使它与 figma 设计稿相同,让我们稍作等待。 好,看起来是完成了,我们来到浏览器那边看一下效果怎么样。 这个呢,就是 cloud code 根据 figma 设计稿所搞出的页面,我把原始的设计稿也放在这里,大家可以比较一下,看看效果怎么样, 反正我觉得还原程度还是挺高的。当然这个页面还有一些细节需要打磨,比如说里面的 undefined, n a n 之类的,可能需要修改一下,但整体效果我觉得真的还是可以了。 好,那 m c p 呢?我们暂时就讲到这里,下面我们来看一下上下文压缩。在之前我们写了很多的代码,然后 cloud code 呢也调用了很多的工具,相信这个时候呢, cloud code 的 上下文里面就有了非常多的信息,这里面有一些是有用的,有一些其实没什么太大用处, 我们可以根据需要对上下文做一些压缩,这里需要用到的命令是杠 compact, 我 们可以直接去执行这个命令,也可以选择性的在它后面追加一些具体的压缩策略,比如说是重点保留用户提出的需求之类的。 呃,不过我们就不在后面加需求了,我们就直接执行这个杠 compact 命令,看一下它的效果怎么样。 压缩完成了,我们按一下 ctrl 加 o, 就 可以看到压缩后的上下文内容,这个呢就是压缩之后的结果了。 呃,我们之前呢,在上下文里面有很多的信息,有代码,有 m c p 的 调用结果之类的,现在呢,全部的内容就只剩这么一点了。 这样的话呢,不仅 cloud code 的 性能有了保障,后面在执行任务时, token 的 消耗量也会少很多。好,现在我们按一下 ctrl 加 o, 再回到原来的这个界面里。这里再提一下关于上下文的另外一个命令,就是这个杠 clear, 他呢做的更为极端,就会直接把所有的上下文内容都给清空掉。一般来说,如果我们后面的任务跟之前的上下文并没有什么关联的话,我们就可以使用这个 clear 命令来清空所有的上下文内容。 这个命令我们就不演示了,毕竟我们还需要之前的上下文,演示了之后,那就什么都没了,我们还是保留这个压缩后的结果好。现在压缩完成了,但是压缩结果的可控性并没有那么强,比如假设你想手动改改这里的压缩结果, cloud code 可并没有给你提供这个选项。 另外,无论亚不压缩上下文呢,都跟某个绘画绑定,我们下次进入到 cloud code 的 时候,还必须要来到这个绘画,否则 cloud code 是 不知道之前发生了什么的。那有没有什么办法可以解决这些问题呢? 有没有一种方案可以让 cloud code 每次进来的时候都读取一些我们自己设定的一些信息,这样 cloud code 就 知道这是一个什么项目,用户有什么需求,我们甚至可以把各种注意事项都写在这里面。了解了这些信息之后, cloud code 就 可以更好地为我们工作了。有这种方案吗? 当然是有的,这个呢就是 cloud d r m d。 我 们来尝试使用一下,我们首先让 cloud code 自己生成一份 cloud d r m d 文件,用的是杠 in it 命令。 好, cloud code 创建完毕了,我们来打开 cloud md 文件看一下,它就放在当前目录里面, 看起来内容是有模有样的,不过很可惜,它的语言呢是英文,看起来不太方便,我们要不让 cloud code 再把它给转成中文? 转换完毕,我们再回来看一下,没问题,确实是中文了。另外提一下,这里面的内容呢,是可以随便修改的,比如说我们可以在最后面加上一句注意事项,每次回答到最后,必须要追加这么一句 happy coding, 然后我们回到 cloud code 这里先退出,然后再重新进入,这样 cloud code 就 会重新加载我们那份最新的 cloud 点 md 文件。我们来随便给 cloud code 说一句,比如说是 hi, cloud code 回答了它,最后呢,确实是加上了 happy coding, 可以 看到我们的 cloud 点 md 真的 是起作用了。 所以呢,如果你有什么东西是希望 cloud code 每次都读取的,那就直接放到 cloud md 文件里就好了。 试验完毕,现在我们把 cloud md 结尾中的那个注意事项去掉,要不每次都出现 happy coding, 会影响我们后续的演示。我们可以直接找到 vs code 编辑 cloud md 文件。不过这里嘛,我想顺便教大家另外一个打开 cloud md 的 方法, 我们在这个输入框里面输入杠 memory, 在 这里可以看出 cloud md 文件呢一共是有两种,一种是项目级别的,对应的文件就放在当前的目录里,对当前项目生效。第二个呢是用户级别 对应的文件放在用户目录里,对当前用户生效。我们之前用的是第一个,所以选择第一项,选择好了之后,对应的 cloud md 文件就自动打开了,这样呢,就不用每次都自己在文件管理器里面找了,会稍微方便一点。 打开 cloud 点 m d 文件之后,我们删掉最后面的注意事项保存,再回到 cloud code 这里重启一下, 然后再随便问一句,可以看到 happy coding 已经没了,这说明我们的修改已经生效了。那 cloud 点 m d 文件就讲到这里, cloud code 还有个 hook 功能,允许用户在运行工具前后等时机执行一段自己指定的逻辑,比如说我们可以用它来做自动格式化,也就是说在 cloud code 写完代码之后,自动执行我们设定的格式化函数,以便让最终的代码更加美观,更加符合我们的需求。 首先我们执行杠 hooks 命令,进入到 hook 的 配置页面,这里我们可以配置 hook 的 执行时机,比如说是工具使用前,工具使用后,工具使用失败发送通知等等。我们来选择第二项 post to use, 也就是工具使用后来执行这个 hook。 然后呢,我们再选择 add new matrix, 这里面呢,我们需要选择对应的工具,也就是说我们希望在哪个工具执行之后再运行我们的 hook 逻辑,我们填写的是 write 或者是 edit, 也就是说在创建或者是编辑文件的时候来执行这个 hook。 然后呢,我们再选择 add new hook, 这里输入我们具体的格式化命令。这 这个命令看起来很长,我们来仔细分析下。首先在运行的时候, cloud code 会给我们传这么一份 json 过来,其中的 file path 就是 cloud code 刚刚编辑好的文件路径,因此我们需要解析这个 json 结构,把其中的 file path 的 值给取出来。我们刚才命令里面的这一部分就是用来干这个活的, 其中 jq 是 解析 json 的 一个程序,不熟悉的同学可以自己查下。获取到文件路径之后,我们把这个文件路径通过 x arcs 传递给 preder 命令,然后剩下的工作呢,就是只用 preder 来格式化这个文件的内容了。 所以总结下来,这段命令其实就是使用 jq 来获得当前编辑好的文件路径,然后再使用 preder 来格式化这个文件。 好,讲完了,让我们再回到 cloud code 这里,写好代码之后,我们按回车确认。此时 cloud code 会询问我们应该把这个 hook 保存在哪一级,一共是有三个选项, 第一个呢是本地的项目级别,也就是说这个 hook 只会在本机本项目生效。选择这个选项之后, cloud code 会把配置放在项目目录里面的 settings, 点 local, 点 json, 加入到 get 的, 点 get ignore 文件里面, 所以呢这个文件不会共享给别人。第二个呢是项目级别,也就是说所有使用这个项目的用户呢,都能够用到这个 hook, 它对应的配置文件呢是 settings there jason, 这个文件呢会随着 get 分 发给所有人。 第三个呢是用户级别对当前的用户生效对应的配置保存在用户的目录里面,每一个用户都有一份,不会互相影响,也不会跟着项目保定。我们来选择第二个,所有使用这个项目的人呢,都能够用到这个 hook。 然后呢,这个 hook 就 算是创建好了,我们按 esc 退出。 最后呢输入请求来试一下。我们的请求是创建一个新的文件 test, 点 html 里面随便写点 html 就 行,所有的内容都写在一行里面。回车,我们来稍微等一下, 通过这个写入文件的请求就可以看出, cloud code 确实是把所有的内容都写入到一行里面了,我们同意执行完毕。我们来看看最终生成的 test 点 html 的 文件内容。 可以看到这个文件的内容呢已经被格式化好了,并不是像一开始 cloud code 写入的那样只有一行,这说明我们刚才写的那个 hook 生效了,在 cloud code 写入完代码之后,我们的 hook 启动把那个文件给格式化了,所以呢,我们现在看到的就是格式非常漂亮的 html 代码。 hook 的 功能呢,就讲到这里,现在假设你每天都想写一个总结,记录下今天开发了哪些功能,而且呢,这个总结必须要遵循一定的格式,比如一定要包含日期开发招标开发详情之类的。 你可以把对应的格式要求直接粘贴在这个输入框里面,让 cloud code 帮你写一份,只不过这样的话,你每天都要重复粘贴一遍,很麻烦。这种事情其实非常适合使用 agent skill 来解决,我之前出过一个系统性讲 agent skill 的 视频,有兴趣的同学可以看一下, 不过没看过也没关系,你可以大致把它理解为一个给大家看的说明书,一个动态加载的 prompt。 我 们来创建一个 agent skill 试一下。 首先我们新开一个终端 tab, 使用 m k d r 命令,在用户目录下的 their cloud skills 文件夹下面创建一个新的文件夹,就叫做 daily reports。 我 们使用 vs code 来打开这个文件夹, 然后呢,在这个文件夹下面创建一个叫做 skill 点 md 的 文件,在这里面填入这样的一些内容。 这个文件呢,一共分为两部分,前面的 name 和 description 分 别代表这个 agent skill 的 名称和描述, cloud code 会根据这一部分的内容来决定是否要使用这个 agent skill。 后面呢,就是这个 agent skill 的 具体描述了,这里主要是写了日报需要遵循的格式。 写好了之后,我们回到终端,关掉这个新开的标签页。然后呢,再重启一下这个 cloud code, 然后输入杠 skills, 可以 看到 cloud code 已经发现了我们的 agent skill。 然后呢,我们回到输入框,这里面打入我们的请求,写一份每日总结,回车开始执行。 可以看出, cloud code 发现了这个请求与我们刚才录的那个 agent skill 相关,请求使用这个 agent skill, 我 们同意。 然后呢,我们的每日总结就写好了,跟我们要求的格式是一模一样的。这个呢就是 agent skill 的 使用方法了,是不是很简单? 呃,另外啊,这个 agent skill 的 调用请求呢,是由大模型发现并且发起的,除此之外呢,我们也可以这样来主动地发起这个 agent skill, 就是 先输入杠 daily reports, 然后呢后面加上具体的请求。 这个跟之前的效果呢,其实是一样的,只不过是省去了大模型意图识别的过程,直接由用户调用了这个 agent skill, 结果更加可控一些,具体我们就不演示了,我们来把它给删掉 啊。 agent skill 呢,就大致讲到这里了,当然 agent skill 还有很多高级的用法,感兴趣的同学可以看一下我的上一个视频。 下面我们再讲讲 cloud code 的 另外一个重要功能, sub agents。 这个呢,其实就是一个独立的 agent, 有 着自己独立的上下文,独立的工具,独立的 skill, 可以 独立完成某一件事情。我之前讲过 agent 的 原理, 有感兴趣的同学呢可以自己来看一下。呃,下面呢,让我们来创建一个用于代码审核的 sub agents, 然后选择 create new agent。 这里面要选择 agent 类型是项目级别还是用户级别,我们来选择项目级别, 也就是说使用这个项目的人呢,都能用。接下来选择 agent 的 创建方法,一种是用 cloud code 的 初设化,另外一种呢是完全手动创建,第一种是推荐方法,所以我们选它。 接下来我们描述一下这个 agent 要做的事情,我们填入以下内容,这是一个用于代码审核的 sub agent, 在 用户要求代码审核的时候调用它。回车可以看到 cloud code 正在生成这个 sub agent, 让我们稍等一下。 接下来呢,我们选择这个 sub agent 能用的工具,我们选择 read only tools 就 好,也就是说只能够使用止读工具,其余的都去掉。模型呢,就选择默认的 sonnets, 接下来选择这个 sub agent 的 颜色。 cloud code 在 运行这个 sub agent 的 时候,会使用我们选择的颜色来展示它,我们用绿色吧。 呃,然后呢, cloud code 就 会给我们生成这个 sub agent。 可以 看到这个 sub agent 的 描述呢是英文的,而且里面的内容大概率也不会跟我们期望的完全相同。我们按一下 e 来编辑一下这个 sub agent 的 描述。 这个呢就是 cloud code 给我们生成的 sub agent 描述了,不过呢,它跟我们想要的那个版本差距有点大,所以这里呢,我来给这个 sub agent 整体替换一下,换成适合我们这个场景的。 sub agent 的 结构与 agent skill 类似,一共是分为两部分,上面呢是原数据写明了这个 sub agent 的 名称,描述所使用的模型、颜色等等。下面呢就是这个 sub agent 具体要干的事情了。 呃,我的要求呢,有两条,一个是审查的准则里面有两项,一项是针对 js 的, 一项是针对 css 的。 最后呢会有一个输出格式方面的一个要求啊,我们后面去看一下 cloud code 能否遵循这个 sub agent 的 规范。 呃,填完了这个 sub agent 的 描述之后呢,我们来到 cloud code 这里给它重启一下, 重启完后我们提交请求,给我做一下代码审核。 可以看出 cloud code 调用了我们刚才创建的 sub agents, 并把对应的任务描述传给了它,让它处理。而且看这里 cloud code 是 用绿色来表示这个 sub agents, 这跟我们之前的配置也是相符的,它估计还要再运行一会儿,让我们稍作等待。 它运行了一会儿之后,给出了代码审核报告,可以看出,它检查的内容确实是我们在 sub agent 描述文件里面要求的。这个呢,就是 sub agent 的 使用方法了。 有人可能会问, agent skill 跟 sub agent 很 像啊,它俩什么区别?其实吧,它俩最大的区别就在于对上下文的处理方式不同。 agent skill 运行的时候,它会完全继承并且共享你当前主对话的上下文,这就意味着它执行过程中的每一行日记,每一个思考过程,都会记录到你的当前上下文。 想象一下,如果你让 skill 去审核一个有着几万行代码的项目,这些项目会逐步塞满你的上下文窗口, token 消耗飙升, agent 也会因为记忆过载而变慢变傻。 所以呢, agent skill 最适合处理那些与上下文关联比较大,而且对上下文影响不大的人物。比如说是根据今天的开发过程写一个每日总结之类的。 而 sub agent 呢,则拥有自己完全独立的上下文。当你启动它时,它会开辟一个全新的对话窗口,它在这个窗口里面看的所有的代码,生成的所有的中间分析过程,都不会回传到你的主对话里面。只有当它把活干完了,它才会拿着一个最终的执行结果来向你汇报。 这样一来,你的主对话依然干干净净,永远不会被琐碎的中间过程所冲爆。所以, sub agent 比较适合处理那些与上下文关联比较小,而且对上下文影响比较大的任务。因此, agent skill 与 sub agent 的 最大区别就在于对上下文的处理方式不同,大家要根据具体的场景来选择合适的方案。 下面我们再讲讲 plug in 这个东西。你可以把 plug in 想象成一个全家桶的安装包,有点儿像是 micros 的 dmg 或者是 windows 下面的 exe 文件。它把一系列的 skill, sub agents, hook 等能力全部打包在一起,你只需要一键安装 cloud code, 就 能够瞬间获得整套高级能力。 下面呢,我来给大家演示一下。我们先输入杠 plug in, 进入到插件管理器,这里面呢有三个选项,分别是 discover, 也就是发现新插件 installed 已安装的插件和 marketplaces。 呃,插件市场,我们在 discover 里面找到这个 friend and design, 按回车安装。 接下来要选择安装范围,有三个可选范围,分别是对当前用户生效,对当前项目生效或者是对当前用户的当前项目生效。我们维持默认就好了, 确定后安装就完成了。对,就是这么快。这里简单说明一下, front and design 是 一个用来做前端设计的插件, 一般来说啊,大模型做的前端呢,都有一定的共性,比如说使用深紫色的主题啊等等。这个插件呢,据说可以打破这个共性,让界面看起来更加好看一点,我们等会儿来看看是不是这个样子的。 安装好了之后,我们重启 cloud code, 然后使用 m k d r 命令新建一个目录,就叫做 my to do r。 然后呢,我们进入到这个目录里面, 再启动 cloud code。 启动好了之后,我们输入杠 plugin, 再次进入到插件的管理页面, 然后再选择 installed, 可以 看到 installed 这一个 tab 下面多了一项,就是我们刚才安装的这个 front and design。 我 们按回车看一下它的详情。可以看到这个 plugin 的 主要的组成元素就是一个叫做 front and design 的 agent skill。 既然我们已经安装了这个 plugin, 那 对应的 agent skill 应该也安装了,我们不妨验证一下。让我们回到输入框这里面, 然后打杠 skills。 你 看这里面是不是多了一个叫做 front and design 的 agent skill 呢?所以呢,安装这个插件本质上就是安装了这个 agent skill。 当然,这个 plugin 比较特殊,就只有一个组成元素,有些 plugin 里面包含了 agent skill, mcp, hook 等多个组成元素,你可以把它理解为整套解决能力,一次性全部安装了进来。下面呢,我们就来用用这个 frontin design, 看看它跟原装的前端设计有没有什么区别。 让我们回到输入框这里,输入我们的请求,按照 frontin design 的 要求做一个代码软件,使用 html 来实现。 注意看, cloud code 并没有立即开始写代码,它首先是意识到用户要求使用 front and design 的 规范,于是呢,它会先请求使用这个 agent skill。 呃,我们点同意? 读取完了之后呢,它就拥有了 antropic 官方沉淀的一整套 ui 的 设计直觉。接着呢,它开始写代码了,让我们稍微等一下。 写好了,我们先用 l s 命令看看当前目录下有哪些文件没问题,只有一个 index html 文件。然后呢,我们就可以使用 open 命令来打开这个文件看一下效果怎么样? 大家看这个呢?跟我们一开始写出来的那个 demo 相比,风格就完全不一样了,它的排版更加高级,色彩更加协调,交互呢,也更符合现代审美。 这个就是 france and design 这个插件的力量了。目前 cloud code 的 插件市场还在迅速的增长,除了 ui 设计之外,还有一些针对特定编程语言的 lsp 插件等等。 呃,当然,如果你觉得自己的配置写得非常好的话,也可以参考官方的文档,把你的 skill, sub agent, mcp 等等东西打包成插件,分享给你的团队或者是社区。 好, cloud code 到这里就讲完了,如果我的视频对你有帮助,别忘了点赞关注。我是马克,用最通俗的语言讲最硬核的技术,我们下期再见。拜拜。

我用了一下午,做出了一个完整的网页应用,还部署上线了,任何人都能访问。关键是我一行代码都没写。今天我把整个过程拆解给你,跟着做你也行。整个过程就四步,第一步,明确需求。第二步,生成圆形。第三步,圆形转代码。第四步,部署上线。接下来我一步一步给你说清楚。 先说第一步,头脑风暴,明确需求。这一步是整个流程中最重要的一步,很多人会忽略它,但我必须告诉你,你最终做出来东西好不好,百分之八十取决于你这一步做的扎不扎实。具体怎么做呢?打开 excel, gpt、 cloud 或者 gemini, 随便选一个你顺手的就行。然后把你脑海中那个模糊的想法告诉他, 不用担心说的不够清楚,你就像跟一个朋友聊天一样,把你想做什么给谁用,大概用什么功能,一股脑说出来就行。关键在于你不要只聊一轮就结束了,你要多跟 ai 聊几轮,让他反问你,你没想到的地方,他会帮你想到,你不确定的地方,他会帮你分析利弊。 就这样一来一回聊个十几二十轮,你会发现你的想法越来越清晰了。聊到什么程度算够了呢?最好是能明确到你的应用有哪些模块,每个模块有哪些功能,一共有几个页面,每个页面上大概有什么内容,用户操作流程是什么样的。 当然,如果你觉得一次性选不了,那么全也没关系,你可以先只明确两三个核心的功能,先做出来,后面再慢慢加。 最后让 ai 把你们所有的讨论成果汇总成一份文档,这份文档有个专业的名字叫 prd, 就是 产品需求文档。 好,拿到这份 prd 之后,我们进入第二步,生成原型界面。这一步我们需要用到一个工具,叫 google stitch。 你 把刚才那份完整的 prd 文档扔给 stitch, 它会根据你的需求自动帮你画出应用的 ui 界面。生成之后,你看一下,如果觉得哪里不好看,或者不觉不合理,你就继续跟他说,让他调整。 比如你想要暗黑风格,你就告诉他,你觉得某个按钮位置不对,你也告诉他,就这样反复微调,直到所有页面让你 满意为止。这一步结束之后,你手上应该有一套完整的覆盖所有页面的应用原型。这个原型看起来已经十分接近最终成品了,但他还只是一个壳。接下来我们要把它变成真正能跑的代码。 进入第三步,原型转代码。在 stitch 里面有一个功能,可以直接把你做好的原型导出到 google as studio。 导出之后, google as studio 就 会基于你的原型文件,自动生成一整套可以运行的前端代码。它默认使用的技术栈是 react 加 type script, 你 不懂这些也没关系,不影响你使用。 如果你的项目比较简单纯,前端不涉及什么后端服务器之类的,那你甚至可以在 google as studio 里面就把所有事情做完,在里边预览、调试、修改都可以。 这里特别提一句, a s noodle 里可以一键把代码推送到 github。 这一步一定要做,相当于给你的代马上了个保险,改崩了随时能会退。如果你的项目比较复杂,需要接后端服务,或者需要更精细的调整, 那你可以把代码从 github 拉到本地,用专业编程工具继续开发。这里推荐几个工具, cloud code、 cursor tree 都可以, 选你喜欢的就行。遇到报错不用慌,把报错信息直接扔给 ai, 让他帮你修就行。记住一个原则,小步迭代,改一点,侧一点,不要一次性改太多东西。好!代码搞定之后,我们来到最后一步,部署上线。这一步超级简单,打 开 word 这个网站,用你的 github 账号登录,然后选择你刚才推送到 github 的 那个代码仓库。如果项目需要环境变量,比如一些 api, k 之类的,在部署页面填一下,然后点击部署, webster 会给你生成一个专属的网址,任何人通过这个网址能访问你的应用。到这里恭喜你,你已经拥有一个完全属于自己的网页应用。从一个模糊的想法到一个真正上线的产品,整个过程你可能一行代码都没有手动写过。 最后快速回顾一下,第一步,用查找 gpt 跟 ai 聊清楚需求,输出一份 prd 文档。第二步,把 prd 扔给 google switch, 生成完整的 ui 原型。 第三步,从 stitch 导出到 google a s 九九,自动生成代码推送到 github。 第四步,打开 word, 一 键部署上线。我知道你可能觉得些工具名字听着就头大,但你真正上手之后就会发现, 每一步其实只需要点几下鼠标,跟 ai 说几句话的事先照着做一遍,做完你就懂了。我把完整的提示词、工具链接、原代码全部整理好了,拿到就能直接用评论区扣个六,我免费发给大家。

早上好,家人们,我是鬼子,昨天上午 opus 四点六发了,还发了一个 team agent teams, 我 早上用它做了个视频,说我一小时写了一个 cloud 的 桌面端, 当时我确实很震惊,因为这个事情就是 cloud 的 ui 和 cloud 的 core 的 本身其实连接这块儿很不好做,所以来介绍一下。 我昨天用了一天时间,我给 op 四点六,他给我做成一个客户端了,而且颜值高了非常多,所有的功能全部都齐全。来介绍一下 code palette, 昨天 op 四点六一天做的 cloud code 客户端,目前已经开源。这个客户端主要的能力,它几乎支持 code 的 所有的功能,你的 选择,选择文件夹,切换模型,我们的斜杠命令,你的 skills, 什么调用 skills 都可以。而且它有很多易用性的设置,比如说你可以可生化的去控制你的 cloud code 的 配置文件,你在这儿配置完直接就保存就可以,没有问题。它还支持第三方的 a p i 去配置,比如说这儿 你就可以配置你常用的第三方的 colocode, a p i 也可以。呃,当然,如果你 colocode 本身是授权安装的,或者是你已经改了环境变量,你不需要在这设置,它直接就能提取到。你不用管这个事,格式化的管理你的 skills 和 mcp 文件,还有你的 plugin 直接预览, skills 也可以直接新建,这儿可以新建,你也可以改以编辑和改 skills, 点 m g 可以 直接在这儿修改和预览,还有编辑删除都可以。然后在这里边你可以去 你所有的聊天记录都在可乐扣的最大的一个问题,对于很多小白最大一个问题,我找不着我聊天记录,很多人觉得我的聊天记录其实很有价值,但是我找不着,你用这个就可以找到你所有的聊天记录都保存这样,而且他跟你的文件夹是绑定的, 而右边的话你可以预览你文件夹里所有的内容,这就是你文件夹里所有的东西,它如果是竖的话,它会支持可以预览,但是可以预览, 然后目前只支持了那个文本。哈,后面我兼容一下这个多模态的这个,如果他遇到这个视频和图片的话,就让他打开玉兰,然后你可以改你这个标题,然后也可以去,然后我们这这里边的聊天里边,你看会有会有玉,就是这个你这句话说了多少钱的玉兰? 然后这边新版本可以快速复制,现在我这个是旧一点的版本,新版本可以快速复制,然后你可以在这里快速的查看你的 cologoldoc 的 连接状态,他会告诉你连接还是未连接,如果没有连接的话,你应该怎么去安装 cologoldoc 的? 都是有的, 包括说我们这个删除搜索,基本上跟你看到的市面上的所有的 agent 软件都一样,就等于我实现了一个 co worker, 但是呢比 co worker 更强大,因为它支持 cologoldoc 的 所有的功能, 而且它还是开源的,你可以随便的改。对,这就是昨天用 oppo 四点六和 agent tims 做的可乐扣的桌面端,叫 code palette, 当然我们也可以切换这个明暗模式,都非常漂亮,主要是都非常漂亮,昨天有人喷这个也叫 u i 喷我的人,看看现在这个算不算 u i 朋友们,这个算不算?然后你这个模式切换,这会有 左边会有显示,他会显示当前是什么模式,当前是什么文件夹,什么时候聊的天,同时如果这个聊天这个文件夹正在工作,你看这个文件夹如果正在工作,他会有个红点,你切到其他文件夹再回来,他也会告诉你,他会告诉你哪个文件夹正在工作,就是哪个聊天记录正在工作,这个也是非常好的。 好,就是这些,我们来看一下这个 agent teams 到底是什么东西,就是它可以将一个主的 master 智能体委派给你多个队友,就它会有一个主的智能体控制你多个角色的 agent, 然后让他们相互协助,然后展开调研、调试和构建工作, 然后他们之间是可以互相通信的。每个 a 阵的主 a 阵呢,可以实时的知道子 a 阵的进度,子 a 阵也可以主动汇报给主 a 阵的,所以他们的写作是非常顺畅的。如何起用?其实非常简单,你就找到这个官方文档,然后把官方文档的 扔给他,官方文档直接扔给可乐扣子,让他帮你起用就行,其实就改个参数,他直接就能可以帮你改,然后有一些使用技巧哈, 你可以看到官方文档里有那个使用建议的提示词,就说你要给每个 a 阵子设置角色,每个 a 阵子在干嘛?你可能很头疼,我就是一个任务,怎么我,我还得想这些,你,你还是老问题,你把官方文档扔给他,你就说我要实现一个什么什么任务,你帮我构建一个 a 阵的 teams, 然后你也可以说直接让他帮你去写提示词,写 a 阵的 team 提示词,然后写完以后你审核,也可以说直接让他帮你构建一个 team 词, 让他直接执行就可以了。第二个是前期调研是比较重要的,就是我在昨天写这个客户端的时候,发现前期调研非常重要,在一些客户端选型,在一些架构上,其实你的选错一步,后面就会非常难受。 这里建议就是你要增加一个调研的角色,无论哪个需求都要增加一个调研的角色,让他去查看目前可付用的市面上最好的东西的架构选型应该怎么去结合,要不要去切架构,这些都需要。 哪怕你,哪怕你是说你要去优化 ui, 你 都要去让他找市面上说最好的图标库是什么,然后组建库是什么,这些都要去做。 然后第二个是第三个是 team 的 角色,不要用原来的软件工程去设计,就是我们实际上人是没法变的,你知道就是你,你给你配了什么队伍,你很难配,除非说你开了重新招人干嘛的。但是这里边 team 不是, 就是你可以针对性的设置每一个软件工程的角色,甚至让他有特长。就比如说同样是 qa, 在 去测评逻辑的时候,它就是 code review, 然后去测评那个测评的那那个功能啊,功能逻辑,实现逻辑,然后如果是体验优化,那你这个就可以去搜查视觉,搜查体验就是它,它的长度可能在体验那边同时监 qa 和代码,这个都是可以设置的, 所以不要让自己原有的这个工程能力和工程思路固化。好,这个就是今天发的内容,主要给大家介绍一下昨天发的 logo 的 桌面端 code palette 和我昨天用 op 四点六和 ai team 四的一些感受。 这个时代确实不太一样,就是我发现真的只要你敢给 ai 花钱和敢给 ai 权限,他能做到非常厉害的事情。 你像写个 ios, 写个 macos 客户端,然后非常好用,没有 bug, 所有的功能都能用一天产出来。我以前是根本不敢想的,我觉得很多程序员以前也不敢想。最后说一下这个图标,图标很有意思,为了避免这个 cologne, 我 按所 pick 去,就是即使开源它也有,它也会说你侵权嘛。 所以我做了一个这样的图标,就是从它原始的那个图标的发放射性的那个菊花形状,变成了一个体束的放射性的形状, 你猛的一看有点像,但是他又是一个立体的提速的形状,也很漂亮。你看放在这一堆非常放在这一堆非常著名的工具里边,一点也不违和,而且非常漂亮。好,这就是藏师傅今天的分享,我们明天见。