00:00:00欢迎观看我们设计系列的另一期节目，在这里我们会发现新的AI工具来帮助你用AI进行更好的设计。随着Opus 4.5和Gemini 3 Pro等模型的出现，单提示设计已经取得了长足的进步。然而，在这个视频中，我们将展示许多不同的工具和工作流程，它们能真正帮助你创建令人惊叹的设计。ShadCN是一个库，提供美观、
00:00:25完全可定制且易于访问的UI组件，与你的React和Next.js项目无缝集成。它的新功能让你能创建预设以导入到你的项目中。点击新建项目，你会在页面的一侧看到示例组件，另一侧看到预设，你可以在其中尝试和实验，直到找到最适合你的组件样式。一旦你决定了要导入的样式，点击创建项目，选择你的项目所使用的框架，复制安装命令并粘贴到终端，新的项目就会立即安装到你的项目中。在转向代码代理之前，最好先准备好网站的设计，这样你就不用一次次请求代理进行修改。为了做到这一点，Google Stitch是最好的设计工具，因为它现在支持Gemini 3 Pro思考和Nano Banana直接集成，用于使用生成的图像增强设计。但在开始设计之前，决定你的应用程序的配色方案是最重要的一步。为此，Coolers是最好的选择，这是一个配色板生成器，你可以在其中并排查看多种颜色并分析它们的组合。
00:01:28继续调整，直到找到你喜欢的颜色，然后以最适合你的格式导出配色板。大约4分钟后，Stitch创建的UI非常简洁，主要颜色和强调色之间有明确的平衡。Google Stitch的一个新功能更新是，你可以选择设计的所有屏幕并生成原型进行测试。原型基本上是项目实际运作的演示，无论是网络应用还是移动应用。它会自动调整导航流程，找到可点击的区域，并直接从设计为你创建一个完全可运作的原型。即使AI能自己创建相当不错的设计，从好的灵感源获得启发也无伤大雅。为此，有多个图库包含英雄部分、
00:02:09导航栏、
00:02:09页脚，甚至自定义404页面，你可以在这里找到创意和吸引人的灵感来源。你可以在下方的描述中获取所有这些资源的链接，我用Superhero来获取英雄部分的设计灵感，将页面的截图发送给Stitch来复制设计以适配我们的网站。
00:02:28还有一个重要的新功能。Google Stitch改进了你导出设计的方式。它允许你直接导出到AI Studio、
00:02:36他们的AI编码代理Jules，或者复制代码到剪贴板，但我会将其导出为zip文件并导入到Claude中。
00:02:43在通过Claude使用子代理时，它们过去常常在处理其他任务时浪费你的大量时间，这会导致严重的延迟。Claude最近通过赋予子代理在后台运行的能力解决了这个问题。我为浏览器测试配置了Puppeteer MCP，它让Claude可以通过浏览器访问来测试UI。由于浏览器测试需要花费很多时间，你可以在后台运行这项任务，同时为代理分配另一项任务。这样，你可以让多个代理同时处理不同的任务，更好地利用你的时间。不过，这些代理会消耗token，所以你需要密切关注token的使用情况和成本。你可以根据需要并行运行尽可能多的代理，并为它们分配任务。每个代理在完成实现后都会返回其输出。我们将在另一个视频中更详细地讨论这些后台代理，敬请期待。Claude经常在修复小的UI问题时遇到困难，无论你问多少次。这正是一个名叫Drawbridge的神奇工具的用武之地。我们之前已经在频道上介绍过它。早前，它仅在Cursor上工作，但现在它集成了Claude代码，以及其他很好的更新。他们甚至在其中一个版本中感谢了我们，我们对这个出色的项目真的很感激。你可以去我们的频道观看关于如何使用Drawbridge的视频，但他们自上一个视频以来已经改进了一些功能，让你能更精确地选择部分内容，使非技术用户更容易表达问题。他们还解决了我们上次遇到的截图问题。
00:04:06此外，他们为Claude代码自动设置了斜杠命令，这是我们之前必须手动完成的工作。总体而言，这些改进使你的工作流程更加高效和令人印象深刻。在教导了数百万人如何用AI进行建设后，我们开始自己实施这些工作流程。我们发现我们能比以往任何时候都更快地构建更好的产品。我们帮助将你的想法变成现实，无论是应用还是网站。也许你看过我们的视频，心想我有一个很好的想法，但我没有技术团队来构建它。这正是我们发挥作用的地方。把我们看作你的技术副驾驶。我们将同样的工作流程直接应用到你的项目中，将概念转化为真实、
00:04:42可用的解决方案，而无需雇用或管理开发团队的麻烦。准备好将你的想法加速推向现实吗？请通过hello@autometer.dev与我们联系。
00:04:52这就是本视频的全部内容。如果你想支持这个频道，帮助我们继续制作这样的视频，你可以使用下方的超级感谢按钮。如往常一样，感谢你的观看，我们下一个视频再见。