vibe coding前端如何测试

从今天开始，我们就正式地进入了一个二十八天的 web coding 的 学习之旅，每天三分钟，我们一起来学习 web coding。 那 第一点就是 web coding 这个词它是从哪里来的？二零二五年的二月份，有一个叫 capace 的 一个 ai 大 佬，这个人他的背景是什么呢？首先他是欧本 ai 的 联合创始人，也是特斯拉的前 ai 总监， 有一天啊，他说他发现了这样的一种编程方式，你不需要懂代码，你只要跟 ai 来进行聊天，你觉得这个 ok 了，你就继续往让他往下走，但是如果你觉得有问题，你告诉他，让他来改，他把这样的一个过程就称之为 web coding。 那 web 和 coding 它其实是两个词， web 是 什么意思呢？它其实就是氛围感， 只要你感觉对了，你就可以继续往下走。对，所以在 web coding 的 这个领域里面，你不需要去记代码的一些结构，什么 if、 else 啊， for、 循环呐，你只要学会用相对结构化的自然语言，能够跟 ai 去进行一个表达和交流就可以了。 对，这个就是 web coding 这个词的来源。好，那接下来我们再来聊一下。第二点就是 web coding， 它跟我们的传统编程有什么差别？传统的编程我们是需要花几个月的时间去学习它的一个框架，去学习它的语法的。那么 web coding 呢？其实就完全不需要对， 像今天百步扣顶，它其实完全能够做到你轻松自然的跟 ai 去进行一个交流。我打开我的那个 tree， 我 就跟他讲，帮我做一个酷炫的个人网页，深色的要有动画效果，大概几十秒到几分钟的时间啊，它就能够给你生成一个网页，那是不是非常的酷炫？对于普通人来讲，它其实就是非常的友好，对不对？ 这是第二点，那我们来说第三点就是 web coding 跟你有什么关系？那我觉得关系就大了，你想做一个个人介绍网站，或者是你想把小朋友的一些作品上传到网上，你以前会用什么途径呢？ 你打开你的 qq 空间，把你的照片或者是把你的视频传上去吗？如果你想做个小程序啊，那你是不是得去找专门的工程师啊？现在呢？不用了，对你是学生也好，你是白领也好，你是普通的上班族，是妈妈，只要你想做一些小东西，小工具完全是可以的。 对，所以 web coding 他 把一个编程的门槛给拉低了，不需要你数学很好，不需要你懂代码， 你只需要有一样东西，你要知道你想要什么，你想做什么，同时你能够把它相对结构化的表达出来， 那我们就可以把它变成一个真实的。对，那下一个分享呢？我就来带大家一起来看一下那些零基础的人，他们用百步扣顶做出来了哪些酷炫的东西。我们先一起来找找感觉啊。那今天就先到这里喽，拜拜。

为什么我说现在就是你开始 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 工作流的相关内容，我们下期再见。

今天要给大家分享一个零门槛尝试 webcoding 的 方法，而且可以像 app 一 样在手机上使用。这个就是我自己做的一个识别食物飘零和升糖的应用，可以直接调用相机识别食物，可以推荐和查看一些食物的飘零和升糖指数。下面这些按钮都是可以直接点击的， 从整体的 u i 设计到应用生成再到部署都是免费的，非常适合用来做入门尝试。 首先我们还是先让 ai 帮我们梳理思路，我把自己的想法给到 ai， 让他帮我梳理产品的设计逻辑，这样整个产品完整的设计方案就有了。 接着我们 use stitch 来设计应用的 ui， 直接把刚才 ai 梳理的产品设计方案给到他，他就会出一整套产品 ui 设计，他其实也是个无线画布，我们可以在过程中不断修正他的 ui 设计方案，可以做多轮调整。 ui 设计满意以后，我们框选要用到的设计图，直接点右上角的导出，选在 ai studio 构建就会自动跳转到 ai studio， 我 们直接构建应用的零点一版就来了。接着我们可以试用和调整，这里都可以用简单的自然语言，比如我提了很多次推荐的实物和图片，对应不上让它修改。 最后在不断的迭代中，我们就有了产品的一点零版，如果想要分享给其他人，我们可以直接在右上角部署，这里需要有一些绑定，他的官方说明是九十天内都是免费的，我也是用的这个免费的版本，大家可以按需选择。 完成以后，我们可以用手机浏览器打开选择分享点更多，把它添加到主屏幕，就可以直接在手机主屏幕上像 app 一 样打开了。好了，有兴趣的朋友快去试试吧！记得关注 cc， 我 们下期再见！

那作为一个没有任何技术背景的人呢，我自己在 why 扣顶的时候其实也踩了不少的坑，比如 why 扣顶应该选择什么工具，在扣顶的时候应该做一些什么，以及在最后怎么让他来帮你做扣顶的检查等等。所以如果你也正准备利用马上假期这段时间来去试试看的话，那 来吧，我们开始。 那首先 by keyword 呢，你可以简单理解，也就是把你脑子里面那些模糊的想法变成 ai 能够理解的描述，然后让他帮你做出来的这么一个过程。但怎么去描述其实也是个技术活，所以呢，我就放到后面给大家做分享。 不过 keyword 的 话，其实现在市面上已经有很多的工具了，我给大家分享一下我的心路历程。比如 一开始呢，我是先接触的 g g b t 和 german 的 canvas， 你 会发现它其实就是在聊天的窗口旁边开辟了一个画布，主要是让你学会怎么用一段 prom 就 能够把你的想法变成一个像这样的画面，所以基本上没有太高的门槛的。 不过如果你想要更进一步，想要更精准一些的话，那你就可以去尝试一下，比如说 google 的 ai studio 或者是 kimi 的 visual coding， 好 处就在于，一呢是免费，二呢是他们能够让你快速的去了解如何构建一个完整的网站，更考验你输出 pro 的 能力。所以我非常推荐大家可以从这里开始练练手。 但如果有些功能你想改或者想加点什么东西的话，你可能聊着聊着 ai 就 已经忘了，哎，我前面说了啥了，它的理解有限， 所以呢，你就可以先下载下来，然后导入到 ctrl 或者是 ctrl 这样的一些 ai 编程工具里面，让他们来帮你改。因为这些工具有一个特别好的地方，就是他们能够记住你整个项目的架构，能够帮你处理一些更复杂的一些编程问题，而且操作的这个过程呢，也没有你想象中的那么复杂。 所以呢，我们就拿 ctrl 来举例吧，我自己总结了后来我自己在 yq 顶时的一些小技巧，也许你可以参考一下。 那首先我发现原来 yq 顶呢也是有工作流的，比如以往呢，我们可能就直接告诉他了，帮我生成某某网站，那他就给我输出一堆的代码。 但到后面你一定会遇到很多的 bug 或者是其他技术性的问题的，是我们这种技术小白完全没有办法解决的。所以后来呢，我踩了很多的坑之后呢，才建立了一套所谓的工作流，去尽可能规避这种情况。 比如你看啊，左边呢，我有一个叫做 comments 的 文件夹，点开之后呢，里面其实就存放了我工作里的文件啦。如果用一句话来总结他们的话，就是让 ai 充当我的 cto， 然后来帮我梳理前期的需求到后期的执行的整个过程 角色带入需求探索，方案制定还有执行的阶段。以往呢，我可能就直接拉进去了，然后就开始问他啦， 但如果每个文件都这么拉的话，你一定会觉得很麻烦的。所以呢，我就把它封装成了一个 skill 最近特别火的一个概念，只要我说参考我的 skill， 比如说我想开发一个能够下载 youtube 视频的一个工具，那它就会自动搜索我的 skill， 你 看开始工作了， 点开看一下呢，那都是我功能开发的一些工作流啦。第二点呢，就是去约束 ai 的 发挥，我真的觉得这一点特别的重要，因为有时候呢，你会发现他会为了实现一个功能啊，使出一切的手段，甚至去创给你原本的代码，我真的是 崩溃。反正呢就是一旦他给你 bug 顶出来一个什么东西之后呢，你先别急着去修改或者去完善他，而是先建立一个叫做 cut 或者是 a 准这样的一个文档。 比如你把鼠标呢移动到这个小圆圈，会显示一个叫做 actros 的 东西，下面呢就显示了一个叫做 a 准的文档。那就说明了 ai 在 开发的过程当中呢，都是基于这个文档为基础去开发的， 里面有你的基础站，有数据的结构，页面的布局等等，这样才能够避免后面出现很多的 bug 或者是其他技术性的问题。 不过怎么去建立这个文档呢？那你可以在一开始让 ai 帮你生成一个产品出行之后啊，参考一下这段题序，大概意思呢，就是帮我建立一个 a 卷的文档，里面包含什么呢？只要说清楚就可以了，过一会生成之后呢，我们再检查一下，看看里面有什么遗漏的，需要添加的就可以了。 第三呢就是其实即便你没有任何编程的经验呢，也可以让 ai 来帮你做代码的检查，因为你难免都会遇到一些 bug， 而且对于没有任何编程经验的我们，很有可能 bug 没有改好，还把代码都给改乱了，对吧？ 所以后来呢，我就给自己准备了一个叫做 code review 的 文档，以后当你每一次完成某个功能的开发之后啊，你就可以把这个文档丢给 ai， 要求他帮你做一个代码的检查，所以你会看到他审查的结果是，好像也没有什么太大的问题，只不过是有一些可以维护的一些小问题罢了。 所以这就是我平时 vlog 饮食的一些小技巧和小心得吧，希望对你有帮助。不过呢，如果你有更好的一些方法的话，也希望你能够分享给我，让我也少踩点坑。 ok， 那 么今天的视频就到这， respect！ 拜拜！

今天我们这期视频只讲一件事情，就是普通人如何使用，如何安装 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 时代，我们不用纠结新出了什么东西，哪个模型更厉害， 能帮自己提效的，自己用着习惯的，对自己来说就是完美的模型，完美的工具。好了，本期内容分享就到这里，我们下期再见。

今天这期视频我们只讲一件事，就是普通人怎么用 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 潮头冲浪！

web coding 工作流开发啊，我们把它称为 s o p， 这一套 s o p 的 话，大家下去之后一样可以去借鉴啊。我们按照步骤来，第一步是整个规范，规范的定义啊，我们可以在 spec 里 面完完成。刚才有同学我看到前面好像有同学打出来这个 spec kit， spec kit 呢，其实是我们的一种约束规范啊， specquake 那 个 kit kit 对 应的规范，那规范这一层 spec 里面来去定义对应的规范啊，具体的怎么来去做？第二层呢？其实就是代码生成 有规范，有具体的实施步骤以后，接下来借助 ai 来帮你生成代码。第三步让它来去完成测试，用力的编写 啊，然后呢，再自动测试，加上自动的 link， 最后收尾，收尾， 基本上就是这样一套，如果说你还能够加一个反思，就是一个 check 的 过程的话，那还可以去回头来去思考一下，就自己整个编辑过程中还有没有什么地方有遗漏的啊？或者说开发的这个不太不太到位的点，对吧？应该怎么做这一点呢？就是基本上是我们整个 s o s o p 的 一个过程。 好，那在这个里面呢，其实会涉及到一些工具啊，因为我看到有同学提出来了一个工具呢，是 m c p 工具，第二个工具呢是 scale， scale 的 一个 内容啊，这个呢，我给大家简单介绍一下， m c p 可以 在整个 webcoding 的 流程中间起什么作用呢？比如说我要去查资料，查资料的话，这个过程它本身其实是，呃，我们在 webcoding 模型层是不具备的，那模型呢？就需要调用工具，模型调用工具啊，你本地没有这个工具，那怎么办呢？它就需要一个通用的 工具协议来调用，那这个工具协议其实就是 model context protocol， m c p 全称是这样来的啊，全称 model context protocol， 所以呢叫模型上下文协议， 简称 m c p。 然后这个 scale 呢，它其实只是一种，我认为啊，本身其实也是这个呃 astropics 提出来的 scale 呢，也是它的一个机制 scale n m c p 呢？其实都是不同的机制啊，我们现在基本上用的微信呢，还是 m c p 的 这种形式，那它可以来做什么呢？第一个它可以来，比如说查资料， 查资料，比如说查什么资料？我们假设基于 deep v k 啊，我们来看它有哪些这个仓库，对于仓库的理解，我们可以基于 deep v k m c p 啊，我们如果要去做一些那种呃组组间库的开发，或者说基于某一个组间库来完成开发工作的话，那我们其实可以呢，记住，比如说那个 c n c n 呢？ c n c n 的 话，它也有对应的 m c p， 来让整个模型在使用的时候更好的理解它的整个 ui 的 编写。但是呢，其实这个是有点点积累的，我认为为什么呢？因为只要是前端的编码的一些代码，它都在本地，都在本地的话，你与其去读文档，读它的那个开发文档，还不如直接看它原码来的实际 啊。所以呢，还有各种各样的这些 m c p， 我 待会呢会给大家演示来看一看。那这么多 s a s m c p 呢？你自己去配，那整个要配晕过去啊，那我们一般呢可以去借助一个工具，那个工具呢叫呃， z s f， 这个呢大家可以说 z z c f 吧， 这个工具我不知道有没有同学在用这个 z c f 呢，它能够去很轻松的帮你去管理模型，管理 m c p 工具包括呢，还有你你要做的整个 s o p 的 流程下面一些设置都可以寄予那个 z c f 是 c f 还是 z c f， 反正 zero config format 啊，就这个工具 zcf。 好， 我们来具体的开始来给大家去演示一下啊，整个的实线，当然呢，我们在开发整个这个 数据表格的时候呢，其实里面还有一些性能问题，这个我们可以放到最后来去探讨。啊。好，那我们先来通过一个简单的视例给大家演示一下刚才给大家说的这些方法论，这些内容呢，具体是偏方法论偏这个概念的，那我们具体多到实处来去开发怎么来做？

hello， 大家好，最近做了一个 ai 热点追踪器，那么起因是现在 ai 新闻太多了，然后也充斥了很多垃圾信息， 然后就想着看能不能过滤一下，就是及时的跟一跟热点，再加上现在 webcoding 也比较火， gbt 也发布了它最新的呃， codex 五点三，然后所以就想着来简单实现一下，那么目前来看效果挺好的。 呃，架构的话是简单的分为四层吧现在，呃，首先第一层的话就是一个数据源层，接入了 i s s 和 google news 等信息源，那么第二层就是进行一个预处理， 呃，进行一个数据的清洗，然后去重垃圾过滤。那么第三层就是一个热点引擎，进行一个剧类，然后热度的排行。 那么第四层就应用层，前端的话主要是负责呃展示，然后后端就是提供刷新和分类的相关功能。呃，我给大家简单演示一下，那么刷新的话就在这里不刷新了。呃，大概需要一到两分钟吧。呃，这里就先省略了， 下面也可以根据公司的名称进行一个筛选。呃呃，这些都是比较大的科技公司嘛，然后这里面也会。呃，这里面也会跟一些其他的一些就比较热点的，比如说 github 上的项目， 那么就以 open air 为例吧。呃，这边的右边的热点详情就是可以直接点进去，那么目前就是这样，就是这。呃，目前是一个最小运行的版本，后续的话也会进行功能的扩展啊，流程后面也写了， 就是会进行一个中英互译，那么还有一个 ai 的 二次整合，整合完以后可以推送到飞书啊语学这种笔记软件。 呃， ai 大 乱斗的图文内容也会持续更新，感兴趣的可以也关注一下。 ok， 先到这里。

哈喽，大家好，我是杰瑞，今天我们将继续从零开始学习 web 绑定，今天我们要讲的是我们代办清单这个网页 app 的 本地数据存储。 ok， 我 们现在进行最后一个阶段，就是数据储存的阶段，嗯，我们会发现我添加了很多的这个任务以后，比如说学习，比如说 这边添加几个吃饭， ok， 他 在，他都在里边，但我们当，但当我们刷新页面以后，点击看 我之前添加的全部都消失了，并且他的这些状态以后也全部都会回归到之前的这三个啊。假任务的这个阶段 是因为我们输入的这些数据不能得到存储，这状态也不能得到存储，导致了我们就是在刷新页面以后，我们这些页面这些任务都会消失。 我们现在要写一个 prompt， 让他给我们添加这个存储的功能。这个 prompt 呢也是在这个教程里边，大家可以直接去教程里边复制， 还是用我们呃的这个框架。首先背景告诉他我们现在已经有了这么一个网页。然后任务就是说我需要他帮我们实现这实现这数据存储的功能。呃，他需要有首先保存功能， 那么保存我们现在的每个任务的状态读取功能，就说当我们页面加载时，它自动从一个这个本地存储啊的这个部分读取我们之前保存的任务数据，然后这个数据格式我们使用这个 jason 的 格式来进行存储， 好记住要求以及要告诉他我是初学者。然后关键的地方需要帮我们写上一些注时， ok， 我 们先把这个 prompt 发送给 ai， ok， 他 说他已经实现了这个功能了，嗯，我们来试一下，稍息一下， ok， 好， 现在他出场以后，他的这个任务列表就是空的，我们添加一个游戏编程， 嗯，他添加上了，嗯，这个球， 然后我们， ok， 我 们来试一下，啊，我刷新一下页面， ok， 他 们都还在，并且我进行状态的操作， 刷新一下页面， ok， 都好呆滞了，那这样我们的数据就可以成功的存储在本地，每次打开这个页面的话，它都不会，之前的历史都不会消失，那我们怎么来知道它这个是如何工作的呢？我们可以用浏览器来实现， 我们在这个 html 文件的这个文件夹里边，我们通过本地的浏览器打开它。 ok， 你 看这个小明的代办清单，然后我们出一些 呃任务学习， 然后，嗯，踢球，然后篮球。 ok， 我 们添加这些任务，然后这个时候我们按 f 十二， 然后 f 十二里边有一个 application， 然后这里就有个 local store 本地存储，我们打开它。好，我们可以看到这个 to do list 里边就有 他本地存储的这个数据，那就学习，然后他的状态是，呃，是否完成，他写的是 false， 就是 没有完成， 这个就是他本地存储的这个数据了。然后我们我们尝试一下点击完成，完成， ok， 学习，你看到他的 complete 就 true， 然后踢球这个 completed 这里写的就是 true。 ok， 我 们通过这个浏览器的这个开发者模式，我们也能够看到我们本地存储的这个数据的一个呃状态，那我刷新一下页面，看它还是在的。 好，我们现在这么一个具有页面，然后功能以及存储三个部分的 app 就 已经完成了，然后大家就可以试着自己用起来了我的代办清单，每天把自己想要的 想要做的内容输入进代办清单里边，然后就可以提醒自己 哪些任务还没有完成，哪些任务可以完成了。 ok， 我 们这期的内容就先学习到这里，如果你们觉得这期的内容有帮助到你们的话，希望得到你们的点赞和关注，我将持续更新，感谢大家，拜拜！

我用了一下午，做出了一个完整的网页应用，还部署上线了，任何人都能访问。关键是我一行代码都没写。今天我把整个过程拆解给你，跟着做你也行。整个过程就四步，第一步，明确需求。第二步，生成圆形。第三步，圆形转代码。第四步，部署上线。接下来我一步一步给你说清楚。 先说第一步，头脑风暴，明确需求。这一步是整个流程中最重要的一步，很多人会忽略它，但我必须告诉你，你最终做出来东西好不好，百分之八十取决于你这一步做的扎不扎实。具体怎么做呢？打开 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 说几句话的事先照着做一遍，做完你就懂了。我把完整的提示词、工具链接、原代码全部整理好了，拿到就能直接用评论区扣个六，我免费发给大家。

朋友们，我终于有自己的 openclaw 啦，我的这个叫做 bunnyclaw， 我 知道网上有很多安装教程，但是在你安装之前呢，我想先跟大家分享一下我最近研究到的不同安装的方式，不管是本地还是在云端，以及它们各自的优势和劣势。 如果你有兴趣来部署自己的 opencloud 的 话，我在这里总结了截止二零二六年二月份的大部分的选项。当然现在这个科技发展的非常快，现在也有 nano body， 也有 zero cloud， 也有各种各样类似的产品了，所以说不定以后会有一些新的选项。 ok， 那 我们从头看。 如果你想部署自己的 opencloud 的 话，现在有这么几个选项，你可以做 cloudbase， 就是 云端服务， 或者是 dedicated local hardware， 就是 一个专门给你的 agent 用的一个硬件，或者是可以用自己的电脑。最后关于安全这方面，我们可以开一个话题单独聊。那么如果你想选择云服务呢？你也有两个选项，一个就是 managed cloud， 相当于一键式的云浮，还有就是 virtual private server， 相当于你在云端上租了一个别人的电脑。一键式呢呢，有一个例子就是现在的 kimi klaw， 他 现在做的就是把它们的大模型和 agent 全部放在一起，让你一次可以一起用它们， 它的好处就是一件事就可以马上上线，非常容易，并且它的安全性做的也很好。那么如果你用一个类似于这样的服务呢？就是无法选择自己的模型，你就只能用 kimi 的 模型，并且在收费方面也是付一个总费用。如果你选择租一个别人的网上的电脑呢，这时候你的安全性 也很强，并且这个电脑的可塑性和选项也很多，那这个时候呢，你就可以选择你想用什么大模型了，就不一定要用某一个模型，可以是任何你有 api 的 模型。 那是因为你在云端上租另外一个电脑的算力和空间，所以你会付一个月费，相当于你要付两份费用，一个就是这个每月的租金，一个就是大模型的费用。但是这两个云端的好处呢，就是你的 ai agent， 它是二十四小时在线和待命的，所以你随时都可以用它。那如果你考虑买硬件呢？你也有几个选项？现在市面上最常见的一个就是 mac mini， 一个就是 raspberry pi。 mac mini 作为一个苹果的电脑来说呢，它的算力和表现力是非常好的，但是它的问题就是你首先要花个几百美金，几千人民币来买这个硬件，但是一旦买了它以后，你确实可以像在用云端服务一样的让它二十四小时的不停的待命。 raspberry pi 它也可以二十四小时待命， 它的价格会更低很多，用的电也会低很多。它作为一个小型的硬件，或者类似于一个小小电脑吧，它的性能就会不如 mac mini 这样的。那接下来我们看第三个选项，就是你自己的电脑， 如果你选择自己的电脑的话，也有几个选项，你可以直接安装，直接安装的话它是最危险的一个 别是如果你的电脑上已经有一些个人信息，或者是你的付费信息，你的信用卡等等，因为你的 agent 有 你整个电脑的所有的使用权，所以它有可能做一些会让你意想不到的事情。其次呢，你可以用一个 docker sandbox， 相当于在你的这个 a 阵外面套了一层安全保护的防火墙，这个时候呢，你相当于把它框在一个文档里面，它只能接触到这个文档里的内容，而不是整个电脑的内容，所以它比直接安装会安全一些。 但是他也有自己的问题，一个就是安装起来会更复杂，更麻烦，其次就是因为他不是整个电脑都能接触到，所以有一些软件是无法用的。那最后呢，是在电脑上安装一个 virtual machine， 一个虚拟机， 这种情况下呢，其实对你电脑的消耗还是蛮大的，因为你的电脑相当于会腾出一些空间专门给他用，他的好处就是可以在当地帮你做一层隔离， 那坏处除了它会占有很多电脑本身的资源之外呢，就是它会在安装这方面也比较复杂。那以上就是如果你想安装一个自己的 opencloud， 现在你可以考虑的一些不同的选项，以及它们的优势和劣势，希望对你们有帮助。

web coding 第三天我做出来这么一个小玩意儿，现在这个版本非常简单，它是一个个人履历生成器，是我测试了一个产品，这个产品的结构目前非常简单，核心就是一个登录功能，再加上生成的内容， 然后在页面底下有一个预览和展示，到现在还没有加任何的 ui， 非常的朴素，我完全没眼看的那一种。但是对我来说，我认为还是一个比较重要的阶段，它不再是一个一次性的 ai 小 工具， 而是开始有用户系统、数据结构，甚至未来可以持续拓展的一个产品的雏形了。我之前做的应用就是 demo， 如果未来想要加上功能拓展不了是真的就是玩具。但是这一半虽然他现在还是很简单，但是他是有拓展的空间的， 我觉得这是一个值得鼓掌的地方。为什么会有这样的一个转变？我认为非常关键的一点是在于说你的这个提示词里面，或者说你有没有意识要去让 ai 帮你选择技术方案。像我之前的话可能就会说，我要做一个什么的工具啦，要有什么什么样的功能，你的页面结构是什么样的，配色是怎么样的， 但是他跑出来的就是本地的东西。但如果说你想要真的独立，你想要去做一些这种登录，包括存储，包括支付这样的功能，他是需要有这种 后端的配合，所以你需要做的事情就是去让 ai 帮你去生成技术方案，这个点我认为是非常关键性的一个思考。所以我就在正式开始写之前，我有问 ai， 如果要做这个产品，你推荐什么样的技术方案架构应该怎么设计？数据库怎么设计？ 有了这些东西之后，再让 ai 去写代码，现在做出来的东西拓展性和复杂度就是完全不一样的。在开发的过程中确实是遇到了非常多的困难。举个例子，我遇到了一个报错，这个报错我完全看不懂，它就是显示 error， 我 就截个图去问 ai， ai 说你需要去 添加一个数据库，你现在本地没有，我就要去添加，该怎么添加我又不知道，我又截图去问他，在这个过程当中，他会让你第一步执行什么，第二步执行什么？ 你可能还会有一些执行出错的地方，让你要反复的去调整，去调试，但是最终还是解决了。解决的原因就是一步一步按照他说的去做，那如果你还是看不懂，你就每做一步都截图问他为什么，这个并不一样，这个该怎么做，他就会再继续分析。所以直到最后，你只要花的时间够长， 考虑的耐心足够多，总是可以解决的。所以就在 ai 的 引导下，一步一步地把问题定位，然后解决掉了。我觉得这个过程还是特别有价值的。所以总体来说， web coding 的 第三天，虽然做了这么一个完全拿不出手的一个小玩意儿，但我觉得还是挺有意思的，我分享给大家，如果你也在关注 web coding， 也欢迎一起交流。

当前展示的版本是我这边设计的前端版本，我们最新的开发版本中已经可以做到精准的识别所有食物的种类，并且识别食物的状态，根据他的初识新鲜度给予他不同的血条生命值。然后再进入之后，玩家可以选择 手动分类，也可以选择自动分类，目前我选择的是手动分类，系统会推荐这些食物应该储存的方向，储存完了之后，我们在冰箱的界面就会看到每一层 所有食物的保质期以及它的血条，然后我们现在是在用户界面版改成了中文，然后在这里可以有一个虚拟的时间条来操控这个时间，来规划预未来的这个食物的消耗情况，然后点开每一个食物都可以啊吃掉或者说归还自然，然后也可以 更加细节的点开来轻微的调整它们的生命值。在细节那一栏，然后我们现在点开的是图鉴这一栏，这一栏的话就是 目前点开植物有一个很详细的保存的方式，我们目前也会再加一些更权威的科普，比如什么情况下应该完全舍弃，什么情况下可以保留部分， 然后在个人的这个界面可以看到你的浪费情况，然后包括我们在这个冰箱这个界面有一个菜谱的功能，它可以 快速的生成目前快要过期的食物的一些搭配方式。

普通人怎么入门 webcoding？ 手把手带领你做出第一个应用。 首先我们新建一个文件夹，可以命名为 my app， 进入这个文件夹，右键点击在终端中打开， 然后我们在命令行输入 cloud， 回车即可进入 cloud 页面， 然后我们输入要求，这里以一个网页计算器为例，把这个要求复制 粘贴到这里回车。好，我们稍微等待一下，等待它写完这个 app。 好的，我们看到他已经完成了这个任务，然后我们点开文件夹，可以看到这个网页已经在这里了，双击打开，我们可以看到已经出现了这个计算机应用，我们实际测试一下 看，我们测一下加法没有问题，试一下乘法， 它乘法也没有问题，然后我们来试一下退格，退格也没有问题，连续退格也没有问题，那我们看一下这个小数点是有问题的，我们点小数点是点不上的， 把发现的问题跟他说好，我们把问题告诉他，然后让他进行修复。然后这时候我们再打开这个网页，看一下是不是正常使用， 可以看到这个小数点的逻辑已经成功的正常使用了，我觉得现在这个风格不好看，然后我让他换一个风格。 好，我们把这句话直接复制上去。好，我们看到这个风格已经完成了，我们打开测试一下，我们看到这个风格也变成波谱风格的计算器了，是不是感觉非常的棒。 好了，到这里我们就完成了网眼计算器的搭建，这里只是做了一个简单的演示，如果你有更好的点子，也欢迎来试一试，只需要十分钟你就可以打出你的第一个应用。

今天给大家分享一个我 web 扣定两个月以来最常用的一个 skill frontend， 它是 appshop 官方推出的专门用于前端页面设计的 skill， 你 只需要简单描述功能需求，它就能像个资深的 ui 设计师一样，自动帮你生成质感拉满的页面。来看这三个案例，第一个，产品落地页，从营销的大标题到功能卡片，不仅审美在线，连文案都帮你卷出了大长尾。第二个，专属 ai 对 话界面， 看这个暗黑模式下的猫质感，还有这种呼吸感十足的布局，这只是我随口提的一句需求生成的。还有这个企业级的萨斯数据看板，哪怕是最枯燥的数据，他都能处理的非常有灵动感。 一句话， ai 的 审美真的觉醒了。为了充分测试这个 skill， 分 别在国产顶级的编码模型 mini max 二点五、 kimi 二点五、 g l m 五、前端三 coder plus 中进行了对比测试。下面分别是在这些模型中，费使用这个 skill 和使用这个 skill 生成相同页面的对比效果。 我们可以看到，所有模型使用完这个 skill 之后，页面都会变得更加高级和美观，尤其是千万模型未使用 skill 之前生成的页面，虽然逻辑是对的，但长得确实有点暗。但你看，使用了 fronten design skill 之后， 这种细腻的阴影不及感十足的排版，甚至是按钮的流光效果瞬间全出来了。好！这部国产模型的美学打卡对比效果都在屏幕上了， 如果满分十分，你觉得谁才是国产模型里的美学天花板？我也好奇这本官方的 skill 到底写了啥？我扒开了它的 skill， 点 md 文件。好家伙，这哪是 prompt， 这简直是一份大长前端美学的白皮书。它核心应在三个极度硬核的底层逻辑。第一， 审美先行的意图感。 prompt 里强制要求 ai 的 写代码前必须先在极致极简、复古未来主义、精致奢华硬核工业风里选一个极端的人设。它强调是意图感而非堆砌感。第二，它有一张极致刻薄的审美黑名单。 官方原文明确禁止使用任何的 ai slogan， 比如他点名不用 inter aerial 这种烂大街的字体，甚至严禁使用白底紫色渐变这种典型的 ai 套路配色。他强制 ai 去寻找有个性的字体，用大比例的色差和锐利的对比来拉开视觉层级。 第三，它有一套高级感的视觉公式。 prom 的 里写着了对噪声、纹理、环境、光晕和非对称布局的编号。看到这，你肯定想问怎么安装？我推使用 c c switch， 只需要在这个输入框里输入 wanton 点赞，然后点击安装即可。在这里，你还能发现并安装其他官方制作的实用的 skills。 如果你觉得这期视频有用，别忘了点赞三连支持一下，这是我持续分享 ai 超能力的动力。我是林克，咱们一起进化，我们下期见！

什么是 web coding？ 在 开发者社区里面，这个词呢是火的一塌糊涂啊，我前段时间也是作为嘉宾去参加了二十四小时的 web coding 的 一个 hackathon。 那 今天呢，我就想站在一个实战开发者的角度，给大家去聊一聊什么是 web coding， 以及那些让你歪不起来的一个神奇工具。 所以 webcoding 到底是个啥呢？ web 在 英文里面叫做氛围啊，感觉的意思，所以 webcoding 直译过来就是那种叫氛围编程，或者说感觉编程，也可以叫呢沉浸式编程。但这里的沉浸不仅仅是让你沉浸在一个有仪式感的编程环境里面，更重要的是它颠覆了我们以前 去写代码的那种方式。我直接说杰瑞， webcoding 压根是不关心你的代码具体是怎么实现的，核心关注的是代码生成的结果 到底对还是不对。至于实现逻辑，底层细节这些反手活呢，都是去交给 ai， 我 呢只需要去盯着效果，觉得哪里不对哪里问题，哎，我就直接去改这个 prompt， 重新去提需求， ai 呢，就会自动帮你去调整， 然后去优化，直到最后我们出来的这个结果，也就是代码完完全全符合你的预期为止。所以整个过程呢，你都沉浸在一种说想法， 然后呢看结果，然后调整，再出结果这样的一系列的流程里面，你只需要去说我想要什么效果，对方呢，立刻去给你去实现出来，不满意呢，你就当场去改，直到完全符合你的预期。 举个例子啊，正常我们去写代码，我们大多数人要去想明白这个实现的一个思路流程，然后细节都得自己亲手去写，亲自去改，遇到 bug 呢，还得追根去溯源。而 web coding 呢，就完全不一样，流程变了。第一个我要用我自己的话，比如说自然语言， 或者画个图，举个例子，告诉 a i， 我 想要什么样的一个功能， ai 呢？不管你是用的 gpt code， 还是专业的 web coding 平台的一个 agent 自动会给你造出来代码和界面，你根本不用管他到底用了什么方法。那第三步呢，你就实际运行看一看，哎，这个代码加界面生成的这个结果是对的还是错的？对了呢，你就收下，不对你就吐槽，提要求，让 ai 再调，那这样你从提语言实现功能，给 ai 实现， 给出结果，不对呢，再去换语言，换功能，去提要求，如水循环，只要你看到结果完全符合你心中所想呢，那这代码你就交差了。所以说白了呢，人类去负责出题加审核， ai 呢，负责解析加改卷，全过程都可以沉浸在一个叫做及时反馈， 到调整，到再反馈，再到再调整的地方里面，你自己不用考虑怎么实现，整个就是极致的一个躺平式的生产力，然后更详细去表示外部人流程。我自己写个流程图啊， 第一个就是我想要的结果，或者呢是我的需求，然后呢？哎，告诉 ai， 然后我要这样 ai 自动去生成代码。好，那生成完以后实际效果出来了， 出来以后这个看，哎，是不是满意，如果不满意，那就往回让 ai 再去呃，重新的去生成。好，如果他实际效果满意呢，那就收工。所以你看整个流程呢，就非常简单，就像你在理发店去剪头发，你只需要说 我想一个清爽一点的短发，那 ai 理发师呢，就去给你开剪，剪到一半发现太短了，你立刻说再留长一点，那 ai 呢，马上就帮你去调整，直到照镜子，你点头，嗯，挺帅的，满意为止。所以这种方式为什么是爽的呢？第一步就是效率大幅提升的，你不需要再花大量的时间去纠结底层逻辑， 调试 bug， 查文档，所有经历呢，你都可以放在我到底想要什么上，执行细节全部去交给 ai。 第二个呢，就是零门槛上手，你不需要是一个资深的程序员，甚至编程小白都能去玩，你只需要去清晰表达自己的一个想法， ai 就 可以去帮你实现，想法呢是比技能啊更重要。 第三个叫做保持心流状态，你不会被代码的细节打断思路，可以完全沉浸在产品创作中，遇到这里好像是行云流水，这个呢就是真正的外部感。 第四个呢，就是快速的一个试错，验证想法对不对，你做出来看看就知道。从想法到可运行的原型呢，可能只需要几分钟，适合快速的去验证商业想法，做产品原型可示化的 demo。 ok， 那 再给大家介绍一些比较常用的 web 扣点工具啊， 只要能够去实现 ai 自动生成，加计时预览加快速调整的，我觉得就是好的外部控制的工具。下面呢，我就推荐几个当前最好用的。第一个我一直在用的叫做 ctrl， 它目前我觉得是最火的一个 ai id 啊，体验丝滑到起飞啊。 几个核心功能，比如说你按照 command 加 k， 可以 直接在代码里面去提需求， ai 呢，当场生成，按 command 加 l 呢，可以去开启对话， ai 帮你去写整个的功能模块。 第三个，还能理解整个项目上下文，生成代码质量也是极高的。第四个呢，还能自动去查 bug， 重构代码，优化逻辑。 我觉得这个是适合所有开发者，特别是去做外部开发以及做全站开发的。第二个呢，就是国内的一个工具叫翠，他是国产的 ai d 字节跳动推出来的，免费而且好用。核心几个功能呢，也是对话式开发，而且支持中文，可以去写代码，查文档，生成 api， 而且它是完全免费使用的，它比较适合的就是我们国内的一个开发者，也适合预算有限的一个个人开发者。第三个，如果大家很习惯 vs code 的 时候， 你可以用 vs code 加上 clone 这个插件，加上这个插件以后呢，就已经可以把 ai 的 能力完全无缝集成到 vs code， 同时保留原有的插件生态和习惯，也支持连接 mcp 的 server， 获取 api 的 一个文档。 这个呢，我觉得就适合 vs code 的 一个重度用户了。那最后总结一下， web code 的 一个本质就是让人去做最擅长的事，创造和判断，让 ai 呢，去做最擅长的事，执行和实现。但我们需要具备的关键能力就是有清晰的产品思维，有要会判断代码质量，要善于表达需求，要懂得去快速迭代。 所以呢，你可以现在就打开 excel， 打开 vs code， 连上你的 api 文档，开始你的 web 扣令之旅。 ok， 那 最后如果这篇文章分享对你有启发，也欢迎在驾校站 ai 学习圈里面继续去交流，同时我们也会有很多的实战嘉宾不定期去分享 ai 实操经验，欢迎你一起围观评论区啊，我们安排。

大家发现没有，最近 cloud code 火的出奇，大家都在聊 web coding， 但同样是用 ai 写代码，有的人是多县城并发，有的人是单县城卡死，窗口堆叠的像千层饼一样，找个日制还得把桌面翻个底朝天。今天我要分享我发现的一款提高 cloud code 开发效率的终极神器 tmax， 它是终端里的空间折叠，带 t max 解决的不仅仅是乱，而是三个降维打击的效率痛点。一、分身术 multi tasking 在 一个屏幕里能同时跟三个 cloud agent 进行对话。二、不死之身，你即便把终端关了， cloud 还是在后台乖乖的帮你跑代码回来，输入一个命令即可恢复现场。 三、纯键盘流手不离键盘通过肌肉记忆快速闪现，这才是真正的 web coding。 如果你是 mac 用户，直接通过 homebrew 即可进行一键安装，只需要在终端输入 brew install tmax。 要理解 tmax， 只需要掌握三个核心概念，一、 session 你 可以把 session 理解为一次登录，每次运行 tmax 命令就可以创建一个新的 session， 在 session 中运行的所有命令，即使你退出了进程，依然会继续运行。二、 window 窗口 一个 session 可以 包含多个 window， 你 可以同时打开多个 window， 每个 window 执行不同的任务， window 就 像是浏览器中的标签页。三、 pane 面板一个 window 可以 分割成多个 pane， 这样你就可以在同一个 window 中同时查看多个终端的输出。 pin 像是分屏软件，把屏幕分成的多个区域。在 t max 里，所有的指令都有一个接头，暗号默认是 ctrl 加 b， 我 管它叫前缀键。你想下命令，请先按 ctrl 加 b， 然后松开，再按其他功能按键输入 t max， 开启一个新的 session， 然后我们启动一个耗时的 cloud 任务，比如分析这个项目的总体架构。然后按下 ctrl 加 b， 再按 d 看，我退了出来，看起来回到了桌面。现在我可以去喝杯咖啡。 one hour later 过来之后，在终端输入 t max a， 看 cloud 的 进度还在跑，一行都没丢。 接下来是让你的工作站看起来像黑客的关键。分屏， ctrl 加 b 再加百分号可以进行垂直分屏， ctrl 加 b 再加引号可以进行水平分屏， ctrl 加 b 加方向键，可以在不同的面板之间快速切换。小技巧，按住 ctrl 加 b， 再按 z， 可以 让当前的面板瞬间全屏。看代码累了就放大，改完了再按相同的命令 缩小回去。虽然高手都用键盘，但新手我强烈建议你开启鼠标模式，你只需要在用户目录下的点 t max config 文件中加入这行命令即可。 这样你就可以直接用鼠标拉动分屏线或者点击进行切换窗口了，这样的过渡更加丝滑。看这个布局，左侧是我的 cloud code， 右边是我的实时日记。 如果想再开一个项目，我不需要新建窗口，我只需要按住 ctrl 加 b， 再按 c， 开启一个新的 window。 tmax 刚开始用会有点不习惯，但一旦你形成了肌肉记忆，你会发现你再也回不去那个满屏找窗口的时代了。 如果你想尝试真正的 web coding， 想让 cloud code 发挥百分之二百的效率， tmax 是 你必须翻过的第一座山。我已经把这份 tmax 常用的快捷键清单和我的配置文件放在文档中， 想要的评论区留言，如果这期内容对你的开发效率有所提升，记得点赞收藏。我是林可 ai 实战路，我们下期见！

那我们接下来呢，来开始具体给大家去介绍整个 webcheck 的 机制。什么 webcheck 呢？也就是我们等下给大家去具体来介绍的啊， 整个开发的 sop 啊，就是开发就是 ai 开发的 sop。 我 们这里说的 ai 开发不是说开发 ai 应用啊，而是借助 ai 来去完成开发的一个步骤， webcheck。 我们今天我今天给大家介绍这部分内容呢，大家可以看到，呃，网络上，当然网线网上现在不多，但是有很多，像杭州，上海、北京其实有很多线下课有这种呃， 讲师呢，专门去讲这个 code 相关的，那其实都有很多学员啊，这个呢免免费分享给大家的目的是什么？就是为了告诉大家，先是给大家做一个有一个提醒，就是告诉大家 ai 真正现在已经发展到了一个什么样的程度，很多同学没见过啊， 他很多同学认为他就只能够做一个简单的 ui 开发，并不是的啊，我们主要的印证来印证这样一个最终他能够做什么，并且呢他的一个 ai 的 能力边界在什么地方给他去做一个梳理啊。第一个的话我们说了，整个 ai 开发 sop 先呢是有一个 plan 来去做策划 好，第二点就是整个令特的工作就是完完成了嘛，对吧？整个策划再接下来呢，开发就 koin 嘛，这个叫开发 koin。 再然后是 link， link 的 话有很多 link 啊，比如说你本地的 yes link， peer link 啊， call me link 等等，这些 link 呢，在你本地去完成去做完啊，最后来去把 当前的功能能够隔离，就是开发隔离。具体怎么隔离呢？我们前面给大家说了，每一次开发都需要去有新特性的隔离啊，我们其实就可以按照新特性隔离所有的新特性的设计文档， 所有新特性的这个实施文档都是隔离的。其实隔离我们说说的这个高大上了啊，就是在单独的文件， 单独文件输出啊，单独文件输出，这就是你在做整个 ai 开发的时候的一个这个大的层面上啊，宏观层面上一个流程先策划开发，另层再呢就是在开发过程中前前提啊，一定要保证整个开发的新特性是隔离的。 好，那具体我们掌握了这些基础的方法啊，包括呢模型我们也知道了，怎么解决这些问题，包括开发的流程我们也知道了，那最后组合权就是用什么样的模型或者叫工具选择，我们待会儿给大家去举例的啊，就是 cloud code 加上了 code class 加 code 这两个啊。好，那么就是我们在前面针对于这个问题，你之前的项目里面有没有尝试过 web coding， 有 哪些模型和工具，然后怎么解决的？解决这个代码混乱问题的？把这一套学会， 这一套标准，你去面试的话，只要被问到 web coding， 问到这个代码生成这一块，你按照这一套标准去介绍啊，这一套其实是已经很纯熟的方法论层面的一些概念了。