00:00:00现在的 AI 代理在设计方面已经变得非常出色了。
00:00:02它们现在真的不再有以前那种问题了，比如生成的网站会出现内容破损。
00:00:06但由于这些模型都是基于相同的数据训练的，它们的渲染效果总是
00:00:10过于相似且平庸。
00:00:11即使是 Claude 的模型也需要特殊的提示词，以确保它们不会犯这种错误。
00:00:15Google Stitch 是一款专为设计打造的工具，它实际上可以直接
00:00:19接入到你的 Claude Code 工作流中。
00:00:21所以在这段视频中，我们将介绍 4 种结合使用 Stitch 和 Claude Code 的方法，以确保
00:00:26你的应用看起来不会像其他那些 AI 生成的网站一样千篇一律。
00:00:30Stitch 的新更新使用设计系统来构建你的 UI，而这些系统是
00:00:34基于构成网站 UI 指南的所有功能构建的，其中包括
00:00:38颜色、主题、字体等不同字段。
00:00:41这些功能实际上是通过使用 design.md 文件形成的。
00:00:45这个文件也是让设计能够在不同代理之间转移的关键。
00:00:49你可以将这个 design.md 文件传输到任何实现该设计的代理中，
00:00:54它就能完美匹配整套样式主题。
00:00:56之所以行得通，是因为该文件是专门针对代理进行优化的。
00:00:59它包含更具针对性的语言，以便代理能轻松理解设计意图。
00:01:04它还会在屏幕上可视化所有的设计系统，所以你不必只通过
00:01:08文字来解读风格。
00:01:10通过实际观察并排显示的颜色和字体，你可以直观地感受到
00:01:14应用实现后的具体样貌。
00:01:16每当你使用 Stitch 构建任何东西时，Stitch 的第一步就是创建一个 design.md
00:01:21和一个设计系统。
00:01:22即使你没有在提示词中明确要求它这样做。
00:01:25一旦设计系统确定下来，无论它创建什么网站，都能确保
00:01:30在多个页面和重新生成过程中保持一致性。
00:01:32这解决了我们之前使用 Stitch 时遇到的最大问题，因为当时它
00:01:36无法像现在这样出色地维持设计的一致性。
00:01:39不过，除了依赖 Stitch 自动创建的设计系统外，你也可以
00:01:43创建自己的设计系统。
00:01:45你可以根据需求设置主题，或者如果你有现成的设计文件，只需
00:01:49上传它，它就会自动将该文件整合为设计系统并为你
00:01:53进行可视化处理。
00:01:54重要的是，你需要确保所使用的任何 design.md 文件都遵循
00:01:58规范的结构。
00:01:59已知这种结构针对代理（特别是 Stitch）进行了优化，能帮助它们
00:02:04高效地理解设计意图。
00:02:06通常我们会在 Claude 或其他代理上构思应用创意。
00:02:09如果你想在 Stitch 中根据这些头脑风暴的内容创建设计，你可以
00:02:13以 design.md 文件的形式将设计风格带入 Stitch。
00:02:17你可以给 Claude 一个设计文件结构，该结构可以从 Google 的官方 skills 仓库中获取，
00:02:21那里包含了所有与 Stitch 相关的技能。
00:02:25从示例中，你可以获得一个针对 Stitch 优化的设计文件模板。
00:02:29因此，无论你使用哪种代理，你都可以提供想要创建的网站风格
00:02:33以及该模板，以便它能在模板基础上生成 design.md，
00:02:38并妥善遵循风格指南。
00:02:39一旦你的代理生成了详细的 design.md 文件，你就可以把它带到 Stitch，
00:02:44直接粘贴到创建新设计系统下的 design.md 部分。
00:02:48在你点击“保存设计”的那一刻，它就会为该设计生成可视化效果。
00:02:52可视化完成后，你就可以使用它，并要求 Stitch 以这个
00:02:56新创建的设计系统为基础来实现 UI。
00:02:59随后 Stitch 会实现该设计，它将反映你创建的系统，
00:03:03并精准捕捉 design.md 中的样式。
00:03:05利用这些设计系统，你可以迭代创建任意数量的页面，且
00:03:10每个页面都会遵循相同的视觉风格。
00:03:12如果你已经在 Stitch 上创建了项目并想提取其中的 design.md，
00:03:16你可以通过 Google 提供的技能来实现。
00:03:19在他们创建的技能中，design.md 技能可以将 Stitch 项目转换为
00:03:25符合模板要求的 design.md，这针对 Stitch 的工作流进行了优化。
00:03:28另外，如果你喜欢我们的内容，请考虑点击“赞同”按钮，
00:03:32因为这能帮助我们制作更多此类内容并触达更多观众。
00:03:35Stitch 的功能固然强大，但在为你构建的特定细分领域网站
00:03:39提供良好 UX 方面仍存在差距。
00:03:42从零开始设计并不总是首选方案。
00:03:44现有网站是基于那些在其特定领域确实有效的模式构建的，
00:03:48因此模仿它们的模式有助于你创建一个真正对
00:03:53用户有效的网站。
00:03:54以前在使用 AI 构建时，我们会提供一张截图，然后要求设计工具
00:03:58复制该设计。
00:04:00它会尝试原封不动地复制布局、组件以及所有细节。
00:04:04但 Stitch 的新更新改变了这一点。
00:04:06通过 Stitch 的“重设计”功能，你依然提供截图，但现在它
00:04:10不再是简单的复制。
00:04:11它将该截图作为风格指南使用。
00:04:12它会从该参考中提取模式、组件布局和设计语言，
00:04:17并将其应用到你自己的网站上。
00:04:18所以你基本上是在现有模式之上构建原创内容。
00:04:22为了使用重设计功能，你需要一张截图。
00:04:25但逐段截取屏幕是一种很繁琐的方式。
00:04:28相反，可以使用像 GoFullPage 这样的扩展来获取整页截图，
00:04:33这样你就可以一次性提供风格参考。
00:04:35一旦你提供了想要借鉴设计的网站截图，它就会将该截图
00:04:39作为风格和组件布局的参考，并创建一个与截图中
00:04:44类似的 UI。
00:04:45它利用 Nano Banana 的图像生成功能为不同板块生成
00:04:50匹配 UI 风格的图片。
00:04:51还有其他方法可以复制另一个网站的风格。
00:04:54你可以通过复制链接来模仿整个网站的风格，然后在设计系统中，
00:04:59你可以将任何网站的设计导入为 design.md 文件。
00:05:03只需提供链接，它就会通过爬取网站来获取其风格和排版，
00:05:06从而导入设计系统。
00:05:09但有时 Stitch 给出的风格并不符合你的预期。
00:05:12在这种情况下，你只需上传一张手绘草图或线框图，
00:05:17带上你真正想要的风格即可。
00:05:18你还可以指定希望网站使用的设计主题。
00:05:21通过参考图和主题说明，Stitch 生成的 UI 将与
00:05:26线框图和风格指南完全一致，使网站符合你的要求。
00:05:31如果有任何特定的细节想要修改，你可以通过
00:05:34Stitch 的标注和编辑功能来实现。
00:05:36你可以标注出不喜欢的部位，写下你想要的样子，点击应用，
00:05:40它就会实现你想要的风格。
00:05:42但在继续之前，让我们听听赞助商的话。
00:05:45Uptime Robot。
00:05:46你正在使用 OpenAI、Anthropic 等各种 AI API 进行构建。
00:05:49一切看起来都很正常，状态码 200 OK，但响应内容却是垃圾。
00:05:52你的应用崩溃了，而你只有在用户开始抱怨时才会发现。
00:05:56这就是 Uptime Robot 发挥作用的地方。
00:05:57它会在用户发现之前就捕捉到问题。
00:05:59它会测试你的 API，检查实际响应而不仅仅是状态码，并立即
00:06:04在 Slack、邮件或任何你工作的地方发出告警。
00:06:06监控 AI 端点，在达到上限前跟踪 API 额度，并在错误
00:06:10演变成支持工单之前拦截它们。
00:06:12你甚至可以获得公开的状态页面，显示实时运行时间统计和故障历史。
00:06:16设置只需几秒钟。
00:06:18添加你的端点，设置预期响应，选择提醒方式，你就上线了。
00:06:21它提供包含 50 个监控项的免费层级供你试用。
00:06:24API 监控每月仅需 7 美元，比你自己托管还要便宜。
00:06:28使用代码 "AI Labs" 可享九折优惠，有效期至年底。
00:06:32点击置顶评论中的链接，今天就开始构建吧。
00:06:35另一种构建方式是将 Stitch 的功能与你现有的代理功能
00:06:40（如 Claude Code 或任何支持代理技能的其他代理）连接起来。
00:06:44Google 为此开发了多种技能，并提供了能赋予代理
00:06:48操作 Stitch 额外能力的技能。
00:06:51你可以按照仓库中的步骤安装所需的任何技能。
00:06:54在你的工作流中，最重要的一项是“提示词增强”技能。
00:06:58它能将你提供的模糊提示词转化为针对 Stitch 优化的提示词，
00:07:02使其完全符合 Stitch 的工作模式。
00:07:05它包含常用关键词的参考，因为 Stitch 依靠形容词来
00:07:09识别氛围，而非仅仅是对设计的精确描述。
00:07:12除此之外，还有一个用于构建完整网站的技能叫做 Stitch Loop。
00:07:16它允许代理使用 Chrome 开发者工具，并利用提示词中
00:07:20详细说明的自主循环模式，从 Stitch 迭代构建网站。
00:07:23其核心思想是维持适当的提示词跟踪，并将提示词从一个阶段传递到另一个阶段。
00:07:28由于这些技能可以自主管理一切，这是最接近
00:07:32“一键生成应用”的工作流。
00:07:33但在实际使用这些技能之前，你需要确保已连接 Stitch MCP，
00:07:38因为这是 Stitch 在后台用于构建和获取设计的东西。
00:07:41频道里有一段视频专门讲解了 MCP 的安装过程
00:07:46以及安装中常见问题的调试，你可以去看看。
00:07:49现在，当你从 Stitch 导出设计时（无论是通过 MCP 还是代码），它通常会
00:07:53给出一个巨大的 HTML 文件，所有内容都挤在一个文件里。
00:07:56由于大多数应用都是基于 React 并采用组件结构的，这给代理
00:08:01将 HTML 映射到 React 带来了额外的开销。
00:08:03为了简化这一点，你可以使用 React 组件技能。
00:08:06它使用适当的验证指标将 Stitch 设计转换为模块化组件。
00:08:10它利用脚本来验证和获取设计，以便组件可以轻松映射。
00:08:15通过这个工作流，你可以创建一个 Clod.md 文件来列出你想要使用的工作流。
00:08:20它需要遵循这个顺序。
00:08:21首先，使用提示词增强技能将你模糊的提示词转化为 Stitch 专用提示词，
00:08:26确保 Stitch 正确接收输入。
00:08:28然后，它应该使用 Stitch loop 来构建设计。
00:08:31构建完成后，需要使用 React 组件在应用中实现该设计。
00:08:35当你为想要构建的落地页提供提示词时，它将遵循
00:08:39Clod.md 中制定的指令。
00:08:41它首先加载提示词增强技能，然后利用
00:08:45可用的技能和工具生成增强后的提示词。
00:08:47提示词准备就绪后，它会征求你的许可再进行下一步。
00:08:50获得批准后，它会加载 Stitch loop 技能并使用 Stitch MCP 来创建项目。
00:08:56项目创建后，它会将增强后的提示词发送给 Stitch，
00:09:00Stitch 会先生成设计系统，然后再生成实际的设计。
00:09:04为了丰富视觉，它会将图像生成作为设计过程的一部分。
00:09:08设计完成后，它会进入下一步，使用 React 组件技能
00:09:12创建组件化结构，并妥善实现应用，针对你使用的
00:09:17任何框架进行优化。
00:09:18如果你运行开发服务器，你可以看到该应用完全映射了
00:09:22Stitch 的设计，包括按钮上的悬停效果，使这一工作流
00:09:26在构建全功能应用时变得更轻松、更快捷。
00:09:28现在，这里使用的 Clod.md 以及所有创建的资源，都可以在
00:09:33AI Labs Pro 中获得。
00:09:34这包括本视频中的资源，以及之前所有视频中的资源，
00:09:38你可以下载并用于你自己的项目。
00:09:40如果你觉得我们的工作有价值并想支持这个频道，
00:09:43这是最好的方式。
00:09:44链接就在说明栏中。
00:09:46从零开始构建并不总是好主意，这也同样适用于组件。
00:09:50由纯 React 组件生成的 UI 过于静态，且仅专注于外观，
00:09:54所以你需要额外的开销来添加交互和动画效果。
00:09:58你应该在应用中使用 UI 库，而不是从零开始构建，因为
00:10:02它们内置了交互功能，使创建变得更容易，
00:10:07你可以利用这些功能让你的 UI 更加生动。
00:10:08为了让这一切变得更简单，Google 提供了一个 ShadCN UI 技能，
00:10:13它在将应用从 Stitch 转换为 ShadCN 组件时提供指导。
00:10:16这项技能本质上是一份关于如何在整个应用中
00:10:21正确实现这些组件的详细指南。
00:10:22由于 ShadCN 支持连接多个注册表，你可以通过整合它们并
00:10:26利用它们的功能，进一步扩展其能力。
00:10:30但建议在构建前先设置好 ShadCN MCP，以确保
00:10:35工作流保持顺畅。
00:10:36为了有效使用它，你还应该设置一个 Clod.md 文件并包含指令，
00:10:41以便每当你使用 Stitch MCP 时，它都会自动使用 ShadCN 技能
00:10:47将设计转换为组件。
00:10:48由于你可以添加注册表，因此可以指定要在项目中使用的任何库。
00:10:52例如，当我们构建该网站时，我们选择了 Glassmorphism 和 Motion Primitives，
00:10:57因为它们包含具有高级感的组件。
00:11:00你可以选择最适合你项目需求的任何组件库。
00:11:03如果你之前在 Stitch 中创建了 UI，你可以将其转换为
00:11:07带有 ShadCN 组件的应用。
00:11:08你需要指定想要实现的项目的名称，并要求它
00:11:12在应用中实现它。
00:11:13它会首先获取指定名称的项目，然后加载 ShadCN UI 技能，
00:11:18并利用 ShadCN MCP 工具调用以及你指定的注册表
00:11:23来实现整个应用。
00:11:24一旦实现完成，该应用将完全反映你在 Stitch 中看到的内容，
00:11:27但它是使用 ShadCN UI 组件构建的。
00:11:29这带来了巨大的差异，因为由于实现的便利性，
00:11:34一键生成的应用变得更具互动性。
00:11:36这就是本视频的全部内容。
00:11:38如果你想支持本频道并帮助我们继续制作此类视频，
00:11:42你可以通过下方的 Super Thanks 按钮来实现。
00:11:44一如既往，感谢观看，我们下期再见。