胡彦斌vibecoding教程

就在刚刚， codex 终于官方发布了手机版，很多朋友说现在只支持连 mac， 其实 windows 也能连上了。这期视频我就手把手教大家怎么把 windows 电脑上的 codex 和我们手机连上，让我们在外休闲时也能远程指挥家里的电脑干活儿。首先确保 codex 已经更新到了最新版，通常 codex 会自动更新，然后我们打开 c 盘，进入用户文件夹，找到点 codex 文件夹，打开后找到这个文件，双击打开，找到 features 这一栏，如果没有就自己按照我这里的格式加一行， 然后把这两行复制粘贴到 features 下面，保存配置就改好了。打开 codex， 等待手机连接。接下来我们就拿出手机，打开 check gpt app， 在 侧边栏点击 codex， 它会弹出一个窗口，如果电脑这边配置正常，下面就会出现这样一个黑色按钮，点击后要走一次认证流程，通过后呢就到了确认界面， 我们点击右侧的黑色按钮，稍等一会，就能看到屏幕上显示出来了我的电脑名称，并且同步了电脑上我与 codex 对 话的历史记录。我们点进一个绘画，可以看到之前的绘画记录，那么我们来测试一下，我让他在桌面创建一个 txt 文档，然后打开 点击发送，可以看到电脑上已经同步了我发送的信息，速度很快，文档也很快创建好，打开了， 体验非常丝滑。不过我发现一个 bug 就是 如果这是一个全新的绘画，发消息出去手机和电脑都没有反应，可能需要等待后续的更新了。好了，我是阿朱，关注我，让我们一起在 ai 潮头冲浪。

这节我们讲下 ai 时代的需求分析和目标定义，也就是所谓的规范驱动开发。讲完咱们直接实操一下，这是今天大概的内容。 首先我们要意识到一个问题，需求分析阶段和之前完全不一样，之前我们需要把用户需求收集过来，然后再整理翻译细划，现在只需要关注目标和边界约束就行。做一个东西出来也比较简单，但是引入了新的问题，虽然你可以简单的描述，然后交给模型自由发挥，睡一觉就干完了，但干出来东西实际上是不可控的， 也就是我们目前高不高兴面临的困境， i 键的猜不透，或者说猜错了你的意图。还有的话就是 i 的 编码速度实在太快了，如果不控制代码的一个商征，之前我们古法编程的时候，你想弄出一座石山，怎么也得半年，但是 i i 的 话一周就可以。规范驱动开发的核心洞察是把你的意图文档化，让规范成为这个执行的一个依据， 发现问题，解决问题。我们软件行业的方案实在太多了，什么 d d， d d d d d d d d， 今天咱们采用的是 s d d， 写好规范文档，再让 iint 开始开发 s、 d、 d 四个阶段，首先定义我们的目标和边界，然后制定我们的方案，然后把方案拆成小块的任务，最后让 i 干活，我们验收就行了。咱们今天实战的话，先把第一步干了，其他放在后面， 这是可选择工具，现在可选择工具太多了，大多数的话都是整体解决方案。然后咱们今天实战选择的是 superpowers， 如果你是个人开发项目，建议就是 superpowers 或者 gsd， 开放性的问题我就不给大家念了，直接开始今天的这个实战环节， 我们先创建一个文件夹， 我们这次选择的这个实弹工具是 open code 的， 至于为什么是 open code 的， 呃后面选型那节再讲，今天就不过多隐身了。今天我们主要是规范驱动开发的一个实弹，说白了就是生成一个呃规范文件，让 iint 根据规范来干活。我们采用 superpowers 的 涂抹风暴技能帮我们去生成一个规范文件， 这个模型的话要选这个智力高一点直接输入，我想创建。 其实前面已经说了， ai 时代的这个需求分析比较简单，就是把你的这个目标和边界想清楚，说明白。我这里已经已经想好了，就是要采集这个热门的网站，然后放到某个文件夹中，然后我必须支持这个 mini 行，因为我后面需要给 edit 去做一个使用， 这边的话，它会自动帮我们加载 superpowers 的 一个头脑风暴的技能就是这个，可以看一下我们的 skills 的 话，需要一个呃 mini 行，然后同时需要一个 gui， 我 们就不做 gui 应用了， 打就行了，因为呃设置桌面壁纸的话和这个烧录系统是相关的，并且我们有很多别的插件可以去控制，直接就是采集就可以， 可以看到它给我们推荐了一些方案，然后选型这一块的话，我们这个工具使用 brush 这一块的话是这样，这一块这个选型，呃如果说你是个前端开发，或者说呃你有一个外部页面的话，建议使用 node js， 然后如果说你的这个工具涉及到 ai 相关的库的话，建议使用 fast， 如果说你是个存银行工具的话，使用 rest 会比较好一点，当然你也可以按它推荐的来。 这边的话， rest 这个学习曲线已经不是我们自己去写的，无所谓。 下这个归零文件计划的话，我们先不做，放到下一节， 那就看一下它的这个规范文件项目名称、用途、技术段，然后我们的一个核心功能，下载管理、配置管理 很不错，这节就到这里，下节我们做计划和选型。

hello， 相信大家已经看到了我所推出的这个 nasa skill 这个包，那在这个包里面呢，其实我们是封装了两个 skill， 一个是这个 bigger， 然后还有一个呢是 polish， 说白了呢，一个是用于这种图标 啊，润色的呀，包括你去提供原始数据，然后让它去帮你生成图标，然后这边呢也是我们就是可以看一下，就 是我们生成的一个效果，其实总的来说我们导出的格式是 svg 的， 并且呢你可以把它放到 呃 ai 里面，然后再给它进行二次校正，就是这些文字都可以修改的。那另一个比较重要的技巧呢，就是说我们去对这个文献进行 润色，就是大家都知道你如果盲目的用 ai 或者说 excel 去进行这种中意英的表达，或者说完成一些写作的时候，它很难完成你这些要求的设定，你每次呢都是需要跟这个 excel 去讲一堆的规则，对吧？很浪费时间的一个事情。 那 skill 它本身呢就是为了解决这种重复性的，然后呢又比较规范的这样的一些约束， 所以呢这个它本身呢是在强调一个规则附用的事情。然后呢我们是把这个 feature 上面的一些文件，包括我们学术表达课程的这样的一些资料丢给了它，然后呢是总结了很多我们在 呃学术英语写作的时候需要注意的点，比如说这种中长句啊，他的词数的限制啊，然后像 result 部分呢，我们要用过去时，然后呃讨论的部分呢，我们要稍微的加一点修饰等等，各种各样的写作技巧都包含了进来，所以呢我们这个包呢还是比较丰富 的，那我接下来呢就带大家去演示一下要怎么用。首先呢，其实 用过 steam 的 他都知道了，就是说你把要把这个两个文件呢，相当于是放在你的 clock code 或者 code text， 甚至是其他的这样些 agent 的 他的一个目录项，他们这个目录呢是指专门存放 steam 的 这样的一个目录 模型，在根据你用户的问答的时候，它可以自动匹配相应的 skill， 然后去完成指定的功能。那我这边呢也可以给大家做一个演示。那首先呢，在演示之前，我想带大家再次看一下，我们现在又经过一次改版之后，它创建出来这些逼格的一个效果 就是可以看到的，其实它越来越符合我们这种学术表达上面，或者说这种正开上面这些图标的一个创作了，因为我又让他学习了很多的这样的这个 nature 论文，所以呢它的性能其实是在不断提升的。 那好，那接下来呢，我就带大家去实际操作一下我们常遇到的这两个 still， 它如何去发挥它的价值。首先呢，我们打开终端， 打开终端呢，大家有很多人用 cloud， 但是 cloud 对 国内用户其实是不太友好的，那我这里面呢，其实更喜欢用 codex， 那 无论是 codex 或者说 cloud 它本身呢，都可以去附用这相同的 skill。 好 检查一下我现在有哪些 skill 好， 那在这个过程中呢，它就会去解锁到我们存放 skill 这个目录，然后呢它把这个信息告诉给你，我们稍等片刻。 好的，我们现在可以看到它已经生成了这些结果了，首先其实它这里面还有一个比较重要的功能啊，就是安装 skill， 创建 skill 这项相当于其实我再去写 nature policy 或者说 nature figure 的 时候，也是用这两个 skill 创建的。 然后呢，我们在这里也可以看到啊，就是 nature figure， 就是 按 nature 风格去制作科研图，然后 nature 风格呢，就是按 nature 风格去润色学术表达。那大家比如说你还需要各种各样的视频，我都可以完成自由的创作，你可以通过自然语言跟它对话，然后让它来完成最陡的自 给我的一个编辑，然后呢，接下来好帮我生成一个模拟数据，存到 csv 文件中，我要对它 好。接下来呢，我们就尝试着说让 ai 去生成一个模拟的数据，然后呢，接下来呢，我们就调用一下 nature 这个 figure， 然后来对它进行这个开源绘图，我们来看一下它是什么样的一个效果。 无论是 codex 或者说 cloud code， 它本身呢，都可以去在命令行上完成各种各样的命令执行。其实比如说熟悉 linux 系统的朋友应该知道，我们会用一些 cd 命令啊， ls 等等， 其实这些本质上都是在终端完成的。我们玩 linux 系统的人可能都不在乎这个格式化的页面，所以呢，其实你可以通过命令行去操控你这个电脑上的所有事情，只要你给他释放相应的权限。 好，现在呢，他正在帮我去生成这个模拟数据，然后我们也不知道他究竟要生成什么，但是我们可以期待一下， 他看了，我们看一下他准备生成一份长表， c s v， 包含 group 组、 time day 时间，然后还有等等其他的连续性的指标，这样呢我们说可以做，就说他很聪明啊，他创建这个表的目的呢，是让我们可以做折线图，然后分组散点相线图等等， 然后呢他去在数据结构定成这种重复测量的小数肿瘤实验。好，我们接下来呢就稍等一下， 他这里面其实看到啊，就是他在创建过程中的发现部分组编号重复了，就是他希望 id 是 唯一的，那他对统计是不合适的，所以呢他也会自己完成这个骄艳工作，然后帮我创建。但是其实这些都不是我最终想让大家看到的， 他操控本地的文件也好，去干一些整理的活也好，这只是他的一个入门级别，他最重要的是可以创建 python 脚本，根据你 skill 的 要求，然后来对这些数据进行刻意化的处理， 那这个真的是可以大大的提升我们的效率。比如说你当前电脑里面有很多的表格需要处理，甚至呢很多表之间他都是需要联动的，那么呢你就可以都让他去处理好。 那看啊，现在呢它已经生成了这个 csv 文件，然后呢它是包含了一百条的这样的一个情况，然后的话，我其实呢是希望说它在这个目录下看啊，我们可以打开看一下它的这个文件， 我们可以看到它有不同的 id， 然后不同的组别，然后有一些其他的这些指标。好，接下来呢，我什么都不跟他说，我就说让你去调用 hdr， 然后来帮我完成一个开页绘图的制作，让我们看一下效果， 请帮我用 hdr 来完成， 来完成上述数据的科研绘图。我们来期待一下效果。其实这个命令很简单，我为什么要强调这个 nature figure， 就是 你哪怕是一个模糊的指令也行，但是呢，其实它大圆模型在调用这些 skill 的 时候，它会根据文本的相似度做一个匹配， 所以呢，如果你描述的越精准，那么它工具调用的就越精准，尤其是在你的 skill 列表特别多的时候，它不同的工具之间呢，可能会存在一定的这些重叠啊，或者说功能类似啊， 所以这个时候你一定要把你的提示词写好。那在现在这个时代，其实 skill 它本身也是一种提示词工程，但是呢，它只不说能够雇用，可以大大的降低我们的一个效率。 好，我这边告诉他，完成这个图标的时候，他首先干什么呢？他去读这个数据对吧？他读完了这个数据，去看他的表是什么，他的表结构是什么？他的列有哪些，然后他有多少行数据，然后呢，接下来他就去根据这个数据来构思他究竟要画一个什么样的图 好，他现在开始制定规划，然后我们来静静的期待一下。 这边呢，其实我们可以看到他是已经把这个二百多行的一个 python 脚本已经写完了，接下来呢，他就会通过 python 命令去调用这个 脚本，然后来完成科研绘图。但是呢，他会在发现啊，他发现在执行这个脚本的时候，他缺少这个 python 的 这个包，因为这个电脑我没有进行任何的深度学习，或者说机器学习这些环境配置， 所以呢，它报错了，但是报错了你也不要惊慌，因为它本身呢，其实是可以执行命令。行，那我们知道 panda 它本身呢就可以通过 keep in slow 去给它完成安装，所以它会自动的执行， 或者说它也有其他的办法，使用其他的库啊，来完成这样的一些操作。也可以就是它是非常灵活的，那比如说它这里面没有 panda 啊，我们往上走一下，它这边避开了这个 限制，它是使用 madlible 还有这个 nampi 来完成这样的一个创作的，然后我们看一下最终创作一个效果啊， 可以看到我们对这个图片的要求是要求输出三个文件的，比如说 svg， png， pdf， 你 可以根据自己需要去选择，当然的话，如果你觉得 就是说它这个图标，你只要 svg， 那 你就 ok 啊，你也可以把其他在 studio 里面，你跟他讲你不要去绘画其他的类型就可以。那在这呢，我们也可以看到它生成的这样的一个啊， p i 文件， pi 文件上面呢，包含了一些这个啊，颜色的要求，对吧？绘画的要求，还有比较重要的是这两个吧，对吧？字体可修改啊，然后 svg 的 保存，这个大家如果经常进行课外绘图的话，应该是比较熟知的 好，它现在已经开始尝试着去完成这个导出，然后它会自动完成校验，就是说它会先看一眼你导出的这个东西究竟符不符合我一开始的需求，所以它这个验证回馈的机制做的也比较好。 好的，接下来呢，我们可以看到啊，它已经告诉我提示生成完了，我们在这个目录里面去看一下它生成的一个东西， 其实我们看到这样的一个效果的时候是非常震惊的，对吧？因为它确实非常符合 nature 创作的这样一个风格。 然后这里面我们也可以再看一下，刚刚看的是 pdf， 这是编辑它们的，这个是一模一样的，只不过说 为了大家去根据你的需要，方便你可以自定义的去选择需要什么样的一个类型。那接下来我就想了啊，实验这个图已经画完了呢，我们进一步要对这个结果进行描述，对吧？帮我生成一段。对， 那他呢，就会根据这个图标里边的数值，甚至呢，他可以利用上下文信息，他知道我一开始给他的是一个 csv 文件，他可以去读这个 csv 文件，去拿到这个原始数据。 但是不管怎样，其实我这块的目的呢，是想让它生成一段中文的文本，然后接下来呢，我会让它去调用底层的这个 still 来对这段中文文本进行一个打磨。好，我们现在先静等一下它去完成这个生成过程。 好的，我们现在看到呢，它已经完成了这样的一个，呃，文本生成，但是呢，我们知道投稿的话，大部分我们都是要英文的，不可能是中文，你去塞在 word 文档里，对吧？所以呢，接下来利用 nature artist 对 我的对上述的结果描述进行学术英语写作。 所以大家不要盲目的去装 skill， 你 一定要知道每个 skill 它的名字是什么，然后它的功能是什么，这样的话你才能更好地去调用它，而不是说 现在有很多的开源的仓库，对吧？它里面装了各种各样的 skill， 然后呢？大家总觉得 skill 越多越好，但其实不是这样的，你是需要按需的去使用，包括比如说你要完成一些呃 前后端的这些创作啊，甚至你想当好一个产品经理的角色，那你可以去尝试书包啊，他可以帮你去呃创作一些产品经理该有的思路，然后比如说你去完成其他的各种各样的，比如说编程里面也有各种各样的思路，一定要按区顺序，而不是说 把开元的股息一股脑拿过来。好的，这个时候呢，我可以看到他已经帮我完成了这个学术表达。然后其实基本上我们可以看一个最简单例子，因为我们去要求说 正常你在这个 word 里面你的行数是不要超过两行的，所以他会呃尽可能去避开一些 长句，然后我们也可以看一下它写出的一个效果，总体来说还是比较不错的，基本上不会说 v 啊， v 干了什么？ v 翻译了什么，对吧？他会说以一种非常自然的这种口语表达来把这个结果进行了讲述。 好的，其实这个就是我创作这两个 steven 的 一个呃功能的一个使用，然后我也是真正的在用这两个 steven 不 断的应用我的科研领域里面， 也希望我的科研经验可以帮助大家在自己的领域去创造价值，去提升速度。

三十万人看过的网页特效教程来了，我自己 web 抠定好了工具，大家可以很简单的就做出同款效果到 super upc 的 工具模块，点击第一个特效工具，打开右上角，主要上传这三张图片，先上传石膏浮雕图， 再上传法线贴图，最后上传黑白遮罩图。右侧简单调整下参数，主要是刷子大小、溶解速度和边缘柔化，基本就大功告成了。这个时候就有朋友问了，你做的这个工具确实非常好注意，但是这三张图我怎么做出来呢？ 那当然还是交给你的好朋友豆包吉梦 chat gpt。 你 可以先找一个类似的石雕浮雕效果参考图，直接把你自己的 logo 或者图形让他参考， 然后你再让 ai 帮你生成法线贴图和黑白遮照图。 ai 出图可能会产生错位，你可以在命令里加上保持主要元素的形状位置比例不发生任何变化。 右侧不同的参数会给你不同的惊喜，而且材质和颜色都可以任意调整，这是叠加了图片的效果，都很不错，大家快去试试吧！欢迎一键三连，下期我会聊聊如何外部拷定出这个工具的。想提前自己尝试开发这个工具，可以看一下 web 的 这篇复盘文章， 里面有使用 viby、 cloud code framework、 figma 等工具的实操流程，它们并没有公开工具，我是根据它们的截图和提示词，并自己多轮迭代优化出来的工具。

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 说话和沟通，那剩下的就是打开你的电脑去试一试。如果你还有什么不懂的或者想看的教程内容，都可以在下方告诉我。那这期视频就这样。我是大牙，下期视频见。拜拜。

大家好，这里是老王欢迎来到新的 ai 小 白教程系列视频。本系列视频是将 github 中的开源项目 web web 为主要讲解总纲，再加上老王分享自己同时在从中学习获取的经验，从而实现项目作者的宗旨。人人都能学会的 ai 编程 web 编辑。 在接下来的时间里，我会陪你根据 web web 的 教程顺序，助你完成第一次从想法到上线的完整作品闭环。当然，即使你不需要 ai 编程，本系列课程也有非常实用的 ai 问答知识点，让你掌握如何在日常生活中或工作中正确的对 ai 提问。 本期视频为试讲视频，如果大家对本系列视频感兴趣，就请帮忙给个点赞。当然，大家如果看了本期视频后，想要主动进行后续课程的自学，可以直接去订阅原项目外部，外部进行后续的学习。那么我们现在正式开始本期视频的学习。 很多人在打开编程教程时，最先想到的不是兴奋，而是一连串担心，我零基础真的能开始吗？这是不是又要先学一大堆语法？我到底能做出什么？如果中途报错了怎么办？ 本期视频的任务很简单，先把期待立住，把边界说清，把焦虑降下来。看完这一章，你会更确定两件事，这套教程到底在教什么，以及你下一步该怎么开始。 我们来看一下本章的学习路线。第六章共分为四个小节，首先我会告诉你这本教程在教什么，以及你最终会做出什么作品，然后帮你判断这条路线是否适合你，以及怎么学最有效。 接着是很多人最关心的部分，卡住时该怎么办？我会给你一套统一的求助流程。最后用一张完整的学习地图，把基础篇的学习路线说清楚。 我们先来说清楚 web web 这套教程究竟在教什么？这不是一本先学语法，再学框架，最后才做项目的传统教材，它更像一条可以直接走通的路线，先做出一个能运行、能展示、能对话的作品，再把它带回自己的电脑继续修改， 然后一步步把它改的更像真正的产品，最后正式上线，拿到别人也能访问的链接。这套基础篇默认你是独立外部 coder， 你 不需要假设自己身边有前端后端测试同事，你要学会的是如何把想法说清楚，如何把 ai 当成执行伙伴，如何判断结果是不是对的。 那本教程的主线案例是什么呢？你会做出一个个人主页，加上一个数字分身，个人主页可以看到你是谁，你做过什么，怎么联系你。 数字分身则是一个可以对话的 ai， 它会按照你设定的角色来回答问题，就像一个二十四小时在线的虚拟，你这两个东西结合在一起，就是一个完整的作品。别人打开你的主页，既能了解你，又能直接和你的数字分身对话。 在开始之前，我希望你先记住一句话，这套基础片不是在训练你像程序员那样背知识，而是在训练你像做东西的人那样把作品做出来。 你当然会接触到一些技术词，比如提示词、 get、 api、 部署、环境变量，但在基础篇里，这些词的出现顺序只服务一个原则，什么时候你真的需要它了，我们再讲到够你继续推进的程度。不会一上来先把你拖进一堆抽象概念里，也不会把还属于进阶版的内容提前塞给你。 接下来，我们看看谁适合学这套教程。如果你是零基础学生，从来没接触过编程，你会从这里第一次知道我也能把想法做成东西。如果你是产品运营设计背景，你可以把过去只能写在文档里的想法变成可演示的作品。当然，这套教程也不是适合所有人。 如果你当前最强烈的目标是想系统学习前端、后端全站原理，那基础篇不会按传统学科方式系统展开。 如果你想深入 get 写作部署架构、 cimcd 这些，这些内容会留到进阶版系统讲解。简单来说，这套教程适合你，不是来考技术理论的，你想先做出一个作品，再决定要不要继续深入。 那学完基础篇后，你会到什么程度呢？你能做出一个真正可以展示的 ai 作品，知道怎么用 ai 去继续修改它，也知道遇到卡点时该如何继续推进，但你还不会自动变成专业全站工程师。 基础篇更现实的目标是把你从完全没有作品带到已经有第一个完整作品。那怎么学最有效呢？更适合这套内容的打开方式不是从头到尾连续阅读，而是一边做一边读，遇到问题时再回到对应位置查。如果你只是想先试试看，最适合走体验路径，看完第零章，直接做第一章。 如果你想完整走一遍从想法到上限的闭环，那就按顺序完成第零章到第六章。要是你本来就习惯边做边查，也可以走边做边跳读的路子， 接下来是很多人最关心的部分，卡住时怎么办？很多新手一遇到问题，第一反应往往是开始乱改代码，一条一条搜索报错，怀疑自己是不是不适合学这个基础篇不建议你走这条路。 在 ai 编程时代，更有效的第一反应是先把问题描述清楚，再让 ai 帮你继续推进。当你卡住时，优先按这个顺序告诉 ai 我 刚刚做了什么，现在看到了什么问题，我本来想要什么，结果这个模板的好处是，它给了 ai 足够的上下文，让 ai 能做出更准确的判断。 我给大家三个常见例子，第一个是页面空白，我刚刚让 ai 帮我修改了主页的布局，现在页面打开后是空白的，请先帮我判断最可能的原因。 第二个是按钮没反应，我刚刚加了一个发送按钮，现在点击之后没有任何反应。第三个是聊天结果不对，我刚刚更新了数字分身的说明信息，现在他回答的还是很机械。如果第一次没解决怎么办？ 第一次没解决不代表你就失败了。很多问题本来就不是一问就结束，而是一个小迭代过程。更好的做法是把新的现象告诉 ai， 说明你刚刚按他的建议做了什么，然后继续推进下一轮判断。不要只说它不对，它坏了还是不行，这类信息太少， ai 也很难帮你判断。 最后，如果出现问题，不要第一时间想 ai 又写错了。很多时候，更真实的情况是，你没有把目标说清楚，没有限制改动范围、环境或配置没有准备好，或者某一步其实没有按预期生效，这不是在责怪你，而是在帮你建立一个更稳的协助视角。 问题出现时，先看上下文目标边界环境，而不是先把责任扔给 ai。 这里老王给大家演示一段老王自己和 ai 共同修复网页端支付宝支付流程无法正确完成的 bug。 首先表明老王是完全不懂支付接入流程，纯纯的门外汉性质。那么我们来看一个对支付流程完全不懂的小白是如何配合 ai 找到并解决 bug 的。 首先我们需要给 ai 提供足够的项目上下文，这永远是你与 ai 沟通的首要前提，如果上来直接问问题， ai 完全无从下手。 接下来就是详尽的问题描述，要告知 ai 你 现在明确的操作现象和阻碍点，而不是直接跟他说支付宝无法支付。然后 ai 会给出第一波的问题分析，如果你对该模块有一定的基础了解，就可以根据他的分析结果进行判断。而这里老王完全不懂，所以只能相信 ai， 让他处理 第一波修复后，问题完全没有解决，而且在前端操作下的表现与原来完全一致。 这时候你不要第一时间以为 ai 判断错了，而应该意识到这不是一个简单的 bug， ai 可能只是修复了他所能看到的 bug， 但是这些 bug 修复后仍然没能导致这个问题完全解决。 那么下面要如何推进呢？你仍需要耐心的将你所见内容完整的返回给 ai， 并且让 ai 给自己本次修复的所有关键节点设置调试日期，然后你将日期复制给 ai， 让他自己分析， 从而让 ai 能看到你所看不到的代码运行变化。设置调试日制是 ai 修复必备的技能，你不需要懂日制输出了什么，你只要让 ai 设置运行后再复制给 ai 即可。这里老王就是将已预埋好的日制内容返回给了 ai， 随后 ai 进行了第二波修复，然后输出了更多的排查点。我们这里需要配合 ai 进行排查，这里老王发送的内容涉及到了密钥内容就不展开了。总的来说，这里就是我按照 ai 给我返回的三个排查点逐一进行排查，并完整返回了排查的结果。 接下来又是两三轮的 ai 修复和我进行来回操作后的返回日记内容的输出。 到这里我们和 ai 终于解决了这个问题，但是一定不要高兴的太早，我们还要对这个功能点进行完整的回归测试， 因为 ai 多轮的修复可能会造成这个模块对所关联的模块或者整个系统产生不兼容，所以仍然需要人工测试来斗地。这里老王果然发现了新的问题， 随着最后的问题解决，支付功能终于正式跑通了。但是这个问题修复完成仍然不是你 web 规定的结束，你一定要将你本次的代码变化统拨到你的架构文档，方便下次进行功能迭代或者遇到其他问题时开启新的对话式，让 ai 能够更加清晰地理解你的项目。 这又回到了开头，我们一定要给 ai 提供足够的项目上下文，而这个上下文的来源就是你每次与 ai 完成修复迭代所留下的文档，我们回到教程。最后，我们用一张学习地图把第一张到第六张的路线说清楚。 一旦你知道自己现在处在哪个阶段，下一步为什么要做，做完会得到什么？焦虑会一下少很多。我们来看一下每一张会把作品推进到哪里。 第一张，你会先做出一个能预览、能展示、能简单聊天的唯一。第二张，这个作品会从平台搬到你自己的电脑里，变成可持续修改的项目。第三张，首页会从默认模板变成更像认真做过的作品。 第四张，作品不再单薄，访客会更容易理解你是谁。第五张，数字分身不再只是会回话，而是开始像你本人。第六张，作品从只在你电脑里变成别人也能访问的正式链接。 你可能在想，我必须做完所有章节吗？如果你只想先体验一次，我也能做出来，那做到第一章就已经很值了。 如果你想完成第一次完整闭环，就继续一路做到第六章。这两种都不是失败，也不是偷懒，在出发前至少确认这几件事。我知道这套基础篇不是传统语法课，我知道自己最终会做出什么作品，我知道这条路线是否适合我， 我知道卡住时该如何向 ai 求助。我知道第一章到第六章分别在推进什么。如果你已经能回答这些问题，那你就准备好进入第一章了。最后我们再说一下副路。说到副路，这里要特别说明一下，副路不是预习任务，更像工具箱， 看到报错了就去查常见错误和问 ai 的 流程，需要一些界面表达词汇，就去查 ui 速查卡，忘了 get 的 最小动作，再去翻 get 最小操作卡。它不是拿来先通读一遍的，而是在你需要的时候能马上把你往前推一把。 接下来就别继续停留在准备阶段了，你已经知道路线，也知道自己最终要做什么。下一步最重要的不是再看一篇解释，而是开始做出第一个版本。 如果你想系统理解、环境与工具、 ai、 工作流、产品文档、 ui、 mx api、 安全 get 协助或部署，可以在后续遇到边界时跳去进阶版，但现在你已经具备进入第一章的全部前提。 好的，以上就是第零章的全部内容，如果你觉得这张对你有帮助，欢迎点赞收藏。如果在学习过程中遇到问题，记得使用我们刚才讲的求助流程，我们第一章见。

最近尝试了去用 ai 去做网页版的 ppt， 像这样的效果，如果原来用 powerpoint 的 话，这样的效果起码得两个小时， 那现在用 ai 的 话，你只需要两分钟的时间。而且用 ai 去做 ppt 最大的一个好处就是原来自己逻辑上很多不通顺的地方，我们也不需要再去整理了， ai 会帮你理清思路、 底薪框架和你要讨论的这些分论点。那接下来就给大家演示一下如何用 ai 去做这样的幻能片。这次的 ppt 是 在飞书这款软件上完成的，大家在飞书上找到飞书阿里，找到之后，我们点击这里前往开发者后台，在这里我们去创建智能体， 创建智能体的目的是我们后面如果说要提一些需求的话，直接在飞书的聊天框进行提需求会更加的方便，那我这边已经创建好了一个现成的，我给他起名叫冰柠檬。可以看到之前我提的需求是非常简单的， 想要做 h d m l 的 ppt， 这个时候 ai 问我想要做什么样的主题，我告诉他想要介绍什么是 scale。 在 这里大概等了两分钟之后， ai 给我生成了这个幻能片，那在这里的话，大家可以看到它是一个预览的模式， 你没法去修改，如果想要编辑的话，我们还是点击这里，在这边找到前往飞书妙塔这里的需求主要是比如说你做一些应用的开发之类的，它会在这个后台里面显示，那你正正常日常的对话它是不会在这边显示的。因为我们刚才提出了一个 去开发一个网页版的 ppt， 所以 它这里会产生之前我给他提需求的任务，那如果你想要你的 ppt 更加的详细，主题更加的明确，你在提的时候也可以给他更多的 你想要表达的一些信息，不需要逻辑非常的通顺，因为 ai 会帮你自动地去整理，包括你的一些设计风格。可以看到这边我是完成了一次 ppt 生成，但是呢后面我发现， 比如说在其他的一些网站上，我发现一些比较好的 ppt 的 元素，我问 ai 怎么去融入这些元素，它读取了之后，提取了这个网页里面的一些元素，问我需要去借鉴哪个元素，它会完成你的需求，去提取别人 ppt 里面一些有意思的设计，再生成一些视觉上的一些不同的效果。 这个就是我之前融入了一些别人 ppt 的 一些特效，在这里它还有自带的一些风格，大家也可以进行选择。因为在整个对话的过程中，我是生成了好几版的 ppt， 如果你需要去编辑的话，你只能在你生成之后的最后一版， 也就是这个页面是我最新的一个页面，在这里点击编辑，我们在里面可以直接编辑文字，包括它的一些正常我们在调整 ppt 的 时候， 比如说颜色啊，还是说文字的一些字号对齐的方式，都可以进行调整。但如果说你最最新生成的这个 ppt， 你 并不是很满意它的效果，你觉得上一版更好，我们就可以点找到我们之前做的这个地方， 它有一个回退的按钮，然后它就会去帮你回到之前的版本，然后在这个版本里我们就可以进行正常的编辑，你做完之后，像这样的 ppt， 你 直接就可以生成一个呃，互联网公开的链接，复制链接你就可以去分享给你想要分享的人，相比于之前你发文件的方式， 这样的方式会更加的方便我们去保存以及进行分享。那 ai 像做这样的网页版的这种 ppt， 其实对它来说非常的简单，那对我们来说考验我们更多的是对于 ppt 的 一些审美的能力，如何把 ppt 做得更加的好看，以及我们有更多不一样的观点，因为制作的步骤以及梳理框架的内容， ai 都可以帮我们搞定。

接下来我会用三十分钟带你完成你人生中的第一个微信小程序，我会讲为什么你要选择微信小程序，如何进行环境搭建以及如何开发，以及最后手把手的带你去完成发布以及备案等等操作， 只要你仔细看这三十分钟，你就可以一模一样的开发出甚至跟我一模一样的程序都是 ok 的。 ok， 首先我们讲一下为什么选择开发小程序，呃，第一个原因是它相对于 ios app 或者是一些网站，开发周期会更短，会得到更多的呃 小工具去帮助你开发，比较适合快速的一个想法。第二个就是他的变现模式比较简单，嗯，你可以直接借用微信的流量去接一些广告，然后或者是通过订阅来变现， 然后就是呃等会会设计的流程。首先是环境搭建，里面会涉及到你需要在微信公众平台去完成注册，呃，去下载微信的开发者工具，然后去建立项目，把你的项目导到里面，以及参加小程序成长计划，从而可以让你免费的呃使用一些后台的资源支持。 然后我们会进入到开发阶段，讲一下呃如何通过写一键点 m d 让你的 ai 知道你在开发小程序，让它可以完全的使用微信小程序那一套呃语言去写代码， 然后我们会看一下小程序，微信微信开发的工具会如何帮你进行真机测试啊，以及如何备案等等。 我们需要在微信公众平台完成注册，那么首先搜索微信公众平台，然后这边有一个立即注册，点击以后点小程序点前往注册， 我们把我们的信息输进去以后，包括邮箱还有你要设置一个密码就可以完成注册。那我这边已经有账号了，所以我就直接回到这里面，然后用我的微信去扫描一下，选择在这个账号下面的小程序，然后去登录， 那我们扫码，扫码成功以后进入到这里面，我们点开发管理。呃，我们要去下载一下开发者工具，把这个工具打开，然后下载这个版本，我们是 windows。 嗯，然后我们回到这里面，左侧行业能力里面小程序、创想计划这里面都是可以去免费领，我这边领过了， ok， 我 们这个小程序功能。呃，开发者工具下载好以后，点击这里，然后我们把我们的新建文件夹，它就会带一些自带一些文件，然后我们就可以开始开发了。 咱这上面最左上角有一个点 agent 的 文件夹，这个是我自己的一个文件夹啊，它里面有一些我去做的 script 等等。那我们先把这个 呃，让他去设置一下 agent 点 md， 这一步的目的就是说我要让呃他知道我开发的是微小程序，确保他以后所有写的代码都是用呃微小程序支持的这样一个代码去开发。嗯， 他会把我的 a 点 m d 去进行一些修改，如果你用 cloud 的 话，你也可以直接让他去改你的 cloud 点 m d， 但是一定要把这条约束加在这个呃 cloud 点 m d 或者是 m d 这个文件夹里，文件里面， ok， 然后我们这边啊，我先把这个配置的 work flow 一 般是在 android 里面用，今天我就直接把它复制过去，当一个提示词去用，然后跟他去聊一下我们想开发的一个想法。 ok， 这边他开始就问我了，那我想做的是一个呃生酮的 app， 生酮的小程序，因为我自己会平常做一些生酮饮食，所以我希望这个小程序它可以呃帮助我更好地进行一些，呃热量的估算啊，碳水含量的估算啊等等等等。我们把这些想法我们 去写下去以后，告诉他大概需要哪些功能，他会去帮我们去整理。如果你没有这个提示词的话也没有关系，其实他就是一个 pm， 你 让他去办一个 pm， 然后跟他聊一聊想法就 ok 了，只要最终的产出是一个 p r d。 ok。 他 这里面给我们提供了一些啊建议的一些功能，以及包括我们的 mvp 可能会想要保留哪些功能。那我们去看下他的这个意见以后，我觉得我更想要这个每日的嗯，一些食谱推荐。 ok， 嗯，那觉得 ok 的 话，我们就跟他去反馈一下，我这里面用语音输入呃一些给他的一些反馈， 让他增加一个生蚝打卡的部分，然后再增加一个浏览的功能，这样他可以自己去看到生蚝零食还有生蚝的食材，然后自己添加。添加完以后，他可以把这个东西呃再简单的添加到他的食谱里面，这样又方便他做饭，又方便他去统计一个热量。 嗯，我们把这个发送给他。呃，他这个加载过程中，对，他会把这个功能列出来，然后他会我们再进行一些简单的交互以后，给他确认一下问题以后，他就会帮我们生成一个 p r d。 我 一般的工作流程是这样的，我让他去生成完 p r d 之后，我会再去用一个叫 i a planner 的 东西，这个我之前视频里面讲过，他主要就是帮我们去梳理。呃，信息架构，也就是你的 网站或者是这个这里面是小程序，它看起来是什么样子，还有哪些的小按钮啊？然后小按钮点进去是什么其他的小按钮，什么其他页面，我给你梳理好，然后我们再用一个叫 vgo explorer， 这个时间讲过的一个东西， 会把我们设计网站的视觉风格就整体上其实可以理解成一个点赞、点 m d。 有 这三个东西以后，他就知道你这个项目是需要哪些功能，然后他的受众是什么什么什么样的人啊，他的网站长什么样子，以及不仅是细节上，还有他视觉上是什么样的一个美术风格。 ok， 我 们这里回答下他的这几个问题。嗯， mvp 编辑确认 mvp 这些让我们做这些是没有问题的，我们确认通过一下， ok， 确认通过我们发送给他， 嗯，他给我们确认最终功能，然后他开始去产出一个轻量级的 p r d。 呃，这个微信小程序呢？它大家可以看到左边的文件夹里面，其实一开始就是那个点 agents 和 agent 点 md， 是 我自己带的， 其他的东西包括这些，呃， cloud functions， 还有 mini program， 这些都是它。你用了微信开发者工具导入你的文件夹以后，它会给你带的一些文件， 这些文件保证你等会可以在呃这个微信开这个开发平台开发者工具这里能正确的渲染，让你直接看到在小程序里打开以后是一个什么样的样子？ ok， 他 这边 p r d。 已经做好了，我们稍微改一个功能，呃，除了计算碳水的这个热功能以后，还要再计算一个总热量。然后我们让他进行一个技术选型，就是把这个 微信小程序上硬性规范，再写到他的这个 p r d 里面，一定要多次强调这一点，不然如果代码里面混着 p r 微信小微信小程序不支持的那种，呃代码 会引起很多的麻烦，非常非常的反攻，需要很累的。 ok， 这边结束之后，我们要去把我们的 p r t p r d。 的 这个路径发给他，然后去生成一个 i a 的 文档， i a 文档是用我之前做的一个 i a 的 skill， 那 这个 skill 呢？我其实一般是用 anti gravity 去跑一个 workflow， 那 这里面我们那么就直接用 timi 好 了，那我们就把它这个提示词再复制一下，让它通过提示词的方式跟它交互吧。那复制完以后，我们把这个发给他，然后标明我们的这个嗯 prd 的 路径，让它去给我们 prd 去生成一个信息架构，也就是用户看到的呃 app 的 一个信息层级的东西，它长什么样子？那这边右边前左，然后我们左边的话，我们去做一个 windows explorer， 也就是我们要生成一个点赞点 m d， 它决定了我们整个小程序的一个视觉的风格。 那我们同样还是把这个嗯 little splash 的 提示词也复制过来，然后去用。你也可以直接用 skill， 但是我这里面因为我一般是 python gravity， 所以 没有把它做成 skill， 就 这样先用了，那我们看一下他会给我们提供一些什么样的视觉方案，然后我们去选择一下，那我这边会偏向于选择 呃，第二套他的视觉方案，那我就会去根据我们的视觉方案去帮助我们生成 一个完整的视觉效果的一个文档，这个文档会一直放在这个 dos 里面。呃，后面我们整个开发过程中 ai 他 去读的一个就是 p r d， 一个是 i a， 一个就是，嗯，这个视觉文档，这样他能保证整个网站做出来他是有很少的反攻，很少的矛盾冲突的，都已经签定好。 ok， 这边我们让他去呃，把这个 dos 里面的三个文档按上这三个文档去做一份开发计划，然后去完成开发。他会把整个大的计划拆成很多很多小的 spring 就是 冲刺任务，每个任务是基本上是独立的， 让我们让他去完成开发，那我们开发需要一定的时间，然后这个时间我们就呃先挑过一下。 好的，那这边我们的 spring 计划都弄完了，开发计划都已经弄完了，我们可以直接点开这个开发者工具，然后看一下效果，搜索都可以看到效果的 啊。除了这样看，你也可以直接去二维码真机测试，拿这个微信扫一下，就能在你的手机上，然后去模拟他的一个运行，连上他的一些功能，那我们肯定要提些整改意见，总体来说看上去好像，呃没有太大的问题，但是他底下， 嗯，比如说他底下这个首页啊，食材啊，我们先试一下他这个用的 煎三文鱼做食谱，对，这个没有问题，但我还想再去给他优化一下，比如他下面这些，呃，首页食材食谱日记打卡 他，我希望他能每个都增加一些 logo， 而且他会存在一定的。嗯，我们下滑的时候他会有一些覆盖的一个情况，那我们再去把这个，嗯要求去跟他去说一下。 对，然后呃，他开发完之后我也直接去问他，就是说，呃，请你把我需要后端去完成的步骤，非常直白的清晰的一步一步的告诉我，然后让我去完成，然后这边我们给他完反馈以后，让他去把剩下的也开发完成。 他给了我们这样的一个后端连接计划之后，我们首先要去创建一个 deepsea api key， 因为我这里面是有一些 ai 推荐的功能，需要连到有些前端项目的话，可能并不需要。步骤一，步骤二，对，它给我们非常清晰的步骤。 然后这里面我们看啊，步骤一它是需要我们去获取并填写这个云开发环境 id 啊，打在这里面就不打开了， 我们点开这里面，他需要让我们把这个贴换成我们的云盘文件 id。 那 替换完以后呢？我们要创建这个云数据库集合啊，要在这里面数据库，然后我们要添加记录， 分别添加集合，分别创建两个集合，一个是 ai food cash， 一个是 ai advice cash。 那 我们点这里面把集合名称输进去，然后它需要一个权限，那它这里并没有明确的告诉我说。呃，这个权限这块怎么去设置？ 先把名字复制过来，权限类型怎么设置？这个应该是，呃，选这个，另外一个我不是很清楚，那我也可以去问他一下，我们先把这个再复制过来， 其实这些东西就是你并不需要对他的后端有一个完整的理解，你只需要让他一步一步的指引你，然后你只要非常细心的看好，按顺序做就 ok 了。 我们把这个集合的名字也输过来，然后问他一下这个集合应该是什么权限啊？他告诉我们是仅创建者可读写，那我们再把这个仅创建者可读写这块给选上。 ok， 我 们再把这边添加复合锁隐锁隐名写上，然后用锁隐字段复制 id， 再选两个声序。 嗯，程序 ok， 要勾选唯一对，那我们这边这个部分就完成了。然后我们需要确定一下，就你这个 cloud function， 它是当前环境，就把选上你这个项目了。然后每一个我们要分别点上传并部署。 ok， 上传步骤成功之后，我们再去看一下。下一个我们就配置 deepsea 这个 api key 了，这里面需要我们先在这里配置， 这里面我设置的是三十秒。为什么要设置三十秒呢？因为 ai 返回一些信息处理的结果是需要一定时间的，所以如果你设置太太短的话，它可能会返回错误，因为它有一个时间限制嘛。 ok。 然后更新完以后，我们再点一下上传并部署。云端安装以外，它这个 ai q 辅助的也是上传并部署。 试验一下它现在这个功能。哎，它现在这样的 ai 就 可以用了， ai 功能也可以用了。那我们这个前端后端以及 ai 功能都是这程序里面都是有的， 其实已经是比较完毕的小程序了。然后我们就来进行一下发布流程，呃，发布流程就这几个，首先我们要填写小程序的名称跟信息，那这是一个生虫的 app 啊，小程序我叫它生虫伴侣，简称就是生虫就好了。 然后我们现在需要小程序的头像，头像这样的。呃，这个的话呢，我一般是比较相信 ai 的 审美的，至少在一定约束情况下，所以我们让他给我们尝试几种不同风格的提示词， 呃，让他去读一下我们项目，然后让他给我们不同风格的词，我们再去积木里面去生成一些。 当然我这边生成以后，第一次他的效果其实不是我特别喜欢的，所以，呃，第二次呢？我让他又加了一些限定，让他去根据一个手绘风格，然后去做，最好能比较具象一点，让大家看到这个图标就感觉到生铜的效果。 然后我们再让 ai 这边，我直接用 cloud 了，然后去给小程序写一段简短的介绍，跟他说我需要发布发布， 我们等一下它这个 logo 提示词。嗯，对，那小程序信息之后还要需要填小程序类目，这个时间我们先把这个类目填了， 我们添加几个合适的类目，还可以添加五个， 我就选工具，然后健康管理和信息查询这两个类目。 ok， 他 已经把这个，呃升图提示词给我了， 那这几个是我们升图提示词生成以后的，我比较喜欢第三个，所以我就选一下第三个。最后一个这里面的啊，我们把它下载好，那就可以上传了， 然后再放大一点点， ok， 对 齐。嗯，然后小熊介绍下边这块，嗯，是有点字数超了，我们稍微把这个缩短一点，缩短到一百二十个字以下就可以， ok， 让我们提交。 嗯， ok， 前两步我们都完成了，我们来第三步需要备案，也是同样是扫一下这个微信的编码，把你的地址，然后证件上传一下，让我先跳过。 ok， 这些，这个我们弄完以后我们再去上传代码，它在上面有一个上传， 点击确定版本号，然后项目备注一下，这是第一版，大概有什么样的功能，你可以写一下。 ok， 好 的，我们版本也上传完了，上传完以后他应该在这下面就会出现了，我们刷新一下咱们管理。嗯，下面就有这个版本了，那我们就可以提交审核了 哦，他让我们再补充哦。有一个类目需要选择成一个主类目，然后把这个健康管理这块选成主类目，设置， ok， 然后就可以提交审核了， 让我们看到这边要提交审核，要描述一下我们这个版本。嗯，他这边给我们写好了，我们把这个版本直接复制过去，这个还是有点超啊，所以说还是需要稍微再精简一点，我们把它弄到二百字以下。 对，然后我们要可以传一个图片，后面都是选填的，我们截一个图，然后保存起来。 ok， 上传文件，嗯，保存，有时候他会让我们去选填。这个是否 会使用用户的隐私信息？那我们这个程序呢？是需要用到用户隐私信息的，我们需要把这个隐私这个部分再去完善一下，我们让他帮我们生成隐私保护相关的文档，以及这样的一个弹窗的一个组建功能。 他这边帮我们弄完以后啊，我们再去开发者工具这里面去测试一下，对，他这边就可以弹出来这个隐私保护的提示了，然后再去上传。 这次就是第二个版本，一点零点一，我们教他，然后备注就是增加了隐私保护方面的事情， 此协议然后我们上传。 ok， 现在我们再去刷新一下，应该就可以看到我们的一点零一版本了，然后我们把这个版本去完成备案，提交审核。 嗯，那我们去描述一下这个版本，然后同样也是可以上传图片去预览 常规审核，嗯，提交审核然后就完成了。呃，提交完以后呢，我们可以看到， 对，他还在，他还需要一些时间去审核，然后后面他可能会给你打电话，所以你手机也要开着，然后可能几天之后你的小程序就可以。呃，审核通过，然后去正式发布了。 当然，呃，有可能会经历一些审核失败的情况，也非常正常的，你只要按照他的指令去改，一般就没有什么问题，他会给出非常清晰的修改的意见，大家也可以去呃，根据这个然后做一些小程序出来。当然我自己的建议就是你做小程序，呃，一方面是从自己的生活出发，另外一方面就是， 嗯，可以观察一下现有的小程序，有很多小程序它的制作其实是比较粗糙的，你可以把它们小程序啊去进行一个升级。 ok， 今天就分享到这。

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

今天想跟大家分享一下， webcointing 是 如何帮我这个没有开发背景的人打开了三个技术界的新世界大门的。 第一个是关于 github 和开源，虽然这两个词我以前就听过，但是我从来都没有用过，因为我觉得它们离我的世界真的是太远了，只有很专业的那种开发人员才会去用它们。但是当我开始 webcointing 之后，我必须去学如何用 get 和 github 的 时候，我才发现这个东西没有我想象的复杂， 并且因为我学会了一些基础的 get 操作，包括如何去控一个 ripple， 所以 现在我看到网上一些开源的好玩的东西，我可以直接去用， 例如最近很火的 g stack， 还有 mirrorfish， 还有 openclaw， 这些都是人人都可以去 github 上控下来，并且尝试一下的新科技。 github 上有这么多好玩的东西，感觉我以前大概是错过了一个亿吧。 当然当我开始了解这个开源社区之后呢，我也很开心的去参与，并且也把我的一些项目放到了 github 上来开源给大家。第二个就是 markdown 文档， 所谓的点 m d 在 write 编辑，之前我从来没有听说过 markdown 或者点 m d 的 文档，但是现在我知道了，它就是一个文字文档加上一点点格式而已，并没有什么复杂的地方。当我们去 write 编辑一个新项目的时候，我们可能会写一个 project 点 m d 或者是 cloud 点 m d 来把我们所有的产品需求都写在里面。我们现在听说的各种 skills， 它们最主要最核心的文档也是一个 m d。 还有如果你用 open 点有 agent 点 m d， 有 memory 点 m d， 这些都是你可以打开来直接读的。而且还有像 obsidian 这样的工具，它所有的文档都是以点 m d 的 方式来写的。第三个就是听得懂并且可以参与技术型对话了。以前学霸柯林我一直摸不透我具体都学到了什么东西，什么知识， 感觉就是一边在尝试一边在玩。但是我最近发现我不知不觉的还是学到了很多技术知识。比如说最近我跟一个团队来讨论记忆管理， 我就想到了 opencloud memory 导 md， 还有下面的每天的 daily log。 当我们讨论到语音助理不用保存录音的时候，想到了我用了好多个月的 granola， 它也只是把当下的信息都提取出来，然后不会保留任何录音。再或者，当我们讨论到如何保存一些敏感信息的时候， 我听得懂 get ignore， 听得懂 environment variable。 所以， 虽然我没有意识我具体都学到了哪些内容和单词或者是概念，但是在跟别人的沟通和交流中，我发现我在潜意识中确实累积了很多新的知识。所以这个让我更坚定地想继续一直不停用新的 ai 产品、新的 ai 科技和尝试自己的 white coding 项目。

我把刚刚没有拍到的在这个视频里再拍一下，就是可以在这里创建， 看在 test 的 这个文项目文件夹里面，你可以创建我刚刚写的，比如说 example 点 p y 这个文件，或者是 text 点 txt 这个文件，你可以自己手动打，然后呢，在右边的这个对话框这里 就是你跟 ai 说话的地方。这为什么叫 web coding？ web coding 的 中文译法叫做环境编程，也就是你不需要以一个 编程或者技术人员的身份去写代码，你只要告诉他，以自然语言的方式告诉他，然后他都可以帮你搞定，包括在中间遇到的任何的一些 问题，他会给你反馈在这里，因为我完全不懂吗？不懂这个编程吗？我就告诉他说我不会，你帮我搞定，然后他就啪啪啪帮我全部搞定了，就就让你特别安心。你觉得你有一个 it 人员在， it 员工在帮你把所有的事情都搞定了。 好，咱们接下来说他，接下来呢，他会告诉你 how to play， how to play， 他 会告诉你说，嗯， open a terminal 其实就是你的这个 c， m， d 或 power shell， 你可以到这里来 termino， 打开 termino， new termino， 我 已经打开了，这就是我的 termino， 这也就是你电脑的这个底层的 open share。 一 开始你看它是报错的，它让我按照这个步骤 复制 cd 这行我复制好了之后，他说有问啊，这个复制下去 他一直在报错，报完错之后，我就把这个报错的内容复制粘贴给他，我说这个有 bug 怎么办？然后他就帮我诊断，诊断出来的原因就是我没有爱装这个派送， 然后他给了我方法， a 跟 b， 我 告诉他说帮我解决，你帮我安装，然后他就自己开始安装，安装完之后呢我又重启，重启完之后我再按照他这个路径再去复制粘贴， 你看，然后这个时候就已经成功了，它这个数字游戏就开始了， guess the number from one to a hundred， 然后我就玩了一下它就可以了。

web coding 用嘴写代码的时代来了，一个不会编程的人，用说话的方式写出了三个项目。这不是科幻，是真实发生的事情。我用 web coding 做了一个 ai 文案分析器，一套内容自动化工作流，还有一个个人网站， 从头到尾我没写过一句代码，都是用嘴说出来的。这件事情叫做 web coding。 今天花三分钟跟你讲明白什么是 web coding。 以前写代码就像是我们自己进厨房，自己洗菜切菜炒菜一样，不能少。 如果你不会颠勺，那么这个菜就炒不了。现在呢？你只需要告诉厨师，你想吃什么，想要什么，口味几分熟，他就能帮你做。你是那一个说清楚想吃什么的人，你会不会点少并不重要，但你只要知道什么味道是对的。 web code 就是 这个意思。你用自然语言去跟 ai 对 话， ai agent 帮你生成代码，不用写，但你要说得清楚。 我一个朋友，他是做抖音的，他平时要研究别人的爆款视频，他们开头是怎么勾人的，中间怎么推进，结尾怎么收，以前他是怎么干的？他需要手记截图，来回拖进度，一个视频要拆个半个小时。 后来我再一次和他聊天的时候，他把这个和我说，我就说，那我帮你试试。我打开 web coding， 我 用嘴嗦了两个小时，做了一个小工具，只需要粘贴视频链接，它就能拆出结构，像开头钩子，中间的结构以及结尾的金句，全部都列好。 原来半个小时的话，现在只需要三十秒。这不是炫技，这是我真的需要这个东西， 就自己做了一个 web coding， 它不是一个给你写大系统的东西，而是帮你解决眼前的麻烦。当你遇到什么麻烦，你就梳理好自己的需求，把需求和 ai 理清楚，让他帮你做。 不止这个，我自己也搭了一套内容工作流，从想小题写稿到排版发布， ai 帮我把全流程打通了，我只做最后的把关， 以及我自己为自己做了一个个人的网站。像以前做网站需要找前端买模板，折腾一周，现在呢，跟 ai 边聊边搭，一个下午可以上线， 长得还不错，当然他不是完美的，我需要一直去和他修改，去和他沟通。这东西没有一个程序员帮我写，不是因为我厉害，是因为工具变了，普通人也能做。 但是现在我需要和你说点真话。不要看完前面就觉得 web coding 无所不能。第一， ai 不是 万能的，像复杂逻辑，多步骤联动，它会翻车，你得盯着。 第二，你还得知道什么是对的。 ai 擅长执行，不擅长判断，他只是一个高级的写代码工具，他并不会判断你的逻辑是什么样的，他写的代码你看不懂，出了问题你也不知道改哪。 那他最适合做什么呢？做工具？做原型？做个人项目，你别指望他去写银行核心系统，这不是他能干的事情。 那么我们应该怎么开始？首先，需要选一个工具，像 css 框、 code， codex， 三选一都可以，新手比较推荐 codex， 它是最友好的，它有一个批注功能，当你觉得哪一块板块不满意或者做错了，你可以选择批注，让它帮你修改。 第二步，先不要一口吃成胖子，先找到一个你最烦的，最重复的操作开始，这个越小越好， 不会写代码这个事情在二零二六年已经不是一个障碍了，唯一的障碍是你愿不愿意，是你能不能讲清楚自己的需求。 那么从第一句话开始，你去歪掰定一个你自己一直想做但是不敢做的项目吧。

现在 code 可以 直接使用 dc v 四了， code 确实好用，但是额度真的是不经烧，随便几个问题直接就清空了，又得等五个小时。所以我试着把 dc v 四接进去，烧了四 e token 之后，发现操作竟然很丝滑，体验也完全不输原版，关键是真的大碗便宜， 后面我会带你一步步接好。其实步骤是非常简单的，就三样东西， c c 叉， d c 的 a p i， 还有 c c switch， 而且工具我都已经整理好，你照着我这几部点，基本几分钟就可以搞定。 解压后先打开 c c 叉的文档，然后打开 emv 文件，里面会有一个密钥，这里你可以保持默认，也可以自己去修改一个。改完之后记得先保存，然后启动 c c 叉，它会弹出一个终端，你找到这个管理界面的地址， 然后按住 ctrl 键再点击，就会来到这个页面。进去之后把刚才 e v m 里面的密钥粘进去，就能够进入到后台，这里你可以顺手切成中文就行，这部分就基本搞定了。接下来我们去到 d c 的 官网，点击 api 开发平台，第一次进来得先注册一下，然后点击左边的 api key， 新建一个 key， 名字可以随便填。创建完记得先保存好，因为它只会显示一次。然后回到 c c 叉上面，选择 code， 中间点击添加频道，这里就可以直接把这个文档粘进去。最下面把刚才复制的 a p i 粘进去，创建就算成功了。记得顺手做两个设置，一个是选一下 openchain， 另外一个是把规范化，非常健 打开。这一步搞定， d c 其实已经接近来了，然后打开 cc switch， 点击上面的这个标志，右边新增一个配置，具体的参数你可以按照这个来就好。这里有三点是需要注意一下， 首先，这里的 api key 不是 d c 的 那个，是一开始 emv 里面的那个密钥。第二点，点击一下这个获取模型列表，就不用自己手动去填写了。第三点，把 e m 上下文窗口勾上，这样子才能全力去跑，下面这些都不用管，填完之后直接点击保存， 然后点击启动，最后把 codex 安装或重启一下，到了这一步就已经接好了。打开之后， codex 这里不是显示 d c， 它只会显示自定义。别慌，这个时候你随便发一句话，先试试能不能是正常使用。然后直接去看看 cc switch 的 使用记录，你会看到模型这一栏已经变成了 d c v 四 pro， 来源是 codex， 那 说明已经是链接成功了，也就是说后台真正在跑的已经是 deepsea 了。最后我补两个词，已踩过的坑。第一个坑是 cc switch 最新的版本，现在有 bug 会连不上 codex， 所以 别手痒去更新，直接用包里面的版本就行。 第二个坑是 d c v 四没有视觉能力，所以一旦你平时有看图识图这类型的需求，进来之后可能会有部分的能力用不上。不过好消息是这套流程本身是通用的，你可以直接换成其他的多模态模型，思路也是一样的。我是木马，陪你一起玩 air 赛博达子，咱们下期见，拜拜！

别再听网上那个，人家说那个一个小时，然后完扣顶就把那个所有的产品做出来了，是不可能的。 实际我用实际情况来告诉大家，我不前段时间不是做了一个小程序吗？然后总共耗时一个月时间，然后用用了将近十个 tf 免费版的、免费国际版的账号才把它给做出来。 就是并不是说大家说一个小时，我一个小时做出来的东西，什么就是一个 demo， 就是 一个可以看的 demo， 你 不要前端做出来的，那你后端逻辑都要实现呀？你整套的逻辑，支付逻辑，那你做一个小程序是不是要对接支付？你对接完支付你是不是要上架小程序？上架小程序的话是不是要审核？ 那审核你肯定做的东西有一些不符合人家审核人员的要求的，那肯定要被驳回吧？这就花费很多时间，然后要小程序要认证， 然后又要域名认证，然后又要 ssl 证书申请，然后要服务器部署，然后运维，他怎么可能说一个小时就把东西给做出来呢？东西一个小时做出来，东西只能是 demo， 只能这样跟大家说。

hello， hello， 家人们，我现在正在 web coding， 忍不住跟大家分享一下，我平时 web coding 最常用到的软件就是这个 type off， 一 句话干过它，它其实就是一个语音转文字的工具，但是它的功能又好像不仅限于此。大家看一下我的累计听写时长高达十个小时， 听写字数已经达到了十二万字，就可以知道我平时的使用频次到底是有多么的高。大家看这里连续四十四天我都没有断过这个小火花，它特别吸引我的一个功能，不仅仅是语音转文字，它还进行了转写，或者说是整理， 大家可以看到就转写后的文字的语气和风格你是可以去设定的，比如说你平时专业的，那么它是形成的语言会更加严谨，更加有条理性，更加有结构化，也可以是轻松的，简洁的或者是详细的，这些都可以由你去设定。 同时整理的强度，也就是说这个文字风格的强度以及可能，如果说整理强度高一些，可能会对你原意修改的多一些，如果说整理强度高一些，可能会对你原句子的改写的多一些。 它还可以一键去翻译语言，把你比如说你说的是中文，然后它把你改成英文，真的超级好用。我平时基本上我都是搭配着我的电键盘一起用，因为它这边可以去设置这个快捷键，我的快捷键我是设置成了 control 这个键，比如说当我按下 control 这个键的时候，大家看到这里有个进度条，只要我一边说这个文字就在 一边增加。按下快捷键之后，大家看这里就出现了一个语音调节框，你说什么它这边就会显示出来， 我可以给大家演示一下，比如说我现在跟大家说一下，我说点什么呢？大家可以看一下我这只可爱的小怪，这就之前给大家介绍过的我的可爱的萌宠，那么它基本上就是每天会陪着我一起 web coding， ok， 我 就说这些话，我们来看一下它的这个转写功能究竟怎么样， 然后点结束的时候，再点一下原来那个快捷键， ok， 它就在思考中，就在进行整理。大家看我说的一些气口，一些语气词，比如说嗯什么，它全部都给我去掉了，只留下了最主要的内容。那么这样的话对我们 web coding 实际上是有非常大的帮助的，因为平时我们在 web coding 的 时候，你能其实对于 ai 来说，对于 agent 来说，它是无用的语言， 它没有任何的信息量，也没有任何的目的，也没有任何的方向。那么对于 ai 来说，对于 agent 来说，实际上就是在浪费它的 token。 那 么通过这样的一个语音转写的功能，它帮你的这个语言变得更加结构化，然后自动地把一些气口还有一些语气的无关的信息全部给你删掉。那么对于 ai 来说，它能够得到更加有用的直接的这个信息。 那么和 type off 一 起搭配使用的就是我手上的这支麦克风，我平时不仅仅是在录视频的时候会使用到麦克风，我基本上在 web coding 或者是跟 ai agent 的 进行对话的时候，我都会用麦克风跟它进行，一 般是实用性的考虑，因为我们平时可能处在公共空间里面，声音源可能是比较嘈杂的，旁边除了你之外，可能还有一些人也在爱说话。 那么当你在 webcoing， 当你跟 kimco 或者是 cloudco 进行对话的时候，如果你的提示词里面一不小心混了一句别人说的话，可能你没有检查出来，那么你 webcoing 出来的东西可能就会有莫名其妙的一部分，根本不是你所想的。那么这样的话不仅浪费你的时间，也浪费我们珍贵的 token。 那 么我认为拥有一个好的麦克风就可以解决这个问题，它能够很精准地去识别你的这个语言，去定位你的声音源，去减少旁边的噪音。 第二个是增加心流上的体验，这个是我个人的一个感受，我觉得会增加一种对话感，就好像我真的在和一个人进行商讨，好像我真的在跟他一起出谋划策。当你拿这个麦克风，你会发现好像你不自觉地开始输出你的想法，你的想法开始不自觉地往外流，然后你的语言表达好像也不自觉地开始向外流淌， 我觉得这种体验就是 web coding 所谓的那种心流的状态，所以我还是非常推荐 web coding 的 cloud code 进行进行的对话。

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

你跟 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 星球里有一群人在互相分享踩过的坑和好用的工具。如果你也想从零开始，关注我，下期见。

哈喽，大家好，这期是一期 bug fix 的 时间教程，带你一起做一个视频数据趋势追踪的应用。 其实这个视频账号已经发了六期视频了，从一开始我就想一直监测视频的数据，因为做视频是一个长期的事情，如果只看短期的数据，会很大程度上影响你的心态。 刚好这期是 solo 挑战赛上，我做的项目就是这样一个应用，那么我就带着你一起来做一个这样的项目， 更完这个视频，你也可以从零搭建一个自己的数据趋势追踪应用。那么废话不多说，我们开始教学。首先我们分析这个应用，它得有前端，后端，还有数据库这三个部分。 嗯，存储数据库呢，为了防后方便后期的分析，还有后期的转移到其他地方数据的迁移，所以我选择直接使用 excel 文件作为数据库。 那数据库这么选择了，我们就可以选择可以操作这个数据库的后端。那么拍子里面给我们提供了很好的两个库，一个是 python， 它可以处理 excel 表格中的数据，转换成 jsen 格式供前端使用。 还有 open excel 这个库可以读写 excel 表格中的数据库，那么这样的话，我们后端的技术转选择，我们就可以选择 python 作为 后端语言。第三个前端部分，我们直接使用 html 加叉的是 s c， d， n 这个格式化报表库作为我们的前端，所以整体的框架我们就可以搭建出来。在数据库这方面，我们用一个主 excel 文件作为我们的数据库，这样方便我们后期的转移和分析。 在后端我们用 python 语言，用 flex 框架提供文件上传解析和数据 api。 flex 是 一个轻量化的外部框架， 对于我们这样的一个小项目，它已经足够了。在前端我们使用原声、 html 加叉、 g、 s、 c、 d、 n 这样一个数据图表库，所以我们基础站只需要这些， 但是其实这些我们都不用学会，毕竟其实我们这一个是 web 布局。好，那么接下来我就带着大家做一下完整的过程。先选择一个文件夹作为项目目录的基础，然后在下方输入这一行字， 文件夹下方有两个 excel 文件，是我的视频数据，我要搭建一个长期监测我视频账号数据变化趋势的应用，请你帮我构想，顺便勾选上 brainstorm 技能， 并且开启 spec 模式，这样前期详细的规划有利于我们相互打好基础，方便后期的修改，等 ai 自己跑一会儿。好的，我们现在告诉 ai， 我 们的基础架构，数据库用 excel， 文件，前端用 html 加叉、 j， s， c， d、 n， 后端用 python， flask， pandas， cool， 还有 open excel。 这里他问了我们几个问题，问我们数据更新方式，我们选择在网页一次性上传两个数据文件，系统自动解析并且存入数据库。又问我们要整体的趋势图还是每期视频的高清图， 那我们当然是选择两个都要，还有告诉他我们在上传文件时候的数据格式，会上传两个文件的数据，还有这期视频发布的时间和这期视频的主题。 他问我们数据库用什么，他推荐了一些选项，因为我们主要是个人使用，所以我们只需要一个 excel 文件就够了，不需要用 excel 的 那些稍微大型一点的数据库 和他对照清楚，数据库的字段完全参照我们给他的两个压力文件，再检查一下功能列表，检查功能没问题的时候，我们就可以让他开始设计页面原型了。 ok， 这里他给我们了页面的原型图，原型图没问题之后，我们就可以继续确认，让他帮我们写设计文档。这里我们看一下设计文档，设计没有问题之后，我们就可以让他开始写一个实施方案，把大的任务拆分成小的任务 确认执行，执行的过时候他分开有给了不同的任务给子 a 整去执行，这样的好处就是可以减少上下文的占用，让主 a 整的只关注任务的完成情况。好了，这里他给了我们第一版产品， 我们来检查一下做的合不合适，重点看他的页面上有没有明显的 bug， 没有加载出来的地方。还有测试他上传数据的功能能不能正常运行。这里我觉得他有一点做的不好的地方， 两个文件我想一起拖上去，不然每个单独上传会比较麻烦，我让他修改一下。 ok， 修改好了，我们刷新一下页面上传文件的部分，确实和成并成了一个部分，我们继续上传我们的数据， 测试整体的功能有没有 bug。 可以 看到效果还是很不错的，功能也差不多完善，但是他这个界面我觉得还不够美观，所以我让他用 front 点赞的这个技能美化一下界面，输入提示词，帮我优化前端风格，简约。 ok， 优化完成了，我们再看看他的这个界面， 确实和之前有一些区别，但是，呃，区别不大。没关系，我们这里只是演示一下大概的流程， 我们整体的功能已经大部分都完成了，不用这么吹毛求疵。不过这里我发现了一个问题，他的浏览器日期报错了，把报错的问题直接发送给他，让他修复。 这里的问题是有一个字体在国内被屏蔽了，没有办法访问，把自己修改成系统的字体就可以。好的，我们再检查一下界面，看有没有其他的系统 bug。 这里我又发现了一个问题，我们在删除某一条数据的时候，虽然弹出了二级的确认菜单，但是在点击确认二级菜单之前，系统就已经把数据给删除掉了，我们再让它修复一下。 ok， 修复完成，我们再完整 的跑一遍，从上传数据到浏览看板的全过程没有问题之后，我们就可以对这个程序进行打包了， 让他把应用打包成点 exe 文件。打包成文件目的是为了把所有的依赖还有所需要的库都装起来装，装在一个文件里，这样别人的电脑上不用装 python 之类的程序，就可以使用我们的应用。 ok， 我 们的程序已经打包好了， 打开文件看一下我们的程序能不能用，点开 exe 文件，它会帮我们自动启动服务，并且打开浏览器这里我关掉了命令窗口，但是刷新一下网页，发现这个页面还在，那说明我们原来在测试使用的服务端口并没有关掉。把 ai 关闭服务， 我们再重新测试我们的程序，再测试一下功能，可以看到这里的程序跟我们前面浏览器中使用的一模一样，没有出现 bug， 关闭命令行窗口，刷新浏览器 显示，无法访问页面，那说明我们的服务器也成功关闭了。 ok， 从视频开头到这里，已经跟着我完整的完成一期视频数据趋势追踪的应用软件。视频比较短，但是实际上我做了 有两个多小时，你可以把视频放慢，仔细看看其中的细节。在后期你也可以去增加其他的功能，比如说接入 ai， 让 ai 帮你分析你的数据趋势。 ok， 以上就是这期视频的全部内容了，我们下期再见。