vibe coding连QQ教程

web coding 纯小白入门完整教程来了，这期视频我会通过演示一遍完整的真实 web coding 过程，从零到一，运行起来一个软件的方式来教大家如何向 ai 发起第一次开发需求 到如何让它稳定的执行，遇到问题如何解决，如何做好项目管理等等内容，全部都是我四个月 web coding 的 经验纯干货总结分享， 全部用大白话教给你，保证你能看得懂，学得会。看完这期视频，你肯定也可以举一反三的去做出几乎你任何想要的软件或者是工具了，视频会很干，我们记得备好一杯水慢慢看。 首先介绍一下这期视频我使用到的软件工具和 ai 的 搭配，大家可以参考一下，那软件呢？我使用的是叫 vs code， 这是一个免费的软件，大家下载之后就可以用，然后工具我使用的是 cloud code， 这个呢，大家也可以免费的下载和使用 ai 呢，我使用的是最新的 deep sec v 四 pro， 这个 ai 模型经过我两天的深度使用啊，我已经消耗了一点一亿的 token， 然后它的价格只花了我十三块钱，我觉得它的能力和价格都非常的香，所以来推荐给大家，关键是这套组合它不需要科学的魔法上网，所以我觉得还是很棒的。关于如何把 deepsea 微四 pro 接入到 cloud code， 在 deepsea 的 官方使用文档当中，这里就会有一个详细的教程，其实也就是输入一行命令，大家可以看一下，很快就会安装好的。 然后那现在我们开始正式的教程部分。首先在 web coding 开始之前，你肯定得有一个需求嘛，而最近呢，我刚好想做一个历史粘贴版的工具，那这期视频我就会以这个工具的开发实况过程，带大家一步一步的去完成， 你可以跟着我的这个方式来做，也可以换一个需求再来跟着做，都没有问题。那最开始的第一步，我们需要在电脑里面去创建一个项目文件夹，比如我这个，我就叫它历史粘贴， ok， 那 这样我们的项目就有了一个落脚的地方。之后我们再回到 vs code 当中选择打开，选中我们刚才创建的这个项目文件夹之后点击打开， 然后我们就可以开始工作了。接下来我们就可以正式的向 ai 提出我们的第一次需求了。不过这一步非常非常的重要， 大家要尽可能的将自己的需求表达清楚，如果你完全不会的话，也不用紧张害怕，可以参考我的这套模板，顺便做好笔记。这一部分的内容会比较长，因为它是整个项目的地基，非常的重要。第一句话我们可以告诉他，我是一个不懂代码的小白，想要做一个运行在 mac 电脑上的 历史粘贴版的软件，这句话就是告诉他，我们是一个小白，很多问题你需要自己搞定，不要问我了。 然后呢，我们这个软件是运行在 mac 电脑上的，他就会去准备好对应的开发的规则，这样他对我们的第一次的开发需求用一句话就有了一个大概的认知。 第二段话就告诉他，这个软件你需要他有什么样的功能，他能解决你的什么问题。第三段话就告诉他这个软件有什么样的页面，显示什么样的内容。第四段话我们就可以告诉他我们 在设计上的一些的需求，你可以按照我的这套模板梳理一下自己的需求，不用很专业，就用自己大白话，想到什么就说出什么，然后告诉他就好了。但是最后还要再贴上我的最后一句话，非常的重要。 这句话我跟他说，我暂时就这些想法了，你帮我整理下我的需求，如果你有不确定的地方可以问我，我们先沟通项目的需求，等我确认之后再做下一步的执行。 到这一步我们就已经把自己的需求，想要的东西，想要的页面，想要的设计都表达完了。然后我们也可以让 ai 去整理下我们的需求，让他帮我们去梳理我们是否有一些遗漏的地方。 再然后我们需要点开右下角的这里选择 plan mode， 这一步呢，我们就是可以让 ai 去更有系统性的去梳理我们的需求，然后选择好我们就可以发送了。 ok， 现在我们来看一下 deepsea 会如何去思考和消化我们的这个需求，他需要有粘贴板监听啊，这些东西太干了，我们可能听不懂，哎，这一步非常重要，大家看到这里弹出来了一个框了吗？这就是选择偏模式非常重要的一个地方， 就是他会根据我们的需求向我们提问的时候，他用这种选择题的方式来向我们提出问题，而且我们可以在这里点击一个功能，就告诉他想要的回答。 那在这个模式下呢？ ai 提出的第一个推荐内容一般都是最好的，当然我们也可以有自己的想法去看看其他的，如果这些你都不满意的话，你可以选择其他，然后去手动的输入你想要的内容或者是答案，需求方向都可以，我需要它开机启动。 ok， 我 们把这四个问题发送出去，这样 ai 就 对我们进行了一次采访或者是访问，他帮我们把我们的需求梳理的更加的清晰， 更加的明确了，而且这些确实也是我没有想到，我没有提到的，他都帮我想到了。到了这一步，如果你觉得 ai 还是没有帮你把思路或者需求完全整理开，你可以继续向他提问，让他继续回复你和整理你的需求。 如果你觉得到这一步已经 ok 了，那么你可以再复制我的第二段的内容发给 ai。 这段话呢就是首先我们告诉 ai 不要一口气一下子全部做完，因为这样的话可能我们的上下文就会非常非常的长，越到后期他通过上下文的积攒，他可能会有点失忆，或者他通过压缩上下文的方式再来工作，也会造成一定的信息的丢失， 而我们让他去规划开发步骤，一步一步的做就可以有效的避免这个问题。然后这里的开发日制文件夹和文档文件夹呢？其实主要 我的设计是让 ai 去看的，因为这样的话，不论我们是再换什么样的人，或者什么样的 ai 去对接这份工作的话，他都能直接看到这些东西，就会很清楚我们 历史做过什么，我们下一步需要做什么，而且有哪些标准，哪些文件可以引用。第二轮对话发送出去之后，我们就可以让 ai 更加安全、有效、稳定地推进我们的项目了，是不是非常的棒？这是本这一人四个月的 web coding 的 非常 重要的干货总结和分享了，是不是值得一个点赞、收藏和关注。那么下面我们就把这么重要的一部文案发送出去，而且这一步呢，我们要点开这个 pm mode， 让他更有效的去规划自己的工作。 ok， 我 们三二一发送， 这个时候我们只要继续等待他去思考和处理就好了。如果大家要开发的是一个麦上的软件或者是 iphone 上的软件，一定要去下载 xcode 的， 这个是苹果官方的开发工具啊，它可以让我们 把整个软件给运行起来，所以这也是一个必备的开发软件。现在 deepsea 已经把关键的文件基本上都创建好了，我们可以在左边的这个文件列表当中查看他创建的这些，这也是为什么我会推荐大家使用 vs code 的 这个软件来作为你的 web coding 的 入门软件使用。就是它创建的这些 markdown 文件，我们都可以在这里直接点击预览，甚至我们还可以对它进行编辑和修改。如果大家使用的是 cloud code 的 这个工具呢，我们可以点开这个 cloud code， md 这里呢其实就是 ai 写给自己看的，可以告诉他自己是谁，他要做什么项目，然后包括就像我刚才前面说的，所有的文件的路径的指引都会放在这里， 他只要每次运行都会看一下这个文件，告诉自己要干什么。然后这个是我觉得 cloud code 也非常好的一点，关于这个 cloud 的 点 m d 文件呢，还有非常多的 细节的使用技巧在里面，有机会的话我会和大家再单独的去分享。现在的初始阶段任务他已经全部完成了，他告诉我们他把所有的项目必备的东西全部都搭建完了，文件夹和文件以及路径全部都做好了，那下面这一步呢，他就要 带我们去进入正式的代码开发的阶段了，然后我们就可以告诉他开始推进项目吧，如果软件可以在 xcode 当中运行的时候告诉我， 然后我们再来一起期待一下这个软件的第一次运行。我们发送出去，让 youtube 正式的开始执行 代码开发的工作。这里再跟大家补充一个小技巧，就是我们点开左下角的 plan mode 的 时候，这个呢模式我推荐大家在做一些大的功能或是复杂的功能开发的时候去选择， 这样的话它会让我们的开发进度更加的有效，更加的稳妥。如果大家只是日常的去修复一些小的问题，小的 bug 呀，去优化一点小的地方的时候，就不用点开这个了。第一版软件一般来说 大概都是搭一个框架，可能实质性的功能都还没有开发完，但如果这一步成功了，那就可以恭喜你给自己鼓个掌，这是你的第一个软件第一次成功的运行， 我觉得很棒。 ok， 现在我们也看到 deepsea 他 把第一次的运行搞定了，然后我们现在准备对他也跟我说可以在 xcode 当中来体验一下了，然后我们来点开一下 xcode， 打开了 xcode 之后，我们可以直接打开一个项目的文件夹， 现在成功的把项目在 xcode 当中打开了，我们点击这里有一个播放的图标，我们点击它就可以让软件跑起来看一下是否会成功呢？只要我们等待这里的 building 完成就可以了。 building 成功，多克兰出现了一个图标，就代表它已经运行成功了，点击一下出来了这么一个小小的框。 ok， 这样的话我们的软件就第一次成功的运行了，而且这里因为我们没有任何的记录吗，所以这里的记录也是空的，然后他在这里确实也给到了一个搜索的按钮，这个框架搭的还是不错的，那我们跟他说好的继续吧， 我们只需要就是这样，他完成了一步，我们验证一下他的工作结果，然后再告诉他说你继续做下一步工作就好了。 我做 web coding 为什么会这么痴迷的一个原因就是我觉得能给我带来很大的一个成就感，就是我先把自己的一个想法 提炼一下，之后总结了发给 ai， 让他去帮我把它落实，把它做出来，然后我一步一步的去把它完善的时候，整个过程我是很享受的，我不知道大家在做类似的事情的时候会是否会有这样的感觉。 ok， 看到 deepsea 已经说第二阶段完成了， 然后他说可以让我在这上面体验一下。我们打开 xcode， ok， 第二版已经成功运行了，再点开一下小图标，现在来试验一下，我说我是大牙大，然后 ctrl c 一下 在这里。哎，这里果然出现了，一秒钟前，大家看到了吧，这个说明我们的软件是成功运行了，非常的棒，再试一下，第一次成功了 ctrl c， 这里马上就出现了， 软件运行成功，我们可以看到 deepsea 的 能力也是很棒的，两次都是一次性的完成开发工作，再来做第三次的验证啊，大家早上中午晚上好， ctrl ctrl 加 c， 哎也出现了，果然我们的文字功能已经测试是可用的了，在这里呢还有一个小小的使用技巧可以告诉大家，就是当我们使用可了可了，在沟通时候，这里运行了久之后，会出现这样一个圆环， 我们能看到这里是上下文的使用的额度，这里呢我们可以看到已经用了百分之五十四了。 如果这个圆环在快要合上的时候，我们可以直接点击这里，让它进行一个上下纹的压缩，这样呢它就可以在这个窗口里面把所有的历史记录做一些 ai 自己的总结和提要，然后再去做下面的工作。如果我们不压缩的话， 首先他是会让他的上下文的空间变得非常的大，他每次工作的时候要回看的内容就更多，他就会更消耗 token， 更消耗我们的钱，六个阶段全部完成，然后他也给我们了一个 历史的清单，告诉我们他都完成了什么。现在我们来打开 xcode， 再来重新的翻译一下软件运行功能上现在来看是还不错的，然后点击之后就可以点击复制哦，很不错。 图片呢，图片也可以复制，我们试下能不能粘贴出来哦，也可以，那我们再试下文字啊， 哇，非常的顺，但是我们能看到现在的窗口是有点小的，我们再来测试一下，删除右键之后有置顶置顶功能，置顶功能成功，然后删除，删除功能也跑通了。 哇，很棒，那到现在我们的这个软件就基本上是成功的做完，而且跑通了，然后剩下的就是一些 根据自己的想要的目标来去不断的优化我们的软件。比如说现在我们觉得这个窗口太小，而且他不能手动的去调整的话，我们可以把这里截图 告诉他，然后粘贴跟他说现在这个窗口默认的很小，需要调大一点，然后直接点发送，我们再等待 ai 来修复就可以了。 很多时候我们在提交一些 bug 的 修复，或者是做一些优化的时候，我推荐大家如果图片上就能展示出来的话，就用图片的方式截图下来告诉让他去看图， 再来理解我们的文字需求，这样一配合他就会更加清晰了。最后我们来看一下做这些任务我们一共用了多少的 token 和金额，那从金额上来看，应该就是花了大概是 一块多不到两块的样子。所以综合下来看，我觉得 deepsea v 四 pro 的 能力也很不错，然后成本也非常的低， 真的是让我很惊喜，而且我已经用了两天，我消耗了一点二亿的头肯吧才花了十四块钱。 ok！ 实况的教程部分到这就结束了，有在跟着做的朋友们可以说说你的软件运行成功了吗？也欢迎在评论区晒一下你的成果。 今天带大家完整的走了一遍 web coding 的 过程，从跟 ai 说第一句话到软件真正跑起来，应该会让你很有成就感的。 那以上的内容都掌握了，我相信你真的已经几乎可以做出任何你想要的软件了。 web coding 是 不是非常的简单？就是用我们的大白话去告诉 ai， 让它理解并做出来。 我觉得最难的不是这个技术，而是第一次动手的决心。看完这期视频，你已经知道怎么去跟 ai 说话和沟通，那剩下的就是打开你的电脑去试一试。如果你还有什么不懂的或者想看的教程内容，都可以在下方告诉我。那这期视频就这样。我是大牙，下期视频见。拜拜。

今天这个视频给大家分享一下零基础如何基于 webcoder 将自己的想法快速落地。 首先先推荐大家安装一款开发软件 vs code， 因为这个里面有着丰富的插件资源，比较受欢迎。 vs code 的 下载非常简单，我们可以截取它的官网下载，它的安装方式就跟我们安装 qq 和微信差不多。安装完成之后呢，用 vs code 打开我们的项目，直接拖拽就可以了。 vs code 的 左侧栏有一个拓展，我们可以在里面安装我们想要的插件。比如说当你第一次打开 vs code 的 时候，它可能是全英文的界面，如果你觉得不太适应的话，可以在里面搜索 chinese， 下载一个中文拓展包，然后重启 westcode 就 显示中文了。既然是 westcode， 那 我们可以在里面先安装一个智能体的插件。比如说我推荐使用 client， 直接在拓展市场里面搜索 client， 点击下载就可以了，但我已经下载过了。下载完成之后呢，我们可以在左侧栏找到 client 的 图标点击。使用智能体之前呢，我们先需要给它配置对应的模型，我们在右上角点击 settings， 可以在里面选择不同的模型提供商，比如说有比较热门的 s o pik， open i 或者是 deep seek， 比如说我们这里以 deep seek 为例，点击 deep seek， 然后它在这边需要我们填写对应的 api key， 我 们可以直接去 deep seek 的 官网， 我们可以先充值一定的金额，然后在 api key 里面创建一个 api key， 随便取一个名字都可以， 然后它会给你一个对应的 key， 这个最好是保存下来，因为你关掉这个窗口之后，它就不会再显示了。然后我们回到 westcode， 将对应的 key 贴在这里， 然后就可以选择对应的模型，比如说我选嵌的模型，它下面就会显示这个模型的 费用。当然我们在 act 模式配置完成之后呢， plan 模式也需要配置，两边都配置完成之后，点档就可以正式开始使用了。这里也插播一下付费模式的对比， 主要是分为两种模式，第一种是直接购买 token， 第二种是订阅 code plan 计划。我举一个例子来介绍他们之间的区别。买 token 就 像你在音乐软件里面直接付费购买一首歌曲，而订阅 code plan 就 像你开通音乐会员，可以听很多歌曲， 所以当你的开发任务比较多的时候，定位 code plan 可能更加节省一点。我刚刚在 devic 官网充值申请的 king， 就是 属于第一种直接按需付费。回到正题，当模型配置完成之后，我们就可以开始使用了，直接在对话框输入我们的需求，它就会帮我们开发。 大家这个下方有 plan 和 act 两种模式， plan 模式呢，就是帮我们做规划，在它的规划过程中呢，我们可以更加明确我们的需求，或者根据我们的需求去更改它的规划。 act 模式呢，就是直接将我们的需求落地，有真正的产出。如何使用 web 点将我们的想法落地呢？比如说因为我最近在玩路况国游戏里面，流浪商人每天会在固定的时间段刷新他的商品， 因为我没有时间天天去看，所以呢我就让他给我写了一个爬虫程序，爬取对应的数据，如果有感兴趣的商品，就会发邮件通知我去买， 然后我将我的需求描述清楚之后呢，他就给我交付了对应的文件，然后我在对应的云服务平台托管我的代码，并且设定了一个定时任务， 这是他今天下午给我发送的邮件，使用效果看起来还不错。如果你也有对应的需求，不妨试试 webco 里将自己的想法和创意快速落地。那么今天的视频就分享到这里了，如果对你有帮助的话，欢迎点赞和关注。

哈喽，大家好，跟大家分享一款 web 扣顶，来自一百度点秒杀，一句话，做应用，你上你也行。话不多说，我们来看这次的成果 大小周，小周的时候提醒到员工，记得来上班，通过邮件去发送，发送的规则是每个小周周五下午五点自动发送，大周和跳过周的周五不发送，通过 qq 邮箱， 这里有个跳过洲和大洲起始，什么意思呢？比方说啊，我们是从这个时候开始用这个应用的，然后呢，二十一号， 但所在的这一周，我们认为是大周，这样子滚动下去，所谓的跳过周呢，就是你看这是五一的这个法定节假日周，公司的福利比较好，那这周呢，就不算小周了，就跳过来到了这一周的八号，五月八号才算是小周，这样子滚动下去， 这个跳过周呢，我们叫做法定节假日周，然后呢，在这里面呢是可以设置的，添加一下就可以设置，之前呢，我就设置了四月二十七号周一，这个所在的周就是法定节假日周，这一周就跳过， 发给谁呢？这里面有个收件人管理，这里面呢就可以设置小周周六要上班的员工的邮箱， 这里面还有一些发送记录，这样子我们来测试一下整体的效果啊。发送测试邮件立即发送， ok， 发送成功。 哎，这里面呢就收到了一份邮件，我们看一下效果啊，行，这只就是邮件的整体效果。 ok， 我 们看一下这次应用是怎么做出来的，帮我开发一个大小周，小周，也就是周六要上班，这个星期周五下班前，通过邮件的方式提醒同事，明天记得要上班哦。 这句话给到 ai， ai 觉得你的描述不够准确，他会反过来问你，跟你确定一下你的需求，就比方说大小周的判断规则是什么？比如说按自然周计算，单单数周为大周，周六休息，双数周为小周，周六上班还是有其他的规则？ 你上面描述的下班前是指的是五点还是六点？他还问你，就是你需不需要一个收件人列表的功能，还是固定的邮箱，是发给谁嘛？对不对？ 然后呢，下面呢就是邮件的内容呢，是否包含公司的名称或者具体的日期，这样子啊，他会不断的跟你确定你的需求是怎样子。下面呢就是我的回答，我说我指定一个日期，从那个日期开始所在的周为大周， 也就是只要上五天班，周六放假，这样的情况下去，遇到法定节假日跨到周六啊，本周跳过本周，不算大周或者小周，接着情况下去啊，下午五点 需要设置收件员功能，包含具体日期。这样子啊，这个里面呢，他就帮我去设置这个法定节假日跨周六里面的这个功能，他就帮我设置了这功能。 我跟他再一次确认了我的需求，然后呢，他就帮我生成了一个文档，叫做需求文档，这个需求文档呢非常详细，他这里面呢描述了我的所有功能点， 然后呢我往下面一看啊，我看到这里面他说本期不实现的功能，就说我以后想要实现的功能，他都帮我考虑到了，我觉得非常厉害啊， 我在以产品的角度思考个问题啊，这里面有个发送时间自定义，对吧？之前我们的发送时间是说五点，对不对？然后呢，程序员的视角呢？他有个叫做写死的这么个概念啊，你回过头来这边看， 然后呢，你只能是五点发了，你改不了六点了，对不对？应该做的好一点的话，他应该是说修改的时候你是不是有个地方给给他设置可以设到六点啊？或者说任意一个时间发送嘛，对吧？所以说呢，他这里面呢，也帮你考虑到了， 接着然后我生成应用，生成应用之后呢， ai 就 啪啦啪啦的帮我写代码，写着写着之后它这里面就帮我总结了，我就看到这里面啊，它这里面说 resend 注册账号并填写 a b i t， 我 看起来就有点懵啊，我不知道这个东西怎么搞， 当时呢，我就随便写了上去给大家提交，提交之后呢，我就来到这下面，这里面发送测试邮件，那发送不成功，不成功，他就提示一个发送测试邮件失败给我，我就粘到这里，我接着问他，他又帮我啪啦啪啦的解决问题， 看这些都看不懂了，解决问题，然后呢就来到这里面，他又帮我总结了，说什么之类的，啪啦啪啦一大堆看不懂的，然后往下面我就接着问他，我说绿色的有件服务请或许密要饼在那，下面应该是怎么搞？ 然后呢，他这里面又告诉我要怎么搞？然后呢，我看到这里面呢就很懵了，就不知道怎么搞了。完下面的话，我再问他如何设置这个绿色的 api key， 然后他又告诉我要到这个网址， 这个网址呢，我是踩过一龙坑的。然后呢，这里面呢，没那么好搞，就相当于你要买域名啊，备案之类杂七杂八之类的就很麻烦了，就有点门槛了。然后呢，我这边呢，我就心想， 我不是有，我们不是有 qq 邮箱吗？用 qq 邮箱发不行吗？然后我这边就说我想用 qq 个人邮箱作为发件人嘛，那他这样子，就这样子就帮我生成了第二轮， 第二轮之后呢，就帮我写代码，改代码嘛，改代码之后呢，就来到这里面， ok， 他 就告诉我需要邮箱的地址，那个授权码 根据配置步骤，我们来折腾一下，把它钉到桌面去， 切到 qq 邮箱， ok， 然后呢，这里面有个设置，设置点进去这里面有个账号和安全点击，然后我来到这里面安全设置， ok， 我 往上面拉，这里面有个生成授权码，点击， 然后你就可以用你的这个手机号码去发送短信，用微信扫码，扫码之后这里确定，然后这里面他帮你编辑好信息了，你发送， ok， 发送之后呢，这里面你要点击一下，我已发送， ok， 这个就是他的授权码，把这个授权码粘到秒八这个应用里面， ok， 整一个过程步骤呢都完成了， 我们来总结一下什么是邮箱授权码，比方说怎么知道你是这个邮箱的拥有者呢？就是这个授权码，然后呢，你才可以通过它去把邮箱发给他，发给他。 这里面的 a p i 下划线 t 呢，应该指的是不同的邮箱厂家它所表达的不一样，其实道理呢，都是同样的意思。 现在 ai 时代，只要你有场景、想法、兴趣是最好的。老师，你要给自己一个错觉是什么呢？你上你也行。

分享一下零基础小白，怎么样快速的去用 ai 手搓出一个让自己满意的小程序？今天是一期干货满满的教程，没有门槛，不需要会代码，就是你有手就行， 因为我自己就不是程序员，我也不懂代码，但是我还是用 ai 做出了让我自己很喜欢的小程序。今天我就把我自己亲自验证过的，已经跑通的流程分享给你们。那我为什么想要去制作一个小程序呢？是因为我自己是一个内容创作者吗？每天都会拍视频，也会写文章，我就会产生一个问题，我有那么多的一个素材， 这些东西太多了，我光光去交给 ai 去管理的话，我自己调取它们很困难，因为 ai 是 在电脑上去帮助我管理的，它可能会把这些东西放到本地的文件夹里面，所以呢，我就特别希望自己能在手机上就把这件事情给搞定了。 于是我就把我的这个困惑告诉了 ai， 和 ai 一 起共创出了一个小程序。那具体的操作步骤呢？大概是分为以下的这几步。首先第一个点就是你一定要明确你自己的这个需求是什么， 以及你要使用一个好的 ai。 我 自己使用的 ai 是 cloud， 在 这一步，我们需要去把我们做这个小程序的主要功能，想清楚 我们的想法来自于哪些地方呢？我认为一定要来自我们身上的痛点，你看像那些打印或者说打卡的小程序，都是因为，哎，有一个人，他可能他诞生了一个需求，于是类似的一些小程序他就出来了嘛，我们一定要去看一看我现在遇到了什么问题？ 我生活中有没有一个问题是可以去让 ai 去帮我解决的？好，当你知道这有这样一个问题之后，你就不用顾及，你可以乱七八糟的说也没有问题。你把你想要去设计的一些功能，你全部你都用语音转文字的方式录下来，这个时候你就把你这堆想法去交给 ai 就 可以了。 在这一点上，我认为呢，有一个地方是需要去关注的，就是我们可以去让 ai 去帮我们设想一下。哎，根据我刚刚跟你提出来的这些想法，你认为我对于这个小程序的功能设计还有哪些不知道的地方吗？ 请你去帮我补齐我这个想法盲区。哎，当你这么去跟 ai 说之后，他可能他就会帮你提前去设计好多东西，而且这些东西也是你自己的刚需。做完这一步，你会发现自己这个思维框架清晰了，你也得到了一个基础版本的这个小程序，那这个时候就要用到第二步了。第二步的功能往往是去设计一下你这个小程序的这个外在的这个界面， 因为 ai 的 审美不一定符合我们自己的审美，可能它的配色比较不太好看，所以在这一步我会去告诉 ai 几个点，一个点我会告诉他我喜欢的颜色有哪些，让他去根据我喜欢的这个颜色去设计界面。 然后第二个点我会告诉他，请你不要使用超过三种的颜色去设计，因为一般超过三种的话，它的设计就会比较灾难，尤其是 cloud 的 审美其实不咋地。说实话， 如果你做完这两点之后，你发现 ai 的 整个设计还是很赞，那你可以使用我的第三个绝招，就是你去找一张你比较喜欢的图片，你把这张图片发给 ai， ai 去根据你的这张图片再去进行一个设计，这个时候你就会发现 ai 的 一个审美提升了，你的这个界面变漂亮了。 第三步，检查基础功能。像我设计的那个小程序，他是需要记录我的一些想法和灵感的，就本质上有点像一个笔记软件那样子。那对于我用了这个小程序呢？他的一个基础功能我认为就是回收功能、一键同步功能、备份和导入导出功能 这几个功能。如果我在这一步，我让他去设计了之后，那我后面会不会突然说，哎，我这条笔记已经在这里了，为什么他消失了，是吧？你就能够通过数据导出的方式去把你的这个数据保存下来，然后再进行其他版本的一个开发。你可以直接去问 ai， 他 一般会给两个建议，一个是建议你在手机的本地保存， 第二个就是建议你用云服务器的功能，我自己是选择云服务器的，使用云服务器的话，他就比较让人安心，就你可能换了个设备啊，或者说你换了个地区，你的数据还在里面，你还能够一键同步，还会把怎么样去进行一个云端数据的储存的步骤去给你列清楚的，一步一步，该点哪里都告诉你。第四， 让 ai 提前去排查漏洞。就你设计完你的整个小程序之后，它肯定是会有一些问题的，比如说图片啊保存不了，或者说文字这个字段有问题，那你提前去跟 ai 说，哎，请你去预测一下我这个小程序的所有文件，那它就会去提前预判一下你有可能出现什么问题，一键就给你修复了，真的很省心。第五， 让 ai 去帮你优化功能。你每一步设计完之后，你一定要亲自去上手去试一试，去使用一下这个 ai 的 感受是什么，有哪些地方是不太好的，然后把你这个反馈来来回回的去问 ai， 哎，你请你帮我去哪里哪里优化一下， 在这里有一个非常关键的地方是，你可以去让他帮你接入 ai。 我 自己这个小程序接入的是 deepseek， 也就是我买的 deepseek 的 一个 api， 整个过程呢，你也不用担心自己不会接入 ai， 你 可以直接去问 ai， 那 他就会把一些适配你这个小程序的一些 ai 去告诉你，你只需要去点一下，你就能够去得到这个 api 了。 当然他是需要花一点小钱的，但是一点都不贵，可能十几块钱都够你用很久很久了。最后也是最关键的一步，上架， 使用完你的整个小程序，你发现他还不错，你想要上架怎么办？没关系，你就可以把你这个需求去告诉 ai， 你 说我想要上架，我应该操作什么什么，他就会帮你把测试版本、体验版本、开发者版本、正式版本等等这些版本跟你说清楚，并且会给你一个非常详细的一个步骤，你就按照他说那个方法去进行一个上架就 ok 了，非常的简单。整个过程当你完全做下来的时候，你会发现其实很多问题，只是我们把它想的太复杂了而已，真正去开始去做的时候真的很简单的。我以后还要分享更多关于 ai 使用的一些技巧。

这是一条 web coding 纯小白入门的保姆级教程，让你从一个什么都不懂的小菜鸡，完成属于你自己的第一个 web coding 作品。 我会基于我这几年 ai 编程的实战经验，用最简单的大白话把整个过程完整演示一遍，没有专业术语，不留任何卡点，确保你跟着做一定能学会，无需魔法，全程干货。 首先我们要用到三个工具， cloud code、 c c switch 和 deepsea。 你 可以这样理解， cloud code 就是 你的 ai 编程，员工听你发号施令。 deepsea 是 员工的脑子，负责思考、推理和生成代码，而 c c switch 就是 让它装上这个脑子，正式入职。 是的，兄弟，你是老板，我们先打开 deepsea 的 开发者后台。为什么推荐它呢？因为它是目前为止国产 ai 大 模型里面性价比最高的，且真的能干活的东西。信我啊，我最近用它做了很多事情， 洋人 ai 不 敢做的东西，比如这种整理题材异动的，他能帮我做。洋人 ai 做不到的东西，比如中文语境的改文案，写小说，他更是断档。第一关键是便宜，真他妈便宜， 用了快一个月了，一点五亿的 token， 十几块一杯奶茶钱，所以普通人充十块钱就可以用很久很久。然后进入这里创建一个你的 api key， 随便取一个名字，比如测试它只显示一次，复制后要妥善保存，并且不要泄露给别人。然后到下面的接口文档选择接入 a 帧的工具。这里就有关于 gala code 的 安装教程， 非常非常简单，一行指令就能搞定。比如你用的 windows 电脑，按下键盘的 win 加 r 键，输入 c m d， 回车会弹出一个命令行窗口，复制这行命令，按下鼠标右键，直接粘贴回车就可以了。 然后你再输入 cloud version， 返回版本号，就说明安装成功了。文档下面关于配置环境变量的步骤。对小白不太友好，所以要用 cc switch 这个工具一键搞定。 这个就是它的开源仓库，如果你没有魔法，也可以飞鸽工具箱。是的，这个整个网站也都是 web coding 做的。打开之后选这个命令行版本的 cloud 图标，点击添加，找到 deepsea， 把你刚才申请的 a p i k 填好。最新版的 city switch 呢，已经把模型名配置好了， 这里建议勾选一百万的上下文，然后添加保存点，这里可以测试，确认成功就行了。现在你可以重新打开一个命令行窗口，输入 cloud 回车。第一次配置呢，需要你选风格默认就好了。然后是确认授权管理这个项目，这里会显示用的是 deepsea v 四 pro 的 模型，你也可以问他一句，靓仔，你用的是什么模型？ 看到他的回话了吧，恭喜你，你已经给你的 ai 员工装上了 deepsea 的 脑子。现在我们就可以愉快地 web coding 了。 我们先创建一个文件夹，也叫项目，相当于给你的员工一个临时工位。这里更好的用法是你可以在这个文件夹的路径框选中一下，再输入 cmd 回车。这就相当于你在这个项目下启动了 cloud code。 然后你输入 cloud， 开始写任务要求。比如我们这次演示开发一个个人薄客的网站。作为新手小白，你可以参考这个五步模板，明确身份。我是谁？我是新手，你不要默认我懂技术，明确目标，我要做什么东西？明确功能，这个东西要有什么功能？明确复杂度， 你别搞得太复杂，避免 ai 呢，把很简单的东西复杂化。最后就是明确流程，先整理需求，再写代码，这样能有效减少返工，省拖延，省精力。比如你可以参考这一张截图， 这里呢，我提一个间接技巧，如果后期你的项目变复杂了，就可以让 ai 帮你创建一个 cloud 点 m d 文件，你可以把它理解成写给员工看的工作说明书，就是员工手册。以后他每次进到这个项目都会先看这个文件，知道他是干什么的，用的什么技术，有什么规则，让开发更加高效。指令可以这么写啊，你也可以截图一下， 给到上面的新手提示词。之后呢，他会帮我们梳理需求，很多你没想到的，他就能帮你去丰富和完善。确定好了之后，就可以让他写代码了。 等到他跑完之后呢，我们就可以看到第一版，按照要求呢，他给了我们一个网页文件，我们双击就可以打开，能看到这个界面，做的还是挺不错的。如果哪里有需要优化的地方，你可以继续像聊天一样，告诉他哪里需要改，改成什么样的，直到你满意为止。 好了，到这里你就已经入门了。很多人不是不想尝试，其实就是被这种看似很复杂，但其实非常简单的门槛给拦住了。 我们这个演示全程都没有用到任何魔法墙，你用自己家里的电脑和网络就可以搞定了。后边你有任何的想法，想做哪种提高你工作效率的软件工具，都可以举一反三，让 ai 帮你做到，甚至是可以思维再打开， 不让它开发软件，而是帮你实时解决电脑上的问题。比如设置定时关机，清理大文件，给他文案，让他改写总结，电脑缺组建，让他帮你修好等等，都是可以搞定的。 如果大家感兴趣，我也会在后期慢慢多出一些硬核的干货视频，站在小白的角度上，多讲一些间接学习的思路和技巧。 ai agent 是 时代的潮流，我的好兄弟，不要掉队。

来看零编程基础如何开发软件。本次使用的是 vibe coding， 主播这里一直有着思域系费问题困扰，就是每个人晋级时间不一样，顾客又是按月支付的， 于是主播想到做一个软件来整理每个人时间，能更加直观地总结用户消费习惯。 当然这其中也会遇到问题反馈给 ai， 它也可以自己排查修复。做出来的页面还不错， 我发现没有防误触功能，又让它加向了撤销键，最后让它放我桌面，然后一个可以储存私域会员信息，提醒我会员续费情况的软件就开发完了。测息借力的续费功能， 还有防误处，撤销续费，添加新成员 即将到期，字体变色，让我们测试是否有储存功能， 进入页面就有弹窗即兴刚刚新成员依旧存在， 还是比较成功的。会用 web coding， 以后每个人都能记做自己想要的软件，大家有想做的软件让我感兴趣的话，可以免费帮你开发出来。

很多小伙伴问怎么让 cloud code 接上 deep seek？ 这条流程我从头到尾给你讲一遍，照着走就行。 视频稍微有点长，建议先点个收藏，耐心看完，按步骤动手。先说清楚， cloud 是 anforepic 的 网页和 app 聊天助手，你打开浏览器就能用。而 cloud code 是 跑在你电脑终端里的编程搭子， 它能直接读你的项目代码，改文件、跑命令，相当于把 ar 装进了你的工程目录。更狠的是，凭借社区里那一大批开源 skills， 它还能调度你电脑里的一切浏览器表格、邮件、设计稿，几乎想自动化什么都可以。 为什么要接 deep seek？ 两个原因，在国内访问稳定，不挂代理，按 token 计费，也比海外接口便宜不少。而 deep seek v 四 pro 的 能力，应付日常写代码、改 bug、 做重构绰绰有余。 开始之前先准备两样东西，第一， node js 十八以上版本提前装好，长期支持版就行。第二， get for windows， windows 用户必装，不装后面依赖会报错。 第一步，安装 cloud code， 在 开始菜单里搜 power shell， 右键以管理员身份运行。打开窗口后复制官方的 m p m 命令，粘上去回车，等它装完。 装完输入 cloud， 加上版本参数，看到版本号就说明装好了。第二步，获取密钥， 进入 api 开放平台，进入控制台后，在左边的侧边栏找到 api keys 这一项，点进去， 页面下方有一个创建 api key 的 按钮，点一下弹出小窗，给这把密钥起个名字，比如就叫 demo， 然后点创建， 创建成功之后会弹出一个密钥字符串，立刻点复制保存到记事本或者密码管理器里。特别提醒，关掉这个窗口之后，密钥就会变成密文，再也看不见。 如果你不小心丢了，只能删掉，重新创建一把。第三步，配置 cloud code， 打开文件资源管理器，进入 c 盘用户目录，再进入点 cloud 这个文件夹。 如果看不到点 cloud， 要先在查看里把隐藏项目和文件扩展名都打开， 然后新建一个文件，名字叫 settings jason 把这段配置直接复制进去，把 api key 行换成你刚才复制的密钥保存即可。第四步，验证打开终端或者 power shell， 输入 cloud， 回车 看到红色边框的欢迎界面，模型型显示 deep seek v 四 pro， 就 说明已经成功接上 deep seek。 最后再送一个加分项。如果你平时在 vs code 里写代码，配好 antropic 官方的 cloud code 插件， 装完进入侧边栏的 cloud code chat， 它会自动识别你刚才配置好的账号，直接就能在编辑器里聊天和改代码。 整个流程下来，你就拥有了一个本地终端加编辑器，双端可用的用 deep seek 驱动的 cloud coat。 你 学会了吗？欢迎评论区聊聊。

大家好，今天我想介绍一下使用 tree 软件制作的一个项目， 然后我是把它部署在了 腾讯云服务器上，左边可以看到是腾讯云的服务器， 然后现在就开始演示一下这个项目。 首先登录进去之后，可以看到的是一个呃关注的笔记，然后它是可以有分页架的， 然后这个关注的话是包括关注话题和关注用户，然后之外还有推荐的笔记， 然后点进去，点进去的话可以看到呦点赞评论以及收藏分享按钮， 评论的话是可以进行像这种评论数一样的形式展示出来，然后可以 还可以点一个赞，然后笔记分享的话可以直接分享给好友， 就是这个笔记。然后是发现页，发现页的话就是可以通过各种话题点进去，可以看到对应的一些笔记， 然后是发布页，一会儿可以在手机上演示， 然后是消息，这边有系统消息，就是比如一些关注和点赞评论会通知，然后底下是好友可以进行聊天，然后这个右下角可以显示他的在线状态， 在线找单。然后这是首页可以编辑，可以看到自己发送的笔记和收藏的笔记，还有关注列表，粉丝列表等等。 然后设置页，这是设置页的一些，可以退出登录，然后也可以编辑资料， 然后接下来演示一下发布笔记功能和实时消息功能，然后可以看看右边， 接下来用手机操作一下， 可以看到左边这个已经测试用户零二已经显示出来在线功能了，我们可以发一个消息，试一下发一个表情包， 可以看到已经实时显示出来了， 图片的话，这个电这个模拟器上没有图片。发一个 hello， 然后我们点击这个跳转的信息弹窗，是可以直接跳转到这个聊天页面的，可以发送一个，发送一个图片， 可以看到也是可以显示出来的，然后演示一下发布， 可以看到已经出来了，是刚才发布的，然后点一个赞， 可以看到这是刚才发布的，点赞也都显示出来了， 然后这就是差不多整个项目，然后我想再介绍一下这个，呃，这个左边都是可以看到点哪个按钮，它就会有相应的日制出来的。 然后这是这个软件，这个我感觉是一个比较，嗯，这是这个项目接口， 是很多文件，大部分都是靠这个，呃， ai 自动生成的。然后右边可以看到它的一些流，它的一些过程， 然后它的思想，它的思考过程是可以展示在右边的，它是可以自动。呃，看一下这个设置， 它是有这几个功能，然后这几个功能的话可以赋予它很强大的编辑。我姐，然后我感觉这个 还是功能还是很强大的，然后推荐大家都去使用一下。

哈喽，给大家介绍一下我 web coding 的 这个软件，我们先从设置开始，在这里可以选择需要转录的语言，可以看到我们支持的语言还是挺多的，基本主流的都支持了。 打开这个开关之后会自动把译文读出来，但是呢需要带耳机进行去使用， 然后这里我强烈建议大家都选高质量。然后打开这个开关之后，大家可以选择自己喜欢的大模型，并且可以填写自己的 api k， 点击这个叹号呢，就就可以看到 api k 的 获取方式。然后点击历史， 这里记录了我们转录的所有内容，点击这里可以总结我们转录的内容， 可以看到这个内容，他总结的还是挺好的，把重点内容，重点问题还有行动，像包括术语背景都进行去总结出来了。然后点进去之后可以看到本次转录的内容， 可以点击右上角进行导出，也可以进行播放这个内容。假设你是一辆无轨电车的司机，你的无轨电车以每小时六十英里的速度在赛道上飞驰，在赛道的尽头，你知道有，然后就是同船页面， 点击麦克风就可以直接开始，非常简洁。 this is of course about justice and we begin with a story suppose you're the driver of a trolley。 可以 看到几乎感觉不到有延迟，因为这个是离线的，使用的本地的模型。 and at the end of the track you notice five workers working on the track。 这里我们就直接加速跳过看一下实时总结的内容，可以看到把重点内容，重点问题以及下一步讨论的问题都总结出来了。

你跟 ai 说，帮我做一个电商图片生成软件，他咔咔写完，你不用看一行代码，不用懂前端后端，这就是 web coding， 二零二六年最火的开发方式。今天一次性讲清楚它是什么，怎么操作，用哪些工具。 先说是什么，这个词是 open ai 联合创始人 andre carapace 在 二零二五年二月提出的。 web 就是 感觉，分为编程，它不是一个工具，也不是一个模型， 而是一种全新的开发范式。以前做产品要七个人，产品出原型，设计出稿，前端写页面，后端写接口，客户端联调测试，查 bug， 运维上线光协调就一周，现在只剩两个，你和 ai， 你 描述需求， ai 写代码，出设计，做测试。这就是为什么一人公司突然可行了。具体怎么操作就四步。第一步，说需求，不用精确，说感觉。 帮我做一个电商图片生成工具，上传产品图，自动换背景，加文案，调色调，风格像大牌海报。你不是在写需求文档，是在描述一种感觉。第二步， ai 自动生成代码页面功能，它全包了，你甚至不用看代码。 第三步，看结果，挑毛病，背景抠的不干净，一键导出功能没出来，继续说人话，不用术语。第四步， ai 修改，你再验循环，直到满意。用哪些工具给你分三类讲清楚。第一类，全能编程 agent， open ai codex， 现在免费了，搭载 gpt 五点五， 速度极快，是 web coding 的 首选。 cloud code 也很强，这两个是主力。第二类，可视化搭建平台， lovable bot v 零 replay， 输入一句话，直接出能用的网页，不用装环境，不用配东西，浏览器里全搞定，最适合快速做原型。 第三类 ai 设计工具 figa 嘛？ ai can find ai 截一张你喜欢的图扔给他，我想要这种风格，他帮你出稿，怎么用才不翻车？三条铁律，第一，不同任务开不同窗口， codex 里叫 thread， cloud code 里叫 session， 千万别在一个窗口让它改 bug 又写新功能， 它会乱。第二，从小项目开始，别上来就说帮我做微信，先做一个小工具，一个落地页，跑通了再放大。第三，你不用看代码，但必须看结果。 你的角色不是程序员，是产品经理加测试员，盯着功能对不对，体验好不好，你只负责验收。 web coding 最适合谁？ 产品经理快速验证想法，设计师把稿子变成真页面，非技术背景做自己的小产品，不适合什么几十万行的企业级项目， 代码量一大， ai 会失控？这个回头专门开一期讲一阵。 taofa 星球里有一群人在互相分享踩过的坑和好用的工具。如果你也想从零开始，关注我，下期见。

今天分享给不懂代码、零技术基础的小白 web coding 手把手教程，如何用一天时间做出属于自己的打卡小程序。这次不用梯子，用的都是国内 ai 大 模型。 第一步，写出想法。你可以把脑海里所有清晰的、模糊的想法都告诉 ai， 可以 上传你找的参考图，你想要的日常打卡所需要的所有功能和内容，设计风格等等， ai 会输出更详细的产品说明。 第二步，开始构建，把产品说明发给编程 agent， 它会生成全套的代码和预览图，右边的预览图可以点击体验，体验后需要修改的内容直接在对话框中告诉 ai， 它会根据你的需求进行修改。 第三步，修改细节。你所需要的功能齐全后，让豆包提供一系列的配色提示词，让界面更好看。比如我用的是低饱和度单色系，豆包提供了从主色调到不同状态按钮的所有配色方案，直接复制到 ai 就 ok 了。第四步，上传到微信开发者工具， 在微信开发者平台点击导入上传写好的小程序代码。界面的左边是代码分类，中间是每个文件夹中详细的代码，右边是预览界面。注册测试账号后就可以扫码体验了。体 验的过程中有任何的 bug， 直接回到 word 吧里告诉他，让他修改。第五步就是发布小程序测试功能没有问题后，根据 ai 提供的上线流程，我们根据指引一步步操作就可以了。 整体包括替换 id、 补充小程序信息、小程序备案等等，整体流程需要三个工作日左右。以上就是零基础 web coding 打卡小程序的全部分享啦，我们下期再见。

今天手把手教大家从零到一，学会 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 这种代码托管平台，那第一次配置可能会多花一点时间，但后面做版本管理和协助就会轻松很多。那我们今天分享就到这里，下期再见。

我前段时间用那个微办扣定，然后整体做了一个小程序端，然后 pc 端，然后这现在已经上架到应用商店里面了。然后的话我来说一下我微办扣定的一些感受吧。微办扣定的最佳实践就是我本身是有一套系统代码在的，就是比如说我本身的用户权限 都是有的，然后我的代码的代码的规范都是有的，然后像十二个这些东西基础配置我全是有的，然后的话那个微观固定他会按照你的基础去实现最佳实现。然后像那个前端也是，比如我后台管理，我是有一套固定的，是有一套固定的那个样式的，就是我。然后的话大家写的时候就会用我原先封装的一些主件，然后去做到我一些我想要的功能， 这是最佳的最佳实践的。然后还有比如说我小程序端我想要什么样的形式，我可以在我之前我有一套代码，旧代码把一套旧代码放进里面，然后的话它 整体的样式都会按照我的基础代码去实现的，就是风格不会有任何的变动。就说假如说风格不满足你的符合要求，你就告诉他你一定要按照我原来的主题色进行去更改。然后的话整体的风格大家可以看我做的那个小程序，它整体的风格它是不会变的，而且它的代码逻辑全都是按照我想要的代码逻辑实现的。 然后还有微慢扣顶，大家之前有一些人说微慢扣顶他对接微信支付很麻烦，不不不，我这样跟你说，大家对接微信支付很方便，他把所有的东西都给你写好了，把那个就就四五个配置参数，然后给你放到了那个 y、 y m l 文件里面，就说你去微信，微信官网把那个几个几个、那个 s、 k 都给拿到，商务号都给拿到，填进去微信支付就对接好了。 我总共花时花费三个小时，因为因为你拿一些那个商务号的 s、 k 是 要是要是要个人认证的，然后这个花了一些时间。好，大家可以参考一下。

保姆是 web coding， 自己的作品集网站来啦，几千人点赞收藏期待的。 呃，也是终于干出教学了。其实收到了很多留言，我没有想到很多同学和设计师朋友因为没有下载和了解过呃， codex 这种 ai 编程软件， 所以说在下载这一步就遇到了很多问题，那为了照顾到粉丝朋友啊，设计师朋友，外部小白这一期将不会下载任何的软件，用最简单的方法教你去搭建一个属于自己的可以随意创作的呃 ai 作品的网站。 那么首先先说结论吧，最简单的方法就是用谷歌的 a s studio 全程完成前灯大码和部署上线。首先 一开始点开他就是这样的一个界面，可以看到按钮还是比较多的。那作为一个保姆式教学的话，我就不告诉你们每一个按钮的作用了，你只需要知道在 build 的 界面的这个输入框描述你的想法，然后点击输入即即可。 比如说我现在输入的这一段就包含四个部分，一个作品的网站，第一个是联络信息，第二个是个人介绍，第三部分就是我的一个项目展示，第四部分就是我的一个技能展示，那我们点击开始就可以了，等待它去生成完毕。 ok， 其实可以看到它现在生成的 呃，已经是一个可用的框架了，对不对？包括我们的个人信息，呃，工作经历，项目展示，核心技能，还有联系我， 那，那其实它的使用就是这么的简单，那现在的话，可能它的效果没有那么的好，其最主要的原因就是因为我的贴纸非常简单，没有去规范它的一个视觉效果， 那如果想要一个很好的效果的话，我可以分享一个我的一个工作流，你们可以直接按照我的步骤就可以一键生成非常好的效果的。那我们可以首先打开这个网站，呃， motion size， 呃，可以看到里面会有很多好的一些效果的一些预设，那我们可以直接找到自己想要的一些模板， 比如说我觉得这个比较好，那我们就可以直接复制它的格式，然后来到我们的谷歌的 a s 丢丢，然后还是 build 的 这个描述，我们可以直接复制它提示，然后开始创建就可以好 生成了。这边好像是已经生成好了，哇，可以看到这个的效果还是很惊艳的， 对吧？其实到了这一步你的作品质感就已经很好了，后续只需要完善一些细节就好。其实无非就是两点，加内容和改内容。那例如说加内容的话， 比如说哈，我想做一个放置我图片和视频的步步流，怎么加呢？选择这个风格在下一页 好，可以看到他做好了看没有，在下一页他就会展示的这一个物流的一个选项。那第二个无非就是改内容，那比如说我们想改这一段文案的话， 对啊，我直接把它复制过来，然后说把这个玩意改成，嗯，改成兰兰，嗯，安迪吧，安迪然后发送，可以看这个应该非常的快， 可以看到它就是改好了。总之就是左边你用自然语言去描述你的需求，右边就会直接生成对应的修改， ok， 那 就无非这两点，就大家可以自由的发挥你的创意。 然后最后就是如何部署生成一个连接，可以发给 hr 或者业务呢？那其实也是可以在这里直接问的，比如说我说，呃，如何部署上线？说，啊，对，如何部署上线用中文回答，我可以看他本来就是用中文。 嗯，可以看到这里他就给了我一些回答，那么按照他一步步去做就可以了啊。这一点我想说的是，因为我经历过，一旦你去做好了自己的心仪的网站，后面跟着 ai 部署的每一步，你都会是开心的，因为他就像进度条已经走到了百分之九十五一样，你知道他要成了，所以说你一定不会觉得他麻烦了。 ok， 那 这应该就是全网最简单搭建 ai 作品网站了，说一下我的经验吧。 啊，我想说的是，首先第一步非常重要，因为一旦你开始做了之后，往往你就会沉迷其中，真的因为我甚至是当一些牛马下班了之后回家都想都会想玩玩玩扣顶。 第二点就是我的作品网站其实我觉得做的还是比较不错的，如果大家想要参考的话，可以看一看我往期的作品好。第三点就是说有些同学可能说他自己非常急用，短时间内做不出来，想问我可不可以去直接用我代码这个事情呢？首先我想说是 我是可以给一些小范围的人用的，但是肯定不可能是无偿的，而且我更希望你们都可以掌握这个技能，自己先试一试，因为能够帮助到你们才是一开始我做分享的一个初衷。 嗯， ok， 那 这期视频就到这里，那大家都去试一试吧，如果有什么问题可以打在评论区，然后我都会尽力一一去解答的。然后如果有一些问题出现的频率非常多，那我后期也会愿意专门出一期视频去进行分享。

怎么安装 cloud code？ 怎么把 deep 四 v 四 pro 百万上下文的满血版接近 cloud code， 以及怎么在 vs code 的 里面正式用起来？ 这期视频带大家全部搞定， mac 和 windows 用户都可以看。嗨，你好，我是大牙。前两天我刚发了一条 web coding 的 完整零基础的入门教程，现在已经有十几万人看过了，非常感谢大家的点赞和支持。也有不少人真的跟着我的视频做出了自己的第一个软件，或者是自己的第一个网站。 但是呢，我注意到评论区和私信出现的最多问题不是问我怎么写需求，怎么写提示词，而是 cloud code 要怎么安装， deep seek 要怎么接进来。 如果你也卡在了这个地方呢？这条视频就是专门帮你补齐开始前的这一步的，新来的朋友可以看完这期视频之后，继续看我的上一期 web coding 的 零基础教程。那么我们现在正式开始 第一步，我们先来安装 cloud code， 但是在安装 cloud code 之前，我们需要先安装一个必备的前置环境，也就是这个 node 点 j s， 大家可以看一下这里的网址，自己输入一下吧，我不方便 放出来。然后在进入到这个页面之后，我们可以选择下面这个地方去点击你自己是 windows 电脑还是 mac 电脑， 然后去选择这里的对应的安装包，下载之后安装即可。安装完成之后， mac 用户打开电脑里自带的这个终端 app， 然后 windows 用户去搜索 powershell 这个软件，然后以右键管理员身份运行。 我们在自己的页面里面去输入 n o d e 空格杠 v 再回车， 这样我们能看到两个版本号，就代表我们安装完成，但是 windows 用户还有一步要做的就是我们要来到这个 get 官方网站，这个网址大家也可以自己手动敲一下， 然后在这里选择好你电脑对应的安装包，然后去下载，之后安装也是一路 next， 然后完成安装它就好了。 这一步所有的前置环境都部署完，我们现在来正式安装 cloud code， 其实真的非常的简单，我们只需要在我们的终端窗口或者是你的 power shell 里面， 我们粘贴上这一行一行的命令之后，按下回车，等待它自动安装完成就可以搞定了。 安装完成之后，我们还是在这样的一个终端窗口里面去粘贴这样一段命令， cloud 空格横杠横杠 version 之后再回车，这里就会出来我们 cloud 的 版本号，看到这一个就代表我们 cloud code 已经真的安装好了。 现在我们来到了第二步，就是把 deep seek 接入到 cloud code， 我 们进入 github 这个网站，然后去搜索 c c switch， 看到是这样的一个项目，我们点击进来，然后我们往下滑，看到这里 releases， 然后再次点击，然后我们继续往下翻，找到下载列表， mac 用户我推荐大家直接去下载这个 dmg 的 安装包，然后 windows 用户推荐下载这个 msi 的 安装包，也是下载之后直接下一步，下一步，下一步完成安装就好了。再下一步我们就要来到 deepseek 的 开放平台， 我们可以登录或者是注册创建你自己的一个新账号，然后我们再去做一下充值，这个金额呢是可以自定义的。充值完成之后，我们点击左侧的 api keys， 然后来创建一个新的 api key， 比如这个时候你可以给他叫 cloud code， 或者任何一个你喜欢的名字都好。然后我们点击创建，这里就会弹出来一串英文数字的字母，这个大家一定要现在就记好， 你可以把它复制下之后发送到一个你可以保存的地方，先保存下来，因为我们一旦这个时候点击了关闭，那这一整串的完整字母我们是不会再看到了，你只能去删除它，然后再重新创建。 还有一个就是你的这一串 api key 一定不要给你不信任的人或者是其他的陌生人去使用，因为这串 key 他 拿到的话，他可以拿去用，然后扣你的钱，所以大家一定要保管好自己的 api key。 接着我们再打开刚刚安装好的 c c switch 这个软件，其就是我们的一个给 cloud code 更换 ai 模型大脑的一个工具，它可以让我们自己去接入很多其他的 ai 模型。然后我们要注意这里的图标一定是要点在 cloud code 的 这个图标上的，再去点添加， 然后这里我们选择 tipsick， 然后这里有其他的很多的 ai， 大家都可以根据自己的需求去选择创建对应的模型就好了。 这里我们继续以 deepsafe 来举例，然后这里的 apikey 我 们把刚刚复制好的那串字母粘贴在这里，然后我们来配置模型的名称，我们继续回到我们的 deepsafe 的 开发接入文档，然后点击这个接入 agent 工具，然后再点击 cloud code。 在这里大家就可以看到，官方其实是有说明，我们如果要使用百万上下文的满血版，我们要配置这一个模型的名称，我们把这个模型名称复制一下， 然后在这里的主模型或者是 opus 模型，我们都可以让它变成这个模型，然后其他的这两个模型呢，我们都可以去配置一下我们的 v 四 flash， 然后我们继续复制这个模型的名称 粘贴，粘贴，然后打开最大强度思考之后就可以点击添加了，添加完成之后，大家可以先点击这个图标来测试一下它的连接状态，我们点击 看到这里显示正常运行了就没有问题了，像我还配置了小米的咪某，我如果要用的话也是直接一键起用就可以切换了。 现在我们来到了最后一步，也就是下载安装 vs code， 并且在 vs code 当中去使用我们的 deep seek， 我 们在这里去打开 vs code 的 官网，这个大家还是自己要手动输入一下这个网站啊，点开之后呢，我们就可以看到它这里会有一个下载提示按钮， 对应你的电脑的操作系统，我们直接点击这个下载就可以了。大家安装好了 vs code 之后，我们可以直接打开你的程序，然后先到左边的第五个按钮扩展这里点击， 我们先搜索 cloud code， 然后去下载这个有 a 社官方认证的这个插件，我们可以点击安装。 安装好这官方插件之后，我们再搜索 chinese， 然后大家可以按自己的喜好去安装简体中文还是繁体中文，我们继续在这里点击安装就好了。安装完成之后，在整个 v s code 的 左下角会弹出一个框，提示我们可以重启 v s code 来更换这个语言的显示。 要使用 cloud code， 我 们需要先创建一个项目的文件夹，这里呢，我以上期的 web coding 教程的项目为例，就是这个历史粘贴。 我们新建好一个项目之后，打开这里，其实左边是他的所有的文件列表，我们在这里可以去查看所有 那个档的所有的文件，然后我们可以在这里进行查看编辑修改。如果我们要使用 cloud code 呢？我们需要点开右上角的，这里有一个 cloud code 的 图标，我们点击 哎，就会出现这样一个对话的窗口了。在这里我们就可以正式的开始向他提出任何你想要的需求或者问题。比如我们可以再进行一次他的身份确认，先问他你是什么模型， 回车，然后他应该是会回答他是 d p 四 v 四 pro 的 呐，果然他现在说他自己是 d p 四 v 四 pro， 而且他的上下纹的是一百万的 tokens， 这就代表我们的所有的配置都没有问题。正式可以开始去 跟他提出你任何的需求，去创建你任何想要的项目，这就搞定了。其实可洛克的能做的事情真的不只是写代码， 他还可以帮你管理你电脑里的文件。你给他一个 obsidian 的 仓库，他能直接在这里帮你新建或者是编辑整理你的所有笔记，甚至还能帮你做每日代办的管理等等等等。他能做的事情真的非常非常多。下次有机会我再和大家分享 cloud code 在 除了编程以外的 曾经使用的经验。如果你还不会 webcoding， 可以 继续回看我的上一期的视频安装的过程，或者在使用上还有任何的疑问，我们在评论区接着聊。那这期视频就到这里结束了，我是大牙，我们下期视频见，拜拜。

二十万粉丝通过我最开始的三条视频，学习了怎么用 ai 快 速低成本的搭建网站，并且部署上线网站。那么如果我们想要用网站赚钱，就需要接入用户登录和支付系统。这期视频我教大家怎么实现用户登录以及用户数据的存储。主要是网站后端的实现也是超简单的。 我这次把 ai 编程工具切到了 code x， 大家也可以用 tree 或者 ctrl 去实现。我用到的数据库服务是 superbase， 对 于初学者来说，这个网站的服务是完全免费的。这次我用一个相亲定位工具的案例来说明我们 web 定一个网站可以怎么接数据库。 我通常会在一开始的时候先和 jimmy 聊需求，当然这一步可以直接在 codex 里面和他聊也是没问题的。我想外部扣定一个做相亲定位的工具，需要用户注册和登录自己的账号密码，输入用户的城市、年龄、身高，体重、外形、学历、工作年收入、家庭情况、情感经历，在这个网站上就能输出对该用户在相亲市场上的评价。 我打算用 codex 实现这个项目，前后端分别应该怎么实现？需要给 codex 怎样的 promise， 请你帮我生成，然后交给 jimmy 帮我们去生成 promise， 他就会推荐我们前端的技术和后端的技术，后端就是用这个 service 作为数据库，我们主要看的是给 cox 的 prom 策略，我们现在做的是一个 mvp， 非常简单的版本，所以我们就直接开始吧，打开 cox， 嗯，添加一个新的项目， 把这个项目命名为，呃，相亲定位工具，我一般会选择这个完全访问权限，因为我不是很希望让他再来找我确认各种各样的权限， 我选择的模型是 gpt 五点五。好，我们把我之前的这个 pound 复制给他，同时呢，我们也把现在返回给我们的一二三这三个步骤也复制给他，点击发送，接下来的工作完全交给扣代斯就可以了。然后我们需要做的就是耐心等待我们发现他其实还没帮我们，就让他直接帮我开发就可以了，现在开始 right now 冲， 他已经在当前目录开发完成，那么我们就点击看一下。 嗯，怎么说呢，这个前端页面对于我自己来说我感觉是不太满意的，但是没关系，我们这一次主要是去讲这个数据库是怎么接的嘛。这个前端我后面再调整一下，我们需要去点击它的这个使用说明，因为我们的 superbase 它是还没配置嘛，所以我们需要新建一个 superbase 项目。 superbase 点 com 嘛，登录进去之后， 点击 start your project， 然后新建一个工程相亲定位位工具 password， 输入一个自己的，然后点击创建。我们回去看一下这需要什么？在 circle editor 中执行这样一段 circle 啊，我们先把这段 circle 打开，把它全选，然后复制到 circle editor 这儿， 在 on 三体 case 中启用一秒 password 的 登录。好像没有对应的配置，听不懂啊，这个 superbase 配置里面的一秒 password 登录是啥意思？问一下它 哦，就是允许用户用邮箱加密码注册登录的认证方式。可以啊，我应该怎么操作呢？ 首先打开控制台，进入项目，点击三 in providers， 点击三 in providers， 找到一秒这一项 啊，找到了，确认这些开关是打开的。好，其实这个一秒 password 登录我们已经实现了，然后我们需要将项目 u r o 和 a nunki 解入这个文件啊。提问一下 superface 的 项目 url 和 key 怎么获取？他说打开这个 dashboard 进入项目，然后点击 project settings， 找到 data api 或 api， key 一下 data api， 我 们把这个链接复制一下，要不直接发送给他吧，让他直接帮我们去填写吧，因为他有完全访问权限了，所以他可以直接改我们的这个文档，这样我们就不用自己去找了。 好，大家不要学我啊，我发出来的这个细微 key 不要放到这个前端项目里面。然后我们再看一下这个 circle editor 站，我们已经把这个对应的 circle 复制粘贴到这了，然后我们运行一下， ok， success 成功了，这个时候我们跟他说一下接下去干啥，我能测试了吗？ ok， 那 我们就可以进入这一个网页，然后用邮箱和密码注册，然后我就能够去完整的填写这个表格并且评估，那么我们去试一下。首先我们注册一个账号， 注册并开始，哎，发现我们进去了用户注册和登录的这个体系，我们就已经完成了，但是登录进去之后，这两个按钮就不应该存在了，要不然就是退出登录了。这个前端的一些交互的话，我们后面再改吧。 嗯，我们先来看一下情况，基础的坐标，杭州，年龄二十五岁，我的身高是幺六二厘米，体重六十二千克，外形自评五分吧，下一步，本科有名校背景，互联网 产品经理，年收入，嘿嘿，不能告诉你家庭情况。 ok， 先简单的这么写吧，毕竟我们现在是在测试呢。然后我们点击这个生成评估， 嗨哦，他说我是七十七分，可以，我觉得这个没有太多的问题了，我们再来看一下，刚才我们填了一些数据嘛，那么，呃，他在我们的这个 superbase 的 数据库里面究竟生成了什么东西呢？ 首先我们看到三 dkc 就是 这个授权，这的话我们会发现多了一个用户，然后我们再去看看我们有哪些表吧。啊，他就只有一张表，然后这张表呢？他记录了 啊对应的用户的 id， 然后还有他填写的各种可以进行乡村定位的信息，全都在这张表里面。你只要连接了这个数据库之后，相当于你这个网站或者你 app 里面的用户登录注册的这个系统就已经能够比较好的实现了。看吧，是不是很简单，简直是有手就行。 当然这个网站目前还没有接通支付，前端也非常的丑陋，关于支付，我会在后面几期视频分享，前端的设计可以参考我的第二条视频，用 gemini 去做调整，因为 gemini 是 前端最严格的辅群，而我西门聪明蛋就是你们 ai 编程启蒙的母亲。