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

简单记录一下我的那个 web coding 思路哈，就先把具体的需求提给豆包，然后让他帮我形成一个适用于 cloud code 的 提示词。 啊。我是觉得这样做的话呢，就是我没想到的一些部分，或者我认为不确定合不合理的部分的话，那个豆包这边会用它的那个专业模式帮我优化好，然后再把提示词用那个 vs code， 然后交给 cloud code， 他去干活去，然后等待码。对，大概是这个样子。 对，然后他就开始干活了，然后根据他干活的情况确定下一步是给他同意还是要做调整或者怎么着的，大部分情况下给他同意就够了。 对，他最后形成了代码以后，点开可以看注试啊什么的都是有的，当然我是零代码基础，所以可能对我而言的话，这个部分就是大体了解，看逻辑没有什么问题就 ok。 对， 如果报错了就发给他测试，报错就发给他，然后他再来改。对，一般会有各种各样的错误，然后这是正常现象，有可能是咱们 我们人没有考虑到的一些内容，或者我们提示词写的有问题，也有可能是他的理解有问题，然后测试完程序以后发现有哪些错误就告诉他，他就开始改，改完以后继续测试，直接测试程序功能就可以。好的，现在呃， 程序基本上完成了，中间有一些小 bug， 然后优化了一下，包括，呃，就是一些个别代码的使用错误呀之类的，然后那个我现在让他打包， 呃，打包成可以那个在 windows 下执行的程序，然后也把依赖包打包进去，这样的话就，嗯可以在本地的计算机上做部署了。 对，我做的程序实际上是一个自动化的报告系统。然后我做了两个版本，一个可以只生成 word 版的报告，另外一个是 word 加 pdf 版 啊，它基本上是没什么问题的。然后我刚才也已经测试通过，录制完以后开始生成报告，它就开始嘟嘟自动化的生成报告，按照我要求的命名格式完成。

哈喽，大家好，今天呢，我给大家介绍一个我自己写的从零开始，然后零手写代码的一个项目，是一个呃，专注于 ai 提示词的一个管理、分享和交流的一个平台。 呃，其实主要就是一个提示词的一个管理的一个资源站，然后 ui 的 话是这样一个样子，嗯，我不是做设计的，所以做的也不好看。 然后呢，他看一下这个登录注册的这个功能， 先注册一个账号，随便写一个吧。 这个具体的一些验证还没有做啊，没有继续往下完善。嗯，那这个注册好的账户进行登录， 这做了一个呃免费领取这个会员的这个一个效果， 这是一个两步验证的一个一个安全功能。然后个人中心呢，主要做了一些这样的一些功能，还有个人中心有我的提示词，然后这里可以添加提示词，新增、增删、改查这些，这是我之前的一个一个草稿， 然后一个模型凭证，这里可以增加各个 ai 厂商的一个模型。然后这是呃用户之间的一个收藏夹和关注的好友，呃权杖的一个多语言， 这是 nice g s 的 一个比较大的一个优势，就是完全非常方便的可以实现你的这个呃 i 幺八 a， 包括它的一个通知系统，消息通知，主要的内容就这一些吧。然后呃， 我一开始的时候呢，就是写了一个 agents， 这个 agents 啊，是这个。 嗯，这个这个项目一开始的时候呢，我是写了很多一些规范的， 然后呢，因为这个项目是去年做的，所以当时当时就是写的这个 a j s 这个文件我还是以这种方式去组织的，就是 这个 a j s 文件下面我还写了一个什么 star d， m d， rolo s， d m d 这些文件，然后啊还准备了一个，就是呃任务模板的一个一个类型，比如 我每写一个，呃，每写一个需求，我都会去把这个需求按这个文档进行组织，比如这个是在写当时增加用户呃关注的这样这样的一个模块，你看 啊，任务是什么？然后卸载的一个目录，这个是后导目录，前导目录，然后呃还告诉他本文档，而本次任务的解释说明内容要生成一个 markdown 文件到这个目录下面。 其实在我后面的开发当中，我觉得这个啊没必要，没必要去这样做。 然后是一个呃这个任务的一个简单的说明，你看，我就只是说在优者模块下面新增粉丝功能，包括关注和取关好友等功能，完善前后段的功能， 就一个这样的一个，呃，很小很很简单的描述吧。然后当然这个表是我自己设计的啊，我去做一个呃这样的数据表的设计呢？就是 呃大差不差的这种，嗯，粉丝表的这种，嗯设计吧，那就关注的和被关注的 id 和他的一个关注状态， 嗯，这个结构其实比较简单。然后我还做了一点说明，就是这个单向关注是一条记录啊，代表 a 关注 b 的 一个关注，然后用 status 控制是否取消关注，不删除记录，方便做推荐分析。 然后另外这个功能下面还还做了一张表，就是 userfriends 这个，这个，这个表，嗯，其实这个结构都差不多。

哈喽，大家好，我是七帅，今天呢给大家分享个零到一外部定制出来一个产品的流程和过程，整个流程步骤一共有八步，今天我们挨个去梳理一下，我们首先看第一个是发际需求， 我们在日常工作和生活中一定会有一些目前市面上有的产品不能满足我们的，那这些需求我们要梳理出来，看看能不能通过产品的形式去解决， 我们接下来看第二步，我们把我们的需求给了豆包，让我问一下豆包，我们这个需求看能不能用产品的形式去解决，如果说用产品的形式去解决，让豆包分析一下我们接下来应该去重点完善做哪些功能， 也让豆包去梳理一下我们未来这个产品的市场前景以及需求的重要的痛点。第三步，打开 openai 下载酷贷斯。目前为什么说推荐大家下载酷贷斯，因为酷贷斯目前相对来讲比较便宜，所以说我们接下来就看到第五步，去海鲜市场 大概八块到十块左右，可以买一个 team 团队的一个拼车，这个可以让我们去使用目前 openai codex 最先进的模型五点四， 但是五点四的模型它的额度消耗比较高，它是正常其他模型消耗的两倍。如果说你的 codex 一个团队用完，我推荐你再去买一个 team 的 账号，这样就像我的 codex， 我 现在有四个团队，我就切换为其他另外一个团队的账号。 第六步，我们刚才让豆包已经梳理完我们的需求了，梳理完以后我们就让豆包给出我们 mvp 版本的 promote， 为什么说要做 mvp 版本？毕竟我们是从零到一，也是第一次去 webcointing 出来一个产品，为了能够提高我们的自信心，所以说我还是大家先从简单的做出一个一个 mvp 版本的一个产品出来，整个 promote 也可以让豆包给的 promote 挨个一步一步的去粘贴到我们的酷黛斯的对话框里面。 第七步是和库黛斯对话调整，因为毕竟库黛斯第一次去生成的产品可能不是我们想要的，比方说 ui 一 些功能不是我们想要的，那么这个时候我们需要和库黛多人的去对话，去调整我们想要的产品。其中这里教大家一个对话技巧，如果说我们不知道去怎么描述，我们就 给库黛斯发了截图，给库黛斯发了截图中间我们也可以用框框来告诉他这个框里面东西怎么改和正常，我们把库黛斯当成一个正常的一个开发同事去对接，这样子对接的过程中呢，我发现其实库黛斯比有些同事理解起来更方便一些。 最后一个就是部署 windows 上线，这个相对来讲稍微比较复杂一些，不过我们可以把库黛斯当做我们的一个智能的小导师，有什么事情哪不会哪不懂的呢？让他给出详细的步骤，我们按照库黛斯的步骤一点点去部署于上线就行了。 目前这是这几步，就是从零到一 web 出来一个产品的过程，其中还有其他的一些小小的坑，我们等后面再分享。

如果今天我们开始做一款产品，那第一句话我们应该跟 ai 说什么呢？我相信这个是很多人的一个问题，不然用 ai 做产品的时候，都是直接告诉他，你帮我做一个网页，帮我生成一个产品，或者帮我去做一个功能。然后但是呢，呃， ai 给你的反馈就是很白痴，很无脑，然后非常不平稳的需求。 所以在这种情况下，我们往往都是说完一句话之后就弃用了这个工具。但是我作为曾经一样跟你用 ai 有 相同困惑的小白，已经用短短的两周时间， webco 定出了两款我自己的产品。 今天我就给大家总结一下在这两周内我学到的如何跟 ai 去对话，提升我们跟 ai 沟通的能力。那很核心的观点是，我们现在本身是小白，那么与其我现在给 ai 去下指令，不如让他反问你，这是很巧妙的方法啊。因为我们现在在想要 ai 去做产品的时候，我们的第一句话其实并不是让他去做什么功能， 也不是让你指导他，因为他比你更聪明，更懂得如何用自己的能力做出合适你的产品。所以呢，我们的目的是要让他来管理你。所以非常关键的是什么？我们 第一句话的沟通应该是让他解决你的问题。那么如何系统性的提升对话的能力呢？想要系统性的提升我们跟 ai 对 话的能力，我们需要从模糊的表达变成具象的规格。我用了一个很好用的提示词，现在先分享给大家，你们可以直接照抄抄走。 这个提示词是，如果你现在是一名资深的全站开发工程师和产品经理，我想做一个什么的项目名称，但是呢我现在只有一个模糊的想法等和代码，之前请你基于产品的定位、核心功能和用户的体验，向我提出五至八个关键问题，等我回答完之后，我们再来去讨论技术护驾 这个提示词好用的有三点啊。第一个呢，就是他能够拒绝模糊化的表达，从让他帮我开发一个网页，现在变成了啊，就是 让他给我们提出五到八个关键的问题，同时倾倒出来我们的想法到他的对话当中，这是非常重要的。那第二个呢，就是他强行可以倒推你的思考，因为并不是我们现在没有解决方案，或者没有自己的想法，而是我们不知道如何表达出来。他通过现在有系列的问题让 ai 帮你提出，然后他去帮你规划整理， 然后再去啊生成一个产品，这就是非常完美以及能够把我们产品做出来的一种方式啊，也就是我们俗称的叫 p r d 产品经理使用的需求开发文档。那第三个是什么呢？就是我们现在在通过结构化的方式来去解决问题，而不是单单的给他输入一句话，这个是非常重要的。 如果想结构化的跟 i 对 话啊，让他帮我们做产品的话，我们有三个底层逻辑。第一个呢就是我们要先进行需求的结构，其实就是定义最小的可行性， 我们刚开始小白最容易就是贪大求全啊，我们什么都想要，所以在这个时候我们需要引导他来去制定一个 mvp， 也就是我们经常说到的商业化步的 mvp， 最小最小可行性产品。那么这个的方法是 什么？就是让 ai 把大目标拆解成一个功能的清单，这个是非常重要的。所以在这个时候我们应该问什么？问 ai， 就是 如果我想把我现在某个产品或者某个网页只保留一个核心的功能，它应该是什么？那在这上面的话，你会明确的感知到，就 这个核心功能是完全不可替代的。尤其在我自己做产品的时候，我发现就是他会给我提出十到二十个功能，但是在这里面的话，我学到的东西是什么？开发一个产品 最终能够让人家使用，而且用的很好的，一直都是在砍需求，砍项目、砍这些沟通，砍这些对话，砍这些功能，直接直到我们砍的不能再砍，而这几个保留下来的往往是两到三个，甚至是一个。你可以理解为越少的功能，它现在承载的这个能力就越强，这个产品就越能够达到你的预期。 第二个呢，就是我们需要去做一些风格的对齐或者内容的投喂，因为很多人我们现在想跟 ai 让他描述出啊，就是你帮我做一个精美好看啊、显贵的这种视觉， 是吧？那你这种形容词呢，其实都是主观的，包括我们漂亮啊、极简啊这些。所以你需要做的是什么？我们需要给 ai 去投入一些或者投喂一些参考的东西啊？它可能是一个情绪版，可能是一个参考系，比如你想让 ai 给你实现某种风格或者某种视觉，那你就其实就可以跟他说我的审美更偏向，比如说无印良品这种极简风格， 然后你不要使用很多的表情以摸计啊，整体呢，色调采用黑白灰，请参考这类美学啊，来构思我们现在的视觉呈现。 你包括我自己的社群展示页面啊，我跟他沟通的也是，我偏向用哲学和思考的一种方式来呈现我的这种 视觉的表达。那我希望可能用宝石蓝的颜色啊，然后以及某个奢侈品的名称来去具体化的把我们的主观的形容词变成一个他可以参考的东西。那如果在这方面，比如说你想不出来你自己的这个就是，呃， 风格和颜色是什么，你可以直接截图啊。第三个我学到的最重要的是什么？就是我们要模块化的推进我们现在的产品，不要一股脑把所有我们想要去解决的问题生成的东西都塞给 i。 呃，这个就是 web 定的一种精髓，就是我们不要让 ai 一 次性整体写出一个网站。呃，这样的话通常会产生大量的 bug， 这种 bug 很 可能是关联性的，很多的问题你是无法从中抽丝剥减出来的。所以具体的策略是什么？就是先搭骨架再填肉啊， 我们需要先把，哎，就是我们产品的定义，刚才第一步的那几个问题，大家知道吧？把它总结出来之后呢？结合上我们的 u i 设计的这个定义，这两个层面一起发给 ai， 那 我们可以把它整理成两个不同的文档啊，然后一起发，这样的话就能够让我们现在的这个就是 ai 知道我们现在用 什么样的风格，用什么样的功能来呈现你的产品，这个就是非常重要的。那我也给大家整理了一个用 ai 做产品的沟通公式，那么这里面分为 s、 c、 o、 r， 它分别解决的是场景、核心和约束和参考，是一个具体的工作流。当我们呃再去跟 ai 沟通的时候，我们可以把 这个工作流直接扔给 ai， 让他去对我们提问，这样是更分外一种方式啊。录视频不易，也希望大家给我一个鼓励留下。真棒棒啊，就可以拿我这套 ai 的 沟通公式，我用 ai 做产品用到的，我总结过非常好用的十个提示词的一个文档，关于如何用 ai 做产品和我开发的实用工具啊，已经在 已经发了有五十多篇内容了，记得如果你是新粉的话，记得去主页补课，也点个关注。如果你想系统性的从零至一学习 ai 做产品，也可以加入我的社群，往期所有的文档呢，我都更新在了我们的社群内，也可以跟我在群内有深度的交流，我们下期见。

上一期给大家出了一期超长的四十五分钟的 ai 编程视频教程啊，还是挺受欢迎的，有很多朋友都在后台私信我，向我索取我视频里面用到的几个资源，包括那个思维导图啊，还有 啊，就是设计稿啊，但是实际上那个视频是录给我们学校里面参赛的这个学生的一个视频教程，其实跟大家的需求不是特别的契合啊，那正好我今天又要开发一个新的小系统，那我就以这一个小系统为例，来给大家演示一下 ai 编程的全流程。 那么今天我要演示的呢，比上一次还要再完整一些，上一次只是说做一个嗯，不太能用的 demo 出来，那我今天希望它能有一个完整的功能 来实现我的一些需求，是吧？那我的需求其实还是为了这个比赛啊，就是上一次啊，大家报名参赛了之后，现在东西已经做的七七八八差不多了，需要把参赛作品提交上来了。 然后呢，我发现，嗯，他们比赛，特别是 a 赛道的同学， a 赛道是算法赛道，他们训练的模型是超级大的啊，大概有两个 g 左右吧。啊，那么他在提交这个作品的时候啊，就很不方便啊，就无论是用网盘的形式提交，或者是 啊考过来，其实都不是特别的理想，所以我就想借着这个机会啊，做一个参赛作品提交系统，正好也给大家演示一下啊，我是怎么样用 ai 把这个啊小系统给它开发出来的。那么我们就开始吧。 首先啊，首先我会先跟 ai 聊天儿，把我的需求聊清楚，然后我会啊，用设计工具把这个圆形图给它设计出来，然后我再把这个设计稿去生成前端代码，然后我再 让 ai 帮我把匹配的这个后端代码给它写出来，这个就是我打算做这样一个系统的一个思路啊，那么我选举的工具就是聊天儿，我打算用这么奈 谷歌点 com 这样的一个 ai 去聊啊，为什么用这么 nice？ 其实你和豆包聊也没有什么太大的区别啊，就如果做一个小系统的话，其实区别不是特别的大，但是我还是选这么 nice， 那 是因为我后面， 我后面设计工具我打算用 stitch 啊，然后我的那个啊，生成前端代码的 ai studio 是 吧？ studio 点 google 点 com 我 生成代码的那个工具，我是打算用 a s 丢丢，所以这三个网站都是 google 家的。我就想着那我聊天的时候还是，呃，也用 google 家的，他们 google 家的全家桶的话，可能会呃配合得更加默契一点啊，这是我的一个思路。嗯，那么首先第一件事就是先跟这么奈聊一聊我的需 求，那我们让 ai 写写，写项目的时候，你当然也可以一句话，比如说我现在打开 v s code 啊，然后我也可以，比如说我新建一个啊，它右边就有是吧？右边就有啊， 帮我开发一个，嗯，比比赛，嗯，作品上传系统啊，它其实也能帮我开发好， 但是他做出来究竟是什么样子，有没有非常契合我的需求呢？我觉得很可能是不会太契合我的需求，所以我一边，一般来说，我会先跟啊这么那聊一聊我真实的需求是什么。 嗯，那么我们仍然是用语音输入法，语音输入法电脑端我用的是讯飞的语音输入法，用这个是免费的啊。手机端我用的是豆包输入法，明显比电脑端的讯飞要好用一些。 我想用 ai 帮我开发一个学生参赛作品提交系统，帮我生成两段提示词，第一段提示词是跟 google 的 stitch 交流生成设计稿的提示词。第二段提示词是股权后端代码生成完整系统的提示词。 那么我先介绍一下这个系统的需求，我会通过线下的方式把参赛队伍的用户名和密码的登录信息发送给选手，选手可以直接登录系统来提交他们的作品。 选手登录进来之后，首先能够看到他们的报名信息，报名信息包括队伍名称，呃， 还有参赛队员的，嗯，列表信息，包括啊，所报名的是哪一个赛道，报名时间，然后接下来紧跟着一个表格是参赛队员的信息啊，包括， 呃，学生姓名，学生 包括学生姓名，学生班级，手机号等信息，还有他的身份是否是队长这样的一些信息。那么这个信息呈现出来之后，能够让用户去确认是否有误， 如果确认无误，就可以提交参赛作品了。如果信息有误，不，不要允许用户自己去修改，而是提示他联系老师在后台进行修改啊。那么参赛作品的提交是 要学生把所有参赛的内容打成，打包成一个或者是多个压缩包，直接在系统里面上传，那么这个压缩包 他就有可能会非常大啊。我们需要限制一下这个单个压缩包的大小，限制为一个 g， 然后允许学生上传多个压缩包，这样的一个形式 你看一下啊，我想，我想用 ai 帮我开发一个学生生成的第一步， go to steam stitch s t i t c h 交流生成设计稿。第二段是提示股权后单代码 生成完整系统提示信。那么我先介绍一下系统需求，我通过线下方式把它发送学生直接登录学生介绍，首先看看报名信息，报名时间，接下来紧跟一个表格是这个信息， 这信息能让用户逻辑有误不，不要允许用户自己去修改，而其他年要是在后台进行修改，那么参赛作品呢？即将是学生把所有参赛将打包成一个或者都压缩包，直接在系统里面上传，那么这压缩包就有可能非常大，我们需要限制一下这个，当然会限制为一个 g， 然后允许 允许上传多个压缩包，对吧？这个就是系统的需求。嗯，然后我还要跟 ai 介绍一下我开发的流程，是吧？我开发的流程是先让这么来生成提示词，再让 stitch 画界面，然后再让嗯 as do do 生成前端代码，然后再让嗯，对，我现在就可以和他说我开发这个系统的流程是这样的，我会先跟这么奈沟通需求，生成提示词，然后把提示词第一段提示词丢给 google 的 stitch， 让 stitch 来帮我设计前端界面，然后一键导入 google 的 ai studio， 生成前端代码，再把这个前端代码打包下载，放在我的本地的工程里面，用 vs code 打开， 用 github code palette 补全后端代码，完成整个系统的开发。所以现在请你帮我生成两段提示词，第一段提示词是 给，是给 google stitch 的 提示词。第二段提示词是我完成了这一系列的流程，前端代码已经导入本地的工程了，之后让这个，呃 copilot 补全后端代码的提示词 让这个啊，嗯，我读 stitch s t i t c h 是 吧？ git hub git hub h u b 啊， git hub git hub violet 是 吧？ 嗯，差不多就行。然后呢？嗯，跟他聊天的时候可以选择 cking， 也可以选择 pro。 其实我们可以选择 pro， 因为每天有两次吧，好像每天有两次跟 pro 对 话的一个机会啊，所以我就可以直接丢给他，让他去生成了。 他说这个开发流程非常清晰且高效，利用 ai 生成 ui， 在 结合本地工程和 gitpalant 的 股权，后端是目前非常主流且强大的全站开发模式啊。顺便温柔的提示一下， google 目前公开的基于 ai 的 全站前端开发平台主要是 project ids 以及强大的 google。 啊，不是啊，我，我说的这个 stitch 是， 是 google 的 stitch with google。 嗯 嗯，好吧好吧，无论哪使用哪一块，那么下一段都是可以直接去使用的。他说第一段提示词是这样的啊，直接粘贴过去。您是一个资深的前端 开发工程师和 u i u s 设计师，请帮我设计并生成一个学生参赛作品提交系统的前端界面，要求界面风格专业简洁，包含完整的交互状态。嗯，适合学术和比赛场景。对的，然后是要有一个登录页面， 登录页面剧中的登录元素输入框。这个其实无所谓啊，登录页面做成什么样都可以，参赛信息和作品提交才用户登录成功后进入主控台，包含以下从上到下三个核心模块，模块 a， 报名卡片信息只读是吧， 然后用卡片信息清晰展示，模块 b 是 参赛队伍信息表，展示一个表格。对的，没错，学生这些身份。 嗯，信息有误，点击信息有误就告诉他，请联系周老师在后台进行修改是吧？然后模块 c 是 作品上传， 可以拖拽或者是点击上传，然后允许上传多个文件，仅支持压缩包格式，对，单个压缩包限制为一个 g 是 吧？交互效果，有一个进度条，包含最终最终的提交作品的大按钮。嗯，对的，没错，然后请生成完整的 u i， 最好是配合为 act。 嗯，这个倒是没有必要啊，因为对于提提这段这段要求我们可以提给 ai studio， 而不是提给 stitch， 是 吧？我去关个厨房的门，炒菜的声音有点响， 那么，那么我们就把这个前边的这一块给它复制一下，粘贴到这个 stitch 里面 啊， stitch 里面，这是它的首页。我们是选应用还是选 web 呢？一般来说是选 web 是 吧？啊？应用的话它会给我们做一个 mobile app， 就是 手机的 app， 但实际上我们是想做一个网站啊，这边选择是用哪一个模型 就要不要新品，可以新品是吧？可以新品一下试试看啊，那我们就选新品啊，这边还可以上传上传文件或者上传网址。那我们没有，就是这段提示词给他粘过来就好了。 ok， 好， 发送，然后就让他开始进行设计。 嗯，又让我再确认一次，是吧？发送， 所以眼睁睁的这两位 现在他已经设计出来了，但是他设计的这个界面是英文的，我肯定不希望他是英文的啊，我忘记跟他说要中文界面了，他现在好了吗？已经停下来了，是不是 来？我在这里直接直接跟他说，其实我登录界面长成什么样子没有关系的，我不是很在意这个登录界面，我主要关心这个 student dashboard 的 这个界面，是吧？那我就选中这个界面，然后跟他说改成中文界面， 现在界面已经在生成了。 好，它已经生成好了，我们一起来看看这个界面啊。就是首先是赛事报名信息，队伍的名称是吧？队伍名称，报新时报报名时间以及它参赛的这个赛道啊。然后是参赛队员信息，下面是所有的参赛队员信息， 嗯，信息确认物，然后就可以上传作品，是吧？然后是作品提交，这样一个作品提交最终作品， ok， 没啥问题。那 submission 和 support 我 感觉好像也不怎么需要吧，是吧？如果 submission support 我 们其实并不怎么需要的话，可以选择右边的这个。嗯，这个 direct edit。 其实你看我刚刚让他嗯把它改成中文，其实还是没有没有完全能改成中文啊。那我现在先选这个标题吧，然后 id text 把它改成。嗯，无锡职业技术大学。嗯，瑞康城碑 啊，人工智能。嗯。啊，什么来着？人工智能与软件开发竞赛啊，作品提交系统啊，就先先这个样子，有点长是吧？ ok， 这个就编辑好了，然后这个大师抱的我们可以 blackmail 其实我们也不怎么需要，是吧？哎。 blackmail 的 我们也不需要，给他删了得了。然后呢？ submission 其实我们也不需要啊，就也就也删了好了。 support 我 们也不需要，也删了好了。 ok， 这些就是。嗯，这个这个我们也不需要。 嗯，但是我们现在删他有点麻烦，因为他不是文字不方，不太方便直接改。嗯，下面还有什么需要修改的吗？稍微放大一点看看啊。嗯，这边收起来放大一点。健康成杯参赛信息，哪个赛道？队员信息 是否有误？文件拖拽是吧。嗯，然后上传，上传了之后就 就提交，提交最终作品就可以了。就可以了啊。好，那我现在对我这个界面已经是满意的一个状态了，所以我现在就要用它来去生成 生成前端代码。那我们直接点右上角的这个导出，我们要选中这个 student dashboard 啊，然后直接选这个导出选 ai studio， 然后这边有一个 description 啊，你要描述一下要干什么是吧？那我们再回到刚刚的那个 jimmy 里面，它下面有一句话， 请生成完整的 ui 代码，最好是 act 配合这个玩意儿或者你擅长的现代前端站，然后包含上述所有状态切换。嗯的 mock 逻辑是吧。哦，那如果还有上述的话，嗯，有信息确认后解锁上传区域， 嗯，对吧。就是如果还有还有这个给它给它也复制进去是吧。哦， ctrl c 来，转过来 ctrl v， 然后我我再把前面那段洗脑的内容也给他发过去吧。哈哈，你是一个。嗯也其实也不需要，因为界面已经有了。 好吧， ok， 那 我们就就点击 build with ai studio 是 吧。点击 build with ai studio， 然后把这个信息提交过去，它就会自动的打开 ai studio 的 界面，然后我们先 skip 一下啊， ok， 然后它就它就会自动的把我们刚刚在 as 丢丢里面选中的这个大事报的相关的信息给它导入过来了，包括截图啊，还有 h t m l 相关一些东西。那么这这里面呢，我们还可以再重新去编辑一下这些相应的信息，是吧？ 其实也没什么好编辑的啊。嗯，因为，因为，呃，后面的这一段就不要了。 you can link images from the html 这个，这个也不要吧也不要吧，我们只要只要这一些信息就行了， 是吧？然后直接点击 build， 它就可以去创建了。 好，现在已经生成好了。那其实这个界面说实话我还是有点不满意的，那它这个深蓝色的色调，还有这个绿色的色调，我很喜欢， 结果到这里面来就变成了 ai 紫，哼哼，就变成了 ai 紫，怎么会这样呢？哎，但是算了，其实也无所谓啊，也无所谓，因为这个，嗯， 可能是因为我的提示词太长了，因为之前我我都是直接就是把它练过来之后跟他说让他把这个前端界面实现，他就可以，嗯，非常好的去实现它，但是现在因为我的提示词太太强太长了， 嗯，或者要么我我就不加提示词，再重新生成一个吧。这个，然后导出 ai studio， 然后就是完成前端代码啊，就直接这样简单一点，它可能就反而会更好一点，是吧？ build with ai studio， 我 们再来一个啊， 反正是免费的，就就就这样吧，我我也不需要它好好拎可前端代码，直接让它 build 就 行。 好，那已经生成好了，我们来看一下这一次，因为我们的提示词是比较少的，它反而生成的跟原来的这个样式会更加像，是吧？ 控制台作品提交和支持，嗯，然后呢是致密三，致密三啊，我知道了，他的意思可能是当我滚到下面来就直接进入到作品提交这个页面了，是吧？ 好，代码写好了之后，我们其实是可以直接在这里看他写的代码的，所有代码都是可以在直接在这边就看到我们点击这个扣的按钮就可以切换过来。那我现在其实并不想关心里面的细节，我只想把这个代码下载下来，让 ai 继续去写后段的代码，是吧？那我就直接点右上角的下载， 他就会帮我去下载好一个压缩包来打开，嗯，我剪切到桌面上来去进行操作吧。粘贴 打开看一下啊，打开看一下，里面就是我们所有的这个代码了，所以其实其实我们这个工程是一个前端代码， 对吧？是一个前端代码啊，我直接解压缩到这个压缩包的，他就会生成一个 这样的文件夹，然后我再创建一个，我再新建一个文件夹作为我们的项目的这个根目录。啊，叫什么 啊？我看他起的名字蛮好的。呃， scottys it is a student dashboard student dashboard scotty， 嗯，算了，这叫 file file f i l e up load 的 啊， system 好 了， s t m file upload the system 是 吧？就这样的一个空文件夹，我创建了一个空文件夹，然后呢，我把这个这个代码文件夹，我把这个代码文件夹整个的拖到我这个空文件夹里面去啊，然后给它重命名一下叫 叫 frontend o n t， 给它取名叫前端啊，然后再来新建一个文件夹叫 backend。 那这样的话我就认为这一个文件夹是我整个工程的文件夹，它既包括前端工程，也包括后端工程啊。然后我把这个文件夹右键通过 code 打开， 是我新人作者，对吧？这样的话前端代码就已经在这里面有了，我只需要让 ai 去帮我们补全后端代码就可以了。那么我们再回到刚刚的这个网页里面啊 啊，这么奈，他不是除了写前段代前端的提示词以外，还给我们写了一个后端的提示词吗？是吧？后端，当你把前段带我们导入 vs code 之后，可以在我拍了的 chat 中发送这段提示词，或者作为底部引导 p i 生成，是吧？你是？ 你是一个什么样的身份？我已经完成了前端部分，需要你补全后端生成 restful api， 请使用 node 关系型数据库。嗯，这个地方我其实希望稍微改一下，因为我不想让他用关系型数据库。咱们这个系统参赛的队伍总共就只有二十几个队伍，所以最后的用户数量和数据是非常非常少的，所以我不需要用关系型数据库，只是它的文件会特别特别的大，是吧？ 所以我我其实希望他用文件数据库，比如说就完全免安装的那种，比如说 h 二，或者是呃， circle light 这种数据库。那等一会我要把这个地方修改一下啊。核心需求与 api 设计是 数据库模型啊，这个，然后接口需求是吧？接口需求是这个样子的。嗯，难点处理。对，要处理大文件，允许上传多文件，单个文件处理，大文件上传，然后配置中正确的中间键。 那我这个地方我不如我不如跟跟。这么，那你再聊一下，让他把后端的这个提示词再重新去生成一遍，是吧？就不要我自己手动去修改了啊。 我可以跟他说，我打算用 python 语言做后端啊，数据库直接用文件数据库，比如 sqlite， 帮我重新生成跟 github 聚合对话的提示词， ok， 比如 supply s q l light， 我 我读的不太准，是吧？跟 github 和 pilot 对 话的提示词， ok， 它推荐使用流写入，然后用 fast api 框架是吧？ 那很好啊，现在我就不用再看了吧，是吧？然后这个队伍表，然后他数据库设计都给我设计好了，接口设计也给我设计好了，是吧？然后生成 excel， 数据库健全， ok， 那 我就来复制一下啊，复制到到 vs code 的 里面去。那么首先我们还是先打开一个新建聊天编辑器，把这个提示词在这里丢给他， 是吧？我就不看了吧。你是一个自身的，我已经完成了前段部分，需要你去，你去干这些事情，是吧？然后我模型选的是 cloud o p u s 四点六啊，这个模型是明显比其他的模型要好很多，所以我宁可多费一点这个对话次数，我也要用它。 然后模式选 agent， 选 agent， 如果选 plan 或者是 ask 的 话，选 agent 只能聊天，选 plan 它只能做计划，选 agent 它就会自己去里面读。呃，我现在已有的一些工程了， 我要选 a 正的，我就不附加上下文了吧。我没有什么上下文好附附附加的，你想一想是没有什么好上下文好附加的，对吧？我就是纯文字啊，好，丢给他，让他开始做吧。 好的，他现在就帮我写好了是吧？并且给我一个总结，他说已经全部干完了。后端是这个样子的，嗯，三个 api 接口分别是这个，然后大文件保护机制是这样的启动方式，他告诉我 cd 到 by and 啊，对吧？然后，然后去安装这个快门子，然后去手速运行抽象数据库，是吧？然后启动这个后端服务， 然后告诉我四百个交互文档地址是这个。 ok， 那 我首先先把它修改的这些代码都保留下来，我就不看里面内容了。那刚刚他是帮我把后端写完了啊。 呃，现在我想让他做的是，嗯，我也不想自己去启动啊，就是自从有了 ai 之后，我发现让他来帮我启动部署测试比我自己去敲命令还要方便啊。所以无论你懂开发还是不懂开发，其实都可以让 ai 去帮你，就你所有不会的事情都可以让 ai 去帮你做，是吧？ 嗯，那么我还有几件事情要做，我可以一次性的丢给他啊。第一个就是第一个就是我的参赛队员信息，我存存储在我本地的一个瑞康城杯的一个 excel 里面啊，就是这个瑞康城杯比赛报名信息啊，这样的一个文档里面。那这个文档我就 不给大家打开看了啊，因为因为视频里面如果出现学生的信息其实也不太好，是吧？我就把这个文件 ctrl c， ctrl c， 然后粘到这个 工程里面来， back end， drop end。 嗯，再放一个，再再新建一个文件夹吧。 叫什么呢？ d o c s 我叫 scripts s c r i p t s 吧，叫 scripts 吧，因为我等一会还想让他帮我写一键部署一键启动的这个脚本，我希望他放在这个 scripts 里面。然后我们也把这个 excel 文件给它粘过来啊，把瑞康城杯比赛报名信息的 excel 给它粘过来， 粘过来之后我们可以让他干这么一件事。一啊，我的比赛报名信息 在在 script 文件夹下啊，请你读取里面的信息啊。将，将数据导入数据库 将数据直接导入数据库直接导入数据库。嗯，并给每个队长嗯，并给每个队长 创建好用户名和密码啊，用户名是手机号密码，你帮我生成每个对 不同的，嗯，八位数密码。八位八位密码也别数了是吧？ 帮我生成每个队不同的八位密码。嗯，这个密码我是需要知道的啊，并且我需要通过短信发送给学生的，所以，所以这个密码还得让他帮我存下来。嗯， 让他帮我存在。存储啊，创建一个新的 c s v 文件啊，存储，存储 用户名密码信息，方便我整理发送，是吧？这是第一个要求啊， 然后我想想让他干什么呢？嗯，就是他现在是把后段代码写好了，是吧？然后前端代码啊，肯定会有一些不适配的地方，比如说前端代码肯定会有一些假数据，所以第二个就是让他去修改前端代码。嗯， 修改前端代码，已适配后端。嗯，删除。嗯， 删除。他刚说叫 mock 数据删除。嗯，测试数据。嗯，改为显示真正的数据吧嗯， 改为真。真正从数据库加载数据啊，是吧？就把前端代码生成数据改为真正从数据库去加载数据啊， 并适配后端 api 是吧？嗯，然后第三个，第三个我是希望他帮我，帮我运行起来是不是？然后三个是，嗯，帮我将， 帮我将将将前后端代码都运行起来，如果运行过程中有错误，修复错误，直到。嗯， 系统可以完整使用，是吧？然后第四个我还想让它做做什么呢。啊，就是帮我写啊，一键运行和一键部署的脚本 是帮我在啊 scripts 文件夹下生成一键 一键运行和一键部署脚本，方便我后期使用。 嗯嗯，我得告诉他一下。嗯，我现在是在就是 windows 电脑上是吧？嗯，开发机，开发机和服务器都是 windows 时的电脑， 有什么别的要让他干的事情吗？没有了我们就点发送了啊，比赛信息。 好， ai 已经帮我们把这个。呃，工程已经写好了啊，我们稍微看一看它写了什么。 嗯，所有任务已完成，然后系统是这个是在运行中，前端也在运行中， api 代理是用这个转发的，均已验证通过，然后修复了一些问题， 然后创建的脚本来看一下它是在是后端。这个是前端在 scripts 文件夹里面创建了这样的一些脚本啊，就是一键启动开发环境，一键停止所有服务生产部署生产部署并启动，然后是配置后端直接提供静态文件 是吧？那我其实。嗯哦，使用方式这里有说。开发环境就直接双击这个访问 local hold 三千就行了。生产服务器是双击这个浏览器访问 local hold 八千。啊， 好的，那我就来看一下啊。开发环境 start 第一 v 这个是吧？右键在文件资源管理器中打开，然后去双击它， 他就可以启动了。哎，这个算启动出来了吗？ 嗯，然后他告诉我启动在三零零幺，可能是因为，因为他刚刚不是告诉我说后端和前端都已经在运行中了吗？是吧，所以他把它 启动在了三零零幺这样的一个路径下面。啊，我刚刚好像还看到了一个什么。来这里按任意键打开浏览器访问系统。那我就按任意键打开。嗯，确实是啊。然后这个 参赛，这个我能登录吗？不能吧，用户名密码错误，它，它要用我导入的那个 excel 里面的内容作为用户名和密码。那我就来开一下，在这个 scripts 里面有有这个生成的， 生成的 credentials csv。 那 我打开看一下，去复制一个手机号，然后呢？再去复制一个密码， 然后登录这个先先调我存一下吧。好的，那么这个队伍的信息就可以看见了，就是这个同学是队长，他有两个。呃，队员， 然后确认。如果是信息有误啊，请联系指导老师在后台进行修改，系统暂不支持自行修改。 嗯， ok， 我 取消吧，对吧？嗯，我就直接点信息确认无误，然后去上传文件就行了。我上传要找一个压缩包上传吧，我看看。啊，有压缩包吗？这里 这里有一个压缩包，比赛到眼。哎，这个压缩包不错，这压缩包有二百多兆呢。啊，这有二百多兆就用它了， 来测试一下浏览文件，找到我们的瑞康成杯的压缩包。那个这演示视频是比较大的，就直接 快速的上传上来了，然后提交最终作品就可以了。我把这个叉掉了啊，因为我一旦提交了，那这个爱迪邦你办这个同学就提交不上来了。 ok， 那 我觉得嗯，不对，我还是要还是要测试一下，我来退出登录，因为，因为我希望他上传上来之后的作品是要，嗯，比较恰当的命名的，对吧？啊，我这个限制忘记跟 ai 去提了，那我就再让 ai 帮我干点事情吧，对吧？嗯， 一个是系统运行状况，状况非常好，嗯，现在帮我生成，帮我生成一个测试账号和密码。 哦，这是第一件事，然后第二件事就是啊，用户上传上来的压缩包文件要恰当的命名啊，就是这 up 啊，它里面已经有测试了，是吧？ 啊，哦，我我我，上传上来这个压缩包啊，虽然说，嗯，虽然说我取消了，但实际上文件是上传上来在这里面，那我希望这 up 里面的文件可以恰当的命名啊。用户上传上来的压缩包，嗯， 怎么命名呢啊？用以下方式命名命，命名，冒号啊。队伍名称加，先是赛道吧，赛道， 嗯，加，再倒杠，队伍名称杠，嗯，原始文件名，是吧？原始文件名， 那就可以了吧，因为每个队伍的名称都是不一样的，赛道加，队伍名称加原始文件名，对吧？嗯，方便方便，我直接靠背给专家做庭审，是吧？这就是我的一个需求。 嗯，还有什么其他的要跟他说吗？整个系统的状态我还是非常满意的，是吧？ 嗯，这个没有，这支持也没有。嗯，那我就也可以跟他说一下，我截个图吧， 我截个图，然后标个红色的框，是吧？嗯，控制台作品提交和支持按钮全部都给我去掉，我并不需要，是吧？ 再回过来啊，然后 ctrl v 粘贴一下这个图片，你鼠标指上去可以看得到哈。啊，粘贴一下这个图片就是，嗯，控制台，嗯一嗯二， 然后三给他加一个序号啊，三界面上，界面上的控制台， 嗯，还有什么来着？直接看这个图就行了，是吧？控制台，作品提交和支持作品提交支持按钮，嗯，都去掉，是吧？ 还有一个问题，就是就是用户如果传上来这样的一个文件，但是他最后又取消了，嗯，没有最终做保存， 我是不是要处理一下？用户上传上了压缩包，用户上传上来，嗯， 并且确认提交的压缩包用以下方式命名啊，对吧？方便我直接拷贝给专家做评测。如果只是上传没有确认提交， 则仍仍仍沿用目前的 命命方式，好吧。啊，这样子好，开始干活吧，我的小牛马。上面这个先给他点一下保留是吧？所有的我都要 ok， 然后开始干活。 好，现在已经写完了啊，他告诉我用户名是 test， 密码是 test， 一 二三四， 嗯，然后才队员，队长提交的时候会重新命名，是吧？然后这个三个按钮已经移除了啊，他把底部的移动端导航栏也给他移除了，就是没用的东西他都给我删掉了，可以看到就是 o p u s 这样的一个模型，它就是会替我们考虑的非常周到。我们保留一下，现在可以测试了。他刚刚说在 local hold 三千已经跑起来了，是吧？那我们就直接在 local hold 三千去跑 local hold 的 三千， 然后用户名是 test， 密码是 test， 一 二三四，是吧？然后这个是测试队伍，嗯，确认信息无误就可以上传了。然后呢？我就上传一个赛提比演示视频。 嗯，那我再再上传了，对的，好的，然后我们先来看一看啊。先来看一看我们上传了之后 up log 里面是不是有变化，是吧？还有一个二十八 是吧？这个是他后来测试的这个 c t b 演示视频点这个应该就是我现在新上传的，因为一是上一次测试的时候的一个结果， ok， 然后再回过来，现在我点击提交最终作品，然后他就会告诉我已提交成功，是吧？已提交成功。已提交成功了，我还可以删吗？ 我还可以再增吗？对吧？你提交成功按理来说就不该让他再可以修改了，是不是 test 和 test 一 二三四去登录是吧？然后它也没有显示我已经提交了哪些作品，然后我的确认信息无误也没有存储下来，是不是确认信息无误之后它应该是，嗯，显示已确认， 然后这个参赛作品我已经提交过的，他就应该是显示已经提交过的那个内容啊。所以这些 bug 还是需要我们人去手工测试一下这个流程，然后把这个问题发给他。那么第一个问题就是， 呃，用户点击，用户点击确认信息无误之后，呃， 我直接来写啊。第一个问题，我还是用语音输入法吧， 用户点击确认信息无误之后，将不能将确认状态存储到数据库，并且界面上显示信息已确认，对吧？ 这是第一个要求，然后第二个要求，那个要求，嗯， 如果用户已经提交最终作品，对吧？如果用户已经提交最终作品，那么将不允许再重新提交或修改。 如果用户已经确认提交最终作品，将不允许再修改或者删除文件啊，而是只能下载查看，是吧？而是只能下载查看， 然后呢？然后还有一个问题就是，嗯，用户如果这个文件已经上传了，那么他下一次他刷新，嗯，对吧？他他下一次登录进来，用户如果已经上传 文件，但是没有点击提交的话，他下一次再登录进来，应该可以看到他之前已经上传的这个内容。 如果用户上传了文件，但没有提交最终作品，那么下一次登录进来，他应该仍然能够看到自己已经上传的这个文件， 对吧？ 然后我还想给他加一个提交时间的倒计时，就是因为我希望在今天是三月二十二号啊，我希望周三的早上八点钟我把这个系统关闭，是吧？所以我在这边要给他显示一下。呃，倒计时，嗯， 好，我希望三月二十五号，嗯，四， 我希望这个系统在二零二六年三月二十五日早上八点钟完全关闭，所以请在恰当的位置给用户显示一下。嗯，作品提交倒计时， 嗯，早，所以提交作品，作品提交倒计时，是吧？看一下还有什么别的要加的功能吗？ 其他的应该没什么了，是吧？ ok， ok ok， ok， 那 就开始干吧。嗯，那么之前我都是用 o p u s 这个模型去写的，这次我想给大家换一下 g p t g p t 五点四吧，好吧， g p t 五点四， 嗯，看一下啊，应该就是 g p t 五点四，还可以，因为我感觉 g p t 五点四写后端代码还是非常好的，它用来得 bug 非常的不错。然后呢？ 而且它是一倍的计费嘛，如果是 obs 就是 三倍的计费，我也要省一下我的额度，我这个月的额度已经告急了， 所以我换 g p t 五点四给大家展示一下啊。来，敲个回车。那 g p t 五点四它的特点就是，嗯，它也能做前端，它它的后端比较强，这是肯定的。它也能做前端，但是它的前端啊，只是能用的状态，嗯， 没有任何设计感啊，所以它做功能蛮好的，但它审美还差点意思，审美的话是这么奈会更加好一些，但我，我的话，我我。项目的初设创建一般都是用 o p u s， 因为，嗯，它是全方位的强大，特别是在需求分析的时候，它非常的全方位的强大。 看一看啊，他已经写好了。干了这么多事情啊，告诉我，嗯， 报名信息会写入数据库已确认，对吧？然后最终作品提交就会只读。嗯，重新登录，仍然能够看到已上传的文件列表。 二零二六年是对的，早上八点钟后端新增对持久化的这个状态，嗯，对吧，我可以用 test 的 账号去确认，确认了之后， 嗯，对吧，然后他告诉我连登录也不允许，连下载也不允许，可以改成全站关闭。其实不是的，其实是二零二六年三月二十五号八点钟，我会 直接停止这个服务，这个网站就会直接打不开，因为我是用我的台式机做服务器的吗？我肯定不可能让他一直跑的。 ok， 保留。那么接下来就来测试看一下啊。刷新是吧？刷新， 嗯，然后这个是已提交成功啊。登录信息已确认信息已确认，然后已提交成功，那么，嗯，这个是倒计时是吧？ 两天差不多是吧，然后我还是可以下载的。下载是没有问题的啊，可以删掉，他就不下载了。嗯，让我想一想啊，我已提交成功，我是不是应该在数据库里面把这个已提交成功给他去掉，然后才可以 就是。嗯，重新去测试，不然我这个测账号不是废掉了吗？那我就用用我的数据库工具啊。用我的数据库 在哪里？在这个 link 数据库工具 navigate， 我 用我的 navigate 去打开一下这个。嗯，后端代码里面的这个啥呢啊？ app 点 d b 是 吧？它应该是 circulate， 所以 我直接用 navigate 去打开就可以了。 嗯， 现有的数据库文件，然后这个数据库文件选选选，我刚刚那个工程是放在桌面上了是吧？ file upload system back end， 然后 app 点 d b， 用户名密码是没有的，测试连接没有问题。确定 submissions 对 吧？ submission 这里面的 confirmed， confirmed 应该改成一，是不是啊？应该改成零，就是未确认这样一个状态。打勾，然后再来看一下这个 teams 啊， teams， teams。 哦，我其实不用改这个小妹身子是吧，再改回来啊，再改回来 team 里面的，找到我最后一条 test， 然后这个提交状态给它改成零，然后这个时间可以清空吗？ 对吧？然后这个东西也给它改成零。 info info confirmed 和 final submitted。 ok， 打个勾，然后再来刷新一下我当前的这个界面， 为了加个时间吧，二零二六零三 三零零幺，关掉了。 嗯，确实是因为我修改了数据库里面提示时间导致的这个报错信息。那我把这个呃确认时间和最终提交时间加上去之后，这个系统就没有问题了。所以其实我们正常还是不应该自己去数据库里面修改这些信息，嗯，那我现在就是 确认信息无误，对吧？确认信息无误，然后去现在我已经提交了一个草稿，然后我再提交一个文件， 第二个文件是二十四兆已经上传成功了，那这个时候我再来刷新我的这个页面，我上传的两个文件都是存在的，那么我退出登录，然后再重新登录一下，这两个文件仍然是存在的，是吧？然后我点击提交最终作品之后，就不可以再上传文件了，那么只能下载， 对吧？ ok， 那 这个系统就差不多了啊。那么因为我开发的过程中没有用 macq 之类的这个数据库 啊，它的命名方式也没有问题啊。再到 excel 这个附件，它的命名方式也没有问题。 所以说我整个开发过程中我没有用什么其他的数据库之类的东西，那我可能直接就运行这个 deploy and run， 在 我的这个呃另外一台硬盘很大的服务器上去运行，可能就可以直接给同学们去使用和访问了。好，那么我们整个视频 就讲到这里了，然后再回顾一下我们刚刚这个的这个过程啊，首先我们有一个需求，是吧？我们有一个需求，那这地方螺蛳粉的三级我来给它关掉。首先我们有一个需求，那么第一件事就是就是跟这么奈，或者你可以也可以跟豆包去聊天，让他去帮你生成 啊，相对比较可靠的提示词比你自己一行一行的去敲要更加轻松一些，然后把这个提示词复制给 复制给这个是 stitch with google 点 com 这样的一个网站，让它去生成对应的这个界面，然后选中界面导出到 ai studio， 然后给它提一些要求，导出之后就可以进到，进到 ai studio 里面，它就会帮你生成 生成这个啊相应的一些代码，当然代码里面会有很多的这种数据都是假数据了，所以我们仍然是需要再继续去完成它的后端的，那么这个代码是可以在右上角去下载一个压缩包，对吧？下载一个压缩包， 我们可以把它下载一个压缩包这样一个压缩包啊。然后我们可以自己创建一个咱们的代码后，把前端的代码拷贝进来， 然后创建一个空的后端这样一个目录，这样的话 ai 就 知道，哦，我后端的代码写在这里，前端代码写在这里，是吧？然后把相应的这些， 比如说我们在后端里提供给他的这个比赛报名信息，这些相关的文件就可以提供给他，然后在 vs code 里面用 code palette 啊，选择一个恰当的模型跟他去聊天，给他提要求，让他去完成我们需要的这个功能。那么开发好了之后，开发好了之后 啊，我们要自己去运行一遍啊，把整个过程中遇到的这个 bug 去修复一下啊，整个的这个流程测试没有问题了之后，然后再去再去运行这个一键一键部署运行的脚本就可以了。

今天我教大家一步一步怎么去根据我今天生成的我的社群展示页面啊？然后呢呃，把它去部署到一个在国内就可以直接访问，你分享给朋友，他就可以直接访问的一个网站，而且直接可以交互的来我们看一下， 嗯， ok， 这就是我现在做完的，就是我的产品啊，就是刚才的一个我社群展示的一个这种服务页面，然后呃我们从最开始来去看哈， 最开始就是我们先打开谷歌的 s studio， 然后这 s studio 的 话就是这里面有一个 builder 啊，这个 builder 点开 builder， 然后输入你的需求，然后当然我的这个需求已经输入完了，所以我点开我自己的这个 app， 它在这里面你自己生成的 app， 它会给你做一个归类，你看我现在生成的第一个是我的视频的，这个 就是转标题的，我自己的一个工具。然后第二个呢就是我现在社群的然后展示页面，然后把这个所有的流程，我怎么跟他对话，怎么生成的，我跟大家去说一下啊。首先呢就是我没有是单独在这里面让他写文案的事情，而是我跟谷歌的 jimmy， 然后呢先去把我的想要去说的东西，然后呢整理成一个文档， 也就是我现在的这个就是我我现在的这网页里面的内容，然后这个内容的对话，你可以跟谷歌然后呢去对话，呃，就是普通的这个 gemini 去对话就 ok 了，就在这啊看，就在这个地方，然后把它整理成文档啊，当然这个 这个其实就是我们产品的一个原型设计啊，然后你要告诉他我们的需求是什么，然后我的这个亮点是什么？就比如说你要设计一个关于你社群付费的这样一个页面展示， 然后在 ok， 你 有了这个文档之后，然后我们需要把这个文档就是直接丢给他啊？先下到本地也好，还是说是直接通过谷歌给他，就是共享云文档搁在这就 ok， 然后我跟他说，我说我首先说的是我想做一个静态的网站，因为今天我们不涉及到这个网站里面有 ai 的 一些这个 api 调用和交互 啊，因为那个是另外一个层面，我接下来也会跟大家再单出一期视频去分享。但是如果是一个纯静态的网站，就比如说你做了一个小游戏，它不需要跟 ai 交互，然后呢就和使用调动 a b i 的 话，那就是这样的东西，你直接在这生成就 ok， 那 我们继续来看啊，就是 我跟他说我想做一个静态的网站，是关于我要售卖的社群，做一个简单的动态演示，把我的核心内容做展示，然后他就开始啊去自己的设计啊，然后在这个部分上的话，你看他把我的内容，就是我把我的内容全都发给他了，然后呢他就开始设计这个网站，在这里面你其实不太需要去跟他说，就是我们设计的颜色或者怎么样， 呃，我们目的是让他快速的设计出来，然后同时他设计出来了一个版本之后，我们开始去微调，比如说当时的这个锁定早鸟架的这个部分，然后呢我需要让他去帮我做一个弹窗出来啊，也就是做这个弹窗 啊，然后呢让大家直接知道我的信息，是吧？我分享出去直接知道我信息，然后你就进行一些小的修改就 ok 了，然后这里面都是小的修改，然后当你这个修改完成之后定调了，是吧？ 啊？就当你这个东西修改完成定调了，然后呢你就开始做一件什么事情呢？你过来，过来，你不要过来太远，你正常跟我对话就行，没有问题，你有什么问题你也不问，你也可以问啊，这个东西我都不捡的。然后呢就是 在这边的话，你要告诉他，你要告诉他你要部署的网站是什么啊？就是部署的工具是什么？比如说我之前使用的啊，我之前使用的是叫一个微什么那个东西，就是这个东西 v e r c e l。 就 这个东西它可以帮你部署，但是呢它没有办法。是呃分享到国内，然后大家直接能打开，所以我找了一个又免费又能够直接转成分享的这个分享到国内的这么一个网站和工具，就叫这个，大家记住啊，我英文不好，大家要记住 netflix 是 吧？应该叫 netflix 啊，你们就记住是这个东西，然后点开之后， ok， 就是 我们现在进进去了，然后呢我进去之后呢？我现在需要的是什么？就是大家看到我这个产品不是已经做好了吗？然后点击 push， push 之后呢叫 github， 然后呢 github 会自动帮你去检查。然后就是你现在要上传是怎么着它，因为我已经上传完了，然后但是这块的话就没有办法更改，所以如果你是刚去升就生成完了之后，你把它保存到这，它会让你去保存， ok， 你 点击保存，它就自动已经放在 github 的 仓库了，然后 github 的 注册、 github 的 操作和怎么去做，这也是一套东西，我尽可能的把我现在所 知道的知识，知道的知识，然后到时候都录给大家，因为这个其实也挺麻烦的，我跟你讲，我搞了大概也一天多快两天的时间，然后好，这个东西我们搞完了啊，假设你现在搞完了，你需要做的第二步的操作是什么呢？你就要点开这个网站，点开这个网站后，然后有一个添加新项目，你看我现在已经上传了三个项目了， 就你现在就是添加新项目， ok， 这是个导入现有项目。然后呢，点击 github， 点击 a， 它不等它预览一下，预览一下之后呢，你就选择一个仓库，比如说选择这个仓库，是吧？然后呢就是团队名、项目名称，这随便填啊，就是只要是你知道了就行，然后这个地方 分支部署、基础目录、构建命令和这些东西都不用填。然后现在的问题是什么？如果我们是一个纯静态的，就是我们只需要展示，然后不需要跟它核心的，就是不需要跟 a， 不 需要调动其他的 ai 大 模型 啊，就比如说你需要 ai 回复，需要 ai 处理图片，这都是属需要 ai 调用大模型的。但如果是我们纯净它的一个网站，你也比如说啊，你在这里面输入就是 apikey， 这是一个核心问题，就你随便输入就行了，就随便输入，因为它不会调用 apikey。 然后呢，你点击部署，然后呢？刚才这个网页，刚才我们的这个网页 就已经会部署过去了，然后部署过去之后，它显显示成的就是自动部署，你什么都不用操作啊。然后呢最就是它会变成这样了，嗯，就变成一个已经生产完成的， 然后这是我的链接，然后我点开，然后就变成了一个网站，然后你直接把这个分享给他， ctrl 加 c 加微，然后分享到你的微信啊，或者到你的就是其他的朋友，那，然后就大家都可以使用了啊，然后，呃，基本上就是这样的一个流程啊，基本上就这样一个流程， 我发给我女朋友，然后你看我直接在微信里面就可以打开整个的 ui 设计，就是还非常不错的，很专业，很一体，非常专业， 而且还有一个小动效，你看到这个就是我手指的这个位置吧，他还给了一个小动效啊，然后我又给大家整理了一个文档啊，这就是，呃，我们设计一个产品 demo， 然后网站或者你的一个 apps， 然后从设计原型到代码生成，怎么跟个 谷谷歌的 as studio 沟通啊？你的需求，然后到部署前的安全检查，这个也很重要，因为我们现在是呃，当时没有涉及，呃，就是 apikey 的 这个使用，然后呢在这个部分上 在榜底下就是部署的一些实操，比如说我们现在就用这个网站，因为这个网站我用完了之后给大家测试过，非常好用的，然后呢整体的这个到最终部署去运营的整个流程做了一个文档，到时候大家可以在我的群里去取，也可以跟我去要。 哈喽，朋友们，今天是扁豆，土豆啊，肉末盖面，嘿嘿，这么香，你算了吧， 哎呀嗯，好了。嗯嗯。哇，这是土豆。哇，这肉片超级好。嗯 嗯，拌匀太棒了，这土豆蒸炸出来绝对可以拌面，绝对可以拌面，真的，这土豆直接拌面就行了，超级香。

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

这个你只要输入一个需求，它就会调动多个 ai 智能铁运行工作，无论是项目重构还是从您构建 mvp， 它都能独立完成。你无需关注代码，而是把更多精力放在架构设计和创造性问题解决上。这个 可以让 ai 生成高质量的设计稿，并实现设计稿与代码的双向实时同步。你只需专注界面创作， ai 会自动还原为精准的代码并进行交付。这个 提供超多精美的前端主键，同时带有流畅的交互动画。你只需要点击复制提示词，然后粘贴到 ai 对 话框即可使用。这个可以直接在网页上标注需要调整的元素，自动转化为 ai 能够直接理解和执行的结构化代码上下文， 实现网站的精细化调整。这个不用写代码，也可以做出丝滑流畅并且可交互的网页动效。一键导出，即可让 ai 接入你的项目。 这个能让你的 ai 化身为 ios 开发专家，覆盖从设计、开发到调试的全流程输出符合 apple 高标准、安全、高性能 且易于维护的生产级代码。配合这个可以自动解锁 apple 最新开发文档，能解决日常开发软件中百分之九十的问题。关注我，带你解锁更多 ai 体效技巧！

小白入门 web coding 体验指南 web coding 是 零基础 ai 编程方式，不用死记语法，不用扣逻辑，像聊天一样用大白话跟 ai 描述需求， ai 自动生成修改迭代代码。今天介绍两款免费 ide， trace and open code， 带你轻松写代码。 web coding 是 什么？不用实际代码语法，不用扣复杂逻辑，全程像聊天，用大白话跟 ai 描述需求， ai 自动生成代码。想尝鲜推荐两款免费 id 一 tree c n 是 字节出品，中文超强，开箱即用。 open code 是 开源工具，主打隐私至上两款都免费 吹，试验是字节跳动两千零二十五年推出的国产 ai ide， 全称 the real ai engineer， 底层融入 ai 能力，个人版免费字节，内部工程师都在用，稳定性和中文适配度拉满。 open code 是 开源 ai 编程工具， mit 协议完全免费无广告，主打隐私优先，多模型兼容，不依赖单一厂商，想要隐私保护，搭配本地大模型使用。 吹 c n 三不上手。第一步，官网吹，在新 n 下载，不用注册翻墙， a p i 秘钥打开就用。第二步，点左侧 solo 按钮，一键开启 web coding。 第三步，输入需求，比如写粉色登录框， ai 秒出代码，还能边聊边改。 open code 三步上手，第一步，官网 open code dai c h download 下载。第二步，选 skin， 免费模型免配置直用。第三步，开启对话模式就是 web coding， 搭配本地大模型，可完全离线 对比选择。翠 c n 一 键开启，零门槛，各有六款免费模型，翠五星友好度优势是免费中文超强 open code 的 打开对话模式四星，友好度优势是开源免费，需本地模型才隐私。 总结，纯小白首选翠 a c n， 安装即用，看中隐私，选 open code 的， 搭配本地模型，完全离线保密，两款都免费，零基础也能体验，赶紧试试你的第一段 ai 代码吧！点赞收藏，关注后续更多教程！

不同代码小白玩拷 code 第一天本来打算为 coco 的 付费了，然后试了一下 codex， 发现真香，毕竟不要钱，那么就给大家分享一下我做了什么。 那么我的痛点就是我的房客有的时候问我要房租收据，就在法国是一个很重要的文件， pinterest， 我 打开 word 文档，然后改日期导出 pdf， 然后发给他，我在想怎么样能够最大化的节省时间，可能我可以做一个自动化的工具，能够导出 pdf， 再去想下一步有可能能够把它部署到一个工作流平台。 第一步就是先把一个网页版的本地部署的 app 做出来，那我就试了一下呃， gpt 五点三扣带子的模型去给你 直接做好一个 app 出来两三个 prompter 就 改好了。那么首先第一个 prompter 就 先看一下他到底会怎么做，那么他，嗯，根据我的需求就是我给他一个文件模板，我说这上面的信息我都要，包括签名我也要，就给我一个网页让我 自动填上去，然后就生成一个 pdf 就 行。那他就做了一版出来，其实已经挺好的，但是，呃，我又让他改善一下，就是我给他几个映设，就是因为我的房客每个人的房租不一样。呃，然后 啊，我就希望每一个房客对应一个金额，我只需要一个下拉菜单，选中房客的名字，地址和金额都是自动填好的，然后这样我只需要填日期，然后选择一个房客，然后就可以自动的生成一个 pdf， 这样子就大大的节省了时间。作为第一个版本来说，其实已经 嗯，非常好用，就是它的弊端就是只能在电脑上去做，这两天再跟他沟通一下，看能不能做出手机版或者部署到服务器。但这个应该就要付费了，我现在用的还是免费的。免费其实已经很香了，所有的是要收二十，最低的二十。 这个 open ai 的 这东西用起来也比较熟，等到他要付费的时候我再看，再选择一下 coco 的 还是 open ai 的 codex。

大家在外不哭脸的时候，是不是经常碰到跟 ai 聊天，让他去开发一个功能，他老是误解你的意思，这个时候你是不是非常的崩溃，觉得这个 ai 怎么这么笨，还一点都不听我的话？ 实际上啊，你还真不能去挂 ai， ai 大 多数时候他都是非常听话的，然后他也不笨，不过可能是你在开发这个需求的时候，你自己对这个需求自己都不果断，都不确定， 然后没有想清楚，你就直接让这个 ai 去开发了，那 ai 他 这时候他肯定也是非常懵逼的呀，那么他肯定开发完给到你的解决方案，那大多数时候都是不符合你的诉求的， 那么我们应该怎么办呢？实际上啊，我有一个非常简单粗暴，但是特别特别有效果的办法，就是你每次让 ai 开发一个需求的时候，当你自己都不确定，不果断的时候，或者没想清楚的时候， 那么你就在这个需求的最后面加一个小小的提示词，就是问一下 ai， 你有什么更好的方案和建议，请提供一些你认为最优秀的几个方案给我，然后我来进行一个选择分析，等我分析完确定之后，然后再告诉你下一步怎么开发， 那么这个时候你就会发现 ai 变得特别的聪明了，他能够提供一些你自己都没有想清楚，甚至是你都没有想到的一些设计方案给你， 然后突然之间就会把你的脑洞给打开，原来还有这样子的方案， 那么通过这样的一个方式去跟 ai 进行访问，追问这个 ai 等于就是刨根问底一样的，那么 这个时候你的思路突然就会被打开，通过这种方式去跟 ai 进行一个需求的开发，基本上大概你开发出来的东西就会符合你的一个诉求。 大家如果也像我经常碰到 ai 不 聪明、不听话的时候，或者自己需求都想不清楚的时候，就可以通过这种方法去尝试一下，一定会有大大的惊喜。

我们这个格式化的红键盘呢，在 webcoding 里面非常实用的，比如说我现在是 vs， 那 vs 的 webcoding 的 一些快捷操作我都可以设置在这个红键盘里面，我来试一下啊， 我不是很熟悉，比如说我们这里有语音输入，我现在开设了一个潮汕猪脚饭的店，那猪脚饭的店的生意非常好，用户都排队很多， 现在要开发一个用户在线下单的平台。那你帮我开发一个网页端，那我这个语音输入之后呢就给他了，给他之后呢就开始执行了，然后呢他会给你反射一些建议，我们在这里就可以直接跟他进行对话，不需要再用键盘来进行操作了，这个用在外部口令就非常好。 现在看到了他是，呃，他跟我进行对话了，对吧？啊？选 yes 和 no， 那 yes 和 no 呢？我可以直接不需要去点他了。那我在这个格式化红键盘键确认执行就下一步了，是不是很方便？ 通过不断的确认执行啊？大概四五次左右，然后在这里我们看看那个显示的效果如何啊？这里好了，哎，看 正宗的潮汕猪脚饭的订餐的页面就做好了，是不是用我们 d 两百 x webcoating 非常方便。如果你有一些好的产品想法或产品建议，也欢迎大家在留言区给我留言，谢谢大家。

学 ai coding 到底选什么项目练手最合适？我给大家选的就是餐饮扫码点餐小程序，原因特别简单就两点，第一，线下遍地都是餐饮店，家家都有扫码点餐的刚性需求。 第二，对新手来说，这是最经典的练手项目，把这个摸透了，开发其他类型，所有小程序都能举一反三，一招鲜吃遍天。 那确定好项目之后，接下来应该怎么拆解需求呢？接下来就给大家讲一个专业的产品经理都是怎么拆解需求的，用的都是同一套方法。 moscow 需求分级模型， 这个模型把所有需求精准分成了四个等级。第一级， must have 必须有的功能，确认它整个项目都跑不通，是核心中的核心。第二级， should have 应该有的功能，有了，体验更好，没有也完全不影响核心流程。第三级， could have 可以有的功能，锦上添花，可有可无。第四集， won't have 这次绝对不做的功能，全程不碰不发散。而我们今天要做的，其就是 mvp， 也就是最小可行产品，也就是 must have 必须有的功能，剩下的都砍掉。 这个过程核心是做减法，这样的话我们就可以做出一个麻雀虽小但五脏俱全的项目，快速给其带来正反馈。那这个点餐小程序我们应该怎么设计呢？给大家介绍一个比较通用的方法论。 第一步，先明确核心场景以及对应的真实使用场景做产品，先搞懂这个东西给谁用，在什么情况下用。 我们这个小程序，核心用户就两类场景非常明确，一类是餐饮老板日常在店里盯紧前台管后厨，核心诉求是省心、不漏单，不跑单。另一类是到店堂食的顾客坐下就想快速点餐，不用叫服务员，也不用吃完之后排队结账，核心诉求就省事，不麻烦。 第二步就是梳理核心业务流程，用户和场景，明确了，接下来就把整个业务的完整闭环流程给串起来。在咱们的场景里面就是顾客扫码选菜、下单，完成支付，老板是收到订单后厨出餐，然后订单完成，少一个环节缺一不可，所以叫做核心业务流程。 那第三步就是基于业务流程去拆解必须有的功能，因为商家和顾客处理流程的不同环节角色不一样，我们可以分端设计，那第一个端就是顾客端。 第一步是微信扫码，直接进对应的桌号和菜单。第二步菜单浏览和选菜加购，拣购金额实时计算，满足选菜需求。第三步是确认订单和微信支付。第四步是实时查看当前的订单状态， 然后在商家端这边选。第一步是门店基础的配置和桌码的生成，绑定老板的收款账户，设置门店信息，生成桌台的专属点餐码，这是整个流程的起点。然后第二步是菜品和菜单管理， 比如键分类，上下架菜单，然后更新菜单信息，这是顾客点单的基础。第三步就是订单的实时通知和订单详情的查询等等，这是整体流程必缓的核心。 第四步就有极简的对账统计，比如说我营收金额、订单的总数统计，满足老板最基础的账目核对的需求。 上面就是我们本次的 vip 流程，很多人可能会问，那会员、外卖、多、门店这些功能都不做吗？当然不是，只是绝对不会放在 mvp 里面做。这里一般有一个通用的产品迭代的逻辑，就我们先把 mvp 跑通，后续所有的功能都要基于真实的使用数据，用户的反馈来决定要不要加，加在哪。 说白了，后续的功能全都是核心流程当中某一个环节的加强，比如说想提升用户的复购，就可以加会员储值优惠券这种营销功能。想透关门店的营收场景，就可以加外卖自提预约功能。 想服务连锁的门店，就可以加多门店的管理切换和员工权限等等不同的功能。这些功能都是在你核心流程跑通之后再做的针对性优化。那咱们下期就先教大家怎么进行核心流程的开发，想学的点赞关注，我们下期见！

不会代码的玩 webcoding 避坑指南。坑一，不装环境，开始用 webcoding， 大 模型让你装这装那，结果 popin store 了一堆，造成各种冲突。 上手编程，你先要安装环境，推荐康的，或者你会用多款也行，它能隔离环境，避免安装包版本冲突。坑二，你要大模型改 a， 结果他把 b 也改了，原来能跑的，现在也 bug 一 大堆，每完成一个功能就 get 一下，就像打游戏的保存功能，想要回溯也就很方便。坑三，大模型推荐什么就用什么 果明明是个人自用，但是写完的代码一大堆，自用太麻烦，离商业化部署又差好远。项目开始一定要说明是个人使用还是商业化部署，并且能分清楚哪些个人使用是用不到的。配置不懂技术，真心不推荐去商业化部署，失败概率大到没边。坑四， 需求太模糊，没有详细的描述，只说我要做一个网站，结果大模型给你输出一堆你看不懂的东西。你一个个问完，上下文都抄了，大模型已经出现幻觉了。 第一句就要说清楚你的详细需求，功能细节，目的是什么，要用什么编程语言等等，一定要给 ai 画一个尽量小的范围。说到底， web 规定并不是让你不学编程，而是让你从搬砖工变成监工。作为监工，你不需要亲自搬砖，但你得看得懂图纸，知道砖头没放对时，该骂谁。

今天我来给大家介绍一款我用 web coding 做的第一款产品，呃，我是一个比较爱打德扑的人， 但是呢，之前市面上的工具要不是 ui 不好看，要不是功能不完善，所以呢，我竟然花了十几分钟通过跟 ai 聊天的方式做了这么一款产品。然后在这里你看可以输入一个你的打牌的一个资金，你的一个 bankroll， 然后在下面呢可以添加一些你打过的 session， 比如说在里面可以输入你的 这个打牌的时间，地理位置，然后游戏类型，还有这个买入和最后的结余以及游戏时长。同时呢还可以上传一些照片和写一些备注， 呃，在这里呢，我还加了一个功能，就是可以通过上传的照片和备注，呃，让 gto 帮我做一个复盘， 比如说这个照片上传以后，我只用点击这个手牌分析，呃，他就用大概十五到三十秒的时间会帮我做一个复盘，去看一下我这手牌处理哪里好，哪里不好。嗯，我们这里可能要稍微等一下， 然后大家可以看到啊这个，呃，通过算法模型这里给了我这手牌的一个方案，比如说我当时的行动线是怎么样的，以及通过 gto 的 角度有哪些优化的空间。 呃，然后同时呢，这个生成的笔记，我可以把它保存分析结果到备注，这样子在以后， 呃，我在回复这个 session， 我 就知道我哪手牌打对了，哪手牌打错了，我，呃，就是我有哪些可以学习的点，这个软件整体做下来还是很容易的，我基本上就是在跟 ai 聊天，就告诉他我需要做一个什么样的产品， 然后做出来以后他有些功能可能，呃，不能用，然后我就直接告诉 ai 说这个功能不能用，然后他就会帮我去检查并修复， 我觉得整体操作下来还是非常顺滑的。对于我一个编程小白，感觉这个都是非常容易的，我觉得大家可以一起 web coding 起来，做一些自己真正享用的定制化产品。

cloud code 创建者 boris journey 最新发布了 ai 编程最佳实践，结合我近期高强度 web coding 的 实战经验，整理出五条使用策略，希望能对你有所帮助。首先是几乎是所有初学者都会陷入的一个误区，只需给出一句简单需求， ai 就 能直接生成完整应用。但在实际项目开发中，这样会很容易陷入无穷无尽的细节泥潭中。 现在比较共识的核心流程应该是这样的，首先，在规划模式下与模型详细沟通，并敲定符合预期的产品方案。其次，将产品方案导入 vibesign 工具中，生成可示画的设计效果图并加以调整。最后，把设计成果与详细方案一并交给模型，正式开始生成代码。 第二条策略是管理好上下文。打个简单的比方，我们可以把上下文窗口看作一块黑板， ai 是 在上面解答数学题，黑板空间有限，写满后只能擦除前面的内容，这肯定会影响后面的作答。因此我们需要在有限的上下文里做好取舍。主要有以下几个原则， 首先是一个窗口专注于解决一个问题，完成一个目标，新的任务应该交给子代理去处理。其次，如果某个问题或者需求和 ai 来回交互几趟都解决不了的话，就该新建对话窗口或压缩上下文了。最后，上下文窗口累积的越久，压缩时丢失关键信息的概率也就越高，所以定期压缩上下文很重要。 第三条策略是尽可能的明确表达需求。举个例子来说，将色系变为蓝色肯定比我觉得颜色不够好看来的精准，我们一定要选择信息损耗最低的方式来与模型沟通。比如当系统报错时，不用自行分析原因，直接提供报错信息和对战反而效率会更高。 第四条也是最容易被忽视的一条策略，为 ai 提供可验证输出结果，无论是编辑单元测试，还是提供操作步骤，模型都能通过反馈持续的去优化方案，形成正向循环。据统计，搭建了验证反馈循环的任务，生成质量可提升两到三倍。 最后还有一些建议，比如在模型选择方面，应该直接选择最强的模型。在日常工作中，尝试将重复操作自动化封装成 skills， 让子代理定期执行。 另外，虽然不少人推荐多任务并行操作，但我通常只会同时开启两个对话进程，感觉我自己的上下文窗口也很有限，频繁切换反而会过于耗费精力。希望能对你有所帮助。那今天就到这了，感谢大家！

和大家分享一下最近 web coding 的 一个项目，名字叫订阅卫视，这是一款可以帮助用户记录和管理所有的周期性支出，并提供汇率换算、扣款日自动计算等功能的工具，可以展示在 pc 端和手机浏览器中。 主要用到的开发工具是 cloud code 和 anti gravity。 这个项目是基于 next js 十五加 tab script 进行开发，并通过 github 仓库部署。在 versale， 我先通过本地进行访问。第一步，启动我的项目，跳转到首页，点击登录用户。因为我之前已经用电脑登录过， 所以直接进入到概览页顶部，分别展示的是月总支出、订阅数量和下一笔扣款。下面就是订阅列表来展示订阅项目、金额等信息，并可以对应进行一些操作。接下来我们测试添加订阅功能，这里输入你的订阅名称、金额， 同时可以选择对应的货币，选择计费周期、订阅类型 以及首次扣款日期，来帮助你计算下一月的扣款时间及金额。保存订阅后，自动跳转到概览页， 点击按钮可以暂定和恢复你的订阅，以便个人当月的计划变动， 同时可以对你已有的订阅信息进行修改调整。 最后是删除订阅功能， 我们退出当前账户，重新测试登录功能。 接下来我关闭服务器，通过网络进行访问。 这里是注册页，用户可以通过邮箱进行注册，点击注册后，服务器会发送邮件要求用户确认注册，我就直接用原有账号进行登录了。 可以看到之前的订阅信息依旧存在。作为我第一个 ypl 定的项目， 其实存在的问题很多，比如我认为做成手机 app 会更符合它的使用场景，其次就是没有购买域名，部署到国内等等。如果各位朋友有好的建议和觉得可以拓展的功能，欢迎留言。