vibe coding安装方法

嗯，五分钟，看我一分钟教会你。 ok， 首先打开我们的 coldbody 国内版，点击第一个，然后在左上角点开它的官网，我们点击乘中国站选择下载， ok， 下载完毕之后，我们打开这个文件，我们进行安装，点击同意，然后一直下一步，下一步，下一步我要安装，我要安装，我要安装。 ok， 现在已经安装完毕了，然后我们点击完成，它就会自动运行。 首先我们需要登录一下我们的账号，点击登录，因为我们是国内用户，所以我们直接用微信扫一下就好了， 扫描完毕之后，我们就自动会登录完毕，然后我们在这边就可以跟他说我们想制作一个什么样的网站，这里我跟他说请制作一个简单的视力网站吧， 他就会开始自动运行，我们稍等一下他就做好了。好，我们点击这边的集成，选择这个云部署，再稍微等待一下， ok， 他 已经部署完毕了。那左边就是我们的网站，然后右边他有一个访问的地址，可以点击一下， 这个就是我们的网站了。同样我们的网站链接也可以分享给我们的伙伴，包括这个是我在手机上进入链接的状态啦，那今天就到这里。

我没有任何的代码经验，怎么去用 cloud code 去开发一个小工具呢？那今天我将给大家用一个例子来介绍一下啊，你是小白，新手也能用 cloud code 去 fire coding 除一个小工具。 首先我们把这个软件开发，我类比成一个，你是一个餐厅的老板，你的目标呢？是做做一个完美的汉堡，要 follow 定一个工具，那它属于软件，我们现在了解一下一个软件的基本结构，它分为前端，后端可能还有数据库。哦， 那比如说像我们的网页或者是淘宝的 app 的 前面界面，我们就管它叫前端，它是跟用户进行直接交互的，那用户点击一个按钮的话，它会发送请求给后端，后端可能会操作一下，比如说修改一下数据库，返回一个值，然后呢再返回给我们的前端的用户， 这个是软件的一个基本结构。以下如果你要进行 file 编码一个小工具，我们用 cloud code， 那 首先我们要配置它的运行环境，就是 node js。 首先呢，你的电脑可能安装了 node js， 但你不知道，如果你是 windows， 你 就打开搜索，开始里面搜索的 cmd， 那输入 node 空格，注，注意哦，这里要有空格 v 杠 v。 那 如果你是 mac 的 话，你直接搜索终端， 直接搜索终端，我再直接在这里敲入 note， ok， 他 告诉我我是有的，我是我的版本是二十四点幺二点六，那如果它这题是 non， 那 你需要去 node 点 js 官网上下载对应的， 那第二个的话，你是要还要配置一个 git， 那 git 的 话，说白了它就是一个免费的版本控制系统，它是用于存档的， 那你如果没有它，你写的代码你就回不去了，所以这个你要去安装一下。那首先一样的，你要去检查你是否安装了，首先你输入命令行，好，我这有，我是安装好了。那如果你没有的话，你可以自己去豆包上问一下大模型，它会告诉你如何安装。 我们现在要来安装编程工具，你刚刚已经接通了水电煤，对吧？那你做汉堡，那你还得需要一个豪华料理台 cs code 呢，是一款可丝化的编程工具。那 cloud code 的 话，它是作为在终端运行的一个工具，它的终端键面对新手很不友好。 那那终端就是对 log code 的 进行交互。你都在这里敲，这是不是？你看这头大， 那怎么去安装 vs code 呢？你直接去它的官网上 vs feature studio code， 你 直接去根据你的电脑型号对应的去安装就可以了。我们安装好 vs code 之后呢，选择打开， 然后我们找一个文件夹，你就可以在这里存放项目的地方 my project， 点击创建它问你是否信任，你就是信任就可以了。 ok， 后续你的工程文件都会放在 my project 这个目录下。那我们安装好 vs code 之后，我们再来安装 cloud code。 cloud code 的 概念呢？就是它是你的做汉堡的一个全能主厨。那很多朋友说为什么我要选择 cloud code 而不是科室呢？答案是科室更便宜，科室它也是卖 cloud code 的 api。 那 同样是假设是二十美金 科尔瑟，他给的量会更少一些，那我们就根据对应的命令提示行去安装就可以了。这些你都可以在巴德克的官网上可以找得到。 ok， 我 就大概等一会好了，这里就已经提示我们克拉的已经安装完成了。 ok， 我 们回到 vs code， 在 vs code 上你也可以通过命令行直接跟他进行交互。好，我们这里选择 feel， 打开特密的就是终端。 ok， 我 们在这里输入 cloud。 ok， 他 这里你就选择 trust。 ok， 他 这里就告诉你了，你的 cloud 的 code 已经安装成功了。 那这里呢？他告诉你的是你现在用的是 ups 四点六大模型，但是，呃，因为种种支付啊，网络各种原因， 在国内的话还没法很好的用上。呃， sop 的 自己的大模型，所以你可以选择用国产的大模型去替换它。那这里我推荐两个，一个是用 cc switch， 你 也可以去国内的像 mini max 或者是像其他的厂商，你去它的官网上去下载，它都会在官网上都会有教程。那我们回到了 vs code 上面，比如说我要切换大模型，你就输入命令提示行杠 motor， 它这里你就会看到，你可以选择好多。 ok， 你 就切换了， 这个是命令行工具，它这有很多命令行，其他的这个你可以用打开一个，我建议你可以直接打开一个大模型，比如说你平时可以放一个 呃 gmail 三，或者是豆包大模型，当他报错的话，你就直接截图给他，给那个大模型，那大模型他就会给你回答，比如说我直接截了一个图， ok， 我 去问豆包安装成功了吗？ ok， 豆包就会告诉你，所以后续的话，你如果遇到什么 bug， 任何的问题，你直接去截图，直接去问这个大模型就 ok 了。 ok， 今天的视频就是给大家讲解了一下怎么安装。呃，之后你就可以通过 cloud code 上进行你的 fab coding 的 旅程了。请大家给我点赞加关注哦！

完全从零开始，如何无痛使用 cloud code to figma？ 一 边调整设计，一边看着前端生成代码呢？第五步，理解 cloud code， 它不像 gpt 或者豆包这种陪你聊天的 ai， cloud code 更像一个运行在 terminal 里的 ai 工程师，它 就在你的电脑里面帮你创建文件，甚至帮你生成完整的工具和应用。那么这位工程师要上班，我们最好给人家一个办公室吧。 这就是为什么提供一个编辑器，配合 cloud code 使用会更好。最简单就是使用 cursor。 第一步，使用 cursor 来安装 cloud code， 下载 cursor， 打开一个空的文件夹，直接在对话框里输入，帮我安装一个 cloud code， 它就开始帮你安装了。成功以后，国内的朋友还需要配置一个模型 a p i 进去看秋之的这期视频讲的很简单，跟着做就行了。完成之后我们打开 terminal new terminal， 在 这里输入 cloud， 再根据他的提示进行一些简单的设置， cloud code 就 正式启动了，就是这么的无脑和简单。第二步，连接 figma mcp。 我 们找到 cloud 官方文档，把 figma mcp 的 安装命令复制下来，在 cloud terminal 里粘贴上发送指令，然后他就会帮你安装了。第三步，安装 figma plug in， 直接输入这串指令 我会放在评论区，然后进行提交，安装完成之后输入斜杠 plug in， 发送之后，你会看到一个这样的界面， 按右键挪到 install 这一排的位置，你会看到第二行的 figma mcp。 还需要我们进行一个登录验证，那我们键盘按 ctrl 键，浏览器会自动打开，让你授权你的 figma 账号搞定了，就这样，号的员工就可以来你的 figma 帮你提取文件，帮你创建设计了。 我们来试试，让他设计一个 ios 风格的天气查询网页界面冒号，然后粘贴我的 figma 文件的链接， 他问你很多权限问题都同意后， cloud 会开始在本地生成代码，等一会会的时间，你就可以拥有一个真正运行的前端界面了。响应式也完全没有问题。点击这个发送到飞马，你就可以在你的飞马上进行编辑了。 第五步，然后呢？修改完设计怎么传回到扣子里呢？超级简单，比如我改了这些模块的颜色，选择这个设计，右键选 copy link to selection， 回到 call terminal， 输入 update changes， 冒号，粘贴刚刚的复制， 哇靠，就重新构建了对应的部分，就这么简单。这种双向同步的工作流对于设计来说真的非常强大。 ai 可以 承担大部分的生成和重复工作，而你可以专注更多在判断、优化和创意。所以你觉得这个产品更新对设计师来说算势利好吗？

hello， 大家好，今天给大家带来的是 cloud code to figma 的 视频教程，在使用之前我们需要安装好 cloud 教育版或付费版的 figma， 这两项都准备好后，我们就开始今天的视频教程吧。 首先启动 cloud， 我 这里用的是终端，在 ide 中使用 cloud 模型也是可以的， 等待 figma 安装成功。安装成功后继续安装 figma 插件， 因为我这里已经安装过了，所以显示的是已经安装。 安装完成后，重启 cloud， 输入 plujin 并切换到 install， 查看是否有 figma remote m c p 这里因为我还没有重启，所以没有看到， 这样我们的基础配置就完成了。接下来我们让 cloud 帮我们做一个网页，最近刷到了 crock 的 官网，觉得很好看，所以想尝试一下 cloud 能不能复刻出来， 很明显效果不太好，不过没关系，我们换一种风格，重新调整 经过修改后的界面，看起来至少能用了。 接下来我们打开 figma， 创建一个新的设计文件， 这里要注意一定要打开分享链接的编辑权限，不然 cloud 是 无法在 figma 中写入文件的。权限设置完成后，复制这个文件的。链接在 cloud 中输入，将当前网页发送到 figma 中，并粘贴刚刚复制的 figma 链接， 这样我们就在 figma 中得到了设计稿，此时我们可以对设计稿进行修改。 修改完成后，我们右键画板名称选择复制到链接， 在 cloud 中输入，按照链接更新页面样式加复制的 figma 画板链接 刷新页面。恭喜你成功完成了 cloud code to figma 的 最小闭环。

今天手把手教大家从零到一，学会 web 扣定。这次我不讲特别悬的概念，也不做那种看起来很厉害，但其实普通人很难落地的项目。我就做一个很实用的 chrome 截图插件，它有三个核心功能，截图、整个网页截图、当前可试区域。还有一个是鼠标框选特定区域截图。 这条视频不只是做一个插件哈，更重要的是，我想借这个过程讲清楚一件事，普通人怎么用 web 扣定，把一个想 法做成真正能用的工具。不是那种发一句话 ai 自动出奇迹的神话版本，而是真实可复现的版本。提需求、身份测试包 bug 继续改，最后打磨到能用，我们直接开始。 这部看起来很普通，但其实很关键，因为很多人一开始就输在这里，一上来就让 ai 做个截图插件，这种说法太空洞。 ai 当然能做，但他会自行脑补，最后出来的往往是他理解的，而不是你想要的。 所以第一步不要着急生成，而先把这几个问题捋清楚，做什么，放在哪，核心功能是啥？风格是什么。 我这次用两个工具打配合，一个是 gpt， 一个是 codex， 分 工很明确， gpt 负责把我的自然语言需求整理成更清晰的工程指令， codex 接受这个指令去生成项目，写代码、改代码。所以我先把需求按照目的 名称、核心功能、界面风格的要求扔给 gpt， 让他帮我整理成一段适合直接发给 codex 的 指令。点击右上角复制。 接着来到 codex， 在 左边县城这里点击添加新项目，新建一个项目文件夹。哎，咱们站起来教他 web coding 吧。 选择打开，让项目在本地建个家。这一步我为啥强调讲呢？因为很多人第一次歪脖扣顶，最容易忽略的就是项目管理，做的时候很爽，做完就开始混乱了。 所以先确定项目文件夹，再开始干活，这样你后面不管是调试、迭代、上塔，给塔步都会舒服很多。模型这里我先用默认配置。这次项目并不复杂，我们的目标也不是把参数拉满，而是先把第一版做出来，然后把 gpt 的 指令粘贴过来 发送。接下来你会看到他开始分析任务，拆步骤、创建文件、写代码，整个过程大概是三到四分钟，比古法手搓要快的多。 ok， 等他写完之后，我们先去文件夹验证一下项目结构是不是都在里面，这些都在第一轮基本就搭建起来了。 打开 chrome 扩展程序页面，右上角开启开发者模式，点一下左边的加载未打包的扩展程序，然后找到刚才的文件夹，选择它。 你看这个插件直接就被加载进来了，它的名字就和我这边起的 high screenshot。 点开右上角的插件，能看到功能入口已经出来了，但真正决定这个工具能不能成立的，还需要测试。在测试之前先叠个假哈。 截图类的插件，在谷歌自己的扩展页上用不了，所以需要找一个普通网页。我选了经常去的 reddit， 先测一下当前可视区域，哎，确实截下来了，在鼠标选中区域截图也 ok， 最后看看截图整个页面，哎， 问题来了，他这个没截全啊。这一步特别正常，真的不用失望，因为 ai 生成的第一版看起来有模有样，但或多或少都有些小问题，我们只需要把刚才的问题总结一下，让 codex 继续调整 选区截图， ok。 不 过为啥会有一层遮罩呢？可是区域也能截，网页截图还是不行。那我就把错误提示保存下来，这时候 gpt 又能帮上忙，我会直接把问题告诉他， 让他帮我把这些话整理成一段更专业、可执行的修复指令。这一招特别好用，因为很多时候不是 ai 改不好，而是你问给他的问题太模糊，你说得越清楚，他改的通常就越准。继续复制再发给 codex， codex 会根据新的指令继续修改，改完之后我们再回 chrome 测试。先是上次的大 bug， 整个网页这次截图终于正常了，整张网页都能完整截下来，清晰度也不错。当前格式区域也通关，选区截图这些功能也干净了， 不会再把那层遮罩带进最终图片。到这里，三个核心功能就算真正的跑通了。这一步很重要，因为从现在开始，它才是一个真正能工作的工具。而且这里我觉得特别值得讲的一点就是 web coding 最关键的能力，不是第一次都做对，而是发现问题后继续调试到正确。 如果你只是想验证 ai 怎么做出实用工具，那到这里其实已经够了，但我还想再精致一点，所以又继续提了两个优化需求，第一个，区域截图不要一框完就直接保存，而先框选，再允许我自行调整尺寸，然后决定要不要保存。 第二个，现在的截图图标还是有点太简陋了，我想做的更有设计感一点，这次还是一样，让 gdp 帮我把需求整 成结构化的比例，然后再交给 codex 去改。接下来再等待三到四分钟，看看它会改成什么样。我们先看结果， 首先小图标已经换掉了，现在这个深蓝色带一点相机聚焦的 icon， 我 一眼就能认出来这就是我做的那个工具。然后再看最关键的区域截图功能， 现在框选之后，四条边都可以继续调整，调完再保存，整个体验就丝滑的多。整个网页截图我也再测一下，是正常的，可是区域的截图也没问题，还是稳定的。那到这里，这个截图插件就真正做好了，你可以自己用，也可以把整个项目文件打包成内部 分享给朋友用。如果后续再出现 bug， 也不用从头来，我可以直接回到之前跟扣带子的那个对话窗口，让他继续改，只要本地项目委员家还在原来的位置，整个迭代就能继续走下去。当然，现在他还只是做出来了，还不算正式上线。 如果你想发布，可以继续问 gdp， 让他把发布流程、打包要求、图标尺寸、权限检查，这些内容一步一步整理给你。这里补充一句哈， chrom 商店需要开发者账号注册并支付一次性注册费， a 质扩展提交一般不需要交注册费，具体规则可能会调整哈。所以正式发布之前，最好还是以官方说明为准。 那为了这期视频，我前前后后其实做了三款类似的小插件，基本上每一款花上一到两个小时就能把出版做出来。但是呢，即使你给的是同样的指令，因为大模型本身有一定的随机性，每次生成代码也不会完全一样，遇到的问题也可能不一样。不过总的思路就是这样， 先用 ai 编程工具把第一版做出来，遇到问题再让通用大模型分析，然后继续回去改，继续测试。如果后面你还准备长期迭代， 比如添加功能啦，修改 bug 啦，或者发布新版本，那我建议尽早进入 gitlab 这种代码托管平台，那第一次配置可能会多花一点时间，但后面做版本管理和协助就会轻松很多。那我们今天分享就到这里，下期再见。

当文科生出生的你想学 web coding， 然后你不小心在 cursor 后面加上 download， 顺利下载并打开了它。然后聪明的你在对话框里输入了这段神秘代码，点击回车，这时候你会发现同样聪明的 cursor 已经自动帮你下载好了目前公认 web coding 最强的 cloud code。 然后聪明的你又开始解决登录问题， 于是你在对话框里输了第二段神秘代码，这时候你会发现这段神秘代码每行最后几个数字需要修改，于是你打开了系统设置，点击了 wifi， 点击了详细信息，点击了代理，然后在端口处找到了属于你的代码，并完成了替换。这时候你惊喜的发现网络已经配置好了，并顺手输入了 log in， 随机触发进入了登录界面， 然后聪明的你按步骤操作就好了。最后当你看到这个页面的时候，恭喜你，非技术出身的你已经成功打开了 web coding 这扇大门。 接下来我会继续出一系列视频，一步一步带聪明的大家通过 web coding 做网页，做 app， 并且赚到第一桶金。两段神秘代码也已经打包整理好了，需要的说啊，新年快乐，我是拉菲儿，这是精通 web coding 系列的第一期，咱们下次见！

hello， 大家好，今天三分钟教会大家安装上 cologne。 在 正式安装之前，我们需要先准备两个工具，就像做饭要先准备厨房和工具一样。这两个东西叫做 note js 和 git， 听起来很专业，是吧，其实挺简单。先说 node js， 它是什么呢？你可以把它理解成一个运行环境，就像你手机里面要装安卓系统才能用 app 一 样，电脑要装 node js 才能运行开发工具，它还自带一个叫 npm 的 东西，相当于是开发者的应用商店。 再说 get， 这是一个代码管理工具，可以理解成是代码的时光机，能记录你每次修改，还能多人写作。 calloutcode 需要这两个来管理项目文件，为什么要先装这两个？因为 calloutcode 就是 建立在他们计算的，就像盖房子要打地基一样。 好，我们开始来安装这两个。好，现在我们来开始安装这两个。安装 nodejs 非常简单，只需要在百度搜索里面输入 nodejs， 然后进入这个官网，点击上方的 download， 找到 windows 版本的安装程序，点击下载，下好后打开， 打开安装程序后，我们根据提示一直点下一步，然后接受下一步，下一步一直安装完成就行了。安装 git 也是同理，我们在百度搜索里面输入 g i t， 然后进入这个官网， 进入 g i t 官网，在右下方有个安装，点击一下 找到我们的 windows 版本的，点击下载，等待它下载安装程序。下载后，我们点击打开，跟刚刚一样，一直点下一步就行了。 安装好后，我们要用到一个东西，叫命令行，有些人叫它终端，有些人叫命令提示符，不要被这个名字吓到，其实就是一个黑框框，我们在里面打字，电脑照做，就这么简单。 你看平时我们用软件都是点按钮，对吧？点这个图标，点那个菜单，但命令行不一样，它是打字操作的。比如我输入一行字，点击回车， 就会告诉我 n o d e 的 版本号，就和电脑聊天一样，你说一句，他回一句，那怎么打开这个黑框框呢？ windows 用户按键盘上的 windows 键加 r 键，会弹出这个框框，然后在里面输入 cmd， 然后回车 能弹出这个命令体。这行了进来后，我们可以输入这行命令。 n o d e 刚刚微选出现版本号，就说明我们的 n o d e g s 已经安装好了。我们刚刚的 get 也可以用这个方法输入这行命令，然后出现版本号 就代表 get 安装好了。安装上这两个工具之后，我们就可以正式安装我们的 color code 也非常简单，直接在命令行里面输入这行命令，然后点击回车等待一下， 然后它的安装完成了。安装好后还是一样的道理，我们查一下 colocode 的 版本号，如果有就代表安装成功了。成功后我们每次打开命令行输入回车就能打开我们的 colocode， 因为 colocode 的 原始的模型是要用 colocode 大 模型，但是这个模型经常封，而且很贵，我们可以直接用我们便宜好用的国产大模型， dvd 模型或者制普模型。 这里我们先下载一个工具 cc switch 来方便我们更改配置。想要在 draw 中使用哪种大模型，大家在浏览器里面可以输入这个网址，进来后我们鼠标滑到下面， 选择 windows 这个安装程序，点击下载，下载后打开，然后一直点下一步安装就行了。 安装好后，我们打开这个软件，点击右上角的 cloud 图标，再点击右上角的加号，我们选择一家大模型供应商，可以选 deepsea 啊，智普等等，这里我们选择 deepsea， 选择后我们滑到下方，这里需要填一个 apikey， 然后我们打开 deepsea 官网，点击开发者平台， 在左侧点击 apikey， 然后我们创建 apikey， 可以 随便取个名字， 然后复制创 apikey 到刚刚那里粘贴上，然后点击右下角添加，这样就添加好了。添加好后，我们重新打开 curlcode， 可以 正常使用了，我们随便问一句，让他自我介绍一下， 可以看到它已经能够正常输出了。 curl code 功能非常强大，可以回答问题，写代码，做网页，让我们的想法变成现实，大家赶快上手去安装吧。

今天介绍一套好用的 web 代码工具，国内就能使用，无需魔法 windows， 快 捷打开 windows， 点击市场。安装 cc 插件，请看操作。第一次安装，这里会出现安装两个字，我的已经装过了。 接下来看怎么启动 cc， 点这个 cc 图标， 这就自动跳过，不选也行。 这里有三种模式自动执行，先预览再确认，先规划再动手。 为啥这里能使用国内模型，那就得请出 switch 这个工具了。 现在我们来用 switch 配置国内模型，点酷狗，选 mini mac， 添加 p 和模型信息， 点酷狗看到新加的点启动就行了。 好了，已经能干活了， 接下来是常规演示，看不看都行。 好嘞，今天就到这里，感觉 switch 作者开源，有啥问题评论区见。

首先呢，我们需要去打开谷歌旗下的 ai 工具 gemini 登录自己的账号，那我这里呢，已经是登录好账号后的界面了， gemini 的 作用就是去扮演一个程序员，根据我们对于网站的需求来完成代码的编辑。接下来呢，我们就需要去把网站的功能需求和界面需求清晰地写下来。 那假如说我们现在想要做一个能够帮助大学生分配小组作业任务的网站，我们就需要想象出这个网站的操作逻辑是怎么样的，以及它能够实现哪些功能，这些都要清晰的写下来，并且告诉 ai 我 们希望生成的网站它的界面风格是怎么样的， 然后能够确保在手机上是可以正常使用的。那最后呢，我们还需要输入这样的一句话，来确保 ai 生成的网站是可以直接打开查看的，那么这就是我们写好的一个需求文档了。在写好这个需求文档之后呢，我们就可以把它发送给 jimmy， 让 jimmy 去把它优化为更能让 ai 读懂的提示词。当然这一步也是可以忽略的，那如果说要进行这一步的话，我们可以复制这样的一句话到 jimmy 里边， 然后再把我们的需求复制到 gemini 里，我们发送给 gemini。 好 可以看到此时呢， gemini 已经给出了一个比较完整的提示词了，我们复制 gemini 生成的这样一个提示词，我们只复制提示词的模块， 然后我们在 gemini 里新建一个对话窗口，把刚刚复制好的提示词粘贴进去，我们选择下面的 tos， 打开这个 canvas 选项，只有打开这个选项之后呢，我们在 gemini 里才能够实时地看到做出来的网站是一个什么样的效果， 并且建议大家可以把 fast 选项改成 seeking 或者是 pro 选项。那我这里呢，我就直接还是使用 fast 选项进行了，如果用其他两种模式的话，生成出来的网址效果应该会更好。 ok， 可以 看到此时呢， jammer 已经在根据我们的需求帮助我们去完成这个代码创建的工作，那么在完成这个代码创建之后，它会自动的去切换到一个实时预览的窗口，我们就可以在预览窗口里看到现在做出来的网站是一个什么样子。 ok， 现在我们可以看到已经自动切换到了预览的窗口，我们来试一下这些功能是否都是可以使用的。 好，那假如说我们想要增加一些新的功能，或者说我们发现这个网站有一些 bug， 或者说有一些地方设计的不够美观，我们需要去让 jammy 帮助我们去修改 这个网站。那我们应该怎么跟 java 反馈呢？其实还是在对话框里直接去跟 java 反馈我们的需求。那假如说呢，我们想要把网页顶部的小组作业规划器这几个网文字去给修改一下， 我们就可以跟他说请帮我修改网页顶部的文字，小组作业规划器为 group， 然后发送给 jammer， 让 jammer 去帮助我们完成修改的动作。 ok， 可以 看到此时呢， jammer 已经对我们刚刚的网站进行了一个优化 好，但是现在呢，这个网站是只能够在网页上打开的，那如果说我想要把它保存一个我能够在本地打开的网页，应该怎么操作呢？我们选择 click 界面。好，我们全选并且复制。 然后我们回到我们的电脑上去新建一个文本文档，我们打开我们新建的这样一个文本文档，粘贴刚刚复制进来的 java 写好的代码，然后选择文件另存为。 这里我们需要修改一下它的保存类型，我们选择所有文件，然后文件名的后缀，我们需要修改为 ihtml 格式。好，那我就顺便把文件名也修改一下， 一定要确保我们的文件是另存为 html 格式。好，我们保存。保存之后呢，其实这样就生成了一个本地可以打开的网页了，我们来测试一下。 ok， 是 可以在本地打开的。那接下来我们就需要把这个网站进行一个部署和上传，让它变成一个可以在不同设备之间都能够打开的一个网站。那要怎么操作呢？我们首先需要新建一个文件夹， 这个文件夹可以命名一下，我这里命名成 group 吧，然后把我们刚刚制作好的这样一个网页的文件拖入到 group 文件夹里。 接下来我们需要用到一个新的网站，大家就可以去搜索一下 cloudflair， 这是它的网址。那么进入 cloudflair 同样是需要注册一个自己的账号的， 然后我们登录 cloudflair， 这是我登录好之后的界面。好，我们选择右上角的 and， 然后选择 pages， 我 们选择第二个，然后选择右侧的 get started。 这里呢需要输入我们的一个项目名称，那么它同样会作为我们的一个域名的前缀， 我这里随便输入一个，然后选择右侧的创建项目， 这里已经创建好了，然后我们看第二个他第二步是需要我们去把刚刚制作好的这样一个文件夹上传到里面，我们把刚刚制作好的文件夹拖入拖放进去，等待他完成上传。上传完成之后，选择右下角的部署站点， 好切换到这个页面，就说明现在我们的网站已经部署成功了，然后这里有一个域名，打开之后就是我们的网站了。 ok， 那 这个网站现在在其他的设备上也是可以去正常访问的。那么如何去查看我们目前所有部署好的项目呢？我们可以回到 cloudflair 的 主页里，选择左侧的 compute 下面的 workers and pages 的 选项， 打开之后这下面的呈现就是我们目前所有的项目了，那之后如果想要去修改和更新网站，也是需要去在这个页面进行操作的。

大家好，这一期视频主要讲解 cloudco 从安装到上手实操，主要分为五部分，第一部分是 vsco 的 软件安装，第三部分是 cctv 渠道软件安装，第四部分是接入 ai 编程大模型，第五部分就是上手实操。现在教大家如何安装 vsco。 首先我们打开 vsco 的 官网，点击下载 windows， 看你电脑的系统， 我这里直接下载 windows 十一安装包，点击它就会跳到下载的页面，并且自动进行下载，因为我这边已经下载好了，我直接打开，打开安装包之后，我们点下一步，这里我们修改一下安装的目录，然后点击下一步，再点击下一步 这里把这些都全选打勾之后，我们再点击下一步，点击安装，我们现在可以看到已经安装完成了，现在我们开始安装 altcode， 我 这个是 windows 十一的电脑，我们在右下角这里输入泡泡脚查找，找到这一个， 并且以管理员的身份运行，我们再输入这一行代码，这一行代码主要是给当前的脚本执行权限用的。我们回车，这里我们输入 a， 再回车，再输一条指令， 我们可以看到这个当前用户是这个值就是对的。我们再执行这一条指令，这一条指令就是安装 cloud code 的 指令， 然后点击回车，现在我们可以看到他正在获取 cloud code 的 安装包，我们等一下，然后我们再验证一下是否已经安装成功，我们现在也可以看到已经安装成功了，是二点一点七的版本。接下来我们来安装 c c switch， 它主要是切换不同的 ai 编程大模型，需要用到这一个工具，我们输入这一个网站来下载，这个是 cc switch 的 安装包，输入到这个页面之后，我们下拉，看到这里，我们点击一下，再下拉到这个页面底部， 我们可以看到这里就是他每个系统的安装包，我们找到相对应的安装包，直接点击下载，因为我这个是云朵十一的，我点击的是这一个，现在下载当中下载完成，我们双击点击运行，点击下一步， 这里我们更换一下它的安装目录，换完装目录完成之后，我们点击下一步再点击安装，这样就安装完成了，我们可以看到系统桌面上显示安装 cc switch 已经安装完成的图标， 我们双击一下这里这些就是我之前已经配置好的 ai 编程大模型，这里有智普，还有 d c， 还有汇集流动平台的，我默认使用的是智普的。 如何添加 ai 大 模型呢？这里在这个 cc switch 的 界面上右上角这里添加，这里我们可以看到它是有非常多 ai 大 模型的接入方式， 还例如 c c， 智普，还有 mini max 硬币等等，我们选择智普这里下拉下来，下面就是填写 api 密钥了，我们打开智普的 api 后台官网， 这里就可以新建你的 api key， 新建完成之后，你把这个 api key 复制到这个页面里面。 cc switch 的 下拉的页面里面，复制完成之后，你直接添加就可以了，添加完成之后再回到这个页面，你可以去启动， 例如我这里现在默认是字母，如果你是换成是 dc， 你 可以去点击启动，这样就切换成功了。当前使用的就是 dc， 它还需要在这一个页面里面的设置里面 打开，把这一个应用到 cloud code 的 插件这里打勾完成之后再保存就可以了。所有工具安装完成之后，我们现在开始启动 cloud code， 我 们先新建一个文件夹，然后右击再通过 vs code 来打开，然后我们来安装一下 cloud code 的 插件， 在这个 vsco 的 左边左下角这里搜索 outco， 第一个这里我已经安装了，如果是没有安装的，这里是显示要安装的，你点击一下它就安装完成，安装完成之后它右上角这里是有一个 outco 标志的， 这样就说明已经安装完成了。然后我们打开终端输入 cloud code， 现在我们可以看到它已经是用的是智普的四点七，我输入的一个，你好，它也是已经是有回应的，这说明它已经 cloud code 已经是接入成功，并且正在运行当中。

今天这期视频我们只讲一件事，就是普通人怎么用 codex 开发一个小项目，并且部署上线。很多人可能一听到 code 代码就会产生畏难情绪，但你肯定听说过之前的 open cloud， 很 简单，在手机上给他发个信息，他全自动的就给你干完了，但是他贵啊，帮你发一个小红书就可能花你几块钱， 更别说开发一个工具了。但是 codex 作为 ai， 一个 open ai 的 出品，不但可以像 open cloud 一 样帮你完成几乎任何事情， 而且赠送的免费额度就能满足日常所需，如果你是会员，那更是用不完了。更重要的是，学会这种最顶级的 ai 工具，你就具备了做任何产品的能力。这期视频是 codex 的 入门视频， 我会带你从零上手，从怎么安装 codex， 怎么启动 codex， 如何与 codex 对 话，然后我会带着大家从零开始构建一个电影评分网站，并且部署上线。注意啊，就算你完全不懂开发也没关系，这期视频就是为你准备的。 我们开始首先在开始菜单中搜索 cmd， 打开命令行，这是我们与电脑和 codex 沟通的窗口，我们所有的对话都会在这里完成。与此同时呢，我们需要打开一个 check gpt 的 窗口，因为我们都是新手嘛，怎么用这个命令行都需要让 gpt 来告诉我们。 第一个问题，如何在命令行中安装 codex。 他 告诉我，首先确保安装了 node 点 gs， 我 这里已经安装了，如果没有，你可以让他告诉你怎么去安装，这里就略过了。第二步，复制他给我的安装命令，然后 ctrl 加 v 复制到命令行中， 命令行没有报错就说明安装完成了。在命令行中输入 codex， 如果能打开这个界面，就说明我们成功启动了 codex。 第一步，登录 codex 通常都会选择第一个，通过网页端完成登录，登录后回到命令行页面， 点击回车。继续我给大家讲一下最基础的配置。首先点击键盘上的这个斜杠，你可以看到 codex 的 一些基础配置项就出来了，比较重要的是模型选择和权限设置，模型我一般都会选择最新的思考时长，选择 extra high， 这样生成的质量最高。 第二个 permission， 我 选的是 full access， 所有的权限都交给 codex， 不 然它在执行任务中会一直让你去授权，很麻烦。当然这样也是有风险的，有比较小的概率它会删除你的文件，网上就有人遇到过，但是我目前还没有啊。 接下来我们就正式的来做这个电影评分网站，真的超级简单。首先我们创建一个文件夹，作为整个项目的根目录，然后我们要让 codex 进入我们这个项目，怎么操作呢？回到命令行，连续按两下 ctrl 加 c， 退出 codex， 然后复制我们这个项目的地址，打开 gpt， 问他如何让命令行进入这个地址，按照 gpt 的 指示进入后呢？ 输入 codex， 这样就在电影打分的这个项目中打开 codex 了。每次重启 codex 后啊，都需要重新设置一下权限，改成 full access。 接着很关键的一步，执行一次启动命令斜杠 i n i t。 执行完毕后，它会在项目下生成一个 agent 点 m d 的 文件，这是 codex 的 一套默认行为规范手册，它会根据文件中的行为规范来完成你的具体任务。 后续你玩熟了，就可以按照自己的要求来修改这个文件了。现在呢，咱们暂时不管它，然后我们就可以来描述具体的需求了。我是这样写的， 由于豆瓣网站的电影评分已经严重失真，我打算做一个新的电影评分网站，基本实现电影的评分和评论功能。你需要完成整个项目的完整开发，并且部署上线。 你需要自动抓取豆瓣上正在上映的电影自动更新。这是一个完整的项目，你负责完整流程，最终交付给我。部署后的网址，你可以利用相关的部署 skill 来帮助你完成。如果没有这些 skill， 你 可以自己去网上搜下载下来用回车发送。 你看，他已经开始自己执行了。突然我想起来忘了跟他说一句话，按一下键盘左上角的暂停键，然后我跟他说，在交付前用肉眼检查一下，没有问题再交付给我， 这样他就会自己用浏览器打开看一下，确保没什么问题。接着他执行了大概二十分钟，最终你看他给我交付了上线的地址，后面简要说了一下他具体交付的内容，我们立刻把这个网址打开，看看效果咋样。 嗯，整体感觉还行，春节档的这几部电影也都在，不过很多图片没有加载出来，界面呢，也不怎么好看。这就是后续你需要不断地跟 codax 沟通来优化迭代的了，包括你后续想用自己的域名，也可以通过跟 codax 沟通来帮你实现。 好了，这期 codex 小 白教学就到这里了，其实还有很多使用的细节技巧，我没有涉及到，你都可以直接通过 codex 或者和 gpt 聊天快速掌握，赶快用起来吧！我是阿猪，关注我，让我们一起在 ai 潮头冲浪！

你知道吗，现在 ai 已经不只是能帮你写代码开发 app 了，他甚至可以直接操作 iphone 模拟器，点按钮输入文字，自动帮你测试整个 ios app。 哈喽，大家好，我是欣欣，欢迎收看上班前一小时的 web coding 学习 vlog。 我 们之前做这个 magic to do ios app， 其实已经有三个 ai 小 助手功能了，但今天我要做一项非常关键的升级，让 ai 自动操控 iphone 模拟器，自己去测试 app。 第一步呢，我们先打开用 ai 发电里的 ios 课程，跟着老师的节奏一步一步来。我们今天要安装这个工具呢，叫 scode build mcp， 我 直接按照它 github 上的安装说明，在科室里把整个环境配置好。那这里简单说一下它是干嘛的？ mcp 呢，本质上是一个标准化的协议，可以让 ai 跟外部程序沟通，比如说 scode ls 模拟器。也就是说呢，我们可以给 ai 装上一个接口，让它不仅能写代码，还能真正参与到构建、测试和调试流程里。 那接下来呢，就是最关键的一步了，我直接对着我的 ai 说一句，你好，我这是一个 ios 应用，你能不能帮我去测试一下这个 app 要用上 xcode build mcp， 然后你会看到 ai 自己跳进 scode， 打开 iphone 模拟器，启动我们的 app。 哇，现在大家可以看到 ai 自己到这个模拟器上去测试，可以看到它自己在点击上面的按钮，然后自动去截屏，自己去填写了一个测试版本的代办事项，然后去 mark complete， 完全是一个自动化流程。现在测试也不需要我们自己去做了。 整个过程呢，我一行代码都没有再写，一个按钮也没有再点，所以今天这期 web 扣定的核心只有一句话，让 ai 来测试 ai 写的代码和 ui。 不 管你是做 web 应用还是 ios 应用，只要有 mcp 这种工具，都可以把大量重复的测试工作自动化，这一步真的能省下非常非常多的时间。好了，今天的 web 扣定学习记录就到这里，收拾一下准备去上班，我们下一个 vlog 见。

为什么我说现在就是你开始 vaping 的 最佳时机？因为现在开始的成本真的很低。 openai 的 创始人 sam ottoman 在 推向上宣布，他家旗下的 codex 能免费用了，而且免费的不是什么渣渣模型，而是 openai 最新的 gpt 五点三。 codex 速度更快，逻辑更强，完全不输隔壁添加了 cloud ops 四点六，那我已经深度使用一个月了，并且已经手搓上线了自己的产品。那么这期视频我们一起来学习一下如何正确使用 codex， 开启你的 web coding 旅程。 给还不了解 codex 的 同学简单介绍一下， codex 是 open ai 旗下的编程智能体，而隔壁 cloud code 是 同一种产品，有了 codex， 再加上 gpt 五点三的模型，就可以愉快的编程了。 一般人看到黑底白字的命令行界面估计就被劝退了。别担心， codex 不是 硬核的即刻工具，它有正儿八经的图形界面，官网下载、安装、登录一气呵成，没有什么要你做的复杂配置， 接下来的内容很关键，你要搞清楚两个概念，工作区和 thread 工作区。你可以理解为你的项目文件夹，比如你想做一个网站， 先建立好文件夹之后，所有的代码文件都会保存在这里。而 thread 就是 一个个的聊天窗，这些聊天窗就是 一个个的任务线。这里有个黄金法则，大家一定要记住，不同的任务要开不同的 thread， 千万别在一个窗口，一会让它改 bug， 一 会让它写新功能。另外你也不用傻，等任务完成，你可以同时开多个 thread， 同时处理多个任务，效率直接起飞。前段时间爆火的 skills 在 codex 里直接格式化了，内置了几十种的 skills， 鼠标点点就能安装了。这些 skills 能让你的 agent 如虎添翼，关键省去了繁琐的搜索和安装过程。 最后分享一点个人使用心得。上一个视频里我推荐了谷歌的 anti gravity， 其实这两个产品你可以一起用，把 codex 的 插件装在了 anti gravity 里面，这样你可以同 同时要用多个模型，比如让 g p t 五点三改 back， 让 jammer 做前端，让 cloud 出方案，不用切屏，不用复制粘贴，一个界面汇集世界上最好的三种模型帮你干活。这套 web coding 的 形态， 你值得拥有。以上就是本期视频的所有内容，欢迎关注艾伦，二零二六年，我会持续创作更多 web coding 和 ai 工作流的相关内容，我们下期再见。

昨天教给大家怎么安装吹这个工具，我看群内有很多小伙伴都把自己的截图发出来，甚至有的小伙伴已经提前学习，主动的去尝试写出了一些比较有意思的小网页。那今天呢，我就跟大家讲讲怎么样用吹去做 web coding。 很多人一提到 coding 第一反应就是 啊，我看不懂，都是英语或者是怎么怎么样的。今天我想告诉大家的就是 web coding 或者说是编程，它其实不是一种很复杂的东西，它本质上是一种沟通。想象一下电脑，它就是一个很笨的笨蛋，那我们 其实是需要给他提供一份说明书的，只要大家能把一件事情讲清楚，具备完成叙说整件事情的逻辑，那其实我们都是有外部限定潜力的。想象一下， 这就是一个拍摄的一个片场，那电脑就是帮我们干活的打工人，我们就是那个总导演，我们不需要亲自去写每一行的代码，我们只需要精准的去输出我们的外，也就是我们的意图是什么。举个例子，我们想写网页的时候，我们最好不要告诉他你帮我写个网页，你可以告诉他我要一个 在博朋克风格，或者说是我要一个有关于流动效果的一个登录网页对这种氛围感的精准的描述呢，就是 web coding 中的 web。 如果咱们没有想好怎么拍，我们这时候就需要 ide 模式，可以呼叫 chat 拆的，其实就相当于我们的军师，是可以帮我们出谋划策的。那如果我们想要立刻迫不及待去看到一个最终的成品展示效果，这个时候我们可以呼叫 builder， 它就相当于是一个全能工头，可以帮我们一键的输出我们最终想要的成品，一秒就可以把我们的想法变成一个现实。那为什么有人还是觉得，哎，输出的内容好像跟我想的不太一样？ 其实是因为我们给了电脑这个笨蛋一个比较模糊的说明书。既然我们作为导演，那我们肯定不能盲目的去开始一个项目， 也就是我要重点教给大家 solo 模式下的 plan 功能，像处理复杂的大项目呢，我们千万不能让 ai 直接上来就开始进行编写代码，为什么有时候 ai 会原地转圈，就是因为它没有想好，它就直接动手了。那具体的步骤呢？就是我们开启 solo 模式， 输入我们的需求，确认 plan 的 开启。开启后呢， ai 会先给你一张思维导图，告诉我们应该先建立什么文件夹，应该按照什么样的逻辑去构建这整个项目。 我们可以去审阅检查这份计划，如果我们觉得这份计划差强人意，我们直接打断他，改完计划再让他写代码。编程的门槛已经彻底消失了，现在最需要的其实是大家的想象力和创造力，那大家可以去想一想，如果我们现在就有了一只完全听我们指挥的 ai 编程团队， 我们最想做的 app 或者网页是什么？那大家可以打在评论区里，我也会帮助大家一步一步的去把这些想法去做成一个真实的应用。那如果感兴趣的话，大家可以关注我，并进群，拜拜。

哈喽，大家好，今天我给想给大家分享一个我外部拷定的一个简单的项目，然后我把它叫做宝贝快乐森林，然后做这个项目呢，目的也很简单，就是我周五看见，嗯，有些博主嘛，他们分享了一些自己外部拷定的一些项目嘛，啊，所以我就想自己动手做一个 啊，因为我之前也没有什么经验，所以就想自己尝试一下，然后啊，我周六的话就捣鼓了一整天，然后做了一个出来，然后感觉还蛮好玩的，所以在这里想分享给大家。 然后啊说一下这个项目本身吧，然后他其实是一款呢轻量级的一个日常记录和嗯，和一个习惯养成的这么一个软件。然后啊他的目的呢，也就是用来记录一下我的日常，然后希望去帮我，帮我养成一个良好的一个作息和生活习惯， 然后下面我来简单介绍一下吧。然后啊这个小数的图标呢是这个软件的主界面，然后现在的话， 实际上啊，因为因为现在还处于一个没有登录的一个状态，所以说就还没有办法看到他的功能，然后第一次使用的话需要先注册一下，然后这里我去注册一下， 然后注册之后呢就点击登录， 嗯，登录之后的话，就是一个可以看到是有一个用户的一个状态了，然后这里会有一些设置，然后你可以调节嗯语言，然后目前的话就只有中文和英文，然后还有一些背景音乐，可以把音量调大一点。 对，然后这里就是主界面了，然后这个主界面呢会随着你当天的一个快乐值会发生一些变化，然后这里种植快乐树，然后这个地方呢，你可以去完成一些日常打卡， 然后这里的话基本上啊我罗列了一些我，嗯认为比一些比较重要的一些生活习惯吧。如果你当天完成了，就可以去进行一些打卡，然后点击保存。 嗯，点击保存之后，他这个界面会发生变化，然后主界面的话也会发生相应的变化，然后快乐值越高的话，这个，嗯发生的变化会有所不同。 ok， 嗯， 对，然后这里还有另外一个功能，就是你可以去写自己的一个日记，然后这里的日记的话，你可以以图，可以以图片和文字的形式去写出来。然后我这里的话就给大家做一个示范， 找一些图片， 找一些我旅游的图片。 ok， 然后需要写一些文案， 然后文案的话啊，我其实在这里已经写好了一些，我就随便粘一下，然后点击保存，然后我去再写，再写一篇。 ok， 点击保存，然后退出。然后写的日记呢，可以在这边查一下，可以看到， 对，然后他也可以进行有一些筛选的一些功能。然后这个快乐森林呢？嗯，的功能呢，他有可以看到你当前周期，也就是 嗯这一个月以来的一些一些记录，然后包括你的一个健康作息的一个天数和当前的一个进度的一个进度值，以及你今天的一个快乐值，然后这里的话会有会有你的提交记录，然后是， 嗯近一年的提交记录以及这些数据的一些统计，包括一个饼状图和一个折现图的一个数据分析。 然后最后呢是一个奖励系统，奖励系统啊设置成了一个许愿的一个机制，就是如果说你一个月有超过二十五天的一个健康作息，你的快乐值达到了有二十五天达到了六十级以上，那么在这里会有一个嗯 嗯会增加一个愿望，然后你可以点开这个愿望单，然后在这个愿望单上面写上你的愿望，然后算是给自己一个小小的一个奖励吧。对，然后，嗯， 对，以上呢就是关于这个，嗯，一个小一个小程序的一个全部的一个啊功能的一个分享，可能啊他还有许多不完善的地方，但是因为是也是我自己第一次做 web 编辑的一些经验吧，然后希望在这里分享给大家。 然后另外关于啊这个项目的话也放在 github 上面了，然后如果说有需要的话，小伙伴的话可以去看一下，然后我这里的话也有他的 啊关于这个项目设计的一个啊，我自己外部口径设计的一个方案，然后如果有需要的话也可以私信，然后啊我可以分享给大家，然后谢谢大家。

尝试用 ai vibe coding 实现一个 r i， s， c， v 处理器。首先先在 cr 里面提需求，要求在 d e r 开发板上实现一个 r i， s， c v 处理器，通过 l c d 屏幕和 led 数码管将纸质和寄存器输出。接着再让它生成一个秘籍文件用于 cpu 出使画测试的指令 预算简单地加减成盒跳转，然后启动 quattas 翻译代码翻译过了，接着启动烧写 运行的效果运行起来了，但是似乎有 bug， 只执行了一条指令就复位了，还得继续优化。

测评， callopus 四点六模型，零基础开发，全程没有协议性代码，到小程序，到 up， 到后台管理，到接口开发数据库对接，全开发教程，全程干货准备发车。打开我们的开发工具，布置客户需求文档，提 供给 ai 进行分析，获取按权。这分类的功能清单 清单、技术要求和开发规范一并交。 代码已编辑完成。启动项目运行，进行功能测试，调试，修复问题。 打开 navik 客户端工具，连接到目标数据库，右键点击数据库连接或数据库名，选择运行 s q 六文件，选择要执行的 s q 六脚本文件，点击开始执行完成。创建数据库， 等待 maven 依赖下载完成。找到主启动类，带有 spring 不 application 注解，点击类旁边的绿色三角形按钮，选择 run 启动，查看控制台输出，确认启动成功。 找到前端项目 c m d， 进入项目目录，执行命令 m p m install， 等待依赖安装完成。执行命令 m p m 任意启动前端项目。复制前端地址，如， h t t p 冒号斜杠，斜杠抖 o c l h o s t 冒号三零零零，打开浏览器，访问该地址，进入管理后台项目 模块一，系统登录模块二，首页数据统计模块三，用户管理模块四， 商品管理模块五，订单管理模块六，预约管理模块七，轮播图管理模块八，新闻资讯管理模块九，文化内容管理模块十，展品管理模块十一，帖子管理模块十二，评论管理模块十三， 管理员管理模块十四，系统配置模块十五，收入统计报表模块十六，订单统计报表模块十七，商品统计报表模块十八，用户统计报表模块十九，访问统计报表启动小程序项目 首页模块，文博图快捷导航历史文化推荐新闻资讯商城模块，商品分类商品列表商品详情加入文化展示历史文化制作工艺数字展馆展品详情 社区模块，帖子列表发帖评论、点赞、预约体验、在线预约预约管理状态追踪、用户中心登录注册、个人资料、收货地址、订单管理。这不是巅某，这是一个可以直接上线营的完整产品。 太震惊了， ai 已经这么强了，我也想学怎么开始，能帮我开发一个小程序吗？多少钱？不信， ai 写的代码肯定一堆蹦。评论区，告诉我你的想法，每条评论我都会认真回复。