Transcript
00:00:00每个人都能使用同样的 AI 模型，但没人围绕这些模型构建相应的流程。
00:00:05你可能听说过这种说法：模型本身已经不再重要，关键在于其“配套框架”。
00:00:09所谓的配套框架，基本上就是你为 AI 模型构建的执行流程。
00:00:13但你需要明白一点。
00:00:14模型在不断进化，所以你三个月前构建的框架现在已经过时了。
00:00:19录制本视频时，市面上最强的模型是 Anthropic 的旗舰模型 Fable 5，
00:00:24但别担心，我们会引导你掌握各种方法，确保你的框架
00:00:27能适应任何现有的模型。
00:00:30实际上，Anthropic 官方就有一个针对前端设计的技能（skill），
00:00:34它存在的理由正是他们自己发现的一个问题。
00:00:37问题在于，模型会趋向于输出你所要求的设计中最安全、最平庸的版本。
00:00:42他们称之为“收敛于分布”。
00:00:43这基本上意味着它构建出来的东西，
00:00:47是它以前见过成千上万次的。
00:00:49鉴于这些最新模型被宣传得如此强大，你可能认为这不再是个问题了，
00:00:53但我发现事实并非如此。
00:00:56例如，在这个提示词中，我们只是要求它为一个种植园网站构建一个落地页。
00:01:01为了引导它走上正轨，我们告诉它要尽可能有创意，不要太关注内容本身。
00:01:06我们还明确要求它不要加载任何技能，
00:01:07因为我们的系统中已经有多种技能可用，我们想确保它没有直接借用这些现有的技能。
00:01:13这就是它最终创建出的结果。
00:01:16这设计绝对不算差，
00:01:18但显然也谈不上优秀。
00:01:22例如，存在一些对比度问题，而且部分图片无法正常加载。
00:01:26但当我们使用这个技能时，情况大不相同。
00:01:29这个技能并没有什么特别之处。
00:01:31它没有任何引用或外部资源。
00:01:34它本质上就是一个提示词。
00:01:35仅凭这一点，它就产出了一个好得多的设计。
00:01:37设计显得更加精致，也更美观。
00:01:41它加入了微妙的动画，并且在细节处理上更加用心。
00:01:45总体而言，结果明显优于模型单独生成的效果。
00:01:49随着每一款新模型的发布，这些 AI 公司都会为 API 用户提供新的提示词指南。
00:01:55我们利用 Fable 5 的指南改进了设计技能。
00:01:58你可以直接复制通用的设计提示词和提示词指南。
00:02:02将它们都粘贴进 Claude 中，告诉它你已经有了该模型的提示词指南，
00:02:06并让它基于此创建一个更新版本。
00:02:09它会分析提示词，并为你生成针对新模型的重写版本。
00:02:12而且你可以看到新网站看起来好多了。
00:02:15结构更合理，并将所有不同的元素都做成了卡片布局。
00:02:19我们认为它比 Claude 通常生成的内容更有创意，因为那些细微的细节，
00:02:24比如 CTA（行动号召）区域被设计成了一张带有邮票的明信片。
00:02:29正是这些微小的细节使其看起来更有创意。
00:02:32此外，这些公司发布提示词指南还有另一个原因。
00:02:35很多时候，模型存在行为问题，而这些指南会教你如何修复它们。
00:02:39当 Opus 4.8 发布时，Anthropic 指出该模型倾向于默认使用特定的设计风格。
00:02:45他们的修复方法是让模型先生成多种设计方案，然后再让你选择方向。
00:02:51但在 Fable 5 发布时，其提示词指南中不再提及此问题。
00:02:56根据我们的观察，模型依然会回退到那种固有的风格。
00:02:59这并非每次都会发生。
00:03:01但根据我们的测试，大约三分之二的生成站点最终还是具有非常相似的风格。
00:03:07所以问题并没有真正解决。
00:03:08这就是为什么查看旧模型的文档也很有意义。
00:03:11你经常能发现一些有用的信息，而这些信息并没有被纳入最新的指南。
00:03:15因此，我们使用了 Opus 4.8 的提示词指南，切换到了另一种设计技能，
00:03:20它会主动询问我们想要哪种设计方向。
00:03:23根据这个信息，它生成了现在的设计。
00:03:25看起来效果也不错。
00:03:26但老实说，更好的方法是使用这里的 design.md 文件。
00:03:30这些文件包含品牌语言，你可以直接将其应用到页面上。
00:03:33Get design.md 是一个非常好的资源，你可以在那里获取许多品牌的配置文件。
00:03:38不过，即使如此，也建议在模型生成完落地页之后再使用这些文件。
00:03:42这特别适用于落地页设计，因为如果你查看 design.md 文件，
00:03:47它们会将所有内容都限定死，甚至精确到字体。
00:03:50正如你在示例中所见，字体是使这些网站看起来更具创意的关键要素。
00:03:55在添加动画时，有两个层面。
00:03:58营销 UI 和功能性 UI。
00:04:00在仪表盘等功能性 UI 上使用设计技能会使其看起来很漂亮，
00:04:05但人们可能根本无法使用它。
00:04:07所以，对于动画的添加，我们使用两样东西。
00:04:10对于营销页面，该技能已经指示模型添加基于 CSS 的动画，
00:04:15但 GSAP 动画效果要好得多。
00:04:17这时就需要提示词指南中的另一步操作了。
00:04:20“投入度”（Effort）现在是控制模型的主要杠杆。
00:04:22对于简单任务，可以将其保持在“低”到“中”水平，
00:04:25但对于添加动画等任务，使用“极高”（X-High）是一个更好的选择，
00:04:30而且需要重试的次数会更少。
00:04:32在我们的营销 UI 技能中，有一条规则规定了何时应该使用 GSAP。
00:04:36一旦该条件触发，它会自动加载 GSAP 技能。
00:04:41我们实际上在展示的这个落地页上也使用了这种设置。
00:04:44即使我们在这方面的规划有限，它也做得出奇地好。
00:04:48它精准地定位了屏幕动画在明信片中播放的位置，
00:04:52并且让季节过渡一个接一个地呈现。
00:04:55这是一个很好的例子，说明这些专业技能如何能自动处理大量实现细节。
00:04:59我们通过大量的反复试验才实现了这一技能系统。
00:05:00我的意思是，不断触及 5 小时的使用限制。
00:05:03如果你想跳过所有这些麻烦，可以从我们的 Community AI Labs Pro 获取。
00:05:07链接就在说明栏中。
00:05:11如前所述，UI 分为两种。
00:05:12功能性 UI 背后的整个工作流与营销 UI 完全不同。
00:05:15例如，规划是第一步，而且非常重要。
00:05:20我们不会在本视频中深入探讨这一点，但一旦有了计划，
00:05:23你可以将其交给 Claude。
00:05:27在此之后，不要让它直接构建应用，
00:05:27而是应该让它先使用 HTML 构建原型。
00:05:33我们的流程从 design.md 开始。
00:05:36如果你已经决定好要使用哪个 design.md，那很好。
00:05:40如果你没有，也没关系。
00:05:42你可以直接跳过。
00:05:43例如，看看我们自己打造的社区，
00:05:45你会立刻发现它的外观设计和内在设计完全
00:05:50在我们的案例中，
00:05:51一切都是先使用 HTML 原型规划好的。
00:05:54我们首先创建了一个 design.md，它部分灵感来自 Notion。
00:05:58使用该设计系统，我们在编写实际应用程序之前构建了所有的原型界面。
00:06:04一旦最终确定并验证了这些原型，我们就将它们转换成了这个功能齐全的应用程序。
00:06:09好了，在进入设计功能性 UI 最重要的部分之前，先来听听
00:06:13听听赞助商的消息。
00:06:14最近许多使用 Claude Code 的人发现他们的成本高得离谱。
00:06:18老实说，这就是 Kimi 引起我注意的原因。
00:06:20他们构建了一个开源模型，在编码方面非常出色，成本大约只有 Opus 的八分之一。
00:06:26他们最新的模型 Kimi K2.6 刚刚在 Sweebench Pro 上夺得第一，
00:06:30这基本上是目前最难的现实世界编码基准。
00:06:33他们不仅发布了模型，还在 K2.6 之上构建了真正有用的产品。
00:06:38你可以利用出色的前端设计生成生产就绪的网站，
00:06:41通过一个提示词创建完整的幻灯片，甚至开箱即用地处理数据库和身份验证。
00:06:47但最疯狂的功能大概是 Agent Swarm。
00:06:49你可以在单一任务上并行启动 300 个 AI 智能体。
00:06:53你不再需要一个智能体缓慢地处理一切，而是获得整个 AI 团队同时工作。
00:06:58而且所有这些都运行在一个成本远低于人们一直在使用的闭源替代品的
00:07:03开源模型之上。
00:07:05所以，如果你每天都在使用 Claude Code 或 Cursor，且最近 API 账单让人头疼，
00:07:09Kimi 非常值得一试。
00:07:11如果你通过我们的链接注册，在 6 月 30 日之前，你还能在首次购买时获得额外的 10% 配额奖励。
00:07:16点击说明中的链接，开始构建吧。
00:07:19现在，设计功能性 UI 的另一个非常重要的部分是实验。
00:07:24随着时间的推移，我们尝试了许多不同的方法来解决这个问题。
00:07:28最初，我们使用多智能体并行工作的任务列表，
00:07:32每个智能体都会生成 UI 的不同变体。
00:07:35其目标是实验多种设计，并找出真正效果最好的方法。
00:07:40后来，我们开始为此工作流使用子智能体，但现在这已经不再重要了。
00:07:45拥有百万 token 的上下文后，你也可以通过主要智能体来完成。
00:07:48我们还在内部构建了一个名为 Gallery Viewer 的工具。
00:07:51Gallery Viewer 的目的很简单。
00:07:53当你生成多个 HTML 原型时，它们不应该在几十个文件中丢失。
00:07:58相反，它们会自动在同一个视图中打开，从而轻松进行
00:08:03并排比较。例如，在构建社区平台时，我们最初不知道
00:08:08社区交互空间应该是什么样子的。我们知道我们想要一种社区体验，
00:08:12但用户之间的互动方式有很多种。所以，与其致力于单一设计，
00:08:17不如尝试使用 HTML 原型。我们让智能体创建多个
00:08:22社区频道 UI 的 HTML 原型，以便我们进行比较。智能体随后会自动创建多个
00:08:28版本并在 Gallery Viewer 中打开它们。从那里，我们可以比较每个
00:08:33变体并决定哪个方向最强。在这个例子中你会注意到一件事，
00:08:37即这些设计在视觉上并不统一。理想情况下，它们应该共享相同的设计
00:08:42语言，同时探索不同的交互模式。之所以没发生这种情况，
00:08:46是因为没有提供 design.md。当存在 design.md 时，模型会将其用作
00:08:53颜色、间距、排版、组件和整体样式的唯一事实来源。因此，所有生成的原型
00:08:59在视觉上保持一致，同时仍然探索不同的 UX 方法。还有一些较小的细节
00:09:04可以产生巨大差异，例如向功能性 UI 添加动画。我们记录了一套动画
00:09:10指南在我们自己的技能中，如果你愿意，欢迎复制它们。到目前为止，它们对我们很有效，
00:09:15而且我们还在不断完善它们。然而，我强烈建议的一点是，不要过度使用
00:09:20应用程序功能部分的动画。过多的动画起初看起来可能令人印象深刻，
00:09:25但它们通常会使以生产力为中心的界面感到更加分散注意力。一旦你
00:09:29确定了设计，下一步就是使用 ShadCN 技能。我已经将功能性 UI
00:09:35技能连接到了 ShadCN 技能，所以它会自动处理大部分工作流。以前，我们有更
00:09:40复杂的工作流。我们会专门为 ShadCN
00:09:45MCP 生成详细的实现计划，并利用该计划构建整个界面。虽然这种方法行之有效，但也
00:09:50增加了许多复杂性。今天，工作流简单得多了。你所需要的只是最终的
00:09:55HTML 原型和 ShadCN 技能。这种方法之所以有效，是因为 ShadCN 技能本身就包含
00:10:01大量由 ShadCN 创作者打包的上下文和实现知识。
00:10:06正因如此，它可以将最终的 HTML 原型几乎一对一地复现，并使用
00:10:11实际的 ShadCN 组件。所以在这个阶段，你不需要担心创建复杂的
00:10:16实现计划或转换工作流。如果你喜欢这些设计流程，请订阅
00:10:21该频道并点击点赞按钮。我们发布的内容旨在帮助你学习优化
00:10:26不同业务中各个流程的新方法。你在这里的支持对我们意义重大。
00:10:31该指南还要求你为这些模型明确自验证。你可以在
00:10:36Claude.md 中放置一个提示词，要求智能体验证其输出。现在，你应该使用一个可以验证输出的子智能体，而不是使用主智能体。
00:10:41你应该使用一个可以验证输出的子智能体。为了验证它，你需要一些
00:10:46可以进行比较的对象。为此，始终将子智能体指向你的 design.md。
00:10:50指南中提到的另一件事是，当模型拥有关于你的任务的上下文时，表现会更好。
00:10:55对于设计来说，这意味着了解产品本身是什么。
00:10:59现在，许多框架都设置了一个单独的 product.md，但在我们看来，
00:11:03当你设置好 Claude.md 时，它就有了足够的上下文供模型理解你的
00:11:09项目内容。所以功能性 UI 技能的作用是，每当它接到新任务时，
00:11:13它也会让模型读取 Claude.md。此外，它还包含一个 mox 文件夹，
00:11:18其中有所有的 HTML 文件，这样你可以在添加新元素到应用时引用它们。
00:11:24最重要的是，如果你也有 design.md 就更好了。这些是你项目中
00:11:28需要拥有的文件。如今，许多 SaaS 应用程序都很容易被克隆。
00:11:32我们自己就使用定制的软件进行团队管理。我们构建了自己的版本，因为
00:11:37我们不需要托管大量人员。在这种情况下，你不必从头开始。
00:11:42你只需要确保尽可能完美地克隆它们的 UI。使用较新的模型，
00:11:46它们理解图像的能力已经得到了很大改善，所以这里的工作流变得非常容易。
00:11:51在克隆中，有两种不同的模式。模式 B 适用于营销 UI。为此，
00:11:56有一个非常有用的 CLI 工具叫 single-file CLI。使用它，你可以抓取页面上的所有内容，
00:12:01包括 HTML、CSS，甚至是该网站上使用的图片。如果网站包含多个页面，
00:12:07你还可以获取它的 sitemap.xml 文件，它本质上是网站的地图。利用该站点地图，
00:12:13模型可以发现并获取其他页面。当你遇到位于
00:12:19身份验证后的页面时，问题就出现了。例如，如果你想克隆 Notion 的 UI，你不能直接将
00:12:23该工具指向 Notion 的网站。当你提供 Notion 的 URL 时，你只能得到落地页。
00:12:28你真正想要的是登录屏幕后面的应用程序界面。幸运的是，模型已经
00:12:34非常擅长从图像中理解界面，所以在这些情况下，截图是
00:12:40最好的选择。你必须非常小心地捕捉界面的不同状态。假设你有一个
00:12:45页面打开，你想要截图显示悬停时发生的情况，以及不同的交互如何影响布局。
00:12:50让我们再举一个例子。假设你打开一个页面，其中有两列。如果你只提供这个截图，
00:12:56模型不会知道你可以做两列。你需要极其彻底，并提供模型所需要的所有
00:13:01上下文。一旦截取了屏幕截图，不要直接将图片粘贴到提示词中。相反，
00:13:07将它们拖入 Claude。这会使系统获得模式 A 可以使用的图像路径。模式 A 将
00:13:13收集所有这些截图，将它们放置在 clone 文件夹中，并用作参考资料。
00:13:19这些截图有效地成为了克隆流程的基础。从那里，你可以生成
00:13:25界面的初始 HTML 版本，然后继续构建最终的应用程序。
00:13:29视频到此结束。如果你想支持频道并帮助我们继续制作这样的视频，
00:13:35可以通过下方的超级感谢按钮进行。一如既往，感谢
00:13:39观看，下期见。
Community Posts
No posts yet. Be the first to write about this video!
Write about this video