在之前的视频中,我为大家演示过多种与 cloud code 和 codex 相关的开发工作流,包括 be my method、 spiket、 openstack 等。 最近我又发现了一个更加工程化、更完整的开源工作流 superpowers, 它是一个面向 ai 编程助手的完整软件开发工作流系统。它支持 cloud code, 还支持 open ai 的 codex, 还支持开源的 ai 编程助手 open code。 而且我在 cloud code 中使用 superpowers 开发了一款 ios 的 时间线笔记的原声应用。在这个时间线笔记中,我们可以记笔记, 比如说这里我们输入一个笔记内容,还可以输入标签,在这里还可以选择图像,比如说我随便选择两张图像, 我们就可以点击发布,然后它就会以时间线的方式显示在最顶部,底下是我之前发布的这一些笔记内容,而且我们还可以对笔记进行编辑或者删除,还可以点击放大这些图像。 superpowers 它的功能不是让 ai 随心所欲的写代码,也就是我们通常所说的 web coding, 而是把一整套接近专业工程团队的开发方法论固化下来,让 ai 编程助手在写代码时能够自动遵循最佳的实践,包括先澄清需求,再编辑计划,再分布实现,而且每一步都有检查点, 从而避免 ai 编程助手采用 web 扣顶的方式把项目越写越乱。它最大的特色就是测试驱动开发贯穿始终,作为铁律,强制执行 每个任务都会委派一个新的 sub agent, 这样就不会造成上下文污染。它的实现方式是把研发流程打包成一组可组合的 skills 与启动指令,并通过指令还有技能库,还有工作流编排的组合,让 ai 在 不同阶段按流程做正确的事。 好,本期视频我们将结合实际项目,带大家测试 superpowers 这个开源工作流的使用方式以及使用效果。因为 superpowers 它对 cloud code 的 支持要更好。 在 cloud code 里它可以借助 cloud code 原声支持的 skills 功能以及插件功能,实现一键安装、加载与自动触发。 所以本期视频我们将重点在 cloud code 中来测试这个开源的工作流项目。在 cloud code 中使用 superpowers 这一个插件非常简单。首先我们打开终端命令行,然后进入 cloud code, 再复制官方给出的这一条命令,然后回到 cloud code 中进行粘贴并且执行。下面我们再复制官方给出的第二条命令,然后粘贴到 cloud code 中直接执行。 在 codex 中安装也非常简单,我们只需要复制官方给出的这个提示词,在 codex 中直接粘贴这个提示词并且执行就可以。在 opencode 中安装也非常简单,我们也是直接复制官方给出的提示词,然后在 opencode 中直接粘贴提示词并且运行就可以。 下面我们就可以在 cloudcode 中输入斜杠命令,再加 super, 然后我们就可以看到 superpowers 它支持的这三条命令。 第一条命令是用于头脑风暴,也就是我们只需要简单的描述我们要开发的内容,与 ai 进行苏格拉底式对话,从而帮助我们厘清我们真正的需求。然后这一条命令是用来写开发计划,它能实现编辑二到五分钟的小任务,包含精确的文件路径, 完整的代码片段,还有明确的验证步骤。在这里还包含第三条命令,也就是执行计划,所以他的执行流程非常简单,先是实现头脑风暴,再实现工作区隔离,他会创建新的分支来隔离开发环境, 再实现项目部署化,再验证测试的基线。然后就是编辑计划,当计划编辑好之后,再分配给这些子代理进行开发。它的原则就是测试驱动开发循环,包括写失败测试最小实现,最后清理优化。 而且它的特点就是两阶段代码审查,第一阶段是规格符合性审查,第二阶段就是代码质量审查。当 superpowers 设置好之后,下面我们就可以用一个实际的例子来测试一下使用 superpowers 它的开发流程以及开发效果。 在开始执行之前,我们可以先在 xcode 中虚化一个 ios 的 项目,然后用 cd 命令进入到我们创建的这个路径,再启动 cloud code。 我们可以直接用斜杠命令来开启 superpowers 的 头脑风暴模式,然后还可以直接输入开发需求,这样的话会自动激活头脑风暴这个 skill。 我 这里输入的开发需求就是开发一个个人时间线笔记的 ios 应用, 像 x 一 样能够发布短笔记,按时间线浏览,还能支持图片和标签。然后我们直接运行,先看一下效果,这里就提示使用头脑风暴这个 skill, 然后这里我们就允许他执行这个头脑风暴。像这样的话,不需要我们去执行命令,我们只需要输入开发需求,他就能自动激活 superpowers 的 头脑风暴,这个技能 好,这里他看到了我刚才创建了一个空的 xcode 项目,他需要查看这个项目的结构,这里提示这是一个新的 xcode 项目。然后他说他理解了我们想创建一个时间线的笔记 app。 这里他需要我们来澄清下面这几个问题。第一个问题就是他希望我们如何来创建笔记,包括他提到是采用类似 x 右下角的加号按钮,点击即可打开拽写窗口。 第二项就是顶部拽写栏,时间线顶部始终可见的文本框,直接输入即可发布。然后第三项是下拉拽写,在时间线上下拉即可显示拽写区域。然后他问我们选择哪种方式,这里我们就选择。第一项,我们直接输入一, 这里他很快输出了回答,他说悬浮按钮既方便又能保持时间线的简洁。然后这里他又开始询问我们问题,他这里询问的是笔记在时间线上应该如何显示。 一种就是卡片样式,每条笔记以圆角卡片的形式呈现。第二种就是扁平列表,形式类似 x。 第三种方式就是气泡形式,类似聊天气泡的显示方式。然后这里我们就选择第一种,让他实现这种圆角卡片的风格,我们直接输入一。 紧接着他又开始询问我们笔记中的图片应该如何显示?第一种就是内嵌式展开图片,在卡片内全宽显示,类似于 x 风格。第二种方式就是缩略图,网格 多张图片显示为小缩略图,点击展开。第三种方式就是单张预览,如果有更多图片则显示徽章。然后他问我们哪种方式最合适,然后这里我们就选择第二项,让他实现缩略图的网格,我们就输入二,然后发送。 下面他又询问我们标签如何运作?第一种方式就是在笔记中内嵌标签,第二种就是单独的标签选择器。第三种就是两者兼备,这里我们就选择第一种, 直接输入一,也就是像 x 中一样,输入井号键就能填写标签。好,下面这里他询问当点击标签后会发生什么? 一种就是筛选时间线,仅显示带有该标签的笔记。第二种就是标签详情页,跳转到专门的页面。 第三种就是快速筛选栏,将标签添加到顶部的筛选栏,可以组合多个标签,这样的话这里我们选择第二项,也就当点击这个标签之后,就能跳转到专门的页面,然后我们这里输入二。 好,下面这里他又询问我们是否需要搜索功能。第一种就是权威搜索,第二种就是锦标签搜索,然后这里我们就选择第三项,我们直接输入三,直接发送。 下面他开始问我们笔记编辑还有删除应该如何操作?第一种是向左滑动删除,向右滑动编辑。第二种方式是长按来显示编辑删除或者复制的选项。第三种是点击查看详情,在详情中包含删除按钮, 然后这里我们就选择第三项。好,这里他又生成了一个问题,他问我们是否需要数据的备份, 一个选项就是不需要备份,为了快速开发,这里我们就选择第一项,不需要备份好,这里他就生成了一个最终的方案, 下面这里就是他分析的这个设计,最后这里他询问这个数据模型看起来是否正确,然后我们直接输入正确,然后发送好。这里他紧接着输出了第二部分,也就是这个项目的结构,还有导航,这里包含详细的交互设计, 然后我们直接让他继续去执行。好,这里他又输出了这个 u i 设计,包括时间线,还有这些笔记卡片。然后我们直接让他继续去执行。 这里紧接着生成了这个项目结构,然后他询问这个结构是否合理,并且询问是否准备执行,然后下面我们就可以输入提示词,然后我输的是这个结构看起来很好,并且让他按照 superpowers 的 工作流继续执行, 让他创建隔离的工作区,然后再使用这个技能创建详细的 t d d 实现计划,然后我们直接运行,看一下效果,这里提示他将先保存这个设计文档,然后继续执行这些工作流, 这里他需要执行 get 命令,我们让他继续去执行。这里他开始使用创建工作区的这个技能,我们允许他执行。这里他选用我们将在哪里创建独立开发的这个工作数。然后我们就直接按照他给出的推荐的第一项,我们直接运行, 像这样的话,它就执行到创建工作区,包含创建新分制隔离开发环境,项目部署化,还有验证测试基线。现在开始运行到了写计划的这个步骤,然后我们直接让它来执行, 这里提示调用了这个 writing plans 的 这个 skill, 这里提示它会创建一个综合性的 t d d 执行计划,在这里它提示它将使用 writing plans 这个 skill 来创建这个执行计划。好,这里提示这个执行计划已经存入到了这个文件里, 在这里它给出了两种选择方式,第一种就是使用 sub agent 驱动的,然后这里我们就选择第一种输入一,然后直接发送,这里提示它需要调用这个 skill, 然后我们这里允许它执行,它将使用 sub agent 来执行我们这个计划。 好,现在生成了这些任务,这里一共生成了十三个任务,像这样的话就到了 sub agent 开发的这个步骤,在这个步骤中,每个任务都会有一个 sub agent, 而且会进行刚才我们提到的两阶段检查, 包括规格检查,还有代码质量检查,通过 tdd 循环,直到通过为止。在等待了大概十多分钟之后,他执行到了这一步,他需要调用这个 skills, 然后我们这里允许他执行好,这里提示在执行第一步,验证测试好,这里提示测试成功,下面他需要执行第二步。 好,这里开始执行第三步,这里给出了三个选项,第一个选项就是本地合并回主分支,我们就选一 让他合并回主分支。好,我们这里允许他执行命令。好,这里提示执行完成,这里合并到了主分支,在这里就提示我们可以运行这个项目了,下面我们就可以测试一下, 在 xcode 中打开这个项目,然后我们运行,这里提示构建成功。打开之后我们就看到了他为我们生成的这个时间线的笔记,我们可以先添加一个测试一下, 然后我们点击发布,这里我们就看到了我们发布的笔记,然后我们再测试一下,然后我们点击图片库,点击添加一个图像查看一下,这里我们随便添加一个,然后我们再添加一个图像,然后点击发布,这里我们就看到了我们发布的第二篇笔记,我们再添加一个, 我们再添加几张图像,然后我们点击发布,这样的话这个图像就按照缩略图的方式进行了显示,然后我们就可以向下滑动来查看我们所发布的这些笔记,然后我们再选一篇笔记,点击进入详情。 好,这样的话就进入到了这个笔记的详情,下面我们点一下这个标签,看一下,这里就将带有这个标签的所有笔记显示在了这里,然后我们点击第二篇笔记,然后测试一下删除,我们点击这个删除这里,确认 好,这里删除成功。这样的话我们就在 cloud code 中使用 superpowers 为我们完成了这个时间线风格的笔记应用的开发,而且一次就通过测试没有出现任何报错。
粉丝1.1万获赞3.3万


大家好,本期视频给大家分享一款目前非常火的开源的 ai 编程工具啊,叫 open code, 那 么这个 open code 呢,非常大的一个特色,就是对接了市面上基本上主流的所有的模型啊,你只要输入一个 api apikey 就 能直接使用, 而且它有 code 的 基本上所有的功能,所以说在目前在这个编程社区是非常受欢迎的。那本期视频呢,从就带大家来完完全全的去了解一下这款 ai 编程工具。那首先呢,我们可以从官网上看到它的一个安装非常简单,只要执行 这样的命令就行了,它也支持这种 c u r 这种直接下载,它的这种已经写好了脚本,或者说直接用 n p n 的 方式安装, 那 n p n 方式这种安装的话,你的 note g s 的 版本最好是高一些,那我们可以复制这个命令啊,那么安装完之后啊,你后面再启动或者说欧根库了,它再更新的话,它是可以直接啊打在你的打开里面去直接去更新的,它不需要你再重重复去执行这个命令, 我们可以输入 open code, 然后或者说你后面紧跟着你要打开那个目录,那你如果为空的话,那说明就是在当前这个打开,打开之后呢,你首先可以去啊设置自己的这个模型, 那么这个这里面就包含了非常多的模型,随便搜另一个模型都能搜到,比如说四点七,那么他这边有 open code 赠,那就是他官方提供的这个免费的啊,然后呢你也可以去选择这些啊,收费的啊,就是你自己 买的额外的这种套餐去配置配置进去,比如说我们买了这个,这个啊,智普的这个 code plan 就是 有专门的编码套餐,你选择它的话,输入啊 api t 就 可以了,那你也可以选择别的,就是你有你有这种 api 的 支持,这种 openai 的 这种标准格式的, 那么你也可以选择一个输进去就行了,所以说它是支持市面上所有的主角模型全部都支持。那么你选择完之后呢, 那么这里面就要了解两个非常重要的模式,一个叫 build 啊,在这里看到啊,通过 plan plan 的 话,就会根据你输入的东西来去跟你去沟通,去交流, 那最终呢形成一个比较详细的结果,那 build 呢,直接就是根据你的需求直接去生成代码了,所以我们的习惯是一般用 plan 去把你的需求去了解清楚,然后再去执行,可以用一个例子来体验一下整个过程。比如说我现在需要去创建一个企业官网, 你在打开之后呢,你看这边右边这边会有一个这样的,你的上下文的,这个消耗了 tokens, 然后还有就用了多少百分之多少的上下文,如果大到快快到百分之百了,它这边会自动去压缩, 然后等右边这边还会显示一些比如说 to do list 啊,这些它的一些任务的信息啊,这边能够方便的去看到。 ok, 他 这边已经向我们提问了,就是啊,需要了解一些关键的信息,那么你这边去回答就行了。这边他针对 plan 又列了一个更详细的这个 to do list 啊,在右边呢,可以看到啊,他之前正在执行第一个, ok, 他 这边已经把计划都做完了啊,就是把这些步骤包括技术架构啊,这个文件的目录结构啊,还有这个每个模块的设计方案, 整个的这个设计规范全部都已经在这边列出来了,列出来之后我们希望它能保存文档,因为它在目前这个 plan 模式下面是没有权限去创建代码干嘛的,所以我们要让它来去切换到 build 模式,然后让它保存文档, ok, 它这边的 plan 已经保存起来了,保存, 那下面就是我们要继续,就是说有个非常重要的叫 rules 的 就是规则,那么它这个规则跟我们之前的编程工具像 course 啊 啊, curl code 其实是它们是共通的,也就是说它们会用一个啊 md 文档叫 agent md 来保存这样的一个规则,也就是这也其实也就叫记忆。 那么在 curl code 里面是使用 curl dmd, 那 其他的编程工具其实都适配这个 agent dmd 啊,那在这个文件里面你可以去定义你这个项目是做什么的,然后它你的这个开发的规范是什么?技术价格是什么,然后你的约束是什么,一般是按这种方式去定义,那么你如果说 你自己没有写的话,你也可以通过这个命令啊去初步化一下啊,比如说我们现在目前这个项目是没有任何的这个 agent md 的, 那么你就可以使用这个 enix 这个命令啊,让它来去创建或者更新啊,这样的一个,这样的一个啊记忆的文档。 一般情况下你可以在就是项目初主的情况下,你可以写一个 readyme, 也说你可以介绍一下我这个项目是干什么用的,然后打算用什么呢?记住框架,你就说你自己可以不用去 创建这样的 agentmd 啊,你可以让它来去读取你的这个 readyme 里面的内容,然后读取你当前项目里面其他的文件啊,做一个比较标准的这个 agentmd 啊,或者说你自己去写也是完全可以的。 那我们一般从零到一级开发项目的话,是用通过这种 redmail 的 文档,或者其他的一些技术文档啊,产品文档啊,把它放到项目里面去,然后让他来去帮你去生成一个这样一个比较标准的一个这样的一个文档,那么他这边的话执行这个命令之后啊,会去搜索 call, 搜这个目录下面就是他会去引用一些别的工程里面的这个里面,看一下他合并到这个 a 点 cmd 里面去。 那接下来就是啊,一个很重要的功能叫 skills, 那 么这个技能它也是可以像 qq 的 一样使用技能的。如果你们第一次听这个概念,可以把 skills 啊理解成一个有可附用的一套标准的一个流程。那么 举个例子,比如说有个这样的场景啊,比如说你现在出出差,出差回来你要去报销,那么你要去找你的领导签字啊,你找完你的领导签字之后,你要去财务那边,去 财务根据你出差里面的各个事项来计算这样的金额,那最后把金额打到你的卡上,那么这个就是一个很标准的流程,你每一次出差都是这么做的,那么你就可以把它当成一个 skills, 那 么这个 skills 里面就可以通过啊描述,比如说你这个描述,是啊 专门为了出差而定制的这个 scares, 然后你的流程是要去找你的组长,对吧?找你的财务,然后打到你的银行卡这样的一个流程,那么在你的上下文的交流当中啊,交互当中如果出现了这种出差啊,出差的这种流程,你要去触发这样出差的动作,那么它就会调用这个 scares, 还有一个非常大的功,强大的一个功能是什么? skill 里面是可以去引用一些其他的文件来作为他知识的一个补充,比如说你的财务要计算你的出差的金额, 他可能要去翻阅啊,你们公司的一些规章制度,那么规章制度啊就可以成为这个技能的一个补充文件了,那么这个这个补充文件就当他 你的出差的这个,比如说你是三天会触发 a 制度啊,是五天会触发 b 制,那就会去判断啊,当你三天的时候,他会去加载啊,你这个 这个对应的这个制度了,对吧?然后如果说还有就是你要打款,对吧?打款要去触发这个银行的接口,比如说用技术的话说要触发银行的接口,那么他就会调用这样银行的接口把钱打给你,就这么一个流程封装起来, 而且它的最大的功能或者是优势是什么?就是它上下文是非常紧紧,就说 it 呢,在加载这个技能的时候,它是不会把你所有的文件都加载进去的,它只会把你这个 skill md 里面的这种原数据啊,就是这个 name 名称和描述干什么?就像一个相当于一个缩影一样,把这个你的这个事业的一个非常核心的是在什么场景下,是要什么具备什么条件出发来加载到上下文里面去,然后呢他会根据你的这个 情况出发之后,他会去再会去加载这个 skill md 里面的所有的内容,然后通过里面的内容再去加载我刚刚说那些分支情况,所以说它是一个渐进式的批录,渐进式的引入它的最大的优势就是这个,所以这个场景其实就是一个很标准的一个 skill 的 一个解释的一个 get 你 了。那么在 open code 里面使用 skills 呢?它这边有一个非常特殊啊,它就是它不仅会加载自己这个 open code 里面的这个 skill 的 目录,它也会把,它也会把 cloud 啊,把 clone 的 这个技能也会作为它的一个技能,也就说你在 clone, 如果你在 clone code 里面啊,拥有这种全局的这种技能技能的话,它是可以加载过来的,那这边也会有描述,也会加载到我们的系统里面去,那么我们可以打开这样的目录啊,比如说你现在是一个点 config open code, 这个是它的一个目录里面的话就会有啊,比如说你的这个 skill, 那 么你就要去创建,如果你要去 用 skill 的 话,你就要去创建这样 skill 文件,然后把你的这个写好的 skill 放到这里面去,就是一个标准的目录,那么它也会把啊这个目录里面的这个滚 call 的 啊,这个目录里面这个 skills 加载过来啊,比如说我们现在就有这样这样的几个 skills, 他 是可以加载过来的,我们可以让他来读取一下,看一下他有什么样的技能,我们可以让他来把,看一下他会加载多少技能出来。 ok, 他 这边已经把我这四个啊这个 skills 加载出来了,那么这个是一个,这个, 这个 max j s, 这个是一个不标准的,那这四个其实标准的,因为都是有这种通用的结构了,就是我刚刚这边有一个这样的一个介绍的啊,标准的结构, 那么他这边已经识别到了啊这几个,那么我们可以让他用啊这个技能,比如说我用这个东西来设计一下,专门来做 ui 的, 对吧? 那么他这边就会去读取这样的技能的这个啊里面的内容啊,看,我,因为我其实是已经是精确去匹配,让他去使用这个技能,那么他就会去加载这里面技能的这个脚本啊,或者说这个啊 skill md 啊里面的所有的一切啊,他就会去 利用里面的能力啊,把这个 ui 优化得更好。那这是它这个所以说它是可以去兼容 clock code 里面的所有的 skill, 你 也可以去把 skill 复制到它的这个 config 里面的这个目录里面去试。那么接下来就是啊,也是 commands, 就是 命令,那命令,什么是命令呢?就是你跟 skills 不 可能是什么呢? 它是把一个啊非常简单的或者非常重复的这个操作,把它定的到 md 文件里面去,它是只要你用斜杠就可以引用这个文件里面的所有内容, 它不是说不是,像刚刚的说了,这个 scares 静静式,它是你只要斜杠 m command, 然后它就会把整个命令的内容啊加载到这个上下文里面去, 而且它是不能去调用,比如说外部的这种啊,引用的这个文档啊干嘛?所以说它相当于 skills 的 一个静态的一个子集吧,你可以这么认为,那么在 open code 里面,你可以通过 ctrl p 去加载目前 可以打开目前它所有的这个 commands command 的 命令啊,然后它支持这 command 的 命令呢?有几个非常有用的啊,比如说, 那,比如说我现在打开一个上传文,就是之前的对话记录啊,我可以从这里面啊,选择之后我可以回滚, revert 就是 回滚。 那么 fork 呢?就是从这里面重新再来一下,但是它的代码其实已经产生了,也相当于你从这边拉一个分支,但是它结果是目前最新的那个结果, 就相当于你可以从可以从对话的这个角度里面重新再来一遍。虽然说你的代码已经生成了 fork 是 这个效果啊,不,如果你需希希望在这里面重新开始,那么你应该是用 reverse 回到这里面去,那么它就会回撤所有的修改,那从这边重新开始,这跟 fork 是 不不太一样的, 比如说刚刚那么多对话记录就没有了,回滚到这里面去了,这边的话是这边这就是压缩啊,这边就是压缩命令啊,把上下管进行压缩,然后的话还有一些可以自己去,可以可以看一下 啊,比如说这个,你可以把这个这个思考模式啊,就是这个编 think 的 内容要不要展示,你可以把它切换成不展示也可以,它整个内容就看不到了。如果你自己要定义这个 com 这个目录啊, 这边的话, open code, 那 么你在这边去创建这个 command 这个目录,然后在 command 的 目录里面,你可以去创建啊我们的这个这个命令,那么你也可以让它来给你去创建了,让 open code 来给你创建,相当于它这边的话去。呃, ok, 我 们让它创建了一个这样的 git commit 这个目录,这个命令啊,我们可以去这个目录里面看一下。创建完之后啊,你需要重启一下 open code, 那 么你这边就可以看到 git commit, 你 看 git commit, 那 这边就是创建一个命令了, 一样的,它是可你也可以把这个呃 curl code 里面的这个命令啊,你可以复制到它的这个 command 目录里面去,那么接下来就是 open code 的 这个 plan 就 插件, 那么它这个插件跟 curlcode 里面的插件安装方式不太一样,那 curlcode 安装就是通过啊 github 通过命令的方式直接安装到本地,那么它这个安装方式呢?就是啊使用这种 npm 的 方式,比如说你在这个 opencode 点接受里面去引用这个 插件的话,你是需要先先用这个 npm 去安装,除了这里的呢,它会有一个这样的一个叫生态系统的,里面也有很多这种社区比较受欢迎的插件啊,然后可以去看一下有没有你自己需要的。目前插件的数量比较少 啊,目前不知道就这个 color code 的 插件, open code 里面插件怎么去转换,是直接去拷贝文件过去还是怎么样的啊?目前还没去试过, 那么这边也是非常有非常常见的,比如说像这个欧买欧根扣的目前比较火的这个插件,通过给不同的子代理设置不同的模型来达到一个啊,就是模型的特长啊,比如说你是你是非常擅长做设计,那么这一块设计的工作交给你来做,那这边有一个非常好的一个这样的一个工具, 那么除了终端命令行那种方式呢?也知他也有这种 ui 界面软件,那么你在首页点击这个下载就可以下载完成了,那安装起来呢非常方便,他这个界面也是非常的简洁。那么比如说我现在打开这样的一个项目啊,比如说打开这个项目, 那么这边也是一样的,通过这个啊,我们可以去切换 build 和 pran 两种模式,然后你可以选择去选择不同的模型,在这个模型选择是一样的,就是有其实就是把终端命令行界面化了, 你在终端命令行配置的东西在这边是一样去生效的啊,比如说我们举个例子啊,了解阅读这个项目,我们可以看下它整个交互。 那 oppo 扣的呢?终端命令行这个 ui 这一块基本上介绍完了,就是如果你是一个比较喜欢去配置配置文件呀,或者去定义一些自己的东西呢, oppo 扣的比较适合你啊,就它是有一些硬核在里面的。 然后呢社区现在也是在很急速的发展,然后的话也继承了非常多的东西,他目前发展迭代的速度是非常快的, 他的目标就是什么呢?就是希望把这种可可的优势啊,各种编程工具的优势吸到他那里面去。然后呢可以去使用各种各样的模型就不会受限,比如说像 qq x 只能用 g p t 系列的模型,那 cloud code 当然是 cloud 的 模型是最适配的,而且受限于它,就是每个官方的每一个编程工具啊,都受限于自己的模型的这个选择局限性。那么怎么样去把每一个模型结合到一起去干活呢?那这个就是他做这个的意义就在这里面。

三分钟上手开源 ai 编程神器 open code 厉害!哈喽大家好,我是姚路星,最近有个火爆全网的项目叫 open code, 为了照顾下新人,先简单介绍一下什么是 open code。 open code 是 get up 上面狂揽五十七 k star 的 一个开源 ai 编程神器,号称开源版的卡拉 code, 这是几乎所有主流的一个模型,更绝的是不用登录就能白嫖。免费模型地址如下, open code 不是 最近才出的项目,而让它真正起飞是欧麦 open code 的 插件,直接超进化成终极的一个 ai 编程助手。今天我就来手把手教大家如何三分钟上手这个超级项目。在开始安装之前,咱们先来聊一聊 open code 到底牛在哪里? 一,完全开圆,自由度拉满相比之下, kolog 虽然好用,但主打一个封闭。二、免费模型白嫖 open code 内置了四个免费模型,其中 glm 四点七、 mini max m 二点一、 kologfast。 一, 不用登录直接就可以白嫖。 三、双形态随心选 open code 提供了终端 t u i 和桌面端两种使用方式四,欧曼 open code 插件让 open code 开挂, 配合欧曼 open code 插件使用 open code 可以 获得异步、 sub agent、 关键词触发模式、深度思考、 lsp、 ast 集成、上下文自动管理等能力。好了,废话不多说,接下来手把手教你如何安装并使用 open code。 步骤一,选择你的战斗形态 open code 有 两种安装方式,根据自己的喜好选择方式 a, 桌面端对小白更友好,直接打开官网下载页面,选择你的电脑系统下载安装齐活。 方式 b, 终端 t u i 前提条件是你的电脑已经安装了 node s。 接下来打开终端,输入以下命令,一键安装。安装完之后进入你的项目目录,输入 open code, 看到那个赛博朋克风的 t u i 界面了吗?恭喜你, open code 已经就位了。 步骤二,装配欧曼 open code 的 外挂打开终端执行以下命令过程中你可能会遇到提示说缺少 board, 运行时不要慌, windows 用户和 mac linux 用户分别执行以下命令即可,然后再执行欧曼 open code 的 命令。 安装过程中会依次询问你 cloud 在 gpt 以及 java 的 一个订阅情况,如实回答就好,这样欧麦 open code 会根据你的订阅优化调用策略。 安装完之后,咱们再来看一下如何使用 open code, 基本的使用方式和 cloud code 没什么区别。再来看一下 open code 的 一个使用技巧。技巧一,切换 a 阵模式使用 tab 键就能在 build 模式和 plan 的 模式之间快速切换。 技巧二,关键词触发超能力前提是需要安装 openopencode 插件,配合 openopencode 插件,你可以使用这些魔法关键词完成意想不到的一个强力功能。 技巧三,模型自由搭配 open code 的 最大的优势就是模型自由,比如你可以用 germany 处理前端 ui 任务,用 gpt。 五,处理复杂的一个逻辑任务,用 cloud 处理长文档的一个分析,用免费的 glm 四点七日常开发。 总结一下,今天教给了大家三个事儿,一, open code 视察看原版的 cloud code 几乎支持所有主流模型,完全免费。二,如何安装使用桌面端傻瓜式安装, t o i 端通过命令行安装。 三,如何装配外挂通过 o my open code 插件获得 evaspaint 关键词触发、上下文管理等超能力, 最后的最后 open code 加上欧麦 open code, 绝对是目前开源界最能打的 ai 编程组合。纸上得来终觉浅,绝知此事要躬行,大家赶紧行动起来吧!加油!感谢大家三连谢谢大家,记得关注再走。

好在上一集当中我们介绍的在 gitlab 上的一个开源项目就是 open code, 可以 看到在 gitlab 上它已经掌握了近八万人的关注,但很多小伙伴说这种命令行的方式我用的不太习惯,能不能讲解一下这种客户端的使用方式? 那我们先回顾一下终端怎么使用的?首先复制条命令,在你的啊终端安装,安装完之后呢,这个时候你在你的命令行输入欧欢 code, 这个时候我们进入到了我们编程的场景,也就跟 color code 一 样,在这里呢,你可以切换计划模式和开发模式。那如果你要使用 这种客户端的形式呢?你需要点这个安装,点这个废安装,这时候会切换到你对应的操作系统,比如说我现在是 mac, 他 就会建议我安装 mac, 你 点击安装,或者说你要想安装其他版本的,比如说你是 windows, 那 你点这个 啊,或者是你 sylenx 点这个,那不同的方式啊,大象进庭,如果说你都不想安装,你可以直接在扩展插件中直接去使用,也是可以的,包括 cursor, winsolef, 好 吧,都是支持的,那我们现在将它安装好之后呢,我们就可以打开它了,这时候呢,我们在我们的这个呃 安装好的版本里面可以看到这个 open code, 我 们点开,我们进入到这个 open code 的 客户端界面,这个界面其实有点像那个 cursor, 它需要出手话一下,但是它比 cursor 会更加的简洁。 我们可以看到点这个 logo 呢,它可以去进行一个大字的缩放, logo 下方有一个缩放的图标,对吧?你点一下可以缩放,然后这里呢就是你的工作空间了,有点像那个,嗯, google 的 这个 autograph, 对 吧?有一点点像。然后如果说你想连接各类的这种呃模型的话,你点这个 connection provider, 然后这时候你可以选择各家的模型,那比如说我用的最多的,那还是这个 mini max, 然后选择这个 mini max china, 在 这里呢,输入你对应的 api key, 那 就完成这个,呃,安装了点 submute, 那 可能会更加简洁好。安装完成之后呢,我们可以打开我们的项目,那 这时候我们可以在点编程,比如说我现在呢,哎,可以选择去编程,比如说我问他问题,对吧?你是谁? 那这时候我们就可以向他去提问,那比如说你看现在就回答我了,对吧?还是很快的,然后并告诉我他的响应是什么,是吧?这速度还是非常快的。然后呢,嗯,你也可以在这里呢去, 嗯,开发一些有用的东西,比如说,哎,对吧?开发一个学生管理系统,其实和课本是一样的,但这里呢,有一个好有趣的,就是他这里呢会显示你每次请求用的 token 以及技术会更加的清晰吧,和那个,嗯, 终端还还是有一个很大的不同的啊。这也是给你的一个回答,你可以去查看你自己的一个问题,然后会去反问你,对吧?反问你,你可以在这里去交互,所以我觉得这是和克拉蔻的 最大的一个不同啊,我觉得这个界面设计也挺完美的,因为他每个月都有大量的迭代。好吧,然后你可以在你的选择去是否开发,你比如说我,这一节呢,我们本期视频呢就带大家开发一个斗地主的这个项目来,大家去快速的入门这个这个 哦, open code, 好 吧,然后呢,我们首先把我们提示词啊整理好了啊,这是我们这一次要用到的提示词,我们把这个提示词复制一下,我们直接发给他 啊,我提前已经写好了,然后打开我们的这个 open code 啊,我们给它复制过来。我们这个提示词其实比较简单,就是开发一个斗地主的游戏啊,使用 html, 好 吧,然后我们点击发送这里呢,我可以使用 play 模式做计划,当然我直接开发使用 build 模式 a 开发。啊,这个时候呢啊,这个 open code 呢会思考哎,告诉你,哎,你我在做什么东西,然后呢开发什么东西,对吧?它是一个相当复杂的工程,那我们就在这等吧,等它开发完吧,就这么简单的一个东西,其他都是一样的,那它这个开发我们就快进一下吧,看最终效果。 好,我们可以看到其实整个界面还是非常清晰的,比如说我们可以选择哎去进行发牌,包括可以选择出牌,或者说哎不出,然后你还可以选择去录人的头像,包括这种联机设置还有排行榜,那整体实现还是不错的。 呃,这就是我们使用 open code 的 简单实现的一个斗地主的游戏啊,嗯,是一个联机的游戏。好吧,那就本期视频的全部内容了,我是小刘,我们下期再见。

自从用上了 opencode, 我 卸载了 cloud。 最近 opencode 真太火了,不光有免费的模型,就 连 agent skills 都支持,配合上 oppo 四点五,体验上跟 c c 几乎一样,而且还能使用 google ide 的 模型额度。别走开,接下来教你从零开始安装。对于 mac 和 linux 用户,可以使用官方的命令安装, windows 可以 下载客户端来使用。 接下来以 mac 的 安装为例,首先推荐用 pro 来安装,因为刻尔偶尔会遇到网络问题,打开终端使用这行命令安装 pro。 这是一个 macos 的 包管理工具,等待安装完成后,根据提示选择一个国内的镜像员。 接下来就开始安装 open code, 在 终端中输入这行命令,等待安装完成后,正常在终端中输入 open code 就 可以启动了。这里还是推荐在 vs code 中安装 ide 的 插件,可以直接在 vs code 中启动。 目前可以看到有四个免费的模型,如果想用 anti graphic 的 额度,还需要安装一个 opencode 的 插件。 gethelp 主页上的推荐做法是直接把这个提示词输入给它模型,让它自动给你安装。 安装好之后,输这行命令进行登录,找到 google, 选择第一个登录方式,接下来跳转网页登录就可以了。成功登录后,重新打开 opencode, 在 models 中可以看到这些模型都可以使用了,使用过程非常丝滑,尽情 web 扣定吧。我把用到的所有命令都整理成了 m d 文档,方便大家使用。如果本期视频对你有帮助,可以点赞支持一下。关注我,了解更多 ai 干货,感谢大家观看!

好,刚才呢我们已经把 vs code 它的一个哎应用的字体呢,我们已经设置完成,那么通常呢,我们安装完一个软件之后呢,我们都会去设置它的字体, ok, 那接下来呢,我们就在这个例子里边吧,我们就写一句话,哈喽, word 一般呢,哎,任何开发语言第一个程序呢,都是会说出一句话,就是 hello, word 世界,你好, 那这个时候呢,我们要想去运运行我们这个页面呢,我们去找发现什么呀?发现就没有能够打开这个页面的一个按钮,对不对?那怎么办呢?我们只能去找到我们的这个什么,找到我们的 页面,然后呢右键打开,选择浏览器打开,但是这种方式的话太麻烦,我都用了你这个编辑器了,我还需要那样去打开,那多麻烦呢, 所以说怎么办呢?我们需要去添加一个插件,在哪呢?能耐是在我们这个扩展中心,在扩展中心里边打开之后,大家可以看到我们已经安装了一个面原包在这呢,我们接着去搜索,搜索没有搜索这个 o 喷音 bros, 对吧? b r o w s e 啊,哎,第一个就是啊,第一个就是,然后呢在这我们可以点击安装, 这个时候大家看到这时候已经安装完成了,那么接下来呢,在这他在这个里面啊细节,这他也告诉我们了,如何去用在你的这个 h t m r 页面中呢? 你只要右键就可以去点击这个 open indie for the boss, 哎,就可以打开我们这个页面,那好,那接下来呢,哎,大家注意下,安装完这个插件呢,我们不需要去重启 vsco 的啊,他也没有提示我们,对不对?那接下来打开我们这个页面, 哎,这个时候我们再去右键看看,是比刚才多了两个选项,一个是 open in default browser, 一个是 open in other browsers。 那第一个是什么?就是,哎,你通过一个默认的浏览器来打开我们这段代码,你看我们默认的是谁?是谷歌,你看不就打开了吗?对不对?所以说这样的话就会方便很多,还有他有一个快捷键,什么是 out 加 b, 那如果大家以后熟练的你只需要写完之后, 记得一定要保存啊,一定要保存,然后呢只保存完成之后 alt 加 b 直接就可以打开,哎,这是这个 open in default booster, 下面还有一个是 open in other boosters, 我们可以看一下,也就说在其他浏览器,那比如什么浏览器呢?你可以选择一个火壶,对不对?这是你安装的啊,这是你已经安装的,比如说我选择火壶, 这个时候你看不就在我们那个火狐浏览器里边打开了我这页面吗?对不对?当然通常的,通常情况下我们都是干嘛?哎,在默认这个浏览器,哎,这就是 open in browser 这个插件, 那有朋友说了,那老师,那比如说我不想用这个谷歌,我想换一个,怎么办呢?很简单,这个时候啊,你就找到你的机器,对吧?然后呢你打 打开浏览器,比如说你将谁设置为默认的浏览器,对吧?比如说现在我默认是谷歌,这个时候我可以去设置谁呢?我把这个火狐设置为我这个默认的浏览器,那接下来呢?我打开它的设置, 然后在这呢我就干嘛?我就点击设置为火狐,为我默认的浏览器, ok, 外部浏览器,那在这呢,我就替换成,谁替换成火壶, ok, 大家看到我换了啊,换了之后呢,我再打开 vs code, 然后我 alt 加 b, 你看这个时候它打开的是哪个浏览器,你看看是不是火狐,所以说 vs code 它的这个默认的这个浏览器啊,它是根据谁,根据 你自己电脑中所设置这个木人浏览器而选择的,当然呢,在我的文档里边呢,写的是什么呀?大家可以看一下,我文档里边给大家也解释了啊,在这有一个设置这个木人浏览器, 那么这个方法是在哪?是在哪个版本里面呢?是在我给大家的这个 vs code 一点五,二点一这个版本, 如果你安装的是这个版本的话,那么设置默认浏览器,哎,就是这个步骤,因为现在我们装的是最新的,所以说在这有点不一样啊, 哎,我给大家标注一下,如果,如果你如果 vs code 安装安装的版 本如下,如果是这个版本,那么设置这个默认 默认这个浏览器, 步骤如下, 步骤如下,大家注意一下,如果说你使用的是这个版本,那你就需要按照以下的这个步骤哦, ok, 哎,这就是我们在 vs code 里边安装这个 open emboss 这个插件,以及如何去设置默认浏览器。

最近好多粉丝让我介绍一下 open code 这一款 ai 编程工具,因为近期 open code 这款 ai 编程工具非常火,而且前两天还上了 github training, 通过我这几天的深度使用,发现 open code 可以 在一定程度上取代 cloud code, 而且我使用 open code 为我一个已有的 原声 ios 背单词应用在练习中新增了一个判断题的功能,而且它新增的这个判断题的功能完全没有任何错误的地方,而且可以通过测试。 对于很多无法解决 cloud code 封号问题的用户来说,那么完全可以使用 open code 来替代 cloud code。 因为 open code 使用起来和 cloud code 非常像,无论是它内置的这些命令还是使用方式,跟 cloud code 相比,在使用体验上还有易用,程度上感觉区别并不是非常大。 最关键的是 open code 内置的 api, 我 们可以免费使用 glm 四点七模型,还有 mini max m 二点一这两款国产模型,而且还可以免费使用 xai 的 guoco code, 它支持通过我们自己的 cloud 账号进行登录,或者是使用我们自己的 cloud api。 相比 cloud code, open code 它支持更多的 api 提供商以及大模型。 好,本期视频我们将使用更加贴合实际的案例来为大家测试 open code 这款 ai 编程工具的能力以及效果。 相比 cloud code, open code 完全开源,而且是 m i t 许可证,它支持多模型自由切换,而且具有强大的插件系统。在下期视频中,我将为大家详显是 open code 的 插件系统,而且可附用现有的订阅,而且它还具备精致的 t u i 界面,从而解决了 cloud code 的 闪烁问题, 而且还可以实现多智能体系统,它能完整地支持 lsp, 像 cloud code 它并不能完整地支持 lsp。 虽然前些时间 cloud code 官方已经支持了 lsp, 但是到目前为止在 cloud code 中还是存在很多 bug, 而且官方至今还没有修复 好。想使用 opencode 非常简单。官方仓库这里给出了多种安装方式。对于 micros 用户还有 linux 用户,我们可以直接使用 homebrewview 进行安装,而且它还为 micros 提供了桌面版的安装包,我们只需要用 homebrewview 就 可以进行安装。 本期视频我们将重点使用 open code 的 vs code 插件,像这样的话,就方便我们在 vs code 或者 ctrl 或者谷歌的 anti gravity 中进行使用。为了方便演示,我这里直接使用谷歌的 anti gravity。 在 左侧扩展,这里我们就点击扩展,然后直接输入 open code, 然后我们选中 open code, 点击这里的安装就可以。我这里已经安装完成,然后我们就可以打开 open code 进行使用了。 然后我们就可以用斜杠命令加 model 来选择我们所需要的模型。比如说我这里就选择它自带的 mini max m 二点一模型,然后我们先选择这个模型做一些简单的测试, 然后在视频的后半部分,我们再设置 anslp 的 模型,或者设置 open ai 的 模型。下面我们可以先测试一下,让它分析一个我们已有的项目。我这里直接在 anti gravity 中打开一个已有的项目。 我这里打开的是一个 ios 的 原声背单词应用。下面我们可以先输入一个最简单的提示词,让它分析这个项目是如何实现单词发音的?我们可以先看一下这个原声 ios 背单词应用的它的发音 fm, fm 好, 我们点击它就能够发音 boost boost, 然后我们直接运行,看一下这个效果。在右侧这里我们可以看到它启动了 lsp, 对 代码进行搜索和分析,这里它输出了 这个单词发音,实现了这些代码,可以看到它的运行速度非常快,很快就输出了对这个代码的分析,而且这里输出了用于单词发音的代码,这里还给出了详细的解释。 想开启 l s p 功能的话,我们只需要在我们项目的根路径创建一个 open code jason 文件,我们点击查看一下,然后这里就是这个文件的内容,因为我这个项目是 swift 开发的,所以在扩展这里就写了 swift。 下面我们继续测试,我们可以用斜杠命令加 new 来新开一个 session, 像这个功能就类似于我们在 cloud code 中使用斜杠命令加 clear 来清空上下文,并且创建一个新的 session。 下面我们测试一下,让 open code 为我们这个原生的 ios 背单词应用新增一个功能。在这个背单词应用的练习这里,我们可以让它新增一个判断题,因为目前只有选择题、填空题、听力题。下面我们回到 anti gravity 中的 open code, 然后在这里我们先 commit 一下。 在 open code 中我们就用斜杠命令加 int, 让它来促使化一个 agents 点 m d 文件,我们直接运行就行。 像 agents md 文件,就类似于 cloud code 中的 cloud 点 md 文件,在这里面会包含这些构建命令,项目结构以及约定等内容,这里它正在分析,然后我们看一下它生成的效果。 当我们需要用 open code 对 已有的项目进行改动或者二次开发的时候,我们就要用 innit 命令让它先生成 agent m d 这个文件。好,这里生成完成,我们点击查看一下这个效果。这里包含构建项目运行项目的命令,还包含代码风格指导,还包含项目的这些结构。 当这个文件生成完成之后,下面我们就可以让它来添加功能了。在添加功能之前,我们还是用斜杠命令加 new 新开一个 session, 目前这个模式是构建模式,然后我们可以根据它的提示使用 tab 键切换到计划模式。我们直接按一下 tab 键,在模式这里就变成了 plan。 而在 cloud code 中,我们需要按两下 shift 加 tab, 它才能变成 play 模式。好,下面我们就可以输入一个最简单的提示词,为这个项目在练习中新增判断题的功能, 然后我们直接运行,先让它根据我们最简单的这个需求来制定计划。在这里我们使用的是 mini max m 二点一模型。好,这里提示它需要先了解一下现有的练习模块的结构, 然后制定更加详细的计划。这里它很快生成了这个计划。这里给出了三种方式,然后这里我们就让它实现方案 a。 我 们只需要用鼠标选一下方案 a, 然后就自动复制到剪切版了,然后我们直接按一下粘贴,这里就直接粘贴的是方案 a, 然后我们直接运行 好,这里是它根据方案 a 生成的计划,然后这里它就询问是否开始实施计划,然后这里我们就按一下 tab 键,切换到这个执行模式,在输入框我们就输入确认,然后直接运行,可以看到这里它就生成了开发任务, 现在开始执行任务,在右侧我们就可以实时查看它执行到了哪一步,当执行完成之后,这里就会显示一个对号,正在执行的,这里就会以高量进行显示。 在 context 的 这里我们还可以查看一下它消耗的 token, 还有剩余可使用的 token, 我 们还可以看到它更改了哪些文件,它显示的这个效果是 cloud code 所不具备的,这是它比 cloud code 所具备的优势啊。这里它开始自动构建,然后检查到错误,这里开始修复 好,这里提示构建成功。判断题已经完成,这里给出了详细的总结,下面我们看一下它是否真正实现了判断题的这个选项,这里是判断题,我们点击,点击开始,这里真实现了判断题,我们这里给他选择一下,好,这里选择成功, 这里我们再选择好。可以看到这里我们成功完成了这十道判断题,而且这里还给出了用时,这里还给出了正确率, 然后这里我故意选错了一道,然后这里我们还可以复习这个错题,这个效果实现的还是非常不错的,而且整个过程我们使用的是 mini max m 二点一模型, 它为我们添加了这个功能。测试通过之后,然后我们在 anti gravity 中,这里就可以让它生成一下这个变更,然后我们再点击 commit, 下面我们测试一下在 open code 中使用 cloud code 的 订阅账号来登录,在这里我们用斜杠命令输入 connect, 然后在这里我们就可以选择按 swap, 这里我们就选择第一项 cloud pro max, 好, 这里它给出了一个链接,然后我们完整复制这个链接,将链接粘贴到浏览器中,这里提示需要我们去验证,我们直接点击这里给出了一段代码,然后我们复制这个代码, 然后将刚才复制的代码粘贴到这个位置,再按 enter 键提交就可以可以看到,这里我们可以选择模型, 这里我们就选择最强的 cloud ops 四点五,然后按下 enter 键,好,这里就显示了 cloud ops 四点五,像这样的话,我们就可以在 open code 中来使用最强的 cloud ops 四点五进行测试。 好,下面我们加大难度,我们在 open code 中使用 open spike 这个规格驱动开发工作流,在我们当前已有的这个项目上 继续来新增功能。 openstack 这个开源的规格驱动开发工作流,它非常适合我们在老项目上进行二次开发,进行迭代。首先我们先打开一个终端命令行来安装 openstack, 我 们直接执行 openstack 官方给出的安装命令, 也就是这一条命令,我们直接复制,然后粘贴并且运行,下面我们用这条命令校验一下它的版本号,这里是零点一八点零版本,下面我们就可以执行这条命令来出示化一下 open spike, 然后这里就到了安装选项,这里我们就找到 open code, 然后按一下空格键来选中,再按一下 enter 键,这里 openstack 就 安装成功了,我们需要重启一下 opencode, 下面我们就可以按照 openstack 给出的这些步骤,先让它完善 openstack 中 project md 这个文件, 我们直接复制它给出的提示词,粘贴到 openstack 中,然后我们直接发送就可以这里 openstack 运行完成,下面我们就可以输入,让它为我们实现哪些功能,我们就让它为我们实现在这个背单词的 app 上新增一个多选题的功能, 下面我们就可以输入提示词,像我这里用的是英文提示词,大家也可以用中文提示词,因为使用 colognoop 四点五使用英文提示词效果会更好。我这里输入的英文提示词就是让它在这个背单词的 app 上 新增一个多选择题的模式,请为这个功能创建 open spike 变更题案,然后我们直接运行就可以这里提示这个题案已经创建完成,而且我们可以展开来详细的查看它为我们生成的这些任务。 下面我们就可以在 open code 中使用 opensback 来执行这个任务,然后我们直接运行这条命令,然后在这里我们就可以看到它生成了这个计划,现在它开始执行计划,在右侧我们就可以实时查看 token 消耗,这里已经完成了代码编写,现在这里提示构建成功, 现在开始运行测试,在右侧任务列表这里我们就可以看到它正在写单元测试,这里测试完成,并且这里的任务也都运行完成, 现在它需要更新 task m d 文件。这个任务执行完成,在右侧我们就可以看到这个 token 消耗,而且还可以看到它更新的这些文件。当这些任务完成之后,下面我们就可以用 opensback 命令让它进行归档,然后我们直接运行就可以 好,这些变更成功归档在 anti gravity 中,这里我们就可以让它生成变更,然后提交。下面我们就打开这个背单词的 app, 看一下它是否为我们实现了多选题的练习测试。我们点击练习,可以看到这里有这个多选题,我们点击进入,然后这里点击开始 好,这里需要我们去选择,然后我们再点继续 好,这里我们选择正确。好,这样的话我们就完成了这十个多选择题的测试。 像这样的话,我们就在 open code 中使用 cloud ops, 四点五再结合 open spike 这个规格驱动开发工作流,就成功完成了在我们已有的 ios 原声项目上为我们新增功能。 而且在 open code 中,这种 token 消耗,还有任务执行以及文件更改我们都能一目了然,而且它还支持 lsp。 通过测试可以发现, open code 几乎不需要任何学习成本。如果大家习惯使用 codex 或者 cloud code, 那 么也能一分钟之内就能上手使用 open code。

下载 vs 扣的建议直接去他的官网下载,就是这个 code, 点 vsue 店的 com, 如果说你去其他的地方下载的话,他的版本不一定最新的,进入他的官网之后,他会给你推荐你的操作系统对应的版本。如果说你要下载其他操作系统的版本呢?你可以点这个留左边这个 stabil 是一个稳定版本, insiders 内侧版本,建议使用 stabilis, 直接点击下载 保重文件。如果你这里下载的速度比较慢,你可以复制他的这个链接,然后打开迅雷,速度还是很快的。 绕上之后呢,直接安装,同意下一步,下一步安装 可运行了。他的默认的语言是英文版的,他会推荐你使用啊中文语言包,如果这里没有推荐的话,你可以点这边的扩张按钮,直接这里搜索。 前列似的,一个是简介中文,第二个是繁体,我们安装,安装完成之后需要瑞萨一下, 这样子就全变成中文的语言界面了。下个视频我们聊一下有些什么好的扩展包可以丰富这个编辑器的。

open code 这个开源项目最近很多人都在聊,说是 cloud code 的 平替功能呢,和 cloud code 也是一模一样的,所有模型都能用,但是对于我们普通人来说,我们要怎么用? 网上评测我看了不少,但是我还没有看到有人用它完整的演示一遍开发流程,所以今天我来做这个事情。 我会用一套平时我在 cloud code 上使用的开发流程,结合 open code 从零开始开发一个服装电商的模特换衣应用,带你走一遍完整的流程,顺便也测试一下它和 cloud code 到底有什么区别。那我们现在开始 这套方法我之前已经分享过两次了,就是这一期和这一期。现在呢,我把它迭代到了三点零版本。整体流程是这样的,首先用毒蛇产品经理技能收集需求,他会通过追问来完善细节, 然后生成产品文档。接着用 ui 提示词,设计师技能根据文档生成原形图的提示词,然后把提示词丢给 nano banana 生成原形图,再用 google ai studio builder 来开发前端,最后用全站开发工程师技能完成后端的开发和后续迭代。 整个流程是由一个主控的项目规则文件 agent 点 md 来进行统一的调度。这个场景包含了需求收集、原型设计、前端开发、后端改造、功能迭代,基本囊括了日常开发的主要环节, 所以用它来测试,基本可以很好地展示 opencode 的 完整的开发流程。打开 opencode 官网,点进下载页面, opencode 有 四种使用方式,在终端里使用,客户端使用、安装 ide 插件或者集成到 github 这类平台。 我们今天讲的是第一种直接在终端里使用, mac 用户建议安装第一条命令, windows 用户建议用第二条。那我是 mac, 所以 复制第一条命令,按 command 加空格,输入 terminal, 打开终端,把命令贴进去,回车直行, 然后等待它安装完成就行了。这里可能会有一点慢,那就看你网速了。好, open code 我 们已经安装完成了,接下来我知道很多新手看不惯终端的命令行,所以我们就在 cursor 里面启动 open code, 应该会对你友好一些。打开 cursor, 在 terminal 里输入 open code 启动, 启动之后有个快捷键,你一定要记住 ctrl 加 p, 按下去会列出所有的命令。大部分命令可以在之后慢慢熟悉,但有一个现在你就要知道,就是 a 键下面的 switch model 切换模型使用后你会发现有很多模型可以选, 像 chatgbt, 五点二, gmail 三 pro, mini max 这些都有,带有 free 标记的,是免费的。其他那些常用的模型需要你自己去配 api, 想用别家的服务,可以按 ctrl 加 a 添加供应商那支持的还是挺多的。配置也很简单, 比如你想用 google 的 api, 那 就选 google, 然后把 gmail 的 api key 贴进去就可以了。接下来我们来开始配置,这个逻辑和 cloud code 是 一样的, cloud code 的 系统文件夹是点 cloud, 那 open code 这边就是点 open code, 然后这是我提前准备的技能文件, ctrl c 复制,回到 open code, 在 点 open code 的 这个系统文件夹下, ctrl v 粘贴,这样就一次性导入成功了。一共三个技能, 独设产品经理、 ui 提示词设计师,还有全站开发技能。接下来是导入项目规则,在 cloud code 里,顶层的项目规则文件叫 cloud 点 md, 那 我们这次用的是 open code, 它的项目规则文件要写成 agents 点 md 文件名不同,但思路是一样的,都是顶层的项目规则。 回到 open code, 把点 open code 的 这个文件夹收起来,然后 ctrl v 粘贴,这样项目规则就导入了。 注意看 agents 点 md 这个文件和点 open code 这个文件是在同一层级的,这点跟 cloud code 不 太一样。 在 cloud code 里, cloud 点 md 是 放在点 cloud 的 这个系统文件夹里面的,这个很重要,放错的话顶层规则就不会被加载。再来看一下文件结构,这是整套开发流程用到的技能文件,是我平时开发应用和小工具时用到的,当时用的是 cloud code, 所以 cloud 点 md 这个名字没改。 不过没关系, open code 完全兼容,能自动识别好技能和项目规则我们都已经导入完成了,接下来我们来走一遍完整的开发流程,用 open code 来开发辅助电商用的模特换装应用,启动主 agent。 这套开发流程分为几个阶段,每个阶段都有对应的指令 输入 slash help, open code 会列出所有的指令,包含从需求收集、生成原型图、提示词到开发和本地运行的全过程。 接下来我告诉他开发一个网页应用,帮助服装电商生成模特图,支持更换模特的姿势动作,调整服装的配色,还能更换新的搭配方案。声控模型用 gemma 三 pro image preview, 也就是 nano banana pro。 收到需求后,毒蛇产品经理的技能被自动调用了,然后开始针对需求进行追问,上来就说,别给我废话,让我选一个核心,那毒蛇味已经出来了, gbt 五点二骂起人来也是不留情面。 我告诉他,目标用户是独立设计师,功能范围需要支持声图姿势调整、配色搭配和编辑功能。确认没问题后让他继续。 那进入到第二轮追问,他问参考图是什么形态,这是个多选项。那我的设想是,上传的参考图可以是模特的人像照服装平铺图,或者是搭配平铺图, 控制方式可以用 prompt 文字指令,也可以从姿势预选库里面进行挑选,同时还要支持配色面板调色。确认没问题的话我们继续。 好。现在进入到第三轮的追问,问的是账号和付费模式,这个工具是我个人用的,所以不需要付费功能。那存储方面,现在是 mvp 阶段,主要是为了快速演示,暂时不考虑保存,先跳过 确认没问题的话让他继续。好。接下来是第四轮的追问,人脸一致性怎么处理?我的想法是核心需求是保留参考模特的脸部特征,成片的标准是多选, 一个是白底电商主图,一个是澎湃的质感效果。确认继续后,这个时候他已经收集到了足够的信息,开始直接编辑产品需求文档了。 好!运行结束后,他帮我们创建了两个文件,产品需求文档, product spec, 还有变更记录 product spec change log。 先看产品需求文档,因为我们的需求比较简单,生图工具和布局交互也都比较常规,所以他没有问太多交互和布局的细节。 那再看一下圈子 log, 现在是项目的初试阶段,变更记录里也只有一条初试记录,接下来我们有两个选择,直接开始开发,或者根据产品需求文档去生成 ui 原形图的提示词。 原形图提示词是可选的,但我觉得这一步能大大的提升最终效果。正好给大家演示一下输入指令 ui, 让它使用 ui 提示词设计师技能,生成圆形图提示词 好,完成了,提示词保存在了 ui prompt 这个文件里。那我们打开看一下,这就是生成的页面原形图。提示词用法也很简单,直接把提示词复制发给 nano banana pro, 生成产品原型就可以。 目前一共生成了三个页面,主页面、图片预览页面,还有报错页面。接下来我还要做一件事情,这套流程有两种用法, 第一种呢,是生成好原型图后,直接把图发给他,让他在 open code 里面进行开发。那第二种呢,是用 google a s studio 里面的 build 来开发,本期我就会演示第二种,这种方法对新手或者是刚刚接触外部抠钉的人来说,更容易上手,效果也更好。 我告诉他,你先别管 apikey 的 事,我会用 google a s studio 开发前端,开发好了之后,我会把代码发给你,你再帮我改造成前后端分离的项目。 他已经明白接下来要做什么,怎么配合我们,而且还直接给了建议,比如用 google a s studio 开发的话,回来时需要教给他哪些内容,或者开发好了之后让 open code 继续迭代,需要提供哪些信息和资料好。原型图我已经提前生成好了, 现在这个页面是 google a s studio 模型,选的是 nano banana pro。 我 做的事情很简单,把刚才生成的三个页面的提示词完整的贴进去, 顶部加一句话,帮我生成一个三宫格竖向排列的长图,这是一套电商模特试装的网页应用,然后他就开始帮我生成原形图了。 那我们放大看一下,这三张图基本上是按照我们的需求文档里的布局和功能描述生成的,当然后面开发的时候, ai 会拿这个图作为参考,并不会完全的百分百复刻,所以这一点你要注意。为什么要用 ui 提示词来生成原形图?主要呢有几点核心考虑, 第一是速度快,外部口令不需要一开始就追求完美,先把架构快速的搭起来,然后后面再慢慢的迭代 ui 和交互。 第二呢是为了好看,如果你不给 ai 参考图,光靠文字描述让它开发出来的页面通常都很丑,不管你提示词写的多好,在我看来都丑的要命。 所以用 nano banana pro 直接生成原形图设计其实很好,再结合我们这套方式,页面好看,功能呢也符合我们的产品需求,一箭双雕。这就是为什么我觉得这一步非常重要,想要给大家看一下。 好,那原形图已经有了,接下来我们打开 google a s studio, 先开发前端,我们先完整的复制一下 prods bike 里面的产品需求,然后回到 google a s studio builder 告诉他,让他帮我开发一个模特换装的应用, 先把 products back 整个贴给他,然后把刚才生成的 nano banana pro 的 原型图也贴上去。 ai 能力选择这边我们选择 nano banana powered app 和 generate images with nano banana pro, 因为我们的应用需要生图能力,必须调用 nano banana 检查没问题,点击 build 开始。接下来它会自动读取文档和我们发过去的截图进行开发。所以我们稍微等待一下 好,开发完成了。有几个注意事项,第一,记得右上角选择一下你的 gemna api key, 否则无法使用 gemna 三 pro 或者是 nano banana pro 这些付费模型。第二,我们来看一下界面的还原度, 那开发出来的界面和原型图已经有九层相似了,布局,色盘选择,模特姿势这些功能都有。好,我们来测试一下。先上传一张模特图, 再上传一张 gucci 的 最新的女装,一条红色的裙子,风格选择澎湃风格,输出四张模特姿势,选动态走路提示词就先空着,先不填,我们点击生成 好,生成完成了。放大看看,模特的真实感几乎无可挑剔,澎湃的风格,无影墙,走路姿势,人物和衣服的还原度都很好。接下来看一下代码,点击 code, 这就是他开发的所有的前端代码。把代码打包下载,然后找到刚刚我们下载的代码, ctrl c 复制,回到 open code, ctrl v 粘贴代码就导入了,然后告诉 open code 前端已经开发好了,代码放在了这个文件夹里, 这个时候他会问原型图有没有,你需要提醒一下他前端已经开发好了,直接看代码就行。后端部分他建议用 node 加 express, 但我决定选 next, 点 j s 看看他怎么处理, 确认没有问题,让他继续执行。等待开发的时候,顺便说一下,为什么我们要前后端分离。 google a s studio builder 开发出来的是存前端代码, api key 是 直接写在前端里的,那这样部署上线 api 就 会暴露,任何人都能看到。所以我们需要把 api 调用挪到后端,前端只负责界面和交互, 而且后端除了负责调用 api 以外,我们后面迭代的时候,比如要加全线连数据库,或者是业务逻辑,这些也都需要放在后端的 好开发完成了。不过它提醒我们,我们发给他的前端代码的基础是 vt, 不是 next 点 gs, 所以 这一版它用了 express 做后段,因为这是最小的成本,最小的改造方案。但如果我们坚持要移到 next 点 gs, 它也是可以帮我们执行的, 那到这里项目基本就快速完成了。所以接下来我直接输入指令 slash run, 让它在本地跑起来。 ok, 我 们可以看到项目它说启动了,但是显示的状态不正常, 不过没关系,他说他可以帮我们定位和修复好。修复完成了,原来是三千,这个端口被我另一个项目占用了,那他帮我们改成了三零零一端口启动, 如果你想随时停止,可以输入 slash stop, 就 会停掉后台的所有的服务。 ok, 项目启动了,界面功能布局都保持了原样,没有什么问题。 项目虽然跑下来了,但是我们不可能一步到位,所以接下来我们来测试一下迭代功能,我要给他加一个新的需求,我告诉他我想增加一个在页面上配置 api, 并且进行校验的功能。那针对这个功能,他开始追问,首先问我 api 怎么保存,那我选择肯定是存在后端, 然后问我校验的方式,这里我选择的是真校验,需要他发个请求,看看 api 能不能跑通, 确认没有问题,开始开发。顺便说一下我使用的这套开发流程,产品经理和全站开发这两个技能会循环配合,每次新增或修改功能,主 a 阵的会先调用产品经理技能,进入到迭代模式,通过追问补充并且更新产品需求文档和更新日期, 然后才调用全站开发技能去实现代码。这样做的好处是文档始终和代码保持同步,不管是日后自己回顾还是重新开窗口让 ai 接手,都能快速的了解项目的全貌。好,完成了,他说已经更新了产品需求文档和更新日期,那我们看一下更新的内容。 产品需求文档这边第四十九行辅助功能下面插入了 gmail api 保存交换的需求。再看圈趣 log 这边新增的 v 一 点一版本,内容是配置 api key 和交换功能。我们回到网页,应用,左下角已经出现了配置 api key 的 功能,我把我申请的 gmail api key 贴进去, ok, 交换成功,没有问题。好到这里,我们整个的开发流程差不多就走完了。最后我来聊聊我用下来的感受。 先说优点,第一,模型自由度非常的高,这是 open code 的 最大的优势。 cloud code 您只能用 cloud, 对 于使用其他的模型,它基本是严防死守。 open code 呢,你可以随便切换,想省钱就用免费的模型,想要效果更好就换 cloud 或者是 gbt 五点二,灵活很多。 第二呢,是整体的体验和 cloud code 非常的接近,指令逻辑既能加载开发流程,基本和 cloud code 是 同一个思路。 如果你用过 cloud code, 那 上手 open code 几乎没有任何学习成本,不过缺点也是有的, open code 是 开源项目,在使用 agent 或者 skill 的 时候稳定性就会差一些, 特别是多 agent 协助主 agent 调用 sub agent, 或者是主 agent 调用 sub agent 在 调用 skill 的 时候,这类场景复杂的话, cloud code 的 表现依然是最稳定的。 但总的来说,如果你预算有限,或者是想尝试其他的模型, open code 目前是最接近 cloud code 的 开源替代方案。而且说到底,工具本身作用其实有限,真正起到决定性作用的是你在用的那个模型,这才是最重要的。 好,以上就是本期的全部内容,如果对你有所帮助,别忘了点赞以及加入废台俱乐部,这对我们频道真的非常重要,那我们下期见。

我们后面要写正式的商业项目,所以前面那种用浏览器和记事本的编辑方式就不行了,我们要有正式的软件和环境,这一切我主要讲一下 vs code 的安装和使用,以及 note、 zs 和 get 的安装。 好,我们来到浏览器这边,打开这个网址,可以用 vsc 点 midol 这一点 com 跳转到这里, 这个网址就是我总结的一些我们必修阶段需要的一些软件和环境。然后浏览器的话安装很简单,所以就略过,你们这边尽量用 a 值,用不了的用可用,我这边都有链接去下载安装就可以直接使用。 然后下面我先讲云环境,云环境就是在厂商服务器上的环境,当你的电脑配置不行,或者说你自己安 装有问题的时候,那么你就直接使用云环境,云环境会默认配置好所有东西,我们直接使用就行。来这里我们先看 colod studio, 这个是腾讯云的, 点击登录,注册后可以直接用微信登录。进来之后我们看下面这个新建工作空间,点击新建第一个 on one, 他就会包含所有的语言和环境, 然后我们给他命名二一零一,选择仓库为空,然后创建,创建好后双击进入,等待一下就会进入。 我们先把模板关掉,然后左边这个就是文件夹栏,右边是欢迎页,我们先关掉,点左边新建一个文件,命名为 ext, 点 html 可以看到创建了一个 html 文件,输入 html 有自动提示,选择这个 htm 五,点击后就会自动补成一个空的模板。 我们先写一个 h 一标签,然后为了在他这里面能看到这个网页效果,我们来这边的插件市场拓展安装插件,这边选择 live, 可以看到有一个 live preview 插件,点这个安装,呃,他这个有一点问题,就是不会实时改变,所以我们退出一下再进来, 然后右键就可以看到这个来无 preview 选项数,就是展示,点击后右边会出现提示,点这个三千端口信息,打开内置预览, 可以看到这个网页出现了,我们修改文字之后刷新一下,可以发现它实时的修改 好这个 live preview 插件,他会帮助我们在云环境上起一个网站服务,然后看到网页,我们也可以在这边创建一个新的 htm 文件,用同样的方式给他输入模板, 写个 h 一标签,输入我是第二页, 再回到 index 首页这边输入 a, 创建一个 a 标签,把他的网址改成第二页的地址,输入前往第二页, 在预览这边刷新一下可以看到这个链接标签,点一下前往可以看到 跳转到第二页了,这就是两个网页之间的跳转。然后还有一个是可乐的 id, 这个是阿里云的,用阿里的账户登录之后也可以创建新的空间,这边我就先提前创建了一个, 这边的扩展是 live silver, 前面那个在阿林不能用,但这两种插件效果是一样的。安装后点右下角这个 go live, 它会自动打开五千五百端口, 这个单口是什么呢?比如说 ip 地址是你的小区,那么单口就是你小区的门,北门、南门这样, 这样每个端口代表一个门,所有的网络请求会从这个端口中进来,出去可以看到这边也是一样,实时修改后刷新这个网页,这个域名是云环境给的,可以暂时。 另外这两个是国外的,英语和网络不好不要看,有需求的同学自行选择。 下面是主要的问题,就是很多同学下载 vs 扣的下载不下来,因为网速很慢,国外的地址,然后我这边就用了加速连接。你可以先选择你的电脑版本,然后点击这边匹配你电脑的版本,然后你就可以看到他这个下载速度非常快。 下载下来之后打开点击,我同意,然后勾选这个全部,然后再下一步,下一步安装,安装好后直接完成运行就可以。刚进 来的时候很多同学说全是英文,看不懂,其实你只要稍微等三秒钟,右下角就会出现这个安装语言包提示,并显示语言更改为中文简体,你点安装并重启就可以了,重启之后看到已经是中文。 另外在这边点击插件市场也可以看到这个中文插件,我们先卸载掉,假如说你没有看到右下角那个提示,那么你可以来这边插件市场,然后搜索 chinese 中文,然后点击安装,重启一下就可以看到中文了。 visco 的左边依然是文件夹栏,我们点打开文件夹,可以选择桌面文件夹,当然你们也可以选择其他文件夹。我这边为了显示方便,就用桌面点开后 勾选这个信任,这个暂时不用管,也不用理解,勾选就行。可以看到左边已经是打开了桌面文件夹,这里面有我们桌面上的所有文件 index 点 s t m, 在这边是我们前面写的那些东西,然后我们再来安装一下插件,让使用更方便, 可以按照我列的这个目录去搜索安装。首先安装 preter 代码美化插件, 这个插件的作用就是会格式化美化你的代码。我们写代码的时候要有空格,要有换行之类的, 我们自己写的时候如果一直按空格按回车太麻烦了,对吧?所以我们要用这个插一键,让他帮我们自动格式化。在文件夹中右键可以配置默认的格式,选择格式化文档。 如果我们用自带的格式化功能,他会格式化成这样子,我觉得这个自带的 htm 格式比较难看,然后用这个 party 插件他就更好看一点。 然后安装一个翻译插件 wsen translate, 这个插件呢是我昨天找到的一个神器,它有一个翻译悬浮功能,也有两个快捷键,我们看一下 就是双击一个单词选中,然后把鼠标移上去,就可以看到上面出现的中文翻译,换一个 单词也出现了翻译宽度,对吧?这个就非常非常方便,大部分的代码其实都非常简单,只不过是我们看不懂英语罢了。所以的话有了这个翻译插件, 我们就可以看懂代码。然后他有两个快捷键,一个是 l 特加 t, 可以自行输入中文,然后翻译成英文,也可以用 l 特加 w 把选中的单词翻译成中文。 还有一个比较常用的功能是搜索跳转,这个功能是什么呢?就是我们碰上一些东西不会的时候就要去搜索,对吧?但是每次复制粘贴太麻烦了。 这个插件安装之后就可以一键跳转到搜索,我们这里安装,然后回到页面,选择一个单词,右键可以看到它上面有个 sexy online, 就是在线搜索的意思,默认是用谷歌搜索,但是谷歌大部分人上不去,所以要选这个 switch 换到这个病,推荐大家以后用病搜索,然后就可以看到直接跳转到搜索页面,不用复制粘贴,非常方便。 还有一个传斯类唐恩赖自动打开翻译网站也是比较方便, 但是我们有了那个悬浮翻译就不怎么会用这个,我们因为刚安装他这个插件有点问题,需要重启一下,按 f 一输入 restart, 选择插件速度重启可以重启, 然后点这个设置小图标就可以打开这个插件的设置。我们这边把他的默认翻译情改成 并。然后还有一个配置是显示在状态栏,勾选后翻译会在最底下的状态栏显示,比如说我们现在双击单词之后,可以看到右下角出现了翻译,这个也是比较方便,但是有点乱糟糟的,所以我还是把它去掉。有需要的同学可以打开, 所有插件的自定义设置都是这样的,点那个设置小图标,然后还有一个来 preview, 就是我们前面语文环境刚刚使用过的,在本地更好用。 搜索之后安装插件,它相当于给本地起一个网站服务器。以前我们打开网页,其实不是服务器打开,是用文件系统打开,然后这个打开之后可以看到是用使用服务器去打开 这里幺二七点零点,零点一是我们本地网络的 ip 地址,然后这个网站服务器在三千端口上,端口呢?还是那句话,就是相当于小区的门,所有流量都要从不同的门里进来,出去 有八零端口,有四四三端口,有六千端口,有五千端口,有三千端口,这样都可以。 然后再安装一个 vs code icons 插件,这个东西就是美化我们的文件的小图标,可以看到我们这边的小图标就变成了这样美化的啊,但是我觉得其实也没有,所以我就卸载了,你们需要的可以自行安装。 除了功能插件,还有一些主题插件,比如我们可以搜索 theme, 会出现主题插件,按 fe 输入主题,可以打开主题的设置,他这边 有很多内置的默认主题,比如说如果你喜欢浅色,那你可以选择浅色,如果你喜欢红色,可以选择红色,但还有很多其他的颜色,你们可以按照自己的个性,自己的喜好去配置,然后搜索出来,有很多主题,你们都可以去查看它,然后安装使用, 比如你看这个 atom 就是这样。 还有 winter is coming, 叮咚将至, 还有这个 material 主题,反正各种各样的漂亮主题,你们喜欢哪一个就用哪一个,这个是看你个人喜好的,随便都可以。 ok, 大概就是这样。然后插件的话,我这 暂时说这几个。再就是一些小配置, 怎么配置呢?就是点文件,点首选项,点设置,然后就会打开这个 vs code 的设置页面,我们先把 auto sale 打开,它会自动保存,当我们写完代码后,让它自动保存,就不用按 ctrl 加 s 了。下面是 fun size 字体设置大小, 可以看到这边显示字体会变大,这个就看你自己的喜好设置了。 还有一个是 for my town see you, 公选之后,保存文件的同时会自动格式化代码,你按保存它就会自动美化你的代码,不用你每次都右键去 点击格式化,很方便。 由我们这边来试一下。先写一个 d 五标签,可以看到 ctrl s 保存后,他会直接换行,而不用我们去敲回车。 然后再写一个 p 表现,他和前面一样, ctrl 加 s 保存后他会自动换行,不用我们再按回车,这样你就很方便。 然后再设置一下默认的格式化插件,我们选择 preteer 就行, 然后再设置一个林可以迪厅勾选 之后他会有什么效果呢?比如我们写的这个 p 标签,他前后两个开始和结尾,有时候我们写完前面的标签就忘了改,后面会出错,有这个之后我们改前面,他就会自动把后面的标签也改掉,这个写 html 的时候非常方便。 还有一个问题就是新版的 vs code 会对容易造成误会的标点符号进行提醒,比如说我们中文的分号和逗号等。 出现这个黄色的小框,如果你想去掉它,那么鼠标移动到上面,然后点调整禁运就行。 好,说完了 vs code, 再说一下安装这个 no 的 gs, 它是运行加挖 scrap 的后端框架,我们 进来这个链接之后,可以根据你的电脑选择不同的安装包,我这边就选择我的电脑是六十四位,然后点击打开,哦对,我这边因为原先已经有,所以的话这边是不男装更低版本, 我们也可以去 no 的 gs 官网去下载,这边搜索 no 的 gs 就会有这个官网,这边可以下载两个版本,我推荐你们下载那个 lts 的小版本,因为像这个最新的,他有时候会有一些不稳定的情况。 然后我们这边下载下来之后,点击我接受,再一直点 next 就可以一路下一步,然后点 install 就行,我这边就取消了,因为我有你。安装好后记得重启一下电脑,然后再安装这个 gate。 get 的话是版本管理系统,我们以后写代码需要版本管理是需要安装这个的。好,进来之后还是按照你的电脑是三十二位还是六十四位去安装一下,如果你实在不知道是什么,那你就安装三十二位也是可以的, 因为六十四他可以兼容。算上好像下载太慢了,我就不下载了,你们慢慢等。重启完之后回来这边点击新建终端,可以打开这个中端框,然后输入 no 的杠 v, 他会出现一个版本号,就是说明 no 的 gs 下好了。 其实云环境那边的配置和本地差不多,云环境基本上都是基于 vs 扣的做的,我们来这里搜索 party 插件,然后点击安装。这边的话安装会慢一点,但有些插件不兼容,比如说这个翻译插件在云环境就没有, 可以找个别的反应插件,比如这个也不影响使用。如果你电脑不行,或者说不想安装或者安装出错,一律建议使用零环境,哪怕他有些插件不能用,但足够你个人使用了,稍微有一点不方便而已。 我再来讲一下 vs 扣的的文件系统,左边这里相当于一个文件夹,我们这边创建一个文件之后,可以看到桌面上也自动会出现文件,大家懂了没?然后我们在编辑器中把这个文件内容改变之后, 回到桌面用记事本打开那个文件,可以看到他会出现一样的代码,就是说你在这边所做的所有修改都是会同步到我们这个文件夹里面的啊,相当于高级的记事本嘛。 我们也可以创建一个文件夹,同时看到桌面上也出现了文件夹,还可以拖动把原先的这个文件移动到文件夹里面,所以有这个文件系统后,我们就不用再切过来切过去设置各种文件了。 另外再创建一个 a 点 txt, 说明他不仅仅可以编辑 stm 文件,其他的所有格式文件都可以编辑,我们用文件管理器打开后也可以看到出现了, 然后我们在文件管理器上新建文件,可以看到 vs code 中也会同步显示新建的文件。 还有一个就是切换文件夹功能,比如说我们现在不想用这个文件夹的文件了,我们就选择另一个文件夹,这边我打开一个新的文件夹,就会出现新的目录,这个就是我们前面放图片的那个文件夹,然后也可以回到这个桌面。 另外还可以新建窗口打开第二个 vs code, 在这个多项目写的时候会比较常见,有不同的 vs code 窗口写不同的项目,同时在他们之间来回切换。 也可以在一个窗口中打开两个工作区,一个工作区其实就可以理解为一个文件夹, 可以看到这边的工作区里面同时出现的桌面文件夹和那个视力文件夹,两个都可以同时使用,就可以把第二个窗口给关掉了,这样的话在一些情况下比较方便。我们也可以把这个文件夹从工作区删掉,不是实际删除 好,删掉之后再打开装备文件夹回来,然后点一下文件,打开编辑器。我们现在来说一下几个常用的快捷键, 平常写代码的时候会比较常用,首先是 ctrl 加 d 会选 选择下一个相同的字符,就是当你选择一个单词之后,按一下 ctrl 加 d, 他会同时选择下一个,然后一直按会一直选,比如说我们这里按了三下就会选择四个相同的 p 标签,我们改他的话会同时改四个地方,这样的话非常的方便。 再就是按住 alt, 再按一下鼠标左键就会添加一个光标,也可以添加多个,多个光标同时添加之后我们输入文字,他会同时改变多个地方,这个功能也是非常方便。 ctrl 加 s 保存之后, ctrl 加 z 是撤销。然后还有一个是复制一行,我们可以用 alt 加 shift 加上下 下键就可以快速的把一行代码复制到上面,或者是复制到下面,我们用 ctrl 加 c 复制,还要回车之后调整位置,在 ctrl 加为粘贴,这样比较麻烦,但是我们有了这个快捷键之后,按一下就会复制一行,比较方便。 接着是查找 ctrl 加 f, 当你一个文件中的内容比较多的时候,我们想找一个字符找不到,就会用这个 ctrl 加 f 查找, 然后输入字符就可以拉开这个小箭头是替换,我们可以把查找到的东西按一下替换,替换掉我们需要替代的字符,然后右边是全部替换, 左边是单独替换,意思也就是字面意思点一下单独替换,可以替换一个单词,点一下替换,全部可以全部替换。 再然后是全局搜索,点左边这个搜索图标就可以搜索我们打开的工作区里面的所有文件的字符。比如说我们现在有两个 html 文件,输入搜索 html 的时候可以搜索到这两个文件家中的字符,我们点开之后可以看到一个是在 index 里面,一个是在 hi 里面, 这个全局搜索比较适合在多个文件中搜索东西。然后说完这个之后,我们再来看一下布局。 vs q 的很方便的一个功能就是可以分开创客, 比如说把一个文件放在两个窗口,这样的话适合在同一个文件的同时查看,两个部分 也可以适用于多个文件的同时使用。比如说我们这里先演示把上面这个抬头复制一下,然后在最下面粘贴进来,或者在右边的话中间也粘贴一下,可以看到 可以同时看到上中下三个部位,写的时候就很方便。你也可以用这边的布置设置,把它设置成两栏四栏,然后可以看到有四个部分都可以同时编辑, 然后外观这边还有很多东西,他们有不同的作用,你用的时候可以自行尝试,当然也可以不动,我的建议是不要动,前期的话不要折腾这些东西,因为他默认的就很好了,我们只需要知道怎么把他这个窗口 拆分什么的就行,然后选择这边还有一些常用的快捷键的按钮,也可以用这边的鼠标点击使用, 再回到这边首选项有个键盘快捷方式,这个页面里面就是所有的快捷键,你们以后如果想要什么快捷键都可以在这边搜索到查看到,也可以去修改,双击他的这个键绑定,然后输入你想绑定的快捷键就可以。 然后如果你不想改或者是冲突了,就可以再去把右键重置,按键绑定会恢复到原来的状态。这个的话先不用看,我只是说一下,哦对,还有一个帮助,比如说你们不会的时候可以点这个帮助开始,然后 在这边有他的一个小教程,也可以看一下他这个小教程,教你们学会更好的使用 vs 酷的。再接着我们按 f 一打开这个设置选项,我们可以看到有不同的设置,这里面有非常多的设置,直接输入功能的字符就可以搜索。 我们这边打开 live preview, 可以看到是乱码,因为我们这个文件夹是中文的,他这个插件不识别中文,所以我们以后写文件夹写文件名尽量要使用英文,因为中文在这方面确实支持不好,我们改成英文之后他就可以正常显示了。 最后我们把这些不用的可以删除掉,右键删除到回收站就行。好,那么本期到这里,本期的作业就是配置好你的环境,然后好好练一练所有的快捷键使用之类的东西。 下期我再补充一个用四 ss 写真实项目的案例,帮大家解决 css 的疑惑,拜拜。

hi, 今天想带大家来熟悉一下 vs code, vs code 呢,它的全称是 visual studio code, 那 我们为什么要来安装它呢?归纳了以下三点。 第一个呢是插件生态,我们可以把它想象一下,就是说我们在浏览器当中是安装各类插件嘛,那这个插件呢,它会辅助我们做许多不一样的事情, 比如说什么自动化呀,或者是自动去翻译呀等等的。那第二个呢,它是轻量的 ide, 相比较于一些大型的那种 ide 呢,它的启动速度是很快的,而且占内存也相对较少,所以对这个电脑的要求也没有很高。 第三个呢,也是大家都比较看重的一点呢,就是他是开源企业,免费的,属于微软旗下的,他的更新频率啊,以及社区的活跃度也都非常高,所以总结来讲呢,他就是又简单 好用,也没有限制,而且功能也比较多。而且呢它在安装后呢,不管你是 mac 系统啊,或者是 windows 系统,或者是其他的系统当中呢,它的使用效率啊,它基本上是一样的。那接下来呢,就跟我一起来操作一下吧。 我们来到 google 当中呢,去搜索 vs code, 它是非常简单的下载,我们直接找到这个官网, 然后 download, 下载完成后呢,我们打开同样的,我们把它放到应用程序当中,之后呢,我们去 搜索一下, ok, 我 们找到了,欢迎我们进来。那我们先来熟悉一下哈,包括它的登录和注册呢,也都非常简单,在这里面啊,我是用的 github 登录的。 那第一个呢,我们看到这个是资源管理器,这里面呢,我们可以去打开文件夹或者是克隆仓库,这个时候呢, 比如说我新建一个,这个时候就直接在我们的电脑当中就去创建文件了。还有打开,比如说我想要打开某一个项目,比如我的桌面上我们打开一个这个 html, 你看他直接就可以把这个代码就显现出来,我们就可以在这上面去操作,在这里呢我们就可以看得到 上传了,这个非常简单,而且呢我们用这个 vs code 呢,之后我还可以带大家一起去看一下怎么去上传到 github。 第二个呢就是搜索,搜索这里面呢会有一些以往的文件,你想要去搜索的时候都可以找得到, 这一个呢就是改变源代码,还有一个呢这个就是运行和调试,这里面就比如说你有一个终端命令啊,嗯,我们就可以在这里面去调试。那最后一个呢,这个就是扩展,那这个扩展呢就是我刚刚所讲到的他这一个插件生态。 我们这里面呢我是已经安装了一个 mcp, 这个 mcp 呢一会我可以给大家演示一下, 你看这里面就会有许多什么中文啊,简体还有 python 语言呀等等的,它这里面都是有的。还有一个点呢就是在这里我们点这个右上角,这里 我们可以看得到呢,它是可以去选这个 agent, 在 这里面呢我们可以用这个 cloud 和 gbt 五,一般呢我们会用 gbt 五 mini 就 可以了。 还有一个下侧呢,这个是一个终端,在这里呢我们直接就可以打开终端 gemini, 我 们就直接打开了我之前安装的 gemini scode 呢,它就相当于是一个极大成者, 所以我非常推荐大家都去自己下载一下,去探索一下。这个呢就是刚刚的那个左侧栏, 包括我们把这个栏引掉之后呢,我们看到这里面呢还有很多,比如它这个笔记入门, python 开发入门,我们都可以在这里面去学习。 那之后呢我还会给大家分享一期,就是如何用这个 vs code 和 git 同步上传,也是非常的简单的。今天的分享就先到这里,我们下期再见,拜拜。


继上篇介绍后,很多小伙伴问这款 cloud code 开源平替 open code 到底怎么用?它不仅能全自动编程,更是拥有读写文件、执行命令权限的超级 agents。 今天直接上实操干货,手把手教你配置下载与安装。官网下载下来后,你会看到三个执行文件壁垒提醒, 目前的 g u i 桌面版我试用后发现有些 bug, 比如无法更改,模型提供商不够稳定,强烈推荐直接使用 c l i 版本,稳定高效,这才是程序员喜欢的。 界面与模型切换,打开后是超酷的终端 ui 界面,按滑动鼠标滚轮可以看到所有选项,点击 connect 可以 选择模型提供商,支持各大主流厂商,如果你有 keep, 直接粘贴即可起飞。重点解析, open code then 到底值不值?这是官方的托管服务, 亮点与槽点并存。首先是亮点,零差价,按模型原价扣费,不赚中间商差价。极速响应,针对 a 级模式优化了上下文速度,免费羊毛自带一些免费模型,零门槛直接用。 但是使用付费模型需预充二十到是预付余额,不是订阅费。支付痛点,国内卡支付可能存在风控风险。试用体验报告,我实测了免费的 grootcodefast 模型速度,写代码确实快到飞起,真的是极速响应,不愧是专门为 a 证模式专门优化过的模型池。但是 让他写个前端,直接给了我 react 的 默认页面,建议复杂任务还是上 cloud 或者 gpt。 后端倒是写了,但是使用了非常简单的实现方式,有些情况没有考虑到。看来 open code zen 里面的免费模型并不能满足日常使用,国内用户怎么玩儿?就没有国外卡, 担心 zen 充值麻烦?别慌,除了 zen, 它支持配置国内大模型或自定义 a p i, 如 deepsea, 阿里同意等,完全适应国内网络环境,想折腾本地模型的也能玩儿。 当然,你如果有顶尖模型的 api key, 可以 直接使用。总结,想白嫖先试免费模型,追求极致体验,建议自备 key 或寻找国内聚合渠道。

看好了,不登录、不绑卡,没有网络问题,国内顶尖模型免费用!打开终端,输入命令,敲下回车,立刻就能开始生成代码,这就是能力比肩 cloud code 的 同时,完全开源,完全免费,完全开放的 ai 编程界新星 opencode, 全平台支持安装使用超级简单,全部只需要这一行命令就可以完成。 mac 下还可以用 homebrew 安装。官方网站有非常详细的功能说明和完整的配置项列表可以供我们参考。 如果你不想看英文的话,也有这个中文站,有完整的官方文档翻译,可以帮助我们快速的上手使用。更加劲爆的是, open code 完美支持 cloud 的 agent, 直接把 md 文档复制过来,立刻就可以使用。 所以最最无敌的是社区还有这个 o my open code 的 插件,提供了开箱就可以使用的赛博研发军团。 看看这些真实的用户反馈,下一期视频,我来介绍一下他的详细用法。当顶级的工具已经免费并且极低门槛就可以使用的时候,决定你和高手之间的差距,就只剩下行动力了。不要收藏了,现在立刻马上就去把它安装起来,用起来!关注我,带你玩转 ai 编程!

vs code 如何接入 cloud code 或者 gemini 这样国外的大模型?呃,上一期视频我介绍了几个国内的 ai 编程助手,有一些朋友追求比较高,购买了国外的 cloud code 的 大模型的 api, 但是不知道如何在 vs code 中使用。我今天特地做一个视频来帮大家快速的安装好这些国外的大模型。好的,言归正传。呃,使用这些国外的大模型呢?我们需要安装一个 vs code 的 扩展 client, 大家记住英文拼写是 c l i n e, 我 们来安装一下,点击 vs code 的 左侧这个扩展按钮,搜索 c l i n e client 第一个就是我们要安装的 client, 这个是英文版,如果大家对英文有点抵触的话,可以试试安这个 client chinese 或者 client 中文版试一下。我就先安个原版给大家讲解一下。 安装好了之后,左侧这里就会出现一个机器人头像这么图标,我们点一下这个呢,就是 client 的 主界面,我们首先要在这里做配置,把我们的 api 添进去,选择呢这个 bring my own apikey, 选中之后点下面这个 continue, 在 这里就是配置我们自己的 a p i, 这个 a p i 的 provider。 我 们在这里选什么呢? open i compatible, 这个是 open i 的 兼容性,不要选下面这个 astropic, 要选这个 open i compatible, 点击这里选中之后呢?然后我们在这里还有三项被需要, l 这个一般买的都是国内的中转,他在给你的这个文档里边肯定会有他们中转的地址,把中转的地址填到这里,然后 open i 的 k k 这里填上,然后是选什么呢? mod id 好, 复制上,然后点 continue。 好, 我们点 continue 把这个关掉,这是它的广告,这个也关掉,这个是它的提示。哎, 这样我们就设置好了,可莱也可以在这里右上角的这个齿轮按钮,可以在这里修改你的这个 api。 呃,还有其他的选项,主要是这个我们要在这里把语言从英文改成简体中文 模型配置完了之后呢,我们要给他这个文件的读写权限,就是点击这个 auto approve, 这里我们要把读所有的文件,写所有的文件运行命令 和使用浏览器这些全都给他选上。还有这个开启提示。好,这个时候我们就可以开始使用这个格式,然后让他来给我们生成代码。这里 at 是 添加上下文,这个加号是添加文件或者图片,这个是 m c p, 这个是管理 client 的 规则或者工作流。这个我们就先不要搞那么复杂了,这里它也有 plan 和 action 两个选项,也就是说我们点击 plan, 它就可以先给我们规划点, 点击 action a c t, 它就可以实际的给我们产生代码了,这个是跟 chain solo 模式差不多。好,然后我们在这里简单的做一个页面,使用 h t m l 语言创建一个登录页面,这里也有规划和实施两个模式,在这里是计划模式,这里就是直接实施模式,我们直接选择这个 x i c t 模式, 开始让它来生成我们的页面。好,我们可以看到页面已经开始自动生成了, 提示我们已经创建完,完成了,登录页面已经完成,已经成功创建包含基本的 html 结构样式和简单的登录功能脚本。接下来我们启动本地开发服务器一测试,那就让它测试吧, 是不是出错了?我们需要提示它换一种方式来启动服务器, 它在这里直接调用浏览器打开了本地的这个页面。 好的,这就是这个页面不太完美,我们可以看到连接自定义的 api 已经成功了,至于其他的这些功能,我们之后再想办法,我会接着研究研究怎么让它顺利的工作起来。好,今天到这里感谢大家观看。

今天给大家分享一个我最近使用的非常爽的一个编程工具叫 open code, 以及一个非常厉害的插件 o my open code, 它可以大幅提升我们的编程效率 以及出来的一个效果又快又好。那首先介绍一下这两个东西到底是什么? 我之前拍过一个视频,对比了一下 codex、 cloud code 和 gemini, 我是 开了三个窗口,让他们去完成同一件任务。那你可以理解, open code 就是 在一个窗口之下,你可以保持上下文的连贯的情况下切换模型去使用, 算是一个 open one 的 一个工具,那它这里面集成了有七十五家的模型提供商,几乎你能见到的都在里面了,而且你可以接入你付费的模型,还可以用它的免费模型,比如说像智普的模型都是免费的在里面。那这是 open code, 它解决了我们多个模型之间来回切换的问题,以及工具的一个使用的习惯统一的一个问题。第二个欧曼 open code 就是 在它上面的一个插件,它的强大之处在于它的这种运行的模式,它有一个主控和专家团队, 主控就相当于是一个大脑,他接到你这个任务之后,把一个大任务拆成小任务那一个网站,比如说有前端有后端, 还得去找各种各样的文档材料,还要去便利你现在的代码,来理解你的项目结构等等,他会把这些交给最擅长的模型去做, 这个就非常厉害了。那以前我们只能什么?就像我之前开多个窗口,比如说要做 u i 了,我让界面来去做,要做架构设计了, 或者写后端了,我让 code x 去做,这就很麻烦,但是他把这个事帮你在背后全部做完了,你只需要告诉他我要做什么,就是这么厉害。那我们来看一下,简单看一下他的主控叫西西弗斯,他的专家系统,比如说像专门去查代码库的, 专门找外部文档的,专门做架构的,专门做 ui 的 前端开发的,他会把他们分配给不同的模型去做,这我觉得就是欧麦 opencode 对 我们真正使用的时候最强大的一点。 那我们快速看一下它的界面长什么样,中间这一块就是这个 opencode, 首先它可以切换模型,大家看一下 codex cloud 智谱,还有这个加密奶都可以切换,非常的方便。另外如果说 你还想去接入其他的模型,比如说你买了某一个模型提供商的模型,那你在这里直接做一个单点登录的认证就可以了,非常方便。我这里已经连接了四个了, 所以他在分配子任务的时候,他也只会分配给那些可用的模型,所以你在使用的时候得先把你这些模型都接进来。接下来你就很简单了,就跟他聊就行了,让他干什么活,他就自动帮你分配了。 那我个人使用下来最大的感受就是很省心,它会用到一些 cloud 里面,算是很高阶的这种使用,比如说 sub agent 子代理 或者 m c p 调用等等。打个比方,以前经常会用这个 context seven 这个 m c p 去查文档,那这里它自动会帮你调用。并且 open code 它是以这种 cloud 的 运行方式去运行的,所以 skills 在 这里面原声都是支持的,非常的方便。比如说您看 直接一个下划线,所有的 skill 都会列出来。好,怎么安装?那就很简单了,跑到它的官网去,这里会告诉你怎么安装。先把 open code 的 安装好,接下来在 open code 的 命令行当中, 自然语言告诉他,帮我安装好欧麦 open code 的 插件,一切就 ok 了,就这么简单,接下来就跟他聊天干活就可以了。好,那大家可以 去安装试一试,有什么问题我们在评论区见,希望大家用的很爽,效率、质量层层的往上升。