Transcription
随着 Clae 3.7 Sonet 和 Cursor 0.46 在同一天发布，我认为在这里做一个小项目会很有趣。我们将使用新模型和新 Cursor 更新来构建一个 Slack 克隆。我们将直接开始这个项目，我将使用 Shad CN CLI 从一个空白项目开始，然后尝试看看我们能走多远。我不确定我们会走多远，但我们会顺其自然，看看事情会把我们带到哪里。
就像我在很多视频中说过的，我通常会从我的开源启动模板开始。再次强调，这是完全开源免费的，这不是推广或任何东西。我们在这里不会这样做，我只是想向你展示一下从一个全新的项目开始是什么样的，使用新模型和新的 Cursor 更新，顺便说一句，这个更新看起来非常漂亮，Cursor 团队。
所以，让我们开始吧，我们在这里初始化一个 Git 仓库。我暂时只做一个私有的。当然，我们将在 GitHub 中打开它。我会把它拖进来，我们当然会使用 Git，各位。即使 Cursor 区域内的检查点功能很棒，使用版本控制也同样很棒。所以，我们想在这里打开一个终端，我们可能需要安装我们的初始包。事实上，我可能甚至可以这样做，Shadan 设置是否包含这个？我不知道。让我们实际运行 npm run Dev 来确保这个东西正常工作。这将是我们前端需要的东西。
而当它实际启动时，让我们快速回到本地 3000。当它启动时，我实际上将创建一个新的 Superbase 项目。我将复制这里的密码。我将把它保存在屏幕外一秒钟，因为我想向你们展示我们在这里从头开始做一切。所以，我们将做前端和后端。我们不做身份验证或支付，我有很多其他视频做这个。我们只是想让 Cursor Agent 使用新的 Claude 3.7 Sonet 模型。我们只是想尝试一下，看看有什么可能性。
所以，我们将从一点点迭代开始。我将去获取我们 takeoff 上的这个提示。好的，我们实际上需要请求提示，我们可能还需要规划器提示。所以，我们将获取这个提示。这个是完全免费的。如果你想获取那个 URL，请随意。但我们将把它粘贴到 Sonic 中。实际上，给我一秒钟，我将为这个创建一个新的 Obsidian 文件。我们将称之为 slack clone request prompt。然后，slack clone。这是屏幕外的。我将把它拖进来。
好的，所以，我们将要做的是，我们将粘贴这个提示，我只需要继续添加想法。我将使用 Flow Voice 来进行语音文本转换。所以，我们正在寻找构建一个 Slack 克隆。所以，请帮我想出我们的功能列表。好的，我们将获取整个东西。我将把它移到我的另一个显示器上，然后我们将把它发送到 Claude 上的新 3.7 模型。
所以，我们在这里做的是，我们基本上将与 Claude 一起处理我们的功能。所以，让我们说，好的，就叫它 Slack Clone。不用担心目标受众。我们肯定需要频道和 DM。是的，没有实时，没有文件共享，绝对有消息线程，绝对有搜索。是的，通知，不是关于个人资料，因为没有用户或 o。它还说了什么？让我们让它默认响应，看看样式是什么。主要是克隆，主要是逐一克隆，速通类型的东西，哈哈。没有集成，Next.js，带有 Superbase，Postgres，Drizzle。我们甚至在这里包含了一个 Tailwind 和 Shad CN。我们将发送它，现在 Claude 应该会回复一些非常基本的请求。
好的，所以，创建加入频道，是的。查看消息频道历史记录，是的。消息个人用户，是的。对话历史记录，是的。回复线程，搜索，通知，响应能力，通用文本堆栈。好的，这很完美。现在，我们将要做什么？所以，我们将复制一个请求。我们将把它放在这里，因为我们需要它。然后，我将再次把它拖走。现在，我们将去获取这个规划器提示。我将复制这个家伙。这将与我正常的流程有点不同。所以，通常我会获取项目规则，文本规范和一个启动模板，就像我说的，这在这里不适用。所以，我们将删除它。所以我将继续，我们将只做 Slack Clone。我们将删除它，稍微简化一下。将其粘贴在这些 XML 标签之间。现在，我们将从 Claude 那里获得一个分步计划。一旦它给我们返回，我们就可以编辑该计划。
好的，所以，我们将复制整个东西。去一个新的 Cloud 实例。发送它，我们将让它开始工作。你应该做计划。好的，所以，我们应该得到一个分步计划。实际上，你知道我要做什么。不要包含已经完成的步骤。从我们拥有的开始。我将打开它并进入 Repo Prompt。我正在屏幕外做这件事。我会把它带进来向你们展示我在做什么。所以，我们将在这里拥有我们的 Slack Clone。我们实际上想很快创建一个 .gitignore 文件。然后，我们将需要 Project Specific 文件。我们将需要忽略 public 目录。我们将需要忽略 .unity.local。我们将需要忽略 favicon.io。我们应该能够回到 Repo Prompt，选择所有，刷新。我们将从高到低排序令牌。这应该是……让我测试一下。好的，它看起来我没有得到我的 favicon。那是因为我确实刷新了 favicon。完美。现在，我们将从我们刚刚使用 Shad CN CLI 安装的所有代码中获取所有代码。我们将说步骤必须按顺序进行。我们需要的。提醒一下，我们有一个 Shad CN。哦，对了，我们实际上会这样做，各位。我们将去获取唯一的东西。我将从我的模板中获取 Drizzle 代码。
所以，我们将要做的是，我们将在这里创建一个 actions 文件夹。我们将在这里创建一个 db 文件夹。我们将在这里创建一个 db.ts 文件和一个 drizzle.config.ts 文件。我将粘贴它。我们还没有表。我们将需要获取 Drizzle Config [音乐] 代码。然后，我们需要一个 .env.local 文件。这需要是 database_url。而我们的 Superbase 项目现在应该都设置好了。所以，我们可以点击 Connect。转到 ORM。转到 Drizzle。我们将获取这里的代码片段。粘贴在这里。接下来我可以做的是去获取数据库密码。在我发布这个之前，我会删除这个项目，这样没有人可以偷走它。我们将做我们的第一个 Agent 实例。我们将 /add open editors。为缺失的包创建 npm install 命令。这将获取 Drizzle Kit 以及所有好东西。然后，我们唯一需要做的就是，在我们的脚本中，我们需要做完全一样的事情，除了添加 npx。我们将说……commit DB commit。然后，我只需要把 Repo Prompt 带回这里。
好的，我们将选择所有这些代码。刷新它。点击复制按钮。暂时把它拖走。现在，我们将回到 Claude。这是当前代码。我们将用更多的上下文重新发送它，以便 Claude 可以处理，以正确格式化我们的步骤。所以，让我们关闭几个链接。让我们清理一下。我们可以关闭这个聊天。
所以，现在发生的是，Claude 正在生成一个分步计划，我们将要遵循它来实际构建 Slack Clone。所以，你可以看到，这大约有 15 个步骤。所以，我们将要做的是，我们将字面意思上复制所有这些。我将把它粘贴到我的 Obsidian 编辑器中。我们可以像这样迭代这个计划。Sona 实际上没有做的一件事是，它没有……好的，让我们只说返回一个单一的 markdown 块，就像原始提示要求的那样，以待办事项格式。我们实际上想要这个，而不是作为工件。我们实际上想要它只是一个 markdown 块。所以，让我们让它快速写出来。这将使我们的生活更容易一些。你将看到它正在耐心地写所有这些东西。然后，我们将要做的是，我们将一步一步地进行，确保所有步骤都检查一下。它做了什么分析？它在这里写代码了吗？这是怎么回事？我唯一有点小抱怨的是，我认为 3.7 Sonet 在 Claude 应用内，我认为它有时去工件的速度太快了。我得说我喜欢工件，所以我宁愿这样做而不是相反。所以，也许我不会抱怨。它才出来一天。所以我将给他们一点宽容。
好的，所以，让我们粘贴它。让我实际删除代码块格式。砰。好的，是的，这看起来好多了。所以，好的，所以，数据库模式，这就是我们要开始的地方，当然。然后，我们将迁移我们的模式。获取我们的基本 UI。我们不需要 o。所以，我们实际上可能会做的一件奇怪的事情是，我们不会有 o，但显然，如果你想发送消息，你需要不同的用户。所以，这个的优点是，我们可以确切地告诉 Claude。好的，所以，我们需要再进行一次迭代。我们实际上不做身份验证，但显然，因为我们需要模拟用户，也许我们也做一个 profiles 表。我们可以像这样添加一些种子数据，带有一些假的配置文件。我们只是不做实际的身份验证。另一个说明，我们不需要做测试。所以，删除测试的东西。是的，只是为最终计划迭代它。
好的，所以，这应该基本上把我们的计划缩减到我们实际想要的。我们将要做的是，我们将把这个计划作为一个 markdown 文件添加到 Cursor 中。我们将一步一步地进行，或者更确切地说，可能是按类别进行，并将步骤提供给 Cursor Agent 和新的 3.7 Sonet 模型。我们将看看我们能完成多少。
好的，所以，我们将直接把它复制到 Cursor 中。我们将要做的是，我们将说 project_steps.md。我们将粘贴它。我将稍微清理一下。让我再扫描一次。我们不需要在这里做部署。好的，一切看起来都很好。我们将实际利用 Cursor 规则。我们将做一个 general.md 规则。我们将打开全局应用。所以，这将……糟糕。这将应用于我们发送给 Agent 的每个请求的所有这些规则。我们将说我们正在构建一个 Slack Clone。在……中找到步骤。我们将标记 project_steps。所以，将要发生的是，在我们向 Agent 发送的每个请求中，因为我们已经打开了它，它将实际查看步骤。处理我告诉你要处理的任何步骤。一次只处理那些步骤。一旦那些步骤完成，标记为已完成，然后停止。我将给你进一步的指示。
好的，所以，我们将快速提交它。init steps。现在，我们可以去 Cursor Agent。我们可以说，让我们实际上调出我们的步骤，这样我们就可以确保我们正在处理步骤一到二。我认为这只是数据库设置。然后，进行数据库步骤设置。我们现在应该能够做到的是，Cursor Agent 和新的 3.7 Sonet 模型应该实际完成这些前两个步骤中概述的每一个事情。所以，这种方法对于 MVP 非常好。对于单个功能来说非常好。你可以用它做很多不同的事情。
所以，正如你所见，我没有打开 YOLO 模式。也许我应该。我们暂时不会。顺便说一句，YOLO 模式和 Cursor 会自动为你运行这些 Agent 代码或 Agent 命令，而不是让我手动确认它们。所以，正如你所看到的，频道和配置文件数据库模式正在被编写。好的，我们正在使用 Drizzle 和 Superbase。是的，这基本上就是 Postgres 和一个 ORM，它允许在我们的整个应用程序中进行类型安全。所以，一切都将在整个应用程序中进行类型安全，并且对于 Agent 查找数据库模式来说非常容易，这对于 Agent 功能正常工作非常重要。全栈应用程序，这就是为什么 ORM 如此强大。
好的，所以，你可以看到它正在逐一编写所有模式。它正在获取这个 index 文件，据推测，接下来会添加到数据库模式中。应该添加。好的，所以，它只是从 index 导出它。是的。然后，它将给我们 SQL 迁移文件的命令。我们将运行它。然后，如果我们去我们的 Superbase 项目，我们应该神奇地看到所有这些表。太棒了。
好的，连接到 Anthropic 的错误。恢复，我想。顺便说一句，这太棒了。错误处理。做得好，Cursor 团队。这是让一个通常会非常糟糕的体验变成一件小事的好方法。有趣的是，它正在做一个 TypeScript 种子文件。这有点好笑。它基本上要求我们执行 TypeScript。我们现在应该有配置文件在这里。如果我们刷新，太棒了。
所以，这应该再次标记我们的步骤为已完成。这是一种非常强大的工作流程，用于功能。我一直都在使用它。我们只是将其应用于整个 MVP。所以，我将要做的是，我说步骤一和二已完成。我将保留我的提交，我的代码，这样我们就有一个很好的检查点。再次，对于许多初学者来说，使用版本控制非常好。那些正在进入所谓的“Vibe Coding”的人，它会帮助你很多。步骤三和四。让我们完成步骤三和四。三和四用于核心 UI 组件。
我们实际上只是在逐一完成列表。你会注意到，我们几乎没有写任何代码，或者根本不写。当然，我们做了一些样板设置，但我甚至不认为那是写代码，这只是模板的东西。我们可能会得到一个看起来很像 Slack Clone 的东西。所以，现在，我们已经设置好了我们的数据库表，对吧？所有这些都连接到 Superbase。我们可以检查我们的模式文件，看看发生了什么。我的猜测是，AI 可能需要随着我们继续进行这个过程而对它进行一些调整。但我们正在做的是，我们只是在创建我们的核心 UI 组件。
不知何故，它再次要求我这样做。有趣的是，它正在手动完成所有这些按钮。所以，这里是，这里是检查点发挥作用的地方。所以，我们实际上将点击拒绝。我们应该能够做到的是，我们应该能够去……好的，所以，我们点击停止，然后恢复到检查点。我将说确保使用 Shad CN 来处理你可以处理的。我们基本上……哦，请告诉我 Cursor 没有宕机，那将非常糟糕。好的，看起来只是一个 bug。所以，我们基本上能够在这里重置到检查点。就在 Agent UI 中。这是一个杀手级功能。你也可以用版本控制来做。我这样想，就像提交主要步骤，然后是次要步骤。使用检查点来完成。这就是我的想法。
但现在将要发生的是，而不是从头开始生成所有这些组件，我们将使用 Shad CN 组件。这将为我们和 AI 节省大量时间，而它似乎不想这样做。所以，我们只是……我们将拒绝这个。我该如何停止？所以，在新的 Cursor 中，我实际上不知道如何停止。我甚至会更具体一点。我不太确定为什么它没有这样做。我从来没有遇到过这个问题。这有点好笑。可能是新模型的一个小怪癖。也许它认为它可以制作一个更好的组件库。它已经接受了。它接受了挑战。
好的，所以，指定 CL I 显然是……哦，它是……不要使用 Dashi。不要使用。这很有趣。好的，不，它是……Chaden。它是什么？Chaden 最新是命令。不，是的，这是正确的。谢谢。……只为所有组件创建一个命令。我不知道为什么它会这样。这通常是你每次都会得到的东西。我不知道为什么它会这样挣扎。我想我习惯的是，我通常有一个带有前端规则的 Cursor Rules 文件。这可能指定了这一点。而我们在这个项目中没有这样做。我从头开始已经有一段时间了，而不是从模板开始，这公平地说，是两个略有不同的东西。
所以，就像我之前说的，模型才出来一天，Cursor 集成也是如此。所以，我们将给他们一点宽容。所以，你可以看到我们正在做一个侧边栏组件。它实际上将能够迭代这些 Linter 错误。这是 Cursor Agent 的一个很酷之处。我真的很喜欢。获取聊天布局。好的，所以，它基本上正在构建我们的整个 UI，如步骤三和四所述。好的，所以，我们得到了我们的核心组件，然后我们将得到……布局，侧边栏，标题，以及聊天布局。你可以看到它会得到一些 Linter 错误，但它会不断地迭代它们。这就是为什么 TypeScript 如此棒的原因。不是要成为一个完全的 TypeScript 吹嘘者，但 TypeScript 在与 LLM 合作方面非常棒。
它正在标记步骤为已完成。我想知道如果我们去我们的 Slack Clone。我猜技术上我们还没有页面。所以，我们将不得不等待。但我们应该能够做到的是，点击接受所有。关闭所有这些。我们将完成步骤三和四。这是 19 个更改。当然，其中一些是 CLI，所以这不像通常那样疯狂。然后，我们将去 Project Steps。我们将重置我们的 Agent。我们将说，做步骤五。因为我们基本上是按类别进行。这就是我想要做的。这样，它正在处理的步骤就是连贯和一致的。这应该会带来更好的结果。
Cursor Agent 的一个很酷之处在于，它在新更新中进行了更多的搜索。这更像是开发者实际工作的方式。你认为这会带来更好的生成，对吧？因为这直观上有意义。因为为了让 Agent 在你的代码库上采取正确的行动，它需要能够理解它实际上在做什么。所以，如果你重置你的 Composer 实例，它需要加载上下文。它需要经历这个……入职过程。它看起来已经获得了足够多的上下文，可以处理步骤五，这将是添加一些……配置文件管理工具。看起来很有意义。作为一个用户，你知道，我想更新我的个人资料。这是一个核心功能。它看起来正在做一个非常轻量级的 o 系统，带有一些 cookie。我可能可以告诉它不要这样做。如果这成为一个问题，我们以后再担心。我现在不担心。
它应该正在创建我们的服务器操作。所以，如果你不熟悉 Next.js 中的服务器操作，就把它们想象成 API 路由，但写成函数。所有这些代码都在服务器端执行，这就是为什么它们被称为服务器操作。所以，这是一个很好的方式，你知道，你会看到它基本上写了所有……CRUD 代码，你知道，你会在典型的 REST API 或类似的东西中看到，但它将以典型的函数形式完成。我个人认为这很棒。然后，我，你知道，我将把 API 路由留给更复杂的事情。
所以，我们应该得到我们的新页面。是的。这些是什么？这些是……它是在从……拉来的吗？那一定是……好的，是的，某种 API。我当时想，如果那些是 SVG，那真是太疯狂了。
好的，所以，让我们接受所有这些。我们有六个更改。步骤五完成。我们将同步它。我们将创建我们的新 Composer 实例。我们将重新打开我们的步骤。我想这是一个更大的步骤，对吧？这将是步骤六到九。所以，我们将完成四个步骤。完成步骤六到九，用于所有消息传递步骤。
现在，Agent 将基本上完成六中的所有内容。所以，频道，消息，线程和 DM。它应该能够很好地处理这个。这里没有什么超出 3.7 Sonet 应该能够处理的范围。所以，你可以看到它正在进行它的入职过程。它正在进行，好的，让我们弄清楚发生了什么。阅读数据库模式显然非常有帮助。你知道，我不记得了，我可能已经提到了，但新的 Cursor 0.46 更新是，Agent 的行为更像一个人类开发者。这是我从中得到的一个重要收获。
所以，你可以看到我们可能会得到所有操作。所以，看看它是如何工作的会很有趣。我的猜测是，它会先做步骤六，然后是步骤七。而不是一次性完成所有操作，这当然看起来是正在发生的。所以，你可以看到，传递整个计划对 Agent 非常有帮助。因为它不是只传递一个单一的步骤，它有一些关于它已经做了什么以及它将来需要做什么的上下文。所以，就像，这就是一个真正的人类如何工作，对吧？你脑子里有项目的完整上下文。然后，你进入那个单独的步骤，并在该步骤内工作，拥有更广泛的项目上下文。这就是这个的作用。所以，就像我说的，我经常使用这种技术来处理功能。并且，据推测，随着新的 Cursor 更新和新的模型更新，它应该会好很多。
你可以看到我们有消息操作。你可以看到按频道 ID 获取消息。就像我说的，这都是你典型的 CRUD 操作，只是写成服务器操作函数，带有 Drizzle 语法。所以，非常类型安全，干净的代码。非常容易阅读和编写。正在获取一些消息组件，这很棒。很高兴看到。处理删除，处理回复，处理编辑。只是在做我们想要看到的一切。我有点喜欢所有这些。让我们成为 Charlie Brown，我想。我们还没有选择功能，因为如果我们看我们的项目步骤。第十步在这里。这就是我们实际上将要得到……页面。糟糕。恢复。希望我一直在阅读步骤。希望它没有在那里放了很久。它看起来偶尔会断开连接，这没关系。只要他们有好的恢复用户体验，这是完全可以理解的。我对此没有任何问题。线程操作。所有这些看起来都很好。我真的很想看看它在 UI 方面做得如何。因为后端代码是以前的模型做得相当好的东西，因为它往往更结构化。看到这个 UI 会非常有趣。我怀疑我是否正确地限定了范围。我怀疑我做到了。这应该在新的 Sonet 模型应该能够做到的范围内。但，是的，就像我想要指出的那样，看看我们没有写任何代码就完成了多少。我们只是在高级别上进行协调。只是看着它运行，以确保一切顺利。它当然看起来很顺利。然后，我们显然需要手动测试。然后，根据我们的测试经验，我们将不得不……指导模型，然后说，好的，这是正在工作的，这是没有工作的。所以，你知道，我们作为软件开发者的工作，现在我们几乎只是……软件工程师或……软件，抱歉，不是软件协调员。
你可以看到一些……Cursor XML 解析有点奇怪。这可能是他们需要解决的问题。但你看，我们在这里进行到第九步，对吧？所以，我们正在进行……DM。这个东西，我的意思是，它一直在运行。我们什么都没做。当然，就像我说的，我们会……我们需要实际测试它，并确保代码是好的。但就像，我的意思是，所有这些看起来都很好。我们甚至得到了 Zod 模式。这很棒。你可以看到，我们实际上有那个组件吗？我们可能需要……让我去……UI 选择。你看，我们没有选择组件。所以我几乎想知道……好的，所以，它只是会生成它。这就是……在你的 Cursor 规则中，你会想要做类似使用 Shad CN 组件的事情。那就是……你知道，在那个模板中，我提到了。嗯，你甚至可以进去说，让我们为选择使用 Shad CN。这是一个很好的用例。Cursor 规则。但我们将说……添加选择。我们只是想稍微帮助一下模型。说一些关于这个模型真的想使用那个命令。这很有趣。再次，一个非常好的用例，用于 Cursor 规则。你有你的前端 Cursor 规则。而这将在每一次请求中解决那个问题。所以，这不是任何人需要担心的。
好的，现在它又回到正轨了。稍微偏离了一下。所以，顺便说一句，你会做的就是，就像我们做了那个 General.md 文件一样。你会做一个前端的。所以，就像在我的……开源应用模板中一样。你可以看到……我的前端规则，这个模板是 140 行。你会做类似的事情。不难做。
现在，我们将要接受那个。现在，乐趣开始了。完成第十步。我们应该实际得到页面。所以，页面是我们将要实际测试我们一直在做的事情的地方。所以，我们将得到一个主页。我们将得到一个主应用程序布局。我们将得到一个仪表板页面。我们将得到一个频道页面，一个 DM 页面，一个线程页面。我有点想，其中一些可能只是弹出窗口。重要的是先让功能真正起作用。然后，你可以迭代 UI。我甚至可能为了这个视频而跳过这些其他步骤，因为这有点……抛光的东西，老实说。我们将看看。我们将看看我们能走多远。第十步，因为这里的重点是，我只是想展示一个……Vibe Coding 会话。你知道，我工作的一个重要部分。所以，就像，我不知道人们是否知道这一点。但全职我有一家名为 Takeoff 的公司。我们教人们 AI 技能以及如何编码和构建 AI 工具。所以，很多人会看着这里发生的一些事情。就像，看看我们的全栈应用课程。你知道，他们会看到所有这些……他们会看到后端，身份验证，支付。他们会不知所措。然后，就像，各位，即使你是初学者，你也不需要……加入 Takeoff 或开始做 Vibe Coding 之类的事情，你只需要是一个能够清晰思考并与 AI 模型合作的人。你知道，它就像是编码技能的特洛伊木马。因为发生的是，人们会做这样的事情。然后，他们会开始真正地深入研究……他们会做一个漂亮的前端。然后，他们会说，好的，我如何获取数据？然后，就像，好的，现在我们将教你后端。就像，不要被这些东西吓倒，各位。AI 现在非常强大。你有这些 AI 导师。他们可以教你任何你想学的东西。现在是学习的最佳时机。
这就是我做这些视频的一个重要原因。就像，你有一个想法，你说，我永远无法构建像 Slack 这样的应用程序。就像，嗯，实际上你可以。因为你只是告诉 AI 去构建它。你把它分解成步骤。你做我们在这里做的事情。瞧，你有了你的应用程序。我看到人们经常犯的一个错误是，他们说，AI 现在正在做所有这些代码。我不应该再学习了。就像，不，不，不，不，不。这实际上是完全相反的。无论你是想为自己，为你的企业，还是其他什么构建软件。它可以是为了爱好原因。它可以只是为了好奇心。它可以是为了……你实际上想赚钱的原因。就像，从来没有……从来没有更好的时间来做这件事。
现在有很多连接问题。我确定随着时间的推移，这些问题会得到解决。就像我说的，它才刚刚公开不到 24 小时。我们甚至不需要 cookie。我不知道为什么它坚持这个。我以后会担心的。我只是让它运行。你们还记得早期我曾说过，做模拟配置文件，但不要做 o。这是我脑子里想到的事情之一。我说，是的，这可能会让模型陷入一点兔子洞。是的，这就是我们想要的。我们想要一个硬编码的配置文件 ID，用于测试目的。这就是整个要点。再次，我们在这里遇到的问题。这些问题可以通过我不懒惰地制定更好的步骤以及进行 Cursor 规则来缓解。顺便说一句，如果人们想要一个非常高级的 Cursor 规则视频，请告诉我。因为我实际上可以在星期三，也就是明天，做到。
所以，你可以看到这是配置文件页面。所以，我们基本上有六个不同的页面。现在是线程页面。这应该是最后一个。是的。这个 cookie 的东西会很烦人。我们实际上可能需要迭代一下。我们将看看。你可以看到这个……配置文件.ts 文件中的 cookie。让我们看看它在对我们喊叫。好的，所以，它正在运行。我将再发送一个后续消息，让它……让它稍微清理一下。这将在我们实际测试时为我们节省一些麻烦。需要接受。来吧，别死在我身上。看到它如何引用 Next.js 14。我们正在使用 Next.js 15。这再次是一个很好的用例，用于 Cursor 规则。但那超出了我们试图做的范围。所以，我们将保持简单。我们将保持主要的东西是主要的东西。
我们将告诉它也简化 profile.ts，因为我们不需要当前的配置文件 cookie。所以，让我们看看我们能做什么。所以，我们应该能够进入 Charlie Brown。然后，我们的实际聊天页面是什么？好的，所以，这就是你来到……的时候。所以，我只是想说，你知道，让我们实际做这个。我只是想确保这不是……旧的构建。这有时会发生。我们做了很多更改。选择你的个人资料。好的，所以，我们将找出它在哪里。我们实际上会……我们只是会保存这个。我们将说步骤 10，只是为了保存我们的进度。我们将发送一个截图，只是说我们将做最愚蠢的事情。我们将发送那个，然后说，好的，我们选择了一个个人资料。现在呢？我只是在模拟……初学者会遇到的情况。我们将说我正在尝试测试应用程序。所以，所有配置文件组件。所以，我们可以搜索 profile card。它在 select profile form 中。然后，就像，好的，这个组件在哪里？而这个组件将在这里。
所以，发生的一件事是，我们基本上有两个主要页面。因为这是一个路由组。所以，这个页面和这个页面都是一样的。看起来我们有两个页面在同一个路由上。这是因为这个 Anthropic 连接的东西正在杀死我。这是一个路由组。砰。技术上来说，这不是你想要的。是的，我正要说，那实际上不是。是的，它……它正在意识到它的错误，就像它正在做的那样。这就是你想要的。它需要修复路由本身，或者重新做这个页面。好了。所以，如果他们能摆脱这个问题，那将非常好。
好的，所以，理论上现在。好的，所以，我们有一个小侧边栏。看起来我们没有配置文件页面。我以为我们有。好的，所以，他们……他们……好的，我看到了，我看到了，我看到了。设置。我们没有设置页面。好的，所以，如果我们去 General。无效的 UUID。这有道理。随机的。所以，我们要做的其中一件事是，我们要进行一点调试。所以，让我们传递这个错误。你只需要告诉它修复这个。我实际上确切地知道这是什么。这还记得我曾说过我们应该指定 Next.js 15 吗？这是 Next.js 14 到 15 的一个变化。这些 params 现在需要被 await。这在很多训练数据中并不存在。这是这些模型的一些烦人的怪癖。你确实需要 Cursor 规则来解决其中一些问题。公平地说，这是一个非常有效的解决方案。但我将在这里干预。不。你需要做 await params。因为 Next.js 15 中的 params 是一个 Promise。这就是为什么我之前提到了我的应用程序模板，带有规则。我甚至有一个关于这个的规则。服务器页面中的 params 应该被 await。所以，这正是我 Cursor 规则中的这一行所做的。通常，这对我来说不是问题。但你可以看到，用一个提示，我们就解决了这个问题。
这里的一个问题是，模拟数据可能需要被替换为实时数据库数据。所以，接下来我们要做的就是，在我们接受这个之后，因为这应该会解决我们的错误。我们确实想确保我们实际获得实时数据。因为模拟数据的麻烦是……需要喝一口水……它真的不起作用。因为数据不是真实的。所以，它应该更新我们的种子。好东西。看起来不错。所以，就像，如果你继续让它更高级。当然，你会做团队之类的事情。但这超出了范围。我的意思是，它只是在做我们现在正在做的事情，只是添加更多的步骤。
更新频道页面。这些真实数据。这太棒了。它应该会要求我们运行脚本。我也希望它能删除所有这些模拟数据。看起来它正在这样做。是的。它正在获取实际的查询。砰。正是我们想要的。运行命令应该成功地进行种子。然后，在我们的 Superbase 中，我们现在应该有大量的模拟数据，用于其中每一个表。除了，显然，线程。但那没关系。我们可以随时要求。
它现在正在创建频道页面。它将进入……只是快速回家。好的，频道。所以，这些频道现在是实际的频道。就像，如果我点击 General。你可以看到我们得到了一些双布局侧边栏的东西。这很容易修复。但如果我只是想说你好，然后发送它。我们现在应该得到那个。然后，如果我们刷新这个，我们应该得到那个持久的。我们确实得到了。让我们尝试删除那个消息。非常干净的乐观更新。就像那样。我们现在应该，如果我们去消息。我们应该看到那个 Intro One 已经消失了。它确实消失了。
好的，一切看起来都很好。我想知道线程是否有效。好的，再次，这带我们到了另一个页面。我之前提到过，我们想调整一下。但如果我们然后回去。好的，所以，你可以看到，就像，线程。这就是你会去……好的，事实上，为什么我们现在不做呢？所以，线程消息没有加载。我们可能需要一个新的 Composer 实例。我的一些快捷键因为新的更新而变得混乱。保存。我们将做一个懒惰保存提交。线程消息没有在频道中加载并显示。让我们解决这个问题。让我们解决这个问题。
它将正确地进入频道页面。可能需要获取。所以，如果我们去……线程表。它应该有……哦，有趣。它没有频道 ID。嗯，我猜它只是链接到消息。所以，那没关系。因为消息然后链接到频道。这更多的是……取决于你想如何做查询。但我们不会……我们不会谈论……我们不会谈论查询优化。如果你想优化你的查询，就问 LLM。所以，这就是……一个真正的……引用“Vibe Code”工作流程的样子。就是我们想要线程跳进来。它没有工作。所以，我们只是让 AI 去做。通过清楚地描述问题和我们想要的东西。在这种情况下，并不复杂。现在，它正在改变东西。所以，你可以看到它现在正在获取那些线程。它现在只是在处理 UI。你可以看到我们现在得到了那个回复，正确地发送给了 Bob Johnson。如果我们点击它，我们现在得到 UI。我猜这会带我们到那个页面。太棒了。
所以，我们还可以做的另一件事是，我们可以修复这个。我们可以提交。它说修复线程 bug。修复线程 bug。现在，就像，我的天哪。这个 UI 看起来很糟糕。没问题。新的 Agent 实例。这个 OMG 的截图看起来太糟糕了。请帮我修复这些问题。
你可以看到，如果我们点击进去，你可以看到我们的图像正在被传递给模型。它会非常明显地看到我们有两个侧边栏。它会看到，哦，这个文本是灰色的。它会看到，哦，你下面的消息输入看起来很糟糕。它基本上会进去，阅读所有代码，弄清楚它需要修复什么，然后修复它。非常直接。我告诉你，它读取所有相关文件并……弄清楚它需要做什么，这非常令人印象深刻。这是我看到的一个伟大的改进。
所以，你可以看到它……消息布局的间距和对齐问题。侧边栏和标题样式。消息时间戳需要更好的格式化。整体间距。我真的很希望仅仅通过图像它就能注意到有两个侧边栏。那将是……但我们会看看。我们会看看它会做什么。这里的悬停。这很好。它正在调整间距。你知道，其中一些是小事。但你知道，小事确实会累积。哦，漂亮的……个人资料。
所以，我们可以做的，尤其是在 UI 方面，你可以一次又一次地迭代。UI 特别容易迭代。因为它只是……非常直观。所以，我们现在得到……频道列表。看起来我以前没有。你可以看到下面的 UI 问题已经解决了。那个按钮的颜色不对。是的，我会说，你们不会说这进展相当顺利吗？考虑到我们没有写一行代码，我们只是在协调整个……事情。
在发送软件之前，我将让它完成它的请求。
尽管这是我真正希望这些模型能够仅凭图像输入就能弄清楚的那种事情，因为就像任何看到这个的人一样，都可以立即发现最大的显眼问题是双侧边栏，所以这只是我非常希望看到模型和代理能够正确处理的事情之一，好的，所以我们只是再抓取一张新图片，这样它就能对它所处的位置有另一种理解，然后我们将继续在这个相同的代理实例中进行迭代，因为这仍然与我们正在做的事情相关，对吧？我们在这里做了很多 UI 工作，好的，果然，它弄清楚了发生了什么，我们将让它得到修复，然后我们可能会想让它占据整个高度，然后，你知道，解决这里的问题，然后我们就准备好了，好的，所以你可以看到它正在处理页面布局，我的意思是，除了基本设置之外，我没有写过一行代码，我认为我没有，这真是太不可思议了，好的，所以我们可能只需要再截一次屏，然后我们就把它弄好，然后测试几个我们真正想要的功能，我们希望这个全高能够被使用，然后我们会希望它能稍微移动一点，如果我能做到这一点，我会非常高兴，你可以看到它正在进入布局，这大概是好的，这看起来很棒，我希望这里能有更多的填充，不像消息线程那样，那会很好，但当然，如果它不能立即识别出来，我们就可以非常具体，对吧？这就是为什么提示很重要，因为你对模型越清晰、越直接，你得到的结果就越好，好的，消息列表，来吧，来吧，根据图片再次进行填充，就像我真的希望看到模型在这方面做得更好，你能做到吗？好的，所以我们在这里做得好了一点，你可以看到，如果我们点击消息列表，你添加了水平填充，这就是为什么它不再边缘对齐，这很好，所以这，我的意思是，这看起来比五分钟前更具生产力，这肯定是真的，然后我只是要更新消息项，显然有一件事我不喜欢，我不喜欢你必须将鼠标悬停才能看到线程消息，但同样，这只是我们可以轻松与模型迭代的事情，这段代码真的很好，就像所有这些都干净利落，它排版很好，你看，我们甚至有更多的间距，我猜这是在，我们看看这些类，是的，你可以看到我们得到了一些水平填充，就像我说的，这正是我想要的，所以如果我们去随机频道，好的，所以我们这里有一个 bug，所以这是一个很好的用例，我们是否又遇到了 AWA bug，对于 uui 的无效输入，所以我们怎么做，所以我们可以抓住这个，这是一个新的问题，我们可以说，去掉它，所以当我们路由到随机频道时，我们似乎遇到了这个问题，我猜是因为，所以，我没有向它解释错误是什么，我实际上希望它自己找出错误是什么，这就是为什么我停在那里，所以这是，这可能是我们在这里做的最后一件事，因为我只是想向你展示，使用新模型和新光标更新进行迭代是什么样的，所以我的观察是，这应该是 SL Channel SL 频道的 ID，而不是它的名称，实际上你可以完全告诉模型，它会在两秒钟内修复这个问题，但我只是想看看，代理是否真的能弄清楚发生了什么，所以看起来，好的，看起来它处理链接不当，频道链接是用字符串名称硬编码的，而不是通过 ID，砰，代理确实弄清楚了问题所在，它现在应该在调整，而且 XML，就像你看到的，它正在进行 diff 格式，他们将不得不解决这个问题，好的，所以现在如果我们点击公告，我们应该得到公告，如果我们得到 [音乐] 随机，得到随机，得到通用，我们应该得到通用，当然，其中一些页面将是损坏的，因为它们还没有存在，我们可以，让我们看看我们是否可以 DM Bob，我们对 Bob 说，你好 Bob，你好吗，我们收到一个错误，好的，让我们，你知道，最后一件事，最后一件事，我保证视频中所有内容，再次，这是一个新的，所以我们将进行 DM 发送错误，然后我们将给出错误消息，然后代理开始工作，所以我们只是想确保我们可以给我们的队友发私信，但这，这有点像 2025 年的编码方式，它的优点是，它对初学者来说非常容易上手，而且不是那种你可以教初学者一个 for 循环的方式，这是一种你可以教那些从未编写过软件的人如何构建实际合法的应用程序的方式，我的意思是，考虑到我们自己没有写一行代码，而且我们只是玩了大约，我不知道，45 分钟，这真是太酷了，来吧，伙计们，不要，不要，不要，我看到软件开发人员，他们经验丰富，你知道，像我这样的人，他们已经编码了很多年，就像，你知道，我猜我不是超级有经验，我有六年的经验，我于 2019 年学会了编码，但是，就像，仅仅因为一个模型在某件你擅长的事情上做得很好，并不意味着你必须把它到处都贬低，就像，这是好东西，更多的人能够接触到它很棒，就像，哦，这是 React 的垃圾，真的吗，伙计，来吧，任何人都可以创建软件的想法很酷，如果你认为这很愚蠢，你就是没有乐趣，好的，所以理论上，这应该，希望它奏效了，所以我们在这里快速刷新一下，然后我们就说，你好 Bob，我们在这里保持简单，是的，好的，DM 有效，所以我们没有写一行代码，我们真的，我们真的只是，让我们实际刷新一下，以确保它有效，非常酷，我们刚刚将错误消息发送给了代理，然后真的只是说 DM 发送错误，它为我们修复了所有问题，好的，所以，是的，这里有所有这些页面，我可以坐在这里，我可以坐在这里几个小时，对吧？我们可以让它尽可能高质量，但我必须在某个地方结束，所以希望你们觉得这有点意思，而且在很多方面，它的参与度比我想象的要低，我们只是坐在这里一起看着代理工作，希望，对于你们中一些害怕构建应用程序的人来说，现在不再害怕了，你发现这很有力量，因为我录制这个视频的全部目的是向你展示，你实际上可以用一个代理构建非常有用的东西，而且你可以继续迭代，你有的任何小想法，你有的任何小 bug 要修复，你需要，模型现在变得越来越好，以及你所知道的，那些模型所包装的工具，比如 kser，也变得越来越好，唯一的事情，你知道，让我们以这个结束，让我们以一个 kpoy 推特结束，唯一阻碍你实现你头脑中所有想法和梦想的是代理，代理大于智能，你现在拥有无限的智能触手可及，尤其是在全栈软件开发方面，所以要成为一个行动者，要成为一个采取行动的人，你现在没有借口了，你拥有强大的模型，你拥有强大的工具，利用它们，我希望这在某种程度上有所帮助，再见，伙计们