00:00:00随着每一个新工具的发布和模型更新，AI 设计正变得越来越强大，
00:00:04但优秀的 UI 设计绝非仅仅依赖单一工具，然后指望应用能自动变美。
00:00:09出色的设计始终是多种工具和资源结合的产物，
00:00:12更重要的是，要学会在对的场景使用对的工具。
00:00:16Google 的 AI 设计工具 Stitch 最近迎来了一次酷炫升级，让 UI 设计变得轻而易举。
00:00:21与此同时，Vercel 最近发布的新工具甚至超越了 Claude 的 Chrome 浏览器插件，
00:00:26并成为了我目前进行浏览器测试的首选。
00:00:29今天我们要聊的内容非常丰富，因为我没预料到
00:00:32这种组合竟然能产出如此扎实的设计效果。
00:00:34Google Stitch 现在已作为 MCP（模型上下文协议）可用，可连接 AI 智能体，
00:00:39使其能够创建并管理项目，甚至通过智能体直接生成设计。
00:00:43有了这次更新，我不再需要亲自向 Stitch 输入复杂的提示词，而是让 Claude 代劳。
00:00:48它提供了多项功能，比如项目管理、创建新项目
00:00:53以及检索所有活动项目。它能通过列表界面管理项目，
00:00:57还能获取特定项目和页面，并允许智能体根据文本提示词创建新设计。
00:01:02其官方文档中详细介绍了分步安装过程。
00:01:06通常需要使用 curl 安装 Google Cloud SDK，但由于我使用的是 Mac，
00:01:11我通过 brew 安装并让它自动下载 Google Cloud CLI。
00:01:14你需要登录两次：一次作为用户，一次作为应用程序，因为你必须
00:01:19将其连接到 Google Cloud 内部的项目，以便在该项目中启用 Stitch API，
00:01:24因为它需要调用该项目的资源来生成设计。
00:01:27完成整个流程后，你就可以将 Stitch 连接到任何编辑器。
00:01:31由于我使用的是 Claude Code，我在其中配置好后，所有工具就都准备就绪了。
00:01:35现在已经有人为我们简化了这一长串的配置过程，创建了一个 Stitch MCP，
00:01:41它可以自动处理从安装 Google Cloud 到项目设置的所有环节。
00:01:45不过这是非官方的独立实验性工具，虽然目前运行效果同样出色。
00:01:50无论我们要构建什么，在实施前的规划都至关重要。我当时正在开发一个模拟技术面试应用，
00:01:54它不仅涵盖技术面试，还包括其他类型的面试，
00:01:59全部针对科技行业的岗位。
00:02:03在整个过程中，我发现了 Stitch MCP 运行方式的一些问题，
00:02:08以及如何更好地优化它来适配我的设计流程。
00:02:13我已将这些规则以及该应用的源码存放在 AI Labs Pro 的 Claude.md 文件中。
00:02:18对于还不了解的朋友，这是我们新推出的社区，我们将本视频
00:02:23以及以往所有视频的资源整合在了一起，包括提示词、
00:02:28复用命令、自定义技能等等。如果你觉得我们的内容有价值并想支持频道，
00:02:33这是最好的方式。链接就在下方描述栏。
00:02:38我喜欢用 Claude Code 的规划模式来构思应用，因为它会基于我的模糊想法进行迭代，
00:02:43并编写详细文档，不过你也可以选择自己喜欢的 IDE。
00:02:48我将应用构思交给 Claude Code 的规划模式，并要求它创建一个 UI 指南，
00:02:53特别强调要避免那种常见的、带有“塑料感”的 AI 生成式设计。
00:02:58尽管这非常耗时，但我还是完成了整个规划。仔细阅读计划书非常关键，
00:03:03因为我甚至不得不进行大量修改，来不断完善它以符合我的审美。
00:03:09我反复打磨，直到完全满意，最终得到了一份符合我要求的完美计划。
00:03:14一旦设计方案通过 Claude 的规划模式敲定，就可以开始实施了。
00:03:19老实说，比起 Claude 模型，我更倾向于 Gemini 的设计能力。
00:03:24所以我让 Claude 根据刚生成的方案，调用 Stitch MCP 启动一个新项目进行精准设计。
00:03:29它通过 MCP 工具创建了新项目，并开始生成各个板块。
00:03:35它通过项目 ID 识别项目，并向 Stitch 发送详细指令，
00:03:40Stitch 接收后便开始生成页面。它使用了 Gemini 3 Flash 来生成第一个部分。
00:03:45我不满意的一点是，它将落地页的各个板块分开发送指令，
00:03:50而不是像通常的网页设计那样生成一整页。这在后续
00:03:55集成到同一个应用时可能会带来麻烦。因此，我要求 Claude 设计一个完整的长页面，
00:04:00而不是分散的组件。随后 Claude 产出了非常详尽的指令，
00:04:05Stitch 根据这些指令生成了整个落地页，同时保留了
00:04:10之前逐个板块设计时的所有创意精髓。
00:04:15在设计中，我很喜欢它使用代码注释和终端命令等元素，
00:04:20这让整个界面更贴合开发者的审美。我使用了 Stitch 的预览功能，
00:04:25检查 UI 在不同平台上的表现，它还实现了平滑的悬停效果。
00:04:30设计具备响应式能力，在移动端和桌面端都运行良好。
00:04:34对 Stitch 生成的设计满意后，我打算将其迁移到我的 Next.js 项目中，
00:04:40我正使用 Claude Code 在这个项目中构建应用。
00:04:45我让 Claude 调用 Stitch MCP 获取完整落地页的设计代码，
00:04:51并将其集成到刚初始化的 Next.js 项目里。
00:04:56它调用了 `get screen` 工具来获取页面，该工具返回了代码下载链接，
00:05:01Claude 则通过 curl 命令提取代码。拿到 HTML 后，
00:05:06集成到现有的 Next.js 项目就变得很简单了。
00:05:11它开始将设计整合进应用，但最初它只是修改了 `page.tsx` 主文件，
00:05:17把代码全都堆在一起，并没有遵循 React 应用推荐的组件化结构。
00:05:22为了查看效果，我运行了开发服务器。最终实现的设计
00:05:26与 Stitch 生成的原型几乎完全一致，只有 Hero 区域的文本位置略有不同。
00:05:31它实现了所有悬停效果，还为 Bento Grid 增加了动画，并加入了背景视差滚动。
00:05:36为了解决代码堆积问题，我要求 Claude 采用合理的组件结构以提高模块化程度。
00:05:41它随后重构了代码，将其整理为清晰的 UI 组件和页面集合，
00:05:46大大提升了代码的可维护性。在 Claude Code 和 Stitch 的帮助下，
00:05:51我创建了一个带有开发者氛围和终端美学的完整应用。
00:05:57不过，它仍存在一些 UI 问题。例如，代码面板应该是可编辑的，
00:06:02因为那是用户在技术面试中输入代码的地方。
00:06:08此外，面试题目应该显示在顶部，目前的位置对用户体验不太友好。
00:06:14为了测试应用，我使用了 Vercel 的 Agent Browser。这是一个为 AI 智能体设计的 CLI 工具，
00:06:19基于 Rust 和 Node.js 构建，这意味着它比传统的浏览器自动化工具快得多。
00:06:24安装很简单，只需运行安装命令即可进行全局安装。
00:06:29目前它仅支持 Chromium 内核浏览器，尚不支持 Firefox 或 Safari。
00:06:34Agent Browser 的功能优于 Claude 的 Chrome 插件、Playwright 或 Puppeteer。
00:06:40这是因为 Chrome 插件依赖于运行完整浏览器、截取屏幕、
00:06:44进行像素映射，然后在 UI 上导航。相比之下，
00:06:50Agent Browser 作为一个 CLI 工具，通过 bash 命令运行，并使用“快照”而非“截图”。
00:06:55本质上，快照是整个页面的“可访问性树”，并带有用于识别组件的选择器。
00:07:00智能体利用这些选择器高效导航。它不与你现有的浏览器共享会话，
00:07:05而是在独立浏览器中运行，因此它无法执行需要你当前登录状态的操作，
00:07:10这与运行在你自己浏览器中、能代表你操作的 Claude 插件不同。
00:07:14如果你想查看可用命令，可以访问其 GitHub 仓库，那里有详细的列表。
00:07:19其中包括如何导航 UI、使用选择器、模拟鼠标控制、
00:07:24管理 Cookie 和存储，甚至监控网络活动。
00:07:30在我的应用中，我添加了一个 `Claude.md` 文件，
00:07:35指示它使用 Agent Browser 进行各类测试。我还告诉它，
00:07:40如果不知道如何使用某个命令，可以调用 `help`。这些规则和完整工作流指引也可在 AI Labs Pro 获取。
00:07:45虽然这是一个无头浏览器自动化工具，但我们也可以开启“有头模式”，
00:07:50从而显示浏览器窗口，实时观察其运行过程。
00:07:55我让 Claude 在有头模式下测试应用 UI。它先通过 `help` 命令查看了所有指令，
00:07:59然后打开了浏览器。它采用的方法与我们之前建议的 Claude 浏览器使用方式类似，
00:08:05即截取整页快照，而不是像 Claude 插件那样分段截图，
00:08:09这在保持高准确度的同时，显著提升了测试速度。
00:08:14智能体执行了大量操作，遍历整个应用并测试了多个功能，
00:08:19在不同界面间切换并检查布局。它仅用四分钟就完成了整个测试流程，
00:08:24而其他工具通常需要更久，因为它依赖的是可访问性树，而非截图对比。
00:08:29它还发现代码编辑器需要具备编辑功能，并立即修复了该问题。
00:08:34随后它通过获取快照、定位编辑器选择器并使用点击和输入功能，
00:08:39在浏览器中进行了验证，确认修复是否生效。
00:08:43本视频到这里就结束了。如果你想支持我们的频道，
00:08:48并帮助我们继续制作这类内容，欢迎加入 AI Labs Pro。
00:08:53感谢收看，我们下期再见。
00:08:57and help us keep making videos like this, you can do so by joining AI Labs Pro. As always,
00:09:02thank you for watching and I'll see you in the next one.