스크립트
00:00:00市面上有很多技能可以让你用人工智能设计出漂亮的网站，每一个
00:00:04技能都各不相同，但并非所有技能都管用。有些技能的工作流程繁琐，看起来很厉害，
00:00:09但到头来生成出来的网站还是千篇一律。只有极少数
00:00:13技能才能真正发挥作用。你可能会想，为什么一开始还需要这些技能呢，
00:00:17因为现在的模型已经足够强大，它们的设计水平本来就很出色。但不管一个模型
00:00:22有多强大，每个模型在设计时都会遵循自己的模式，而这种模式很容易
00:00:26被看出来。这就是为什么你需要一些东西来引导它们摆脱这种模式，并真正让你的
00:00:30网站脱颖而出。这些技能是由在设计领域拥有丰富经验的人开发的，
00:00:36他们将经过测试且对自己有效的工作流程重新打包成可重用的形式，以便
00:00:41你也能使用。如果你是新来的，欢迎来到这里。我们是一家软件公司，这里是 AI 实验室，在
00:00:46这期视频中，我们将介绍我们测试过并确实带来成效的技能。有一件事
00:00:51在我们开始之前值得了解，那就是你不需要将技能添加到 Claude Design 本身。你在
00:00:55Claude 设置中添加的技能，也就是你可以在 Claude Design 中使用的技能。所以你只需从
00:01:00Claude 设置中添加技能即可。尽管我们在 Claude Design 中使用这些技能，但它们也能与 Claude
00:01:05Code、Codex 或你使用的任何其他代理配合使用，并取得同样的效果。我们要谈论的第一个
00:01:10技能是 Emil Kowalski 的技能。这套技能中不仅有一个，而是足足九个技能，每一个
00:01:15都改变了设计的不同部分。这些也是我们在进行设计工作时自己会使用的技能，
00:01:20无论我们使用的是 Claude Code 还是 Claude Design。里面有许多技能，
00:01:25每个技能针对设计的不同领域。其中就包括苹果设计（Apple Design），它包含了苹果在自己的
00:01:30产品中所使用的所有设计原则，并使它们可用于其他网站。
00:01:35还有一个动画词汇（Animation Vocabulary）技能，它基本上能将你含糊不清的动画描述
00:01:40转化为模型能够理解的精确词汇。你可以添加任意数量的技能，但其中有两项
00:01:45是我们使用最多的，因为它们极大程度地提升了 Claude Design 的功能。
00:01:50其中一个是 Emil 设计工程技能，其中包含了关于如何构建漂亮的
00:01:55UI 组件并为其添加动画的说明，使其成为开始设计的最佳技能。
00:02:00我们使用的另一个是动画制作（Animate），它包含了一个完整的流程，用于为
00:02:05已经建好的网站添加动画，并附有详细的分步过程。要使用它们，你需要将它们添加到 Claude
00:02:10中，一旦添加完成，你就可以在 Claude Design 内部使用它们。在那里，你输入斜杠和技能名称，
00:02:15并在提示词中告诉它你想要的网站。由于我们尚未构建设计，我们首先使用了
00:02:20Emil 设计工程技能。然后它会调用该技能，但在构建任何东西之前，它会向你
00:02:25询问有关应用程序的问题，方式与 Claude Design 自己提问的方工相同。当你回答这些问题后，它就会构建
00:02:30设计。Claude Design 制作的第一个版本看起来很简约，带有单色风格，但出来的动画
00:02:35看起来不够精致，在某些地方甚至不同步。这就是动画技能派上用场的地方，
00:02:40因为它实际上会精修已构建网站上的动画。这个技能了解网站是如何
00:02:46运作的，并决定什么地方需要动态效果，什么地方不需要。一旦 Claude 完成了
00:02:51修改，网站的动画就得到了极大的改善。动态效果与滚动保持同步，并且与
00:02:56我们之前拥有的相比，整个效果显得更有意图性。现在你可能会觉得这与
00:03:01Claude 通常产出的内容没有太大区别，但那是因为这是一个落地页（Landing Page）。虽然它
00:03:06确实改善了这里非常微小且微妙的动画，但在落地页上看起来不错的
00:03:11主要动画风格是那些基于滚动的动画，我们在之前的视频中已经介绍过很多关于这方面的技能。
00:03:16但该技能真正发挥强大作用的地方是在应用程序功能端的微小元素中。
00:03:21例如，我们正在为一家餐厅制作一个网站，我们使用动画技能在上面添加了
00:03:26动画，它添加了微小的动画，改善了使用该网站的感觉，比如当我们提交表单时添加动画，
00:03:32以及悬停时弹出的图形。所有这些细节结合在一起，使
00:03:37网站感觉更具交互性，并改善了使用体验。你可以添加
00:03:42任意多的 Emil 的技能，因为所有这些都将为你的设计工具包带来重要的补充。
00:03:47接下来我们要谈论的是 Conard Lee 的花园（Garden）技能，这也是一个
00:03:52合集，而不是单一的技能。其中包含五个技能，涵盖视频
00:03:57演示和图像等方面，但其中最重要的一个是网页设计工程师（Web Design Engineer）技能，
00:04:02这是因为该技能实际上包含了如何像顶级设计工程师一样进行设计的说明。
00:04:07这个技能完全专注于让视觉效果惊艳，而不是功能。这个
00:04:12技能的工作方式是获取你的需求，并与你一起梳理，直到明确你
00:04:17想要什么，然后它会寻找真实的设计作为参考来工作。它的原则是优秀的设计从不凭空产生，
00:04:22凭空捏造，正如世上所有的设计都受到此前事物的启发一样。它
00:04:27同时也以那些以往行之有效的设计为基础。该技能还包含一套
00:04:32参考资料，涵盖多个与设计相关的领域。它们涵盖了如何评估设计、设计通常出错的
00:04:38方式，以及像 Apple 和 Linear 这样知名网站的风格食谱，以便它在构建你的网站时，能够参考这些网站实际是如何运作的。
00:04:44因此，一旦你在 Claude Design 中添加了它，你就可以通过提供一个描述你想构建什么的提示词来使用它。
00:04:49我们从中得到的网站比 Claude Design 自己产出的网站要有趣得多。
00:04:55从设计的角度来看，它比 Claude Design 自己制作的版本更加彻底和出色。
00:05:01如果你已经有了设计然后运行该技能，它会检查该设计并在不同领域对其进行评分。
00:05:08你可以不断完善设计并一遍又一遍地运行它，直到它达到满分并匹配
00:05:13你真正想要的设计。但在我们探索其他技能之前，如果你能订阅频道
00:05:18并点赞，那就太好了。这种小小的支持对我们来说意义重大。
00:05:22我们要谈论的下一个技能是 Elia Design 的 AI 设计技能，这一次它只是一个专为落地页构建的单一技能。
00:05:30它所做的一切都在一个文件中，其工作是将你的想法转化为一个视觉系统，这基本上就是页面上一切都遵循的规则集合，
00:05:37这包括颜色、字体和间距。
00:05:41这个技能是一个专门的完整系统，用于设计真正值得拥有的落地页。
00:05:46其背后的理念是，落地页不是主页。主页试图同时服务于许多不同的人。
00:05:53但落地页只有一个任务，那就是让人真正采取行动。
00:05:57模型倾向于生成能用的主页，但它们并不像这个技能那样专门用于设计落地页。
00:06:03因此，它围绕你希望访问你网站的人采取的那一个动作来构建页面，从而通过围绕该动作构建你的网站来将焦点吸引到该动作上。
00:06:12它还将设计保持在一致的视觉风格，并且还解决了大多数模型忽视的网页设计的其他领域，包括确保可以通过搜索轻松找到该网站。
00:06:22因此，一旦你在 Claude 的技能中安装了它，每当你需要设计时，就可以用提示词运行它。
00:06:27它也会先向你提问，一旦你回答了这些问题，它就会开始设计。
00:06:31它制作出来的网站让人感觉像是一个真正的品牌，并且符合我们所追求的确切氛围。
00:06:36每个元素的结构方式使得进入网站的人更有可能真正进行购买。
00:06:43但首先，让我们听听赞助商的话。
00:06:45Make。你已经知道用于可视化自动化的 Make，但他们刚刚推出了 Maya。
00:06:49这是一个直接生活在 Make 构建器内部的人工智能同事。
00:06:52大多数人工智能构建器给你一个黑盒，而你只能祈祷它能用。
00:06:56Maya 则不同。你用通俗易懂的英语告诉她你想要什么，她就会在你的眼前构建它。
00:07:00所以我们尝试了。我们要求 Maya 每当有新线索进入 Salesforce 时就向我们的团队发送 Slack 摘要，它直接进入了画布。
00:07:07Maya 通过请求进行推理，挑选出正确的工具，映射每个模块，并在我们观看的同时将整个自动化连接在画布上。
00:07:15你可以看到每一个决定，这样你就可以随时介入并调整任何东西。
00:07:19在这个过程中，你不仅获得了自动化，还在学习 Make 实际上是如何工作的。
00:07:23它现在处于测试阶段，可以免费试用。链接在简介中。
00:07:26接下来我们要谈论的技能是 Meng To 开发的。
00:07:29他其实是一位在业内深耕多年的设计师，以沉浸式滚动叙事设计而闻名。
00:07:36他将自己发现的一切都打包成了一个设计技能系统，以便你也能使用它。
00:07:41这里面包含许多技能，涵盖了不同的领域。
00:07:44所有这些都专注于生成高质量的设计，这些设计实际上是在讲故事，而不仅仅是视觉上好看。
00:07:51其中之一是视频转超级提示词（Video to Super Prompt），它的工作原理是获取网站的屏幕录像或演练，并使用你机器上的工具将该录像转化为你代理的提示词。
00:08:01但我们真正想谈论的技能是获奖品质网站（Awards Quality Sites）。
00:08:05Awards 是一个举办惊艳设计竞赛的网站，在那里获胜的网站被公认为网络上设计最好的网站。
00:08:12这个技能实际上列出了获奖级别网站所包含的原则和设计细节。
00:08:17这一点很重要，因为 Claude 无法凭自己构建出那个水平的设计。
00:08:21所以该技能将这些原则融入到过程中，并引导设计的方向。
00:08:25这些技能与众不同之处在于，除了原则之外，该套件还带有实际的技术和特定效果，使网站看起来很昂贵，而这是模型无法独自产生的部门。
00:08:35添加了获奖技能后，你给它一个描述你想要什么样的网站的提示词。
00:08:40最终呈现出的网站，其结构与设计都和那些获奖网站如出一辙.
00:08:45页面里包含微妙的动态背景，但最引人注目的还是滚动效果.
00:08:49它运用了基于滚动的叙事方法，就像你在 Awwwards 上看到的那些精选网站一样.
00:08:54下一个技能集是由 Jakub Krehel 开发的.
00:08:57与其他单个技能包揽网站所有部分的技能不同，它将其拆分为多个技能，让每个区域都有专属技能.
00:09:05所有设计相关的元素，包括排版、色彩、无障碍访问等，都各自拥有独立的技能，而不是由一个技能处理所有事情.
00:09:13你可以将其中任何技能添加到 Claude Design 中，但我们使用的是审查（review）技能.
00:09:18我们使用它是为了全面审查设计的各个方面，以便根据它给出的评分进行迭代.
00:09:24如果你将此审查技能连接到 GitHub，它的效果会更好，因为它会检查你修改前后设计的外观.
00:09:31如果在你上次修改之前有效的东西现在失效了，它会标记出来，并能告诉你是因为你做了某项特定更改才导致它失效的.
00:09:40它会检查动画、无障碍访问以及网站在不同屏幕尺寸下的表现等内容，然后列出它发现的所有问题以便你进行修复.
00:09:48我们还使用了更好的布局（better layout）技能，因为这正是 Claude Design 实际上面临困难的地方.
00:09:52这个技能处理的是间距、定位以及整个设计中元素的对齐方式，并且它对设计的处理非常彻底.
00:09:58例如，它发现页面上的某个日期需要比当前更多的空间，甚至告诉我们需要多少额外的像素.
00:10:04所以你只需告诉它修复所有的标记即可.
00:10:06它不会让网站看起来发生翻天覆地的变化，但它能确保网站符合人们实际遵循的设计原则.
00:10:14列表中的下一个技能是 Tastemaker.
00:10:16它的主要目的是避免模型产生的千篇一律的默认效果，而它的独到之处在于实现这一目标的方式.
00:10:22它直接从真实参考的实际像素出发，因此在将外观转化为文字的过程中不会丢失任何东西.
00:10:28当你给模型一张参考图片时，它通常会将其转化为基于文本的摘要，以便稍后作为参考.
00:10:34但这个技能实际上使用脚本提取精确的设计细节，并将其保存为结构化格式，供智能体日后使用.
00:10:42这保留了原本在基于文本的摘要中会丢失的设计细节.
00:10:46它首先依靠脚本来处理许多不需要智能体亲自去做的事情.
00:10:52例如，它将它们推向不同的方向并尝试各种变体.
00:10:55它所做出的决策会贯穿整个项目，而不仅仅局限于单一屏幕.
00:10:59这个技能实际上赋予了模型设计审美，这样它们就不会默认使用那些千篇一律的模式.
00:11:05因此，一旦你添加了它，就可以通过斜杠命令和提示词以相同的方式运行它.
00:11:09我们向它提供了我们想要的网站以及早期的风格要求，并让它对其进行处理.
00:11:14呈现出来的网站看起来非常令人印象深刻，完全没有那种平庸的风格，并且与我们要求构建的网站的外观和感觉完美匹配.
00:11:22最后一组是另一个受欢迎的合集，它们的独特之处在于它们扎根于实际研究.
00:11:28即设计师们实际工作所依据的具名设计法则，每个法则都有一个独立的技能.
00:11:33它的一些技能涵盖了为什么人们会在中途离开你的网站，以及当某人在网站中浏览时行为是如何表现出来的.
00:11:39而且你不需要把它们全部安装.
00:11:41你只需安装符合你工作方式的技能.
00:11:44在我们的配置中，我们添加了两个.
00:11:45第一个是屏幕批判（screen critique），它获取一个屏幕并从许多不同的角度进行审查.
00:11:50然后指出该屏幕存在的问题，并且它的运作依据是判断设计质量的正规准则.
00:11:56第二个是知觉定律（perception laws），它基本上包含关于人眼如何实际看到和理解设计的说明.
00:12:03因此，一旦你完成了设计，就可以运行审查，它会反馈诸如什么最引人注目等存在的问题.
00:12:09包括字体和间距，并将它们全部列出以便你进行修复.
00:12:12一旦将知觉定律应用到网站上，整个网站就会感觉更加精致.
00:12:17以上就是 GitHub 上供大家使用的那些技能.
00:12:20但我们还使用了其他技能，这些是我们通过测试自己构建和完善的，在实际构建产品时会使用它们.
00:12:26因此，如果你想获取这些内容，可以在我们的社区 AI Labs Pro 中找到.
00:12:31这些技能包括我们自己构建的一些技能以及我们使用的开源技能.
00:12:36所以，如果你觉得我们的工作有价值并想支持这个频道，这就是最好的方式.
00:12:41链接在简介里.
00:12:42这也来到了本期视频的尾声.
00:12:44如果你想支持本频道并帮助我们继续制作这样的视频，可以通过点击下方的超级感谢按钮来做到这一点.
00:12:50一如既往，感谢大家的观看，我们下期再见.