00:00:00Claude Code 确实非常出色，但我们的团队已经开始用它处理一切事务了。
00:00:03Anthropic 注意到了这一点，并在不久前引入了“技能”的概念。
00:00:07但随着 Nano Banana Pro 的发布，人们开始转向完全不同的方向，
00:00:12开始使用 Google 的 anti-gravity 等产品来构建更好的网站。
00:00:15我们尝试过 anti-gravity，但我们认为它目前还存在太多缺陷。
00:00:19我们知道那些喜欢 anti-gravity 的人肯定会猛烈抨击我们。
00:00:21不过这是另一个视频的主题了，但它生成的图像确实是免费的。
00:00:25所以我们想，为什么不让 Claude 负责编码，而让 anti-gravity 只负责处理图像呢？
00:00:30但问题就在这里。
00:00:31对于这些不同的用例，你不应该每次都重新向 Claude 发送提示词。
00:00:35你应该训练它并制作一个专门的技能。
00:00:37所以 Claude 最近发布了一份关于如何构建技能的指南。
00:00:41而其中最重要的部分就是测试和迭代。
00:00:44坦白说，这份指南彻底改变了我们对这些技能的看法。
00:00:48你可能已经听说过 Skill Creator（技能创建器）了。
00:00:50它是 Claude Code 的官方技能，旨在为你创建高效技能提供指导。
00:00:55但我们的一位团队成员发现，根据我们发布的最新指南，
00:00:58它现在已经有些过时了。
00:01:00所以我们对其进行了更新，并根据新的指导方针更改了很多内容，
00:01:02并做出了非常棒的改进。
00:01:05利用这个更新后的技能创建器和大量的艰苦迭代，
00:01:09我们制作了这个全新的 nano banana UI 技能。
00:01:12但我们最初开始制作的技能和最终完成的技能完全是两码事。
00:01:16这两个技能都可以在 AI Labs Pro 中获取。
00:01:19对于还不了解的人来说，那是我们最近推出的社区，
00:01:22你可以在那里获得即插即用的模板，直接应用到你的项目中，
00:01:26涵盖本视频及之前所有的内容。
00:01:28如果你觉得我们的工作有价值并想支持这个频道，
00:01:31这是最好的方式。链接就在描述栏中。
00:01:34我们已经理顺了 Claude Code 和 Anti-Gravity 之间的协作流程。
00:01:38因此，我们在 Claude Code 和 Anti-Gravity 中都打开了相同的目录。
00:01:42Claude 初始化了项目，而 Anti-Gravity 只需要关注这个 public 文件夹，
00:01:47里面会存放所有的图像。
00:01:49Claude 将提供 Anti-Gravity 需要生成的图像的提示词和文件名。
00:01:53这些提示词被输入到 Anti-Gravity 中。
00:01:56它启动了图像生成工具，并利用并行处理，
00:02:00同时生成了多张图像。
00:02:03你可以看到它生成了三张图像，且三张都存放在了这个 images 文件夹中。
00:02:08放置完成后，Claude 自动检测到了它们的存在，并能轻松地调用它们。
00:02:12但就在我们开始实际生成图像的那一刻，很多问题接踵而至。
00:02:17你可能已经听过很多次了，但在构建这些重复性工作流时，
00:02:21描述工程（Description Engineering）是最重要的事情之一。这些描述是
00:02:26YAML 头部信息，每当你打开 Claude Code 时，它们总会被加载到上下文中。
00:02:30这就是 Claude 实际决定是否需要加载你的技能的方式。
00:02:34但许多用户反映，有些技能在不需要的时候也会被加载到上下文中。
00:02:38这是因为大多数描述只说明了技能的作用。
00:02:41而一个好的描述实际上应该回答两个问题。
00:02:44这个技能是做什么的？以及 Claude 什么时候应该使用它？
00:02:46这就是“触发短语”发挥作用的地方。它们是实际调用技能的内容，
00:02:51比如 “构建登陆页面” 或当我们提到 “nano banana” 时。但关键不仅在于何时使用。
00:02:57指南还提到了“负向触发词”，它们告诉 Claude 什么时候不应该使用该技能。
00:03:01例如，我们定义了它不应该在进行简单的漏洞修复或数据库工作时加载。
00:03:05所以，好的描述和差的描述之间的区别显而易见。
00:03:08你可以看到，这个由新技能创建器生成的技能包含多个触发短语和负向触发词，
00:03:13而这个旧版的技能创建器生成的只描述了技能的功能。
00:03:17还有一些纯粹是定量且与语法相关的指令，
00:03:21但你不需要了解那些。
00:03:23另外，如果你喜欢我们的内容，请考虑点击“赞赏”按钮，
00:03:27因为这能帮助我们制作更多此类内容并接触到更多人。
00:03:31通常情况下，在生成不同的图像时，它们中的大多数需要具有
00:03:35不同的尺寸，因为它们需要适配或用于不同的场景。
00:03:39这也是我们在修改之前的提示词中所指定的。
00:03:42但发生的情况是，每当我们尝试使用这些自定义尺寸时，
00:03:46anti-gravity 中的图像生成工具只会生成正方形图像。
00:03:50通常这在 Gemini 应用或 Google AI Studio 中的简单模型里不是问题。
00:03:55但在这里，我们必须改变流程并相应地修改技能。
00:03:58这在 skill.md 的相应阶段都有提及，
00:04:02同时在提示规则中也注明了：每当它编写提示词时，
00:04:06它不应指定任何尺寸或纵横比，因为那并不重要。
00:04:10如果确实需要为特定用途裁剪图像，
00:04:12它应该稍后使用其裁剪图像工具来完成。
00:04:15这就是为什么 scripts（脚本）文件夹如此重要的原因。
00:04:18它存放了 Claude 可以通过特定参数调用的可执行工具，
00:04:22你可以根据不同的用例来发掘这些工具。
00:04:25现在，一个好的脚本实际上应该具有这些带有不同模式的 CLI 参数，
00:04:29以便 Claude 能够轻松调用。
00:04:31我们其中一员发现，非常需要的一项功能是“预览模式”，
00:04:35这可以帮助 Claude 在执行某些破坏性操作之前预览输出结果。
00:04:40让我们休息一下，聊聊今天的赞助商。
00:04:42在那之后，我们将研究大多数人在构建技能时
00:04:45会犯的一个结构性错误。
00:04:47CREAM
00:04:47对于开发者和 SaaS 创始人来说，最大的头痛不是开发，
00:04:50而是全球税务和增值税合规的噩梦。
00:04:53CREAM 是一家代收代缴商，它能完全分担这一重担，让你专注于开发。
00:04:58CREAM 专为下一波数字业务而生，
00:05:00提供闪电般的设置速度，让你在第一天就能接受来自 100 多个国家的付款。
00:05:05他们消除了隐藏费用的困扰，
00:05:07提供 3.9% + 40 美分的透明统一费率。
00:05:11仅此而已。
00:05:11无论客户在东京还是德克萨斯，无论是使用运通卡还是 Google Pay，费率都一样。
00:05:16你可以获得强大的功能，比如自动收入拆分，以确保顺利启动。
00:05:20请务必使用他们的隔离测试模式和专门的 TypeScript SDK。
00:05:23此外，CREAM 还为 Claude Code、Cursor 和 WinSurf 提供官方 AI 代理技能。
00:05:28只需告诉你的 AI 助手集成 CREAM，
00:05:30它就会根据他们最新的 API 最佳实践立即生成生产级的安全代码。
00:05:36请记住，永远不要将你的 API 密钥提交到版本控制系统中。
00:05:39如果你准备好使用支付栈了，请点击置顶评论中的链接。
00:05:42停止担心税务问题，开始使用 CREAM.io 进行扩张。
00:05:45你可能已经在我们之前的许多视频中听过我们讨论“渐进式披露”了，
00:05:50因为它不仅与技能有关，对上下文窗口也至关重要。
00:05:55这意味着代理只有在需要的时候才应该了解某些信息。
00:05:59你已经知道，描述总是会被加载到 Claude Code 的上下文中。
00:06:03这就是为什么这些技能使用三层结构，
00:06:06第一层始终在 Claude 的上下文中。
00:06:09第二层是 skill.md 的主体，它应该包含对第三层的引用，
00:06:14包括完整的工作流以及如何使用这些引用的指令。
00:06:18在这个结构中，官方指南定义了一个叫做“关键部分”的东西。
00:06:23你应该把最重要的信息直接列在最前面，
00:06:26而不是把它隐藏在所有这些不同的指令之下。
00:06:29你可以清楚地看到，这个技能只有 skill.md，而没有第三层结构。
00:06:34这是因为所有的工作流、技巧、各种建议，
00:06:38以及故障排除指南都被放在了一个文件里。
00:06:41这不应该是它的结构方式，
00:06:43因为此刻它可能并不需要这些指南。
00:06:45它应该先只加载工作流，
00:06:47然后只有在需要编写或使用提示规则时，才调入它们。
00:06:51而另一方面，这个技能的结构非常清晰，包含引用
00:06:54以及它所需的各种脚本。
00:06:56除了工作流之外，该文件还清楚地标明了运行每个脚本的触发条件，
00:07:01以及何时查看不同指南的引用信息。
00:07:04所以在 skill.md 中，它只包含 nano banana 技能的工作流。
00:07:08在那之后的引用部分，它包含了不同的指南，
00:07:12其中的提示规则包含了 13 条不同的测试规则，
00:07:15这些是我们经过迭代测试后总结出来的。
00:07:17但即使有了这些结构，Claude Code 还是会想办法跳过步骤。
00:07:22在生成第一批图像后，
00:07:24它们肯定需要重新生成，
00:07:26因为 nano banana 并不总能生成最准确的输出。
00:07:29令人惊讶的是，Claude 并没有自行验证这一点。
00:07:33我们必须询问它，这些图像是否符合它想要制作的设计方案。
00:07:37否则，它就会直接开始应用它所生成的那些图像。
00:07:41再说一次，这就是为什么我们说迭代是构建这些技能的关键。
00:07:45我们已经有了一个验证资产的步骤，使用的是 validate images 脚本，
00:07:49但那只能从结构上验证图像是否合格，
00:07:52而不能验证图像的美学是否正确。
00:07:55它与美学完全无关。
00:07:57对于美学，Claude 必须亲自进行视觉审查，
00:08:00它会考量这些问题并决定图像是通过还是失败。
00:08:04如果失败了，它还需要提供原因。
00:08:07这是因为如果图像没能通过视觉审查，
00:08:09它需要删除该图像，然后编写一个新的修正后的提示词。
00:08:13取决于你处于哪种模式，如果你在 anti-gravity 模式下，
00:08:16它会给你一个新的提示词，包括之前那个失败的原因，
00:08:20以便 anti-gravity 能够生成更好、更新的图像。
00:08:23因此，这就是为什么 anti-gravity 会说它已经重新生成了玻璃杯图像，
00:08:27并且这次它符合要求。
00:08:29这就是为什么如果你在构建一个工作流，拥有这些“验证门”是非常重要的。
00:08:34验证门是显式的阻断器，定义了在进入工作流下一步之前
00:08:39必须完成的事情。
00:08:41正如你所见，如果全靠 Claude 自己，它会很乐意围着缺失或损坏的图像构建 UI，
00:08:46除非你告诉它，否则它根本不会验证任何东西。
00:08:48例如，在这个技能中，
00:08:50你可以清楚地看到工作流有它需要遵循的多个步骤。
00:08:54但在其他错误中，
00:08:55在进入下一步之前，它并没有设置任何验证门。
00:08:59这些验证门本质上还是提示词。
00:09:01它们并不是什么神奇的 bash 命令。
00:09:04但如果它每次都需要被重复使用且没有任何变化，
00:09:08你就应该制作一个工具，并将该工具列为验证门。
00:09:11但在这种情况下，在多个步骤中，我们设有这些验证门，
00:09:15它们不仅能防止流程从一部分跳到另一部分，
00:09:19而且还在每个工作流内部形成了一个微型流程。
00:09:22当你不断地对流程进行实验和迭代时，
00:09:26你会发现确实会遇到很多错误，其中一些你已经见过了。
00:09:30例如，缺失或损坏的图像、部分 API 输出，
00:09:34或者脚本因为局部失败而退出。
00:09:36在整个过程中，当你对技能进行迭代时，
00:09:39一个好的技能创建者应该记录每一个错误的排布处理并清晰地定义它们。
00:09:44因为如果它已经发生过一次，它就可能再次发生。
00:09:46它应该按照这种格式来处理。
00:09:48先定义错误，然后是原因，这样 Claude 就能明白，
00:09:51最后是实际解决问题的步骤。
00:09:54再次强调，当我们告诉它构建一个登陆页面时，它只是加载技能并读取你的文件。
00:09:58如果你已经有一个 Next.js 项目，它会检测到并向你提问，
00:10:02比如这个登陆页面是做什么用的，以及你是否需要 AI 生成的图像。
00:10:06如果你说不需要，它就会直接利用其前端资源来构建登陆页面。
00:10:11这是因为在构建过程中，我们也让 Claude 去完成
00:10:16这个前端设计技能，它包含大量绝佳的指导方针，
00:10:19用于实现真正美观的网站。
00:10:22在完成所有实验后，这就是它实际为我们生成的成果。
00:10:27你可以看到这就是我们生成的图像，
00:10:29它上面带有一种微妙的动画效果。
00:10:32除此之外，它是一个非常简洁的登陆页面，图像并没有过度使用。
00:10:36它们只被应用在真正需要的地方。
00:10:39但在刚生成的时候，它使用的字体存在问题。
00:10:43效果非常不理想。
00:10:44所以我们找来了他们实验过的特定排版字体，
00:10:48这才是真正为我们解决排版问题的东西。
00:10:51所以，我们只是在调动各种资源，
00:10:54哪怕它们与这个 nano banana 设计技能没有直接关系，
00:10:57我们把它们放进去，这样它在需要的地方就能拥有这些能力。
00:11:00在渐进式披露中，我们已经讨论了带有引用和脚本的附加文件。
00:11:06现在我们要深入研究引用（references），它们是特定领域的智能体现。
00:11:09虽然你的技能已经为某个特定领域准备就绪，
00:11:12但它也可以将这些小型的、多重的知识包作为独立的组件。
00:11:16例如，在这些引用中，我们列出了设计模式、
00:11:19前端美学和提示规则。
00:11:21通过这种方式，我们可以不断扩展技能的知识库，而不会污染上下文窗口。
00:11:26到目前为止，你看到的所有建议都是在教你如何训练 Claude 以更好的方式完成任务。
00:11:31但它并没有告诉你如何实际正确地使用它。
00:11:33为此，我们还有另一个视频，向你展示 10 种
00:11:36利用 Claude code 获取优势的最新方法。
00:11:39你会在片尾屏幕上看到那个视频，
00:11:41所以你最好直接点击它，而不是去搜索。
00:11:43本期视频到此结束。
00:11:45如果你想支持这个频道并帮助我们继续制作这样的视频，
00:11:49你可以通过下方的“超级感谢”按钮来实现。
00:11:51一如既往，感谢观看，我们下期再见。