我该怎么开始vibe 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 工作流的相关内容，我们下期再见。

今天这期视频我们只讲一件事，就是普通人怎么用 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 到底怎么样入门。 昨天那个视频呢，其实是主要来讲 web coding 的 重要性，因为本身智能体是一个程序嘛，那我们要掌握程序的一个搭建， web coding 现在就是最快最便捷的这样的一个 路径。嗯，有同学私信我就是。呃，还是作为一个小白，还是不知道怎么样去开启这样的一个入门。今天就简单的再做一下这个入门的教程。 首先呢是三点，第一点你要找到一个适合自己的软件。呃，我屏幕上这个用的呢是谷歌的 anti gravity， 它是因为我当时开了谷歌 pro 的 这个一年的会员，它送比较多的。这个肩背带的一个额度是免费可以用的，所以我一直在用 antigrip 做编程。 呃，市面上现在还比较热门的，像面对新手的有 cursor 啊，包括国内字节跳动的 tree 啊，这些也都不错啊。我比较推荐的是就是如果你不确定自己有没有这个天赋，哎，不知道能不能在这个 学习上能够坚持下去的话，你可以先试一试字节跳动的 tree， 它虽然模型的能力没有那么强劲，但是做一些基础的项目也是够了，它是全免费的，特别适合新手小白这样去做一个。试错啊，这条没有广告啊，我的流量也不足以 支撑我接广告。是纯推荐，当你做到一些复杂的项目的时候，你可以再去看国外现在比较厉害的几个模型啊。我个人比较推荐的一个是 codex， 它是 gpt 的 这样的一个会员可以去使用。呃，每周现在也有比较多的免费额度，可以试一试。 第二个是 cloud code， 这个真的就很贵啊，很贵很贵。然后比较，但它编程能力和项目能力真的还是数一数二的强，基本上这两个就是现在最顶尖的这样的一个编程的智能体。嗯， 工具选择好之后呢，你还要去学一学基本的一些。呃，电脑上用的一些环境的那些，比如 new 的 点 js 啊，比如 python 啊，这些基础的环境要先安装好。 呃，不会的话就去问大模型，让大模型教你。这个也引出了我今天第二个点。这个我觉得也很重要，就是很多人还不太会利用大大模型去辅助自己去做一个学习。 我这三个月的学习里程呢，基本上都是大模型来帮助我完成的。呃，今天我也给大家准备了一个例子，这个也是我刚刚问的，就是为了配合这期视频。呃，我以一个小白的视角，我让他呃出一个 prompt， 嗯，就这是我刚做的一个 prompt。 呃，我以我的这个视角吧，我是一个纯小白。 然后我希望利用谷谷歌的 deep search 的 功能去辅助我自己学习 webcoding。 我 给了一个这样的 prompt， 给到 jimmy 也出了。呃，顺手就出了一个 deep search 的 prompt。 第二步呢，我就把 deep search 的 这个 prompt 丢给了 deep search 的 这个这样的一个功能，这是 jimmy 自己的一个深度研究的功能， 然后就看到了你，就看到了屏幕上这篇比较完整的一个报告啊，他甚至在第三步把怎么安装环境都一步一步，可以说手把手的教给你了。 嗯，这个其实也也是利用大模型的一个典范吧。大模型其实现在更像一个百科全书一样，是我们每个人都触手可及的。这样的一个百科全书他能教给你认，快速的教给你一些技能，然后你可以利用他去不断的做一问一答，一问一答，把自己 直到自己掌握深刻。掌握了这个技能，今天就这么多，比较短。呃，帮助大家快步入一下门，谢谢大家。

从今天开始，我们就正式地进入了一个二十八天的 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 他 把一个编程的门槛给拉低了，不需要你数学很好，不需要你懂代码， 你只需要有一样东西，你要知道你想要什么，你想做什么，同时你能够把它相对结构化的表达出来， 那我们就可以把它变成一个真实的。对，那下一个分享呢？我就来带大家一起来看一下那些零基础的人，他们用百步扣顶做出来了哪些酷炫的东西。我们先一起来找找感觉啊。那今天就先到这里喽，拜拜。

哈喽，同学们，今天咱们就手把手的带着大家来体验一下怎么用 ai 来呃，辅助我们完成一个编程的项目，那么也可以刚好结合一下大家最近要参加的这个比赛，就是个康城杯的人工智能软件开 开发技术大赛这样的一个项目，那么大家跟着走下来之后呢，不仅能够搞定这个赛题的一个基础框架，还能学会 ai 编程的核心技巧。那咱们用到的工具是 vs code 加上 github code palette， 那 么大家可以看到我现在呈现给大家的画面里面就是 我用 ai 帮我做的一个项目，那这里有一些历史，历史的聊天记录呢就是，嗯，我把它放到中间来啊，历史的聊天记录，大家可以看到我跟 ai 对 话的一些过程，这样是怎么样把它部署起来？ 那么，呃， gitlab， 呃呃，就就是 vs code 和 gitlab 这个 ai 编程组合呢，现在在 ai 编程圈不是特别的火，那么网上能找到的资料和教程也不是特别的多，它是比较冷门的。但是呢，为什么我给大家推荐这样的一个组合， 它的优点就是不需要翻墙就可以直接去使用了啊，并且如果我们用我们的学生身份去申请了教育优惠的话，是可以免费的使用它的高级模型的，那高级模型的对话 和写代码的质量是明显比普通模型要好很多的，能节约大家不少的时间，所以这个呢，也是降低了大家的一个使用门槛。那么首先第一件事就是安装了对吧？呃， 安装的话我就给大家带一带，也不多说了，首先就是 vs code， 大家可以网上去搜索 vs code， 然后去官网下载， 然后可以下载 windows 版本，然后去安装就可以了啊，这个就是 v s code， 那 安装的时候就一路 next， 一 路 next 就 可以 可以安装好，没有什么复杂的设置，安装好了之后呢，就这个样子，但是右边没有我这个插件啊，也也没有我这些硬件相关的一些插件啊，可能是你们的功能会稍微的少一点，咱们只需要安装一些必要的功能就就可以了。 那么装好了 vs code 之后呢，接下来就是安装 gitopilot， 那 么安装的时候呢，是在这边有一个扩展，这个按钮就是一堆小方块这样一个扩展，那么在扩展里面我们输入 gitopilot 来进行搜索， 那么它就会呈现出来上面有第一个是 gitopilot， 第二个是 gitopilot chat， 那 这两个大家都可以装一下，我现在都是已经起用的一个状态。那么装好了之后，大家就可以像我一样在右边就能够看到跟 ai 去聊天的这样的一个窗口了啊，那如果我们要使用 啊 copilot 去对话的话啊，还需要登录一下，那登录的时候就会需要大家去啊去 github 上面啊，去这个 github 上面 去注册一个账号，那我这个账号呢，其实是已经注册好了是吧？注册好了的话，你点击登录就可以输入注册码啊，直接就可以使用这个 copilot 来进行编程了。 来看一下大家除了注册账号以外，还可以 join github education， 这个就是我刚刚说的教育优惠，它会给你每个月啊免费的三百次跟高级模型对话的一个额度， 嗯，比如说这个就是我的额度的一个使用情况，可以看到我这个月是使用了百分之八点四这样的一个，嗯，请求次数，这是我吸取了上个月用光了的教训，然后这个月省着用的啊，等一会我也会给大家讲怎么样去省这个次数 啊，怎么样更好的去把这个 ai 啊用好，然后又不超额度又不额外的去花钱啊？ ok， 那 装好了之后，我们来看一下整个软件的一个界面布局，这个我就先关掉了啊，啊，左边是咱们的文件夹， 有文件管理、搜索扩展啊之类的这些功能。后面咱们新建了一项目之后，就是在这个文件管理中打开就可以看到这里面有哪一些文件夹了。比如说就以这个项目为例，这项目也是 纯 ai 写的啊，是我昨天，前天，前天下午五点钟的时候，大概吃晚饭之前啊，丢给 ai 一个任务，让他去写啊，然后他从零开始啊，他是这样的一个服务网关的一个项目啊。 呃，这个就不给大家看了吧。嗯，就是把需求文档丢给丢给 ai 去写，然后，呃，大概在晚上十点钟左右的时候，这个项目就写好了。这是一个正儿八经的商业项目，是给， 呃一个政府做的网关项目。那么可以看到，呃，我们现在使用 vsco 的 一个方式呢，和我们以往其实是有区别的， 呃，因为如果要用 ai 编程，那么其实前端和后端是需要进行蛮多交互的，对吧？你的 api 接口到底是怎么写的？如果我们人来做这个桥梁，去跟前端沟通，哎，后端是怎么写的？然后再去跟后端沟通前端要调什么接口，这个过程其实是蛮费劲的，所以现在呢，我们就会把整个项目都放在同一个文件夹下啊，然后前端去建一个， 建一个文件夹得后端去建一个文件夹，那么我们的 ai 就 会自动的去读取前端的代码，去读取后端的代码，然后它自己去完成这个交互和测试的过程，我们就不用人去呃在这里面去进行维护了，嗯， 然后右边就是他对话的一个地方啊啊，等一会我再给大家具体讲这个呃，怎么去使用的一些技巧。因为 ai 写代码是需要时间的，所以我们先先新建一个文件夹，比如说我们来到桌面上点击新建文件夹啊，就随便取个名字，比赛赛题， 赛题。好新新建了这样的一个文件夹之后呢，我们在 vs code 里面把它打开，需要文件打开文件夹啊，找到我们的桌面，桌面有一个比赛赛题，是吧？选择这样的一个文件夹， 那么可以看到整个窗口就切换到比赛赛题啊这样的一个界面里面来了。 嗯，接下来这个文件夹是空的，那我们其实是需要需要把把相应的一些要求放到这个文件夹里面的，对吧？所以接下来我们把赛题的要求文档先放过来 啊，赛题要求文档有哪一些呢？比如说我们针对赛题 b 来说的话，那赛题 b 里面是有一个参赛要求及提交资料要求啊。 那么在这里也跟大家说一下，大家做题之前呢，一定要先把在题要求看明白，咱们的重点是开发一个软件 啊，它是开发一个软件，呃，要开发一个契合企业需求的一个软件，那么文档和 ppt 呢？都是用来辅助说明你的软件长什么样子，如何进行操作的，而不是把重点放到， 因为大家会有一些参加创新创业比赛的一些惯性啊，那么不是要把重点放到怎么样去美化 ppt 和怎么样汇报会更加出彩上面啊？嗯，所以大家重心应该放在人的开发上 啊。那么接下来啊，要看一下这里面哪些资料是比较重要的呢？一个是啊，这个需求分析，这个是咱们企业为大家提供的一个真实的需求啊。再一个呢，就是见面是吧？ 嗯，企业的设计师绘制了一些这个设计稿供大家去参考，当然这个设计稿也未必你就要一比一的去复刻，这个设计稿你也可以去发挥，还可以再增加哪哪些功能，是吧？这个就是我们最核心的一些文件了。那我们首先先把这些文件丢到咱们的 咱们的这个工程里面去吧，后面就可以在工程里面去找这个。嗯，题目了，一个是思维导图，一个是设计图，是吧？ ctrl c 复制一下， 然后到这个比赛赛体里面去新建一个文件夹，那我这里就取名叫 d o c x。 d o c s 就是 意思，意思是我在这里面放的是一些文档吧，不是代码。 ok， 然后把这三个 ctrl v 粘进来，把这几个东西就粘进来了。啊？我，我好像没有粘到这个， 没有粘到这个文件夹里面啊，没有关系，我们把它拖进来就好。嗯， 剪切复制粘贴没有吗？ 哦，我刚刚这个 d o c x 创建了一个文件，而不是一个文件夹，是吧？嗯，搞错了，那么这个我就给它删掉了去，应该是应该点右边的这个新建文件夹 d o c s， 这样就对了， 然后到这个里面来选择粘贴好，它就粘进来了，我们放到 d u c s 这个目录下， ok， 粘进来了之后啊， ai 就 可以去读比如说图片参考设计图这样的一些文件了。但是实际上我们现在跟 ai 去对话的话啊，可能还差点意思，就是 因为大家都知道啊，让 ai 来帮我们干活，最关键的就是提示词怎么怎么把它写好，那提示词写得好的话， ai 生成代码就又快又准，那提示词怎么才能写好呢？我，我给大家分享一下我一般是怎么做的，因为我认为啊，我写的提示词呢，肯定没有 ai 写的提示词好，所以我就会用 豆包，我会用豆包来帮我去写一点这个。嗯，提示词啊，这里是可以上传附件的，那我们先上传一下刚刚的这个图，就是软件需求分析思维导图， 那么大家也可以根据自己的习惯去选择 deepsafe 或者是 jimmy 三或者是叉 gpt， 那 么用高级模型给出的结果肯定是明显要好于普通的 ai 的 啊。嗯，我给我给他提一个要求，嗯，根据 根据这张图片啊，生成需求文档，生成软件需求文档吧， 那他就会帮我们写好这样的一个需求文档，那这个文档肯定比我自己写的要好，对不对？ 好， ok， 那 他这个需求文档就写好了，那接下来我们继续给他传图，上传文件或图片。传什么图呢？就是搞他这些图，这些图是我，是我的设计图，是吧？我看看能不能用语音输入法啊， 查看这些设计图，检查有没有漏掉的功能。补充，在刚刚你写的需求文档里面， 我现在连打字都懒得打，都换了语音输入法，这样的话跟 ai 对 话就会更加方便了。好，等它上传完了之后给他发过去，让他继续补充。 你看他刚刚写的时候是没有写账号登录，呃，账号密码登录的对吧？但他读了我的图之后，他知道需要有这样的一个功能，所以他就会在文字里面非常明确的展示出来有这样的一个一个功能，把它补充进去了。好，然后我们再问他一个问题就是，呃， 假如说我要从零开始让 ai 帮我去创建这样的一个软件项目，呃，提示词的编写会有哪一些要注意的要点呢？ 嗯，这是 ai， 就是 语音输入法识别出来的啊。问了他之后他就告诉我题日词的边写需要要点对吧？他会告诉我你怎么样去写题日词，那这些也是一些技巧了 对吧？嗯， 好的，你现在帮我编写完整的提示词模板。我的软件是要做前后端分离的，前端要用 view 三，后端用 jangle 框架。 看一下。啊，其实怎么玩软件呢？前端分离，前端用 vivo 三，后端用展口框架。 ok， 让他先写啊，那，那 vivo 三是非常常用的一种前前前端框架了，后端我用展口。主要是考虑到啊， ai 写 python 代码写的非常非常的快， 所以我我我建议，呃，我我，因为给大家录这个演示视频啊，希望 ai 写代码写的可以快一点呃，不然我就需要加速加的很很多倍啊。所以我我是说让它 用这样构框架，那么正常。如果大家软件专业的同学是用 java 用的比较多的嘛，你完全可以用 java spring boot 那 一套，那如果有同学比较擅长用 delete， 也完全可以用 delete 来做后盾啊。 它这个是帮我生成了很多的提示词，并且并且并且给 ai 拆分了很多个风格，比如说有产品经理有权赞。那么对于 cloud code 的 这种 基于，呃怎么说呢？基于智能体的 ai 编程工具来说确实需要这个样去拆分，然后这些角色呢就可以分别去进行它的工作了。呃，但是对于我们的 copilot 来说，嗯，也可能是我没有找到很好的一个呃，叫这这个这个使用方法吧。我还是，呃 就是单县城的去工作，还没有到他这个呃完整的就是让让多个多个智能体去协助的这样的一个程度，所以我我我其实更希望他帮我生成，帮我生成完整的一次对话的提示， 一次对话就边写整个工程到七十次，这样我用起来可能会顺手一点啊，然后告诉他不要区分角色。 好，我觉得这个还是不错的啊。 ok， 那 么我就把这一段话给它复制下来，然后让让 copilot 去写。嗯，这个我新建了一个工程之后，它右侧是没有这个侧边栏的，那么在这里 打开聊天，对，打开聊天他就会在侧边去显示，如果是新建聊天编辑器，他就会在中间显示啊，都可以，那我两边就都打开，然后刚刚那个提示词我就可以给他粘进来，然后除了提示词以外，我还要把刚刚的那个需求，对吧？我要把刚刚那个需求 给它粘进去，对吧？我在这里面。嗯，再去创建一个，新建一个文件，叫需求 点 t x t 吧，就直接叫 t x t 好 了，这样的话大家也好理解一些，对吧？嗯， ctrl s 保存一下， 然后回到刚刚聊天界面，我们这个还可以给它添加一下上下文，点击添加上下文之后，这个列表里面会呈现出来我们最近打开的几个文件。那我就可以把这个需求点 t x t 给它附上啊，去跟它对话，那它就会根据这个需求以及我的提示词来帮我生成整个项目。 嗯，我先让它先生成，然后再慢慢给大家讲这些选项。嗯，其他是生成， 对吧？然后先发过去吧。好，那他现在就开始 working， 是 吧？他就开始在这个项目里面去工作了。 嗯，在他工作的时候，嗯，可以给大家讲一下有一些使用的技巧。 那么大家可以看到我刚刚其实它下面有两个选项啊。第一个选项是你要用什么模式让这个 ai 来为你工作。我一般来说现在都是选 agent agent 什么意思呢？就是说它可以。呃，它可以有比较充分的一个权限。 好，看到它这边有一些关键信息，我将直接在你当前工作区里面生成一个可运行的前端。后端 post grade secure。 啊，它用的是 post grade secure。 那其实我刚刚应该认真看一下它的一个架构的。我其实并不想用 post grey circle， 嗯，因为 post grey circle 我 没有安装啊，就可以让它用 circle light 先去创建一下是吧？ 然后并补齐这些东西啊，然后， ok， 那 就让他先干啊。嗯，大家可以看到其实左边已经创建了一个文件夹，是吧？已经创建了一个文件夹， 那这个文件夹里面包含了 back end， back end 大家都知道是后端的意思是吧？然后是 front， end 是 前端的意思是吧？嗯，就是后端和前端的文件夹，它帮我们创建好的。 好，接着来讲我们刚刚要说的这四种模式。第一种模式是 agent， agent 是 有比较多的权限的，它相当于是嗯嗯代理模式，就是我们把最高的权限给到了 ai， 然后让他来帮你，他可以读你电脑里面文件，去创建文件夹，创建文件，整理文件，然后去运行工程，去敲很多的命令，相当于我们给他一个呃任意去修改项目里面代码的这样的一个权限，也是我最常用的一个模式。 那么除了 a 阵的模式，第二个模式是 ask 模式，那 ask 模式就很简单，就是就是咱们，咱们只能聊天，你完全不可以动我电脑里面的任何东西呢。这个就是 ask 模式啊， 这个 ask 模式呢？就跟就跟就跟。呃，那个啥，你去跟豆包对话没什么区别啊，它所有东西啪啪啪给你呈现在这里是吧？但是它不会帮你去写代码，你还要自己把这个代码复制到那个文件里面去， 你不就是很麻烦吗？而且你你，你要对你的工程非常熟悉才能找得到，你要把这个嗯代码贴到什么地方去，是吧？所以 ask 模式呢？就是对话， 还有比较常用的一个模式，就是啊， edit 模式，我看啊， edit 模式我其实没有怎么用过。 edit 模式应该是和 plan 模式啊联合起来去使用的啊。就是说， 就是说 plan 模式是计划，对吧？就是你提了一个要求之后， ai 不 会立刻的去改你的代码啊，它会先列一个计划，你确认你确实要这么干了之后，然后它才会去行动。那，那我觉得 edit 可能就是跟 plan 结合起来去使用的，你先计划好， 然后再让这个 ai 去根据这个计划完成相应的这个工作，是吧？嗯，这个是四种模式，那么在这里你也可以配置自定义的智能体，那么可能是比较高级的一些用法吧，哈哈。 嗯，比如说刚刚豆包给我们提出来，可以有产品经理，可以有前端，有后端这样的一些不同的角色，其实就可以在这里去配置智能体。那我还没有用到这么高级的一个功能。嗯，我我我其实时间也比较多，我可以慢慢的等一等，让他自己在这，然后去单线城的去运行就可以了。 嗯，并且我也有点怕，说实话我有点怕两个 ai 一 起对这个工程进行操作的话，会不会互相产生一些冲突，是吧？所以目前还是单线城的去进行这个工作。 嗯，可以看到，我看看啊，他把这些东西已经开始创建了是吧？文件已经创建了啊，后端也创建了 docker fire requirements， 因为我们是 python 的， 所以会有一些 requirements， 是 吧？ 然后这个是一些文档也也慢慢都在这里给我创建。那他现在先干后端是吧？先把后端后端的一些相应的文件啊，你看，哈哈，全部都给我创建好。嗯， 那我们现在就让他在这创建，那他这里会告诉你他计划干什么，那他这里有有六个图图纸，他会顺着这个图图纸往下去进行。那首先第一步是初步化工程与工程目录和文档，那他现在就在干这件事情，然后他会依次顺序的往下，也不一定是顺序，有的时候也会有些交错 啊，全部都干完了之后，嗯，就结束了。然后这里呢，这个小箭头展开之后，他会告诉你他都修改了哪一些文件，是吧？每个文件里面他写了多少行？比如像这个文件 lightning 点派，他就写了一百二十七行，是吧？我们可以打开来看一下。写了这么多， 有这么多，那你可以选择保留，也可以选择撤销，但是对于我们来说，我们希望更充分的去挖挖掘 ai 的 潜力，所以我我我现在是不太建议大家去死扣这些细节，特别是在项目初创创建的这个过程中啊。 呃，再回过来，那他写的这些呢？我就不看了啊，为了降低大家的使用门槛，我就不看了，就点保留啊。就是我认为 ai 写的都是对的，你写什么都是对的，你要是写错了，我再用提示词让你去修改，而不是我手动去修改， 那么就在这里让他先写吧。嗯，那么写的过程呢？中呢？大家也会看到他帮我打开了一个中端是吧？ 帮我打开了一个终端，然后去敲了一个命令 python 杠 v， 然后获取了我当前系统的 python 版本是三点一三啊，然后他就心里有数了啊，对应着这个版本去安装 java 去写代码是吧？就这都是他自己去进行的一个过程，并不是我自己去敲的。嗯 嗯，那么有的同学第一次使用的时候，他不会自动的帮你打开终端，他会问你，你允不允许他打开啊？然后你点进去就行了。但是我因为使用了很久了，他每次都让我去点进去，我也觉得很烦的，所以我其实是在这个呃设置里面， 在这个聊天设置里面有很多很多的这个设置项，我是给了他最高权限，就是我跟他说你干就完了，我所有的权限都给你，你不要再问我，然后就就就就直接所有的权限都给到他，然后直接去让他进行操作，我就不用一遍遍的去点允许了。 这边的保留，其实我们也可以不用着急点，等他全部写完之后再点保留也行，然后不点保留这些代码也能存下来。嗯，我现在点一下吧，这是纯属强迫症了。 接下来再给大家讲一下什么呢？就是模型，刚讲的是我们选的这个模式是选 agent 模式，是直接就开干这样的一个模式，然后第二个选项是要选模型，那如果说大家没有去呃申请教育优惠的话， 呃，你只能选这些免费的模型。 g p t 四点一 g p t 五 mini golf code， golf 是 马斯克家的是吧？还有 rapper mini， 呃，这样的一些免费的模型，免费的模型右面会标注是零成。呃，然后还有我下面是有蛮多高级模型可以选的。那这个就是因为我申请了教育优惠， 我这里用的是 g p 五点二。 g p 五点二是个大后端啊， jumbo 三 pro， 它写前端会显得写得比较好一点，那么还有两个模型是零点三三，就是你跟它对话一次，它在记录这个额度的时候 啊，只给你算零点三三次对话。刚刚也给大家看了我的 copilot 的 一个使用额度，就是这个就是高级模型的一个对话的额度，是每个月三百次对话，我上个月就一不小心用完了，所以上个月最后三天用完了之后，我只能用普通模型，这个代码写的是非常非常痛苦的。 那么这里面还有一些 m c p 的 工具可以去给大家去使用啊。这个我也没有仔细的去研究啊，到底还有哪一些工具啊，反正就。嗯，目前用的还还还，就是目前我研究到的这些功能已经完全足够支撑我的一个软件开发了。对，大家也可以自己去探索一下。 嗯，如果你在使用的过程中有任何好的技巧，其实也可以来和我交流啊，就是这就是教学向长嘛，就是我来啊，给你们提供一些新的思路，你们也可以把比我用的好的部分来提供给我，来反哺一下我的一个使用技巧。 嗯，那么另外再说一下，就是他的这个，嗯，教育优惠的申请啊，就是 getop 的 一个教育优惠的申请，其实是比较麻烦的 啊，其实是比较麻烦的，首先大家都知道 github 它的访问就是不稳定的啊，你经常一刷新可能就进不去了，然后过一会再刷新它又进去了，就不太稳定啊，因为毕竟是国外的一个网站嘛。 嗯，然后申请教育优惠也很也蛮麻烦的，就是说啊，你需要有你的这个学信网的学籍的截图提交给审核员， 呃，然后呢？你除了提交截图以外，因为截图里面全部都是中文的一些内容嘛，那审核员是老外的话，他看不懂你这些中文的内容，很可能就一下子给你拒了，还是把这个画面呈现出来，让大家看到这个他工作的一个过程 啊。审核员如果看到都是中文的，他可能直接就给你去了，这个申请的过程也也也也会比较一波三折，所以我的技巧就是，嗯，我们截了学信网那个证明之后呢，呃，在中文的旁边给他标注一下这个中文对应的英文是什么啊？ 这样的话是比较容易通过这个申请的。我跟其他几个老师交流下来，嗯，就他们也是进行了全套流程的一个申请，但是最后没下来，可能就是因为我做了这个英文的标注，给审核员提供了一些便利吧，所以这也是一个技巧了。那除了标注中文以外还会有很多啊，其他的一个技巧， 大家可以在网上去搜一搜啊，包括 b 站啊，有也有很多视频，还有一些文章也都会告诉大家怎么样去申请。如果你想用这个高级模型就就去申请一下。那如果有同学说我实在是不想申请， 我实在是不想申请，嗯，太麻烦了。或者是说我，我申请了之后，嗯，需要等很久，需要等很久，嗯，很多很多天才能下来，我现在等不及，我现在立刻就要用。那么你也可以选择，呃，就是付费他这个，他这个额度呢，是用完了之后， 用完了之后我看这里有没有写，没有写是吧？大概是零点零零点零零四美元兑换一次啊。其实也不算太贵啊就是付费去去用一下也是可以的。你看他又写了很很多的这个代码， 现在就是 ai 在 拼命的哐哐干活，我们只需要在这等待就行啊。我看一下啊现在他干了什么呢？ 嗯他直接干了然后创建了然后把折购的后端的全部都干完了，然后后端的已经搞定了并且把这个生成链路也搞定了，接下来开始生成他他他对吧？啊他就是已经干完了一项了，他准备干第二项了，然后他又 来跟我确认是不是要接着干。就他你看到他停下来之后就要告诉他要接着干是吧？但是我其实其实会觉得他反反复复要跟我对话蛮烦的，所以我一般会告诉他 啊告诉他什么呢就是嗯请你继续完成未完成的功能直到所有的任务都完成了再停下来中途如果有不太确定的部分也不要问我，你直接选择最优的解决方案去实施就可以了。 看一下啊继续完成了所有任务你不太确定也不要问直接选择最优的解决方案去实施就可以了。 ok， 那 就让他接着干啊，他就又在吭哧吭哧去干了。 嗯在等待的这个过程中也要跟大家稍微聊一下我们的提示词技巧，就是你不能简单的跟他说帮我做个心脏软件啊。那他是。 嗯不太会他做出来的东西他也会做出来东西，但他不太会契合你真实的一个需求啊。我们最好是明确的 告诉他这个软件要有哪些功能啊？它要包含什么样的组建？然后它的布局应该是什么样的一个结构啊？我们说的越具体， ai 呢，就越能 get 到你的点，比如说我们刚才让豆包去干了这这么写了那么长的一个提示词，其实就是为了为了达到一个提示词更加精准的一个效果。 那么大家呢，也可以在做的这个过程中加入自己的一些风格啊，比如说，比如说你用不同的模型来去做前端的这个代码，它做出来效果可能就不一样，你即使用同一个模型 啊，做出来的可能都都会不太一样的一个前端效果，然后你也可以通过提示词去限定它要生成什么样风格的这个界面。比如说前一阵子不是非常火的，大家会让 让什么？ nano 不 nano 是 吧？去生成吉卜力风格的，呃，吉卜力动画风格的一些一些一些图，呵呵，都是可以的。或者你比较喜欢赛博朋克风格，这些都是可以给 ai 去提要求，他并不会反驳你，他会按照你的要求把这些风格啊融入进去啊。那当然呢，我们其实还是要考虑到企业的真实需求，是吧？ 啊，就是因为我们这个是企业的真实的项目。呃，如果你去弄一个极不离动画的风格，去拿到医院啊，去给医生去使用的话，可能还是有点怪，是吧？所以大家也要考虑到医院和医生会希望看到什么样的界面啊，它使用起来会是比较舒服的 啊。另外呢，大家还要注意一下，最好给 ai 限定是用什么框架啊，包括我们在题里面也提到了，建议大家用前后端分离的一些框架。那我是限制他用 vivo 三做前端，用卷口做后端，但是我还是失误了。我刚还是失误了，让他用那个 post grey circle 去 去去做的那个数据库是吧？其实我更希望他用 circle light。 那 等他下次停下来啊的时候，我就告诉他，我要把这个数据库改成 circle light， 然后再让他接着往下做。 嗯，不知道大家有没有听过一句话叫人生苦短。我用 python 就是 python 的 代码呢？其实是会比其他语言的代码要短很多的啊。 比如说我们用 spring boot java 来写后端的话，可能一个正儿八经的项目就是普普通通的做毕业设计的这种项目可能都要写个一一万多行，而 python 的 话可能就是两三千行就可以完成所有的这些要求了。嗯， 它的代码量是比较小的，所以其实也很适合 ai 去生成，那代码量越小，它出错的概率就会越小。 接下来就是无尽的等待时间。 是不是已经写好了？看一下哦，这个创建了虚拟环境，然后还写了测试文件是吧？ 然后还把前端的给它干完了。前端实现了，实现了，前端唯一堵塞的是多块没启动， 找不到 dock， 需先启动 desktop， 然后再去干这个哦，因为我们的提示词里面给他规定了要让他用 dock 来启动是吧？我这里倒是装了 dock 的， 来找一下啊。 desktop 大家写的时候可以不要这样写提示词。嗯，不然你没装 doker 的 话，还得去装一下 doker 是 吧？来把我的 doker compose 启动一下好了吗？ 他说本地的去跑 npm 撞标的已经实现了啊，就是冒起来了，后端冒烟测试，哈哈哈，还写了一个冒烟测试， ok， 那 这些我就不管他写了什么，就直接点保留了。嗯， 看看我们刀客启动了吗？刀客还是没起来。嗯，那我们就来修复一下这个问题吧。就是第一个，我们不要用刀客来启动，我们直接在本地跑本地测试就行啊。然后第二个，让他把数据库给它切换成 circle light 是 吧？ 第一，我们不要用 docker 启动了，直接在本地跑就行，你帮我把前后端的工程都运行起来。第二，嗯， circle post green circle 改成 circle light， 我们应该先让它把这个 post grey circle 改成 circle light， 对 吧？然后再让它用，不要用 dk 启动。第一，嗯，把 post grey circle 改成 circle light 数据库。 第二，我们不要用导粉启动了，只要在本地跑就行，你帮我把前后段工程都运行起来， ok， 所以 说大家也不要看 ai， 写了这么一堆代码，我又看不懂，怎么办呢？不要怕，你让他来帮你运行就可以了啊，就是这么简单， 咱们先把它运行起来，看看它写的效果怎么样。嗯，我认为它第一遍写出来一定是有 bug 的。 这里给大家解释一下我为什么要改成 circlelight 数据库，因为不管是 posgrid 还是 mycircle 之类的这种数据库软件，我们都是要先安装，然后才能去使用的。呃，就是比较麻烦一点嘛，当然也可以安装去使用一下。呃，而 circlelight 数据库它本本质上就是一个 呃文件，它用一个文件当成数据库去存取，你可以把它当成一个 excel， 就 它里面会有表，会有 会有行，然后呃，会有列，会有一一行一行的记录啊，就虽然它表面上看起来是一个呃数据库，但实际上你完全可以把它当成一个单独的文件，所以文件的话你也不需要设置什么登录用户名密码啊，也不需要去安装什么软件，用起来就会比较方便。 这个是非常适合我们在测试阶段使用的数据库 哦，他现在已经帮我把后端和前端都跑起来了，可以看到后端是在这里跑起来的，在八千端口展孔呢，他默认就是在八千端口跑的，然后前端是在 local host 五幺七三，然后我们打开看一下，嗯，他这里已经给我总结了，说他已经搞定了，对吧？ 哎，这个特别好哎，它已经它不光给我把前后端跑起来，还告诉我默认账号是这样的一些用户名和密码。 ok 啊，我先把它所有都接受一下啊， 然后再打开这个网页，是吧？把这个网页给它拉过来， 大家可以看到，那这个这个 lucas host 五幺七三，就是刚刚 ai 帮我们写好的这些代码跑起来的一个效果。来看一下默认是不是它这边密码都已经铭文写在这里了，为了方便我去使用是吧？ 嗯，然后登录看一下，找不到指定频距对应的用户，然后来 登录啊，登进去了更新一下。啊。哦，那这个是管理员的账号啊，这边的颜色好暗哦，那么这些细节等一会我们还是可以通过这个啊对话的形式让他来去进行修改系统配置。 这是要干啥呢？没太看明白。然后是用户管理，对吧？用户管理，我们要去新增一个医生，嗯，让医生去检查之类的。那这个页面转圈圈恐怕也不太对吧？ the word restarted， 就是 我们的服务器又重新跑了一下，那就这个地方也有问题点，新增用户能点吗？新增用户，比如说是张医生密码，先给他写一二三四五六， 角色是医生、医师和管理员，然后起用。创建，这个好像也不太行，是吧？没有创建成功，然后取消一下，取消也取消不了，就是说还是有蛮多问题的。哦， 那这个很正常。这很正常， ai 启代码，呃，不太会一次性成功的。如果你用的是 cloud o plus 这个模型， cloud cloud o plus 四点五这个模型的话，它的一次性成功率很高，但我们现在用的是 gpt， 五点二，嗯，就不是， 不是太高。嗯，那我要怎么去跟他描述呢？让我想一想啊。我们有两种方式，第一种方式就是让他自己去检查里面有哪些 bug 啊，然后自己去修复，并且还要帮我把这些代码给梳理好，是吧？我看看啊，目前的后端代码其实写的还行。这是测试 啊，这是 app 啊，账户管理是吧？账户分析，然后，嗯，这是，嗯，感觉文件组织的还行，没有出现那种，嗯，所有代码糊在一起的那个情况，然后再看看前端 也 ok， 是 吧？不需要去进行大改，所以，嗯，所以怎么说呢，我们可以先让他先干起来啊。嗯， 再对照一下需求是吧？再对照一下需求文档，然后我们把那个，嗯叫啥，我们软件需求分析这个思维导图也给它传上去。 嗯，好，然后再把这个思维导图，这个拼音记这个图片也给它传上去。嗯，再对照一下需求，检查未实现未完成的功能，并且排查 bug， 还有什么要跟他说的吗？因为对话的次数也是很珍贵的嘛，都是好模型。嗯， 顺便也说一下前端的一些问题吧，就是前端左侧菜单没有，没有选中的 前端左侧菜单没有选中的菜单颜色太暗了，看不清，对吧？这是一个问题，然后 创建检查。 哦，还真的创建成功了。嗯，那其实这里面有很多的问题啊，比如说，比如说这个医生，医生是谁？其实应该啊，就是当前给他检查医生是谁就是谁，是吧？那这个是成功了，相当于用户管理还是不行，是吧？ 然后退出登录，我们来退出登录，回不去啊？退出登录无法退出 用户管理界面，无法新增用户，并且始终在转圈圈。 嗯，然后是退出登录无法跳转到登录页。嗯嗯，然后我们来看一下 doctor 一 密码是这个， 嗯，这个只有检查管理，那么，嗯，比如说我新增了一个检查，那在我在哪里去创建去上传病人这个影像信息呢？对吧？那病人是要把这个 我，我是医生，要把病人的呃心脏超声检查的影像信息去上传，上传了之后再自动去标定，自动的出报告。嗯，所以我要问一下， 还有咱们系统的主要功能，就是医生在哪里上传患者的影像信息呢？嗯，以及影像信息上传了后，是否能够自动的分析出来我们需要的一些参数，并且生成报告呢？ 是吧？还有哪些，还有哪些问题呢？检查编号，比如说我先创建一个检查，嗯，对吧？像这种检查医师他就应该自动带出来嘛。但是这些细节呢，肯定不可能通过这一个视频就给大家完全演示出来的，所以我先让他去改一改吧。 我靠， 哈哈哈哈。 啊，同学们，昨天我的这个录屏软件出了点问题，所以最后一小段没有录上，我今天再给大家把最后这一段补录一下，那么刚刚我们看到 ai 已经帮帮我把这些需求都基本上实现了，那我接下来呢，就给大家演示一下，因为我们提到了 我们所选的这个 g p t 五点二啊，今天正好又出了一个新的模型， g p t 五点二 codex， 就 专门用来写代码的模型，可能会比 g p t 五点二写的效果会更好一些啊，那我们今天要演示的不是用这种高级模型，而是用普通模型 啊，就是用 g p 五 mini 这样的话是可以免费使用的一个模型。那这个模型呢？它比较适合改一些小的需求，就是比如说你看我提到的这个需求，就是帮我把登录界面改成图片中的样式，那我我的提示词啊和这个上下文就是这样去添加的，就是选择我的这个登录页 这个设计稿，那么它就可以作为一个上下文发给 ai， ai 就 可以去读取这个图片里面内容，并且给我去按照这个设计稿来修改代码。那我们往下看啊，就是他现在已经帮我把登录页改成这个风格一致的深色大标题左右栏布局啊，我们一起来看一下运行效果。 那可以看到这个就是 ai 帮我们改好的一个首页的样式，我们对照一下， 我们对照一下发给 ai 的 这个设计稿，设计稿是长这个样子啊，可以对照一下这个设计稿和 ai 画出来的这个界面啊，还是有比较高的相似度的，对吧？那么也就是说啊，免费的模型其实也能够完成我们提的这些需求，那么具体哪一个模型更好用呢？大家可以自己去尝试一下。 右边的这个 logo 跟我们设计稿里面的 logo 长得不太一样，这个是因为我们没有提供相应的这个静态图片，所以 ai 只能给我们随便找一张图片放在这里，所以 logo 的 话是需要单独在啊，比如说我们的前端工程里面找一个目录去放相应的这些资源文件的。 最后我再给大家总结一下今天的视频的重点，首先我们学习了工具是如何安装和激活的，然后是熟悉一下整个界面的一个布局，知道各个区域的一个作用。 然后我们用 ai 写代码的核心就是跟 ai 的 沟通的技巧，包括你提示词怎么样去优化，包括你怎么样去赋相应的这个附件， 然后遇到 bug 呢？不要着急，可以让 ai 来帮我们排查。然后界面问题呢，也是可以通过传图或者是明确描述来让 ai 去调整的。比如说在这个例子里面，我们我们其实提到了啊，提到了登录进去之后左侧的那个， 我们提到左侧，左侧没有选中的颜色比较暗，看不清，那么就是通过提示词的方式让它来去呃对 ui 进行美化，那么也可以通过复图片的形式让它去进行美化 啊，那么这些技巧呢，不仅适用于咱们这个比赛，以后在做其他编程项目的时候其实也能够用得上，那大家可以跟着这个视频来实操一一遍， 那么 ai 就 在你的调教下，会变成一个非常好用并且听话的打工仔，来为你这个老板打工啊。如果你在使用的过程中有什么问题可以随时在群里面问我，那今天的教程就到这里了，祝大家备赛顺利，下次再见！

如果你是零代码经验，当然想在过年期间尝试一下现在爆火的这个 file coding， 给自己或者家人做一些好玩的网站或者 app， 这个指南就是专门给你做的。首先我来解释一下什么是 file coding。 file coding 直译过来就是分为编程 形容的，就是通过跟 ai 自然聊天对话的方式去指挥 ai 去帮他做软件和网站的开发。所以我们在这个过程中主要专注的就是去思考你想要做出来的这个网站和软件，他是什么样的东西， 他需要有什么东西，然后表达清楚就可以了。剩下的关于代码的开发和执行都是通过 ai 来完成的，通过这样子的方式，没有任何代码经验的人都可以做出一个完全私人定制化的网页和 app， 所以 这就是 file coding 的 魅力所在了。 如果你是第一次 file coding， 你 可以做什么样的项目？我个人不大建议上来就做非常大型的项目，因为你一定会出遇到各种各样的问题，并且最后可能就半途而废了。 我个人建议纯新手的话，上来应该做一些专门给自己或者给家人用的那种小网站，他可以是手机也可以是电脑上的。然后如果你 实在没有任何的想法的话，我个人建议最保底的做法，最保险的做法就是给自己做一个网站，首先个人网站他是 非常好做的，因为它只需要你的简历。然后其次就是个人网站最差，你也可以把它放到简历里，它是有那么一些用处的。那么对于新手来说，该如何选择 filecoin 的 工具？首先大模型平台是 没有办法进行完整的 filecoin 的， 因为它没有办法做大型项目的开发，然后它写出来的代码是没有办法直接部署的，专业的 ide 我 个人不推荐新手使用，比如说像 cursor 这种，它其实 是对于新手来说是比较难部署，然后环境的配置也都是比较麻烦的，我个人推荐新手的就是一站式的平台，他们的特点就是前端页面为主，然后支持一键部署加内置数据库，相当于只需要注册一个账号， 注册这一个平台的账号，你就可以从想法到可以上线，所有大家都能玩的那个网页链接都可以在这个平台里搞定了，所以他对新手来说是非常友好的。 那么这是一个比较常见的界面，就是这种前端网页的，它的右边就是一个实时的前端的预览，左边就是这个 ai 对 话框，所以你就直接在这个 ai 对 话框里描述你想要什么，想做什么东西，然后 ai 做出来东西，你就可以在右边实时的看到， 再通过截图或者这种鼠标选中的按钮来去选中一个特定的 element， 一个组建，然后跟 ai 沟通进行一些细致的修改。 最后在你觉得 ok 了之后，就直接点击右上角的 publish 或者 deployment 部署，它们的名称可能有区别，但是只要点击这一个按钮，它就可以直接帮你部署给再给你产生一个链接，所有人都可以用来访问。最后就是一个小的建议，如果你要把你做的网页 给以所有人都能看到的方式部署在网上的话，你一定要确保你可以让 ai 来帮你去检查一下有没有你的个人敏感信息住址啊电话号码。 然后如果你用了 a ai 的 a b i t 的 话，请确保它是以到 emv 或者不会泄露的方式进行保存的。 ai 也可以帮你检查机，一定要确保这一个。然后最后祝大家 ip 愉快，谢谢。

什么是 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 实操经验，欢迎你一起围观评论区啊，我们安排。

那今天这个视频呢，就是全流程看，像我一个完全不懂代码的人，我是怎么样通过和 ai coding 工具的写作去快速的实现一个工具的生成？我就以一个图片尺寸转化工具为例，你本身需要打开一个 ai coding 的 这样的一个界面， 先来创建一个文件夹。好，那我们现在就直接开始。第一步的话，还是需要让他去帮我们安装一下 cloud skills， 那我就直接输入这个指令哈，不需要给他任何的具体说明或者是链接，看他能不能帮我安装一个 callout skills。 嗯，基本上大概三四分钟吧，他现在已经帮我把 skill 这个基本结构呃，下载下来了，那时候你会发现他这个 skill 的 md 底下是他的一些指令文件，而且这个 skill 必须是大写的扩展名，必须是 md， 其实就是 markdown。 那我现在是要做一个图片尺寸转化工具吗？所以这里我也不想打字，我就直接用口喷的方式来描述我的需求。我现在要创建一个社交媒体图片尺寸转化工具。呃，支持。用户上传图片后可以选择目标平台，如微信公众号、小红书、抖音 工具自动将图片转化为对应平台的标准尺寸，如二比一、三比四、十六比九等。要支持两种处理模式，智能裁剪 要保留主体内容或添加背景图，保持原图完整，用纯色或模糊的背景填充空白区域，支持一次性输出多个平台的尺寸版本。我需求描述完之后直接发送给他， 你看他其实就是三步走。第一是，嗯，他先创建了前端的 html 结构，然后把我刚刚的这个具体的流程能够显示出来。第二个是便写了 c s s 样式，完成 ui 开发后呢，它就会进入到 核心的功能开发，并且在这个过程当中的话，他是会随时去检查你的一些拍摄啊，相关的一些东西有没有去正常的安装，没有的话他也会经过你的授权后自动的去安装。那现在基本上这个他这个网页已经给我开发好了，我们来试一下这个效果。一张图片 下边也是有两种模式，智能裁剪和添加背景。我们先选中智能裁剪平台的话呢，它这里给我预设了五个平台，我就把我常用的三个选中，直接开始生成。 你看它基本上每一个平台都生成了三种尺寸的图，小红书三比四的封面图，抖音的竖屏、横屏、微信公众号的封面图以及文章配图，我觉得真的还是满全的。这个点击下载 遇到了一个 bug， 就是 你下载完的图片他没有办法点击，那没关系，我们就直接截图之后过来告诉他， 图片下载完成后没有办法点击查看，请帮我修复这个 bug， 就是 下载的文件缺少后罪名，所以导致那个下载的图片打不开，他现在正在帮我修复这个问题。你们在做的过程当中，中间也是会不断出现让你去授权一些功能的操作，一般的话就直接同意就可以。 好，这个是他已经修复好的状态，我们再来一张图片测一下， 把这三个都选上是不是？对，因为我上面其实给他这张图应该是一个十六比九的尺寸，那小红书的封面是三比四的嘛？这是他裁剪之后的效果，我们可以点开看一下，我们直接点下载。 哎，你看这修复好了，因为它后边已经有那个 g p g 的 后缀了，嗯，这就是最 后的效果，刚才那个 bug 修复完之后的效果，所以我觉得其实已经非常好了。因为从我安装 skills 到做出这样的一个小工具，加上刚才的一些 bug 的 修复和调整，一共也就是十五分钟。 那其实过程当中大家也看了，我其实一行代码也没有写，只是把我的需求描述清楚，不懂的就问维 i。 那 整个这个 webc 定的操作其实还是相对来说比较简单的，所以建议大家都去试试吧，哪怕只是做一个简单的 demo， 你 也能感受到这种从想法到产品实现的这样的一种快感。

哈喽，大家好，我是杰瑞，我今天将从零开始和大家一起学习 web coding。 我 将通过视频记录的方式来向大家分享我的学习进度与经验， 希望能够和大家一起共同进步。嗯，我的整个学习的教程参考的是 github 上的一个。嗯，教程叫 web web， 大家可以去访问他的官网。呃，也能够和和我学习到一样的内容。 ok， 话不多说，让我们现在就开始吧。在正式开始 web coding 之前，我们首先要有一个属于自己的 ai id 工具。 现在的工具非常之多，什么 cloud code， 呃， code 浏览器， tree 啊，实在实在是太多了。那怎么样选择一个适合自己的呢？我的结论就是， 不用纠结，你选择一个你能够最容易获取到的工具就可以。因为对于一个初学者而言，几乎任何的工具都能满足我们所有的学习需求。我用的是 tree 这个工具，主要的原因就是他现在有个首月只要三美金 的一个活动，三美金相对来说是非常便宜的。然后你三美金就可以用到他 jimmy 的 jimmy 三 pro 的 一个 呃，大圆模型，所以我觉得比较实惠。嗯，所以我现在在用这个工具。当然，他如果以后涨价了，我也有可能换其他的工具来使用。所以不用纠结，你有什么工具就用什么工具就好。 ok， 那 我们第一个部分学习的内容呢，就是学怎么使用这个 ide， 然后怎么和他一起合作来完成我们的 web coding。 首先，你打开任何一款的这个 ai 编程软件，你大概都能看到这样这么一个界面。 嗯，因为我们从零开始，那我们就新建一个项目。 ok， 有 一个项目名称。嗯，我们的第一个项目就做最经典的一个代办事项的 app 吧， 这也是学习 ai 编程啊，最容易上手的一个项目。 ok， 项目的名称我们就叫 do list。 哦，哦，因为我之前已经建了这么一个内容了， 这样吧，多一个文件。 ok， 你 在创建好这个项目以后，你几乎都能看到至少这三个区域。最左边的是一个文件区域，就是显示了你这个项目里边有哪些文件，然后中间一般是代码的展示区。 呃，右边是一个你和这个 agent 聊天，你怎么教他帮你进行 web coding 的 一个界面。 ok， 有 了这三个界面以后，我们就可以开始 和这个 ai agent 进行第一句的聊天了。你这个就和恰如 gpt 或者 jimmy 一 样，你可以跟他先说一句，你好， ok， 他 就告诉你啊，他可以 修复 bug， 添加新功能，重构和解释代码，以及各种。好，你想从哪里开始？我们这一期先不进行详细的一个 web coding 的 教学，我们就看看一下，我们和他随便说几句话，他能干什么。呃，比如说 帮我做一个代办事项的监， 嗯，用 html 实现，就发这么一条指令。呃，让我们看看它会干什么。 在中间这个代码区，你看它现在已经正在生成代码了，生成一些代码，然后， 然后它还有一个 app 的 这个展示页面也出来了。 好，并且这个 agent 告诉你啊，已经完成了一个 h t t m 的 代码式样应用，并且已经可以本地预览。然后它告诉了你它有哪些功能。 对，做了啊，一些使用说明。 ok， 嗯，因为这种项目 ai 已经 帮助太多人做过了，所以你只需要一句话，他就可以给你把几乎你想要的功能都已经添加上去了。嗯，所以其实这句话 作为一个 app 对 于 web coding 学习没有什么太大的意义，但是呢，我们只要知道我们可以跟它对话，然后来做 app 就 可以了。 ok， 让我们来试一下它做的这个软件怎么样？嗯，我要添加一个，比如说， 比如说学习 web coding， ok， 它这里有一个血液 web 口令，然后，嗯，踢足球， ok， 点一下， ok， 完成了它就有一个斜杠删除。嗯，它这个功能已经其实已经非常全面了， 请注意，完成好这些都没有任何问题。 ok， 但是呢，你其实并不知道他干了什么，他就给你做了这么一个 app， 这个 app 其实已经做得很好了。这个主要原因呢，是因为 做这种 app 的 人实在是太多了，那 ai 已经学的非常聪明了，已经就是根据大家的要求，已经能把这个 app 做出来了，但是当你要做一个属于自己很个性化的 app 的 时候，他就不会那么聪明了。因此，我们在之后的学习内容中 啊，将会从啊前端以及后端的啊逻辑以及存储三个方面来完整的做一个这样的 app。 这个视频主要就是带大家学习，并且熟悉一下这个 ai 编程软件， web 固定软件是怎么使用的。我们后面的视频将会详细的为大家介绍这代办十项软件是如何一步一步完成并完善的。 ok， 今天的视频到这里就结束了，如果你觉得这个视频有帮助到你，并且你也想和我继续一起学习 web coding 啊，希望得到你的点赞加关注，感谢大家，我们下期再见！

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

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

那作为一个没有任何技术背景的人呢，我自己在 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！ 拜拜！

从今天起，我们就正式开始进入一个为期三十天的 ai web 定位学习计划。不论你是已经进入职场打工人，还是说已经进入了大学的在读学生，二零二六年，如果你还不会系统的使用 ai， 那 么我们面对的就不是职场压力的竞争，而是说一个数字化的降维打击。比如说作为打工人，那如果你的老板告诉你，你 下周五之前要交一个方案，那换做以前，我们可能需要找数据或者写需求，然后求排序，但是现在呢？你只需要用喝一杯咖啡的时间就可以 word 搞定，帮你磨合出一套深度的市场拆解，甚至可以帮你一键做成一个精美的展示 ppt。 对 于那些还在校的大学生来说，这是你跟那些卷学历的人可以最快速度的拉开差距的最有效的途径。 当别人还在海投那几页摆着黑字的简历的时候，你已经可以针对你的新意公司，只需要花一个下午的时间就可以做一个交互的数字作品集，甚至说可以根据你自己想要去 的公司痛点，去实际的做出一个可以解决他们需求的一个小工具。那在这个成品大于简历的时代，你这种可以把想法瞬间变现的能力，无疑是对现在的一个求职者的一个最好的降维打击。 coding 不是 学代码，而是让你像专家一样系统化的去掌握 ai。 简单来说，你成了那个指引方向的导演，而不是搬运胶片的普通长工。这种思维层级的转换，就是二零二六年顶级上班族和普通打工人的分水岭。 技术会贬值，但是你的业务动产能力正在疯狂升值。以前你想实现一个想法，你还要去找技术，去求一个排气，但是现在你的 prompt 就是 你最强的编程语言，你只需要给出正确的外和你的逻辑，像写代码这种体力活， ai 就 会帮你搞定。这就像是从手动挡换到了自动挡，以前你还需要踩刹车控离合换挡，但是现在你只需要坐在驾驶位上，决定去哪里和开多快就好。 那接下来三十天里，我不会教给大家高深的代码，而是作为一个过来人，把我这几年总结的系统化 ai 生存指南拆解给大家听。那大家可以点点关注，如果感兴趣的话，我们下期再见。

这可能是全网第一个从零不需要写一行代码就能做出一款真正原声 app 的 最佳实 践。花费了整整两个月的时间与探索，我终于跑通了整个流程。不管你是经验丰富的工程师，还是零基础的小白，只要你跟着我的步骤，就能在半小时内做出一款运行在手机上的原声 app， 不是 那种浏览器里面。 h 五，今天我就要把这些经验全部分享给你。 第一步，打开 stage， 选择三 pro 模型。这里默认使用的是谷歌的界面，直接用中文和他对话，告诉他你要做一个什么样的 app。 比如我这里跟他说， 我要做一款可以拍照自动识别有效期的 app。 ai 迅速给出了几套极简主义方案的设计稿， 注意看这些卡片的间距、光影、圆角，全是严格遵循 google material 三设计规范的。 你可以对单张图片进行局部修改，也是直接用自然语言即可，直到修改到满意为止。注意尽量多花一些时间，免得再在代码层面修改调整会非常麻烦。 第二步，定稿后一键导出。这里 ai 已经把刚才的设计图转化成可以被机器阅读的 html 代码和 png 格式的效果图。以前这部需要 ui 和前端反复沟通，现在秒集完成。 第三步，打开 anti gravity， 建立一个项目工程。注意这里最好把前端后端分开，方便 ai 对 你的项目工程有一个结构认知， 建立 front end 和 back end 目录，再在 front end 里建立 design 和 app 目录，直接把导出的代码和图片放置在 design 目录下， 并给 demo 三 pro 下达指令。请参照这套设计稿效果，使用 flight 技术帮我生成 app 代码， 代码放置在 app 目录下，此时 ai 进入自动驾驶模式，他在后台疯狂调用接口写大的代码配置环境，你不需要懂什么叫组建，什么叫状态管理。 ai 就 像一个拥有十年经验的工程师正在帮你敲代码。 为什么要让 ai 使用 flat 技术写代码呢？请看这里。 ai 生成的代码包含 ios、 安卓、 mac、 windows、 web， 也就是一次性生成的几乎包含所有平台的 app 代码，简直太爽了！第四步， 打开 mac 上的 simulata 手机模拟器，输入一串 app 启动的代码，现在就让我屏住呼吸，等待 mac 原声模拟器，看，这不是网页，而是真正的 flat 原声 app 倒计时的逻辑，卡片的脉冲动效，全都完美的复刻了设计稿。当然，你也可以连接手机，直接让刚开发好的热乎乎的 app 装进你的手机里运行， 抛弃那种一句提示词就能开发出一个产品的幻想，那些都只是玩具。这种从想法到成品的全流程自动开发，我花了两个月才实践出来的最佳路径。如果你觉得有用， 请帮我点赞关注，抄作业过程当中呢？遇到任何问题，请在评论区留言，我会一一解答。

今天我们要做的一件事情啊，就是用一句话来做出你人生当中的第一个网页。不是开玩笑，真的是一句话哦，你准备好了吗？ 我们双击打开 tree， 左上角选择 ide 模式，在这个面板上点击新建项目，你可以取名叫 my first page， 点击确认，这个时候项目就创建完成了，你的页面就会变成了三栏，左边是一个文件的一个展示，右边是跟 user 沟通的一个地方。 好，那在右边的聊天窗口里面。记得我们要选择 build 智能体，我们下面就要输入这一句话了，帮我做一个个人网页， 我是一个 web coding 的 讲师，我会向零基础用户介绍 web coding 使用过程。我希望页面是好看的啊， 参考苹果的玻璃拟态效果，你可以任何效果。你可以希望二次元风格，或者是说什么怪兽风啊，或者是什么波普风都可以啊， 有墨兰迪色的背景。好，我这个是一句话，当然了，一句话里面的内容比较多。首先我要做一个个人网页啊，我告诉他这个网页里面我的身份是一个讲师，我希望他的一个交互是一个玻璃，你看他的背景是墨兰迪色系的啊，所以你在这个一句话里面把你想要的说清楚。当然，如果你当前不知道你想要什么，你也可以是说帮我做一个个人网页， 但是如果你说的越少，那么留给 ai， 他 自主创作的空间就越大，那么他给到你的效果就有可能不是你想要的啊，这个你要做一个心理预期。 ok， 那 在模型选择上呢？国内比较火热的模型，你可能是要排队的， 我建议你直接打开这个 auto mode 就 可以啊，根据当前的专利，包括你的一个项目内容，他去帮你平衡到底用哪个模型好， 那么我们就这么发出去了。这个时候 ai 它就开始自己去生成代码了，它会有一些自己的思考过程，你也可以看到它是怎么去做的。首先我们做的这个网页啊，大家有一个基础了解，就是说网页它后面都是 html 格式的啊，所以你看到的这个 index 点 html 啊，这个文件它是可以在浏览器里面打开的。 好，他马上就能生成了。对，我们来看一下，他已经帮我打开这个页面了，对，我们来看一下，那这个页面他是在中间展示的，如果你觉得视野上没有那么的好，点击这个 网址栏右侧的一个小圆圈，他会显示在浏览器中打开。啊，好，这个就是我做的一个页面了啊，首先他是一个莫兰迪色系的，欢迎来到歪不确定的世界开始学习吧， 百不扣定的一个流程啊，这个全部都是他自己给我做的，我们今天做的是一个页面，如果这个样式你觉得 ok 了，那这里面的文字其实都是可以去改的。 ok 啊，所以如果你今天跟着我做到这一步的话，那恭喜你，你刚刚做出了你人生当中的第一个网页， 就是这么快，只是用了一个自然语言的一个表达，他就帮你做出来了，那这个就是外部限定的魅力。 ok， 那 这里就给大家留一个作业吧，去做任何一个你想做的一个网页，试试用一句话跟车位进行交互，看他能不能给到你想要的， 下一集我们就把我刚才做的这个页面去让他变得更酷炫一点，来换个颜色啦。啊，加一点动画啦，把我自己的照片放上去啊，那我们下一集再见吧，拜拜。

嗨，这是我第四十八周自学 vip coding。 这周我最大的感想就是我每天学的内容越来越把我向软件工程师的方向推了，但是我知道我永远都不会成为一个软件工程师。我来跟大家解释一下。这周我很开心，是因为我学到了很多关于 api 的 具体操 操作，例如我学会怎么找不同的 a p i， 看它不同 tier 有 什么样的 limits， 学会了去读不同的 endpoints 等等。这里呢，我用的最多是 rapid a p i， 向大家推荐一下。同时呢，我也学会了 a p i key 可以 写在 environment variable 里面，然后这个 variable file 在 git commit 到 github 上面的时候是会被 ignored 的。 这估计也是很多软件工程师会习以为常的事情。我跟我身边的一些比较资深的软件开发朋友聊天，他们都觉得我现在学的东西好像一个 junior engineer 刚开始入行的时候会学到的一些东西， 有很多东西也是学校里不会教，但是你在公司里面会逐渐学习的那种。我的评论区里经常会有人问，你都愿意花四十八周这么多时间和钱去学习了，为什么不学手写代码，或者是去学习当做一个真正的软件开发工程师呢？那我的回复和答案就是，这不是我学 vp 和 prototyping， 其实有两个目的，一个就是我想快速的做一些 mvp 和 prototype， 这样我可以把它拿出去看一下市场的反应，找一下 product market fit。 所以你们看我写的东西，我并没有特别去追究它的 scalability 或者 security。 前两天有一个谷歌的资深开发朋友看了我的扣子就说，嗯，你写的东西能用，但是一看就不是一个 developer 写的。我觉得非常好啊，一点都没有问题。 专业的事情就应该交给专业的人来做，包括这周开始我们也已经组织了自己的开发团队，所以那些市场反应好，有前景的产品其实可以交给专业的人来写。 那第二个学 python 的 目标呢？就是我想有足够的 technical knowledge 能够帮助和支持我的开发团队。例如通过学习，我现在可以知道 ai 的 边界在哪里，哪些产品是有可能做出来，哪些是目前为止还不能实现的。例如，我可以更好更有效地帮我们的团队找一些 a， p， i 或者不同的 text。 再例如，如果我们写一个新的 feature 的 时候，我可以知道这个功能有多复杂，它需要大概多少的时间和 effort 来做。那再的来说呢，也可以帮助建议一些 evaluation framework， 不管是产品还是模型方面，都可以更好的数据化他的产出和能力。那这些呢，都是我觉得我动手真的去外部订之后，才会有更好的理解的一些知识。我觉得我的时间都是花在对我来说最有效的地方。我不认为我的优势是在于开发或者写代码。我人生中见过那些非常爱写代码的人， 前段时间认识一个朋友跟我说他特别喜欢写代码，经常写到凌晨五点，并且开心到不但不想要工资，都想反向给老板钱， 觉得很好呀。那这件事情就应该交给一些热爱和擅长的人来做。那我个人认为我更擅长的地方呢，包括找 product market fit， 去设计一些商业模式，去做 marketing， 去联系和观察我们的 customer 和 users， 这些都是我更喜欢和更擅长的事情。然后学习 web coding 可以 更好地帮助我打通这一套从头到尾的产品逻辑。所以对于所有对 web coding 感兴趣的朋友，我真的很建议大家先去考虑一下自己为什么要去学这个东西。 如果你现在就是一个软件工程师，那你是不是想提高自己市场的竞争力，或者是让自己更高效？如果你是一个不做开发的白领，那你是否想用挖坑领或者 ai 来助力你现在的主业呢？ 又或者你只是想学着玩一玩，来感受一下不同新的科技，再或者你可能是想做一点好玩的小工具来帮助你的日常生活。我觉得每个人不同的目标，不同的角色都会带入你进入一套不同的学习方式。虽然都统称是 vlog 领，但是学下来的内容和方向还是不一样的。包括我之前这个视频里面提到的各种产品， 我觉得也不是每个都要我们去尝试的，还是按照自己的需求去挑一些实用的产品去深耕。那关于这些其他的每个月会出的新产品呢？我们大概的就是浅浅的了解一下他们是做什么的就可以了，如果以后需要再去深耕也来得及。

今天我想分享一张我最近在 x 上刷到的最喜欢的照片，并且如果你还在犹豫要不要学芭比克丁的话，我希望他能代替我来说服你。这张图现在代表的呢是全世界现在的总人口。如果我们把它平均分布在两千五百个方块上，那每个方块大约就代表了三百二十万人。 那么在这些人当中，有多少人会真的用 ai 呢？我们看最上面这些灰色的方块，它代表了百分之八十四的人口，这些人从来都没有用过 ai。 接下来我们看绿色的这一部分，代表着百分之十六的人口，这些人会用一些免费版本的对话型 ai 机器人，这两个加起来就已经包括了绝大部分人了。那 我们再往下看这个橙黄色的部分，也就是约人类百分之零点三的人了。那我们再往下看这个橙黄色的部分，也就是月费的订阅服务。 最后我们看这个红色的方块，它只占人口的百分之零点零四左右，那么这个方块里的人就是那些会用一些 ai coding 工具来做 y coding 的 人，然后这个总人数是大概两百万到五百万左右。不知道大家看过这个图以后有什么感想呢？我觉得它跟我之前的预算是非常类似的。 我记得我前几周还在跟我朋友说，虽然我个人每天打开我的社交媒体都是铺天盖地的 ai 新闻， five coding 工具和新产品等等，但是我觉得这是一个很小众的事情。就也许全世界上大部分的人并没有每天看到那么多惊天动地的 ai 版 coding 的 大新闻，所以当我看到这张图的时候，我觉得它确实是符合我的想象的。那么我看到网上很多人，他的反应是说这个红方块这些人每天以为有多大的新闻，多大的进展，其实你们只是活在一个自己的小小的世界里而已。 所以很多人觉得这张图证明的是 ai 世界里有很多的泡沫，还有很多的炒作，实际上用它的人并没有大家想象的这么多。但是我的想法很不一样，我也想跟大家一起去探讨一下。我觉得 我怀疑现在我们去学 vibe coding 这件事情，就好比六十七十年代，比尔盖茨或者是乔布斯去学搞电脑这件事情。我记得读他们的传记的时候呢，我想到他们早期的时候对电脑这件事情非常着迷，但是这个爱好非常小众，因为大部分人都没有接触到电脑， 并且大部分人当时觉得电脑是少数人的工具。但是呢，我们现在知道了每个人家里都有电脑，或者有好几台， 变成一个很普遍的事情了。那这个时候年轻的乔布斯，年轻的比尔盖茨，当他们一头扎进做电脑、做软件和这种技术的时候，我们在之后的二十三十年里，会看到这些所谓的先行者在市场的优势。那有没有可能我们作为这个红色的一小小方块的人， 也是现在时代的先行者呢？有没有可能再过个十年，二十年，所有人都需要灵活地运用 ai， 不 光是聊天机器人，也可能包括 web coding， 可能包括 agent， 包括很多现在可能还没有发明出来的东西呢？那么如果我这个猜测是真的话，现在学我们就是万里挑一 或者是万里挑四的人了。最后我想讲一个，我们现在这个时代跟六七十年代学电脑那批人很大的一个不同，并且是一个很好的不同，就是那个年代大家很难接触到电脑信息，或者是拥有一个电脑，如果你想学编程的话，基本上是一件非常难的事情，因为信息的流通就是不发达的。 但是现在呢？现在互联网真的是太丰富了，任何人在家里只要他有电脑有网，他就可以学 web coding， 就 可以学 ai， 就 可以搞一个自己的 ai agent。 我 想说能生活在这个年代，并且能在这样的环境下学习真的是太幸福了，所以我是会好好珍惜这个机会的，也很期待能跟大家一起继续成长。

今天我可以零基础的小白，从来没有接触过代码的人，也可以在几分钟之内可以部署自己上线的个人网站。 然后呢，其实有很多种工具可以选择了，比如说 cursor 了，或者 google gemini 了啊，但是呢，我选择用了 loveable， 但是呢，呃，因为 loveable 它是最容易方便部署的。然后呢，它对小白来说也是最友好的，只需要打开这个网页就可以 准备开始咱们的开发了。然后呢，这个呢，是我的一个提示词，这个其实我也是去用 ai 生成的啊，所以，但我我再来先带大家过一下吧，你看，我先说的是，你是一个资深的前端设计师和产品设计师， 请帮我生成一个单页的个人网站，用一些啊技术站，然后保持风格简洁现代有质感。 然后呢，它大概分四个步骤，第一个是顶头的 hero 区，大概就是一个啊，名字加一句话简介。然后呢，第二部分是关于我，第三部分呢是关于我的背景和职业，第四部分呢是联系方式。 然后呢，在这个下面呢，我就是填写了我的个人信息了，我的姓名，职业啊，一些我的关于我的简介和我的联系方式等等。 然后呢，我就点，然后设计要求就是白色或者浅色的背景字体现在易读。然后呢，最后呢，就这样就直接告诉他请输出完整代码。然后呢，当大家，然后你就可以点这个按钮， 当点完之后，你第一次的话，你需要登录啊，那这次呢，那我就随我就登录另外一个账号，然后我带大家从头开始过一遍。 好了，这个我已经现在登录进来了。然后呢，当我点点击这个按钮的时候，他就会，你看大概在左边就是咱们聊天界面，然后你看这边他都开始 thinking 了，这也就是说啊，他现在已经在开始制作中了。 然后呢来，你看他说了，我来为你创建一个简洁的现代有质感的个人网站，不拉不拉不拉不拉不拉。然后现在正在工作中，你也看到在右边中间也写着 getting ready， 那 咱们呢就稍微等一下，看看他最后能做出来是什么样子。 ok， 这个相关这个视频就已经制作好了啊，然后咱们来稍微看一下，但第一面有我的名字，然后呢有些我写的个人简介，下面还有一些关于我，下面还有我的背景， 然后呢最下面还有一些我的联系邮箱啊，虽说这些不是很准确吧，但我觉得整体的设计感还是不错的。 现在呢，咱们就可以进入到第二步了，就是迭代优化，当你看到这些不是很好的时候，或者说你想要亲添加东西的时候，你就可以去做一些感，不断的去优化，跟他去聊天啊，有两件事情呢，分享一下吧。第一个就是假如说，哎，我好像没有上传我的图片， 这个时候呢，我们就可以点击这边这个加号，然后呢 attach， 然后呢咱们可以去到在这里我想添加我的头像， 然后呢在这里呢，我就可以跟他说啊，我没有添加我的头像，你能不能把这个图片当做我的头像，然后呢你可以放在一个你觉得比较好的位置上， 然后咱们这样点击回车啊，这个不用管它。 然后呢，这会他就开始制作了，然后呢，咱们稍后等一下来，现在看都做完了，咱们看看在哪里？好像不在第一面 哦，好像在这里，但我觉得这一点不是很满意吧。啊，所以呢，我正好来去做一下第二步，假如说我想要去改一个一一部分，就比如说我只想改这个部分，那我该怎么选中呢？我单独点它是没有用的，可以点这边 visual edits， 点上它， 然后呢，你看这边鼠标点晃一晃，就会有不同的选中。我，比如说我来选中这个，然后这边好像有些改动了，你可以去改图片了，或者说怎么样了，或者你直接在这边跟他继续说。呃，你能不能把这个图片呢放到最上面，然后就 hero 那 个上面， 然后呢，并且呢，能把这个图片变成一个圆形的，而不是长方形的。 ok， 他 现在去做了，那咱们稍等一下，回来看看它做成什么样子。好，你看它现在修改完成了，然后呢，你看它这个最上面有一个这个远。 呃，我的头像已经放在正确的位置了。好，大家能看到这个 credits 左边这边呢，它 lovelababy， 每天好像是有这个 free credits 的 限制的，所以呢，它每天只能够去跟它 进行几轮对话，所以大家要正确的使用这个 prompt。 然后呢，能够去啊，很好的去，正确的让它能够很快的生成这个你想要的网站。 当然了，如果不好的话，你可以第二天再去啊，第二天等它这个 credits 每天会刷新，第二天再接着去做，或者说你花钱去升级。 嗯，还有一个东西是 lovable， 还有很好的一点是这个，因为是在网站上，你也可以点击这个小按钮去切换到 tabloid 模式或者手机模式。先点一下是 tabloid 模式，这个大概就是平板电脑上是什么样子，嗯，看起来也还不错。 然后呢，咱们再点击手机模式啊，差不多是这个样子，可能稍微差一点点吧，但是感觉还是不错的。 好了，那咱们就来到最后一步，也就是上线部署了啊， lovable 上线部署真的是非常方便，咱们点上面右上角这个 publish， 然后呢，你可以给自己一些抖面了，比如说我，比如说给它叫老郭头 啊 website， 然后呢，这样我点击 save， 这样的话我的域名就是这样的了。然后呢，我可以控制任何人都会看得到。然后咱们就直接点击这个 publish 部署。 然后呢，它需要稍微等一下下，你看它已经在部署当中了，我打开了一个无痕浏览器，可以看到这个网站就已经部署成功了， 这样是不是还还不错？如果大家感兴趣呢，欢迎试试。然后呢，我会把我的 prompt 也放在下面的啊评论区，大家可以去自己去用或者去更改，那咱们下期再见了。

今天绝对是一个值得纪念的日子，因为刚刚我把我全程 vaping 的 一个小程序的产品提审了，重点是全程我没有写过一行的代码。做一个在互联网摸爬滚打 多年的产品经理，我也算是见过大场面，那做过月火百万千万级的 app 产品，以前习惯了指点江山给程序员提需求，现在轮到自己用 ai 写代码，这种从甲方变成乙方的体验确实给了我全新的视角。如果你想做自己的产品，那么我的经历应该会对你有 所启发。特别是如果你爱折腾，或者是单纯的喜欢折磨自己，那么你一定要试一试 live coding。 live coding 的 确能帮你干活，只是如果你没有技术背景，大概率要遭遇 live coding。 一 分钟修 bug， 一 天的惨痛经历，除非你能听进去我下面总结的这几条血泪教训。第一点， 要试图一口吃个胖子。很多新手上来就要求 ai 给你写个淘宝，做个微信，这是错到没边的行为。从自己的需求入手，先做一个简单的自己能用的工具。既然是 webcoing， 就 要保持热情，在实践中交学费。第二点， 工具的选择。对于新手怎么简单怎么来，我只无脑推荐谷歌的 anti gravity， 像 jamie 三 pro 以及 cloud， 在 里面都有免费的额度。新手不建议上来就玩 cloud code 或者 open code 这种只有命令行，没有图形界面的即刻的工具，那是在给自己上难度，完全没有必要。第三点， 自己当做产品经理，而不是程序员。很多人不离清自己的需求，就让 ai 来写代码，大错特错。我做了很多年产品经理，我深知需求文档的重要性，我发现 ai 写的文档比我写的还要好。 正确的做法是在扣顶之前告诉他你的想法，让他完善成一份可执行的 p r d。 文档写完以后你来 review。 同样呢，你还可以让他生成技术文档，技术文档你看不懂，可以交给另外一个 ai 帮你检查。总之不要一上来就让他写代码，记住，需求越清楚， 错的概率才会越小。第四点，学会搭积木和开分身。有了文档，接下来终于可以干活了。想要更好的完成任务，一定要用好 agent， 一个 agent 不 够，就让多个 agent 一 起来帮你干活，有负责写文档的，有负责写代码的， 也有负责测试的，各司其职。而且写代码的时候一定要分模块来写，比如前端后端逻辑分开写，不同的页面不同的功能分 开写，就像搭积木一样，千万别让它一次性把整个系统写出来，但后期维护绝对是个灾难， ai 不是 万能的，当下的 ai 还是有犯错、降智甚至幻觉的情况出现，尽量避免这种情况。 最简单的方法就是重开一局，不要在同一个聊天框里聊到天荒地老。那么这次我在 webcolin 的 过程当中，遇到最难受的情况就是遇到顽固，是过了很多次都没有办法解决的 bug。 遇到这种情况，我总结了几点经验教训，首先就是做好版本的管理，与其盲目无休止的重试，不如直接回滚。第二个就是给他开个外挂，善用联网搜索，或者引用外部文档，提前安装好像 context 七这样的 m c p。 第三个方法， 交叉验证，一个 ai 给的解决方案交给另一个 ai 去审核。第四点，在开始编程之前就为 agent 设定局的规则，这一步相当于是为 ai 打预防针。如果最终 bug 修复成功了，那么要求 agent 帮你生成一份 backfix 的 日制，这样如果下次再次出现类似的问题，就可以非常快地进行排查和修复。最后，如果你的产品最终要上线， 记得一定要提前做好备案。像这次我的备案就足足花了十八天的时间，把我 web coding 的 热情都 打消掉很多。以上就是我第一次 web coding 的 复盘，那么我做的产品应该很快就会上线。虽然我知道它是一个缝合怪，还有很多的问题，但真的准备好的那天，我一定第一时间通知大家，希望大家都能够做出好东西。