00:00:00你们大多数人已经知道 shad cn 是使用最广泛的 UI 库之一,
00:00:05但使用 AI 代理来构建时可能会出现问题。如果你构建的是一次性落地页,
00:00:11不会有太大问题,
00:00:12但如果你在构建新应用或实现新功能,
00:00:15就会出现故障,
00:00:16而且还会破坏应用的其他部分。但这并不是什么新问题,
00:00:20这个问题已经被解决了,
00:00:21这正是工程师现在构建应用的方式。AI 代理总是会测试它们编写的代码,
00:00:27但这些代理在大型上下文中会变得不可靠,
00:00:30因此我们需要一种方法来确保代理完成分配给它们的工作。这就是代理循环概念的由来,
00:00:36Anthropic 通过使用 RALPH 循环来解决这个问题。为了解决我的 UI 问题,
00:00:43我尝试实现 RALPH 循环,
00:00:45起初完全失败了,
00:00:47但我很快了解到这不是因为 RALPH 循环本身,
00:00:50而是因为我实现的流程有问题。所以 RALPH 实际上是 Anthropic 自己发布的一个新插件,
00:00:58但这并不是他们的原创想法,
00:01:00它基于其他人的技术,
00:01:02Anthropic 实现并开源了它。基本上 RALPH 是一个循环,
00:01:07如果你了解 Claude Code hooks,
00:01:11它使用这些停止钩子,
00:01:13当 Claude 停止输出答案时运行。一旦它停止,
00:01:17AI 代理就会再次接收其初始提示文件,
00:01:20这使它能够迭代改进其工作。现在有一个重要的问题:它实际上什么时候会跳出循环?有一个叫做完成承诺的东西,
00:01:28可以是你输入的任何词,
00:01:30当 Claude 觉得它的任务完成时,
00:01:33它会自己输出这个承诺。例如,
00:01:35在这种情况下,
00:01:36承诺是单词 complete。如果承诺在返回提示中,
00:01:40循环就不会再次运行。所以在 Claude 输出承诺之前,
00:01:44它不会停止。这确保了 Claude 不会在它想停止的时候就停止。安装插件后,
00:01:50你将有三个命令:RALPH 循环命令、
00:01:53取消命令和帮助命令。在循环命令中,
00:01:56你需要提供一次又一次地输入给代理的提示。有时它可能会遇到无法解决的不可能任务,
00:02:02可能会陷入无限循环,
00:02:04所以设置最大迭代次数是一个很好的做法。我会在下面留下仓库链接,
00:02:09因为他们有一些关于你可以提供给 RALPH 循环的提示的良好实践,
00:02:14但在这个视频中,
00:02:15我只会讨论与我要展示的 UI 工作流程相关的内容。假设我们想在这个应用中实现两个功能,
00:02:22一个是命令面板,
00:02:23我们在其中添加一个菜单来搜索我们的应用并执行其他命令。为了确保这个新功能不会破坏应用的其他部分,
00:02:31你应该从测试开始。这称为测试驱动开发。如果你不熟悉这个,
00:02:35你可以让 Claude Code 为你设置 TDD 结构,
00:02:40它会创建一个端到端测试文件夹、
00:02:42一个用于检查 UI 问题的截图文件夹以及相应的测试。我们要实现的另一个功能是数据库中的看板视图,
00:02:50类似于 Notion 允许我们对其数据库所做的操作。如果你已经理解了,
00:02:56测试驱动开发是一种在实现代码之前编写测试的方法,
00:02:59但这意味着初始测试总是会失败。所以如果我要实现命令面板功能,
00:03:04我不会直接开始为它编写代码,
00:03:06而是会首先为它编写详细的测试。然后我们编写通过这些测试所需的最少代码。完成后,
00:03:13我们重构并添加更多功能,
00:03:14每次添加时,
00:03:15我们都要确保测试仍然通过。另一个有趣的事情是,
00:03:19这些测试是自动化的,
00:03:21可以导入和使用 Playwright 进行视觉验证。如果你认为我们使用 Playwright MCP 通过浏览器自主验证这一点,
00:03:31那你就错了。使用 TDD,
00:03:33对于每个功能行为,
00:03:34你都可以截图。例如,
00:03:36如果功能行为是添加卡片,
00:03:38那么截图将显示添加到看板中的卡片。所以现在 AI 代理所要做的就是查看这些截图,
00:03:44并确保这些 shad cn 组件的实现方式没有问题。这些测试文件确保每当添加新内容或在构建功能时,
00:03:52我们所有的行为需求都得到满足。但在我们的案例中,
00:03:56我们希望纯粹使用截图进行 UI 验证。但如果我们已经有了 TDD,
00:04:01为什么还需要 RALPH 循环?正如我已经说过的,
00:04:05对于更大的任务和几乎填满的上下文窗口,
00:04:08这些模型会突然退出任务并需要持续的人工输入。因此,
00:04:12我可以预先为我想要的任何类型的功能编写测试,
00:04:15然后使用循环指示它该做什么,
00:04:18它可以通过告诉它要遵循什么工作流程自主工作,
00:04:21然后给它输出承诺的条件,
00:04:23它就会完成任务并退出循环,
00:04:25在这种情况下是当它通过所有 25 个独特的测试时。所以使用 RALPH 斜杠命令,
00:04:32我给它一个提示,
00:04:33让它迭代构建命令面板功能。在提示中,
00:04:36我们基本上是告诉它实现该功能以及一些基本要求,
00:04:39这些要求并不是真的很重要,
00:04:42因为可以在测试中找到这些要求,
00:04:44但我们确实在其中概述了整个工作流程。在该工作流程中,
00:04:48它应该从运行测试开始。它知道测试会失败,
00:04:51之后它需要实现组件以使它们通过。所以这就是整个目标。现在,
00:04:56如果这是一个更广泛的任务,
00:04:58很可能当上下文窗口填满或 Claude 感到困惑时,
00:05:02它会自动退出。它永远不会输出完成承诺,
00:05:05由于它从未输出承诺,
00:05:07提示将再次反馈,
00:05:08它将不得不重新开始,
00:05:10这意味着它将迭代地继续工作。但由于这是一个较小的任务,
00:05:14它实际上能够一次性实现所有内容,
00:05:16写出所有组件并使所有测试通过。现在测试通过后,
00:05:20工作流程告诉它查看命令面板的所有截图。这些是在不同阶段拍摄的截图,
00:05:25以确保 UI,
00:05:26无论是 shad cn 还是你使用的任何其他组件库,
00:05:30都正确实现,
00:05:31并且没有任何小问题。之后,
00:05:33它应该再次运行测试,
00:05:35并确保在 UI 更改后它们仍然通过。由于所有测试都通过了,
00:05:40截图也被审查了,
00:05:41它输出了完成承诺。这就是循环停止的地方,
00:05:44不再继续。但这里有一个很大的问题,
00:05:47我在命令面板功能中没有注意到,
00:05:49因为 UI 错误的可能性很小。然而,
00:05:52当我继续实现看板视图时,
00:05:54我意识到系统中存在一个巨大的错误。我开始使用相同的提示实现看板。当然,
00:06:00要求不同,
00:06:00但工作流程基本相同。现在当它一次性完成所有要求时,
00:06:04我有点惊讶。别误会,
00:06:06它实际上确保了所有测试都通过了,
00:06:09但在这样做的同时,
00:06:10有些情况下成功测试的数量实际上会减少,
00:06:13因为通过改变某些东西,
00:06:15它会破坏其他东西,
00:06:16这就是为什么 TDD 实际上非常重要,
00:06:19因为这种递归测试确保一切正常工作。但主要问题是,
00:06:23在它验证完成后,
00:06:24我去检查 UI,
00:06:25大部分东西都正确实现了,
00:06:27但它完全错过了一些 UI 错误,
00:06:30比如这个。我还检查了截图,
00:06:32这些截图中也显示了错误。所以我问它,
00:06:35我们分析了到底出了什么问题。真正的问题是流程失败,
00:06:39特别是在修复 UI 方面。发生的事情是,
00:06:42它确实通过了所有测试,
00:06:44因为它应该一次又一次地运行测试文件,
00:06:47但除了截图之外,
00:06:48没有针对 UI 的特定测试。它浏览了其中几个,
00:06:52甚至忽略了它看到的一些 UI 错误。有些文件被完全忽略了。所以主要问题是它过早地输出了承诺声明,
00:06:59没有验证 UI 是否真的修复了。我们进行了一整个头脑风暴会议,
00:07:04讨论如何解决这个问题,
00:07:06我甚至把仓库中的提示编写最佳实践给了 Claude Code,
00:07:11但最终我们想出了一些具体的规则和流程的改变,
00:07:14以确保 UI 始终正确。现在这与测试无关,
00:07:17因为它们总是会运行。我们用于命令面板的提示在功能或实现非常大的情况下非常有用,
00:07:24在这种情况下,
00:07:25Claude 不会产生它已经完成任务的幻觉,
00:07:28而是由于上下文窗口已满或任务的复杂性而突然退出。现在 Claude Code 已经非常自主了,
00:07:36这毫无疑问,
00:07:37但仍然存在像这样的问题需要我们修复。所以我们在主提示中改变了许多东西。首先是截图验证协议。我们为每个图像添加了一个简单的前缀,
00:07:47告诉 Claude 它是否已读取截图,
00:07:50但当我第一次实现这个时,
00:07:52它仍然没有读取所有图像。它会读取几个,
00:07:55在它们上面写上已验证,
00:07:56就像以前一样,
00:07:57它会提前退出。所以为了解决这个问题,
00:08:00我们鼓励它以不同的方式思考。我们告诉它,
00:08:04在重命名所有截图后,
00:08:05它不应该输出承诺,
00:08:07这意味着它不应该认为任务已完成,
00:08:09它应该让下一次迭代确认完成。所以至少应该运行两个循环。下一次验证中发生的是,
00:08:15Claude 验证所有文件都有已验证前缀。当然,
00:08:19这意味着我们必须更改测试,
00:08:21将图像验证与功能测试分开。下一次迭代确保所有图像都有已验证的结果,
00:08:26如果 Claude 遗漏了任何图像,
00:08:29它会再次查看并修复输出。有了这个改变,
00:08:32我们面临的小 UI 错误终于修复了,
00:08:35它能够正确实现所有这些功能。所以当它进入下一个循环时,
00:08:39它再次运行测试。由于它发现了一些错误,
00:08:42它修复了它们,
00:08:43因为所有文件中都有已验证这个词,
00:08:46它运行了最后一次测试。这次它在两个循环中完成了任务,
00:08:50并能够修复应用中的所有主要 UI 错误。现在让我们谈谈 Automata。在教数百万人如何使用 AI 构建之后,
00:08:59我们开始自己实施这些工作流程。我们发现我们可以比以往更快地构建更好的产品。我们帮助将你的想法变为现实,
00:09:07无论是应用还是网站。也许你看过我们的视频,
00:09:10想着我有一个很好的想法,
00:09:12但我没有技术团队来构建它。这正是我们的用武之地。把我们想象成你的技术副驾驶。我们将我们教给数百万人的相同工作流程直接应用于你的项目,
00:09:23将概念转化为真正有效的解决方案,
00:09:25而无需雇用或管理开发团队的麻烦。准备好将你的想法加速为现实了吗?请联系 hello@automata.dev。如果你想支持这个频道并帮助我们继续制作这样的视频,
00:09:38你可以使用下面的超级感谢按钮来支持。一如既往,
00:09:41感谢观看,
00:09:42我们下期再见。