Transcript
00:00:00尽管在其他领域表现平平，但 Gemini 在设计方面一直处于领先地位，
00:00:05尤其是它的设计工具 Stitch，我们已经在工作流程中多次使用它。
00:00:09随着 Stitch 发布了包含多个新功能的 2.0 更新，它变得更加出色了，
00:00:14从而进一步拉开了差距。但 Anthropic 也紧随其后，随着
00:00:19Opus 4.7 和 Claude design 的发布进入了设计领域，其影响巨大，以至于人们开始称其为
00:00:24“Figma 的终结”。但真正的问题是，哪一个实际上更好？为了解决这个问题，
00:00:30我们将通过多个类别的测试来一决高下。到最后，你就会知道
00:00:34哪一个更值得加入你的工作流程。Claude design 和 Google Stitch 都有许多
00:00:39让它们脱颖而出的功能。Claude design 与 Opus 4.7 同步发布，并因其
00:00:45交互功能而迅速获得了“Figma 杀手”的美誉。该模型
00:00:49本身在设计方面确实变得更强了，配合其设计工具，它们的设计水平大幅提升。
00:00:54相比之下，Google Stitch 已经存在了一段时间，但在 Google
00:00:58发布 Gemini 3 之前表现平平，而该模型在设计上远超其他所有模型。因此，
00:01:04结合 Stitch，设计质量得到了显著提高。现在让我们来看看各方的
00:01:08核心优势所在。Claude design 有一个功能，你可以利用它
00:01:13创建演示文稿并在内部编写演讲者备注。但 Stitch 并没有类似的功能，
00:01:17因为 Stitch 专注于 UI，除了移动端和网页界面外，不提供其他设计功能。
00:01:23在 Claude design 中，你还可以通过连接 GitHub 仓库来引用其他项目，
00:01:28从而让设计遵循特定风格，这基本上允许 Claude 导入其中的设计样式
00:01:32并在其基础上创建后续设计。Stitch 处理这一任务的方式略有不同。它使用
00:01:37设计系统来完成相同的任务，你只需在 Stitch 中提供其他已发布网站的链接，
00:01:42就可以复制其设计系统，它会从中导入精确的样式并
00:01:46创建一个可用于后续设计的系统。在进行修改时，Claude design 允许你
00:01:51重新输入提示词，你也可以直接点击想要修改的区域，修改会反映
00:01:56在你的设计上。你可以直接对任何想要调整的地方添加评论，然后它就会
00:02:00直接开始应用这些更改。你可以汇总多个评论并一起发送给 Claude。
00:02:04Stitch 在这里选择了另一种方式。除了更改文本外，你无法直接进行修改。
00:02:09所以，如果你想要更改颜色或字体大小等，你必须在选定的区域添加评论
00:02:14或进行标注，然后将评论发送给 Gemini，让它合并你的修改。
00:02:19语音输入是另一个分歧点。Claude design 允许你通过语音输入提示词，
00:02:24而无需打字。但这一点上 Stitch 胜出，因为 Stitch 中的语音画布功能
00:02:28基本上是你与模型进行实时对话，你告诉它所有你想创建的设计要求，
00:02:33它会询问与设计相关的细节并为你创建设计，
00:02:37一切都在对话中完成。Stitch 还在一个独立的面板中提供实时预览功能，
00:02:42你可以查看设计在桌面端、移动端和平板端的显示效果，并直接与设计互动。
00:02:47Claude design 没有这个独立的预览功能。相反，它在同一个面板中
00:02:52显示 UI，你可以直接与元素互动，而无需跳转到另一个预览
00:02:57屏幕，但你无法像 Google Stitch 那样检查其响应式表现。Claude design
00:03:01也专为团队协作而设计，因此它允许你共享项目，并设置多种权限，
00:03:06如分别设置编辑和评论权限，这是 Stitch 所不具备的。在 Stitch 中，你只能
00:03:11共享项目让所有人一起工作，而不能像 Claude design 那样设置独立权限。
00:03:15所以，尽管 Stitch 是一个成熟得多的项目，而 Claude design 只是
00:03:20最近发布的新项目，但在功能上我们会把票投给 Claude design。Claude
00:03:24design 是一款较新的产品，仅在 Claude 的 Pro、Max、Team 和 Enterprise 计划中提供。
00:03:30而 Stitch 则是免费提供的，无论订阅何种计划，它只是通过点数
00:03:35系统来跟踪使用情况。因此，就可用性而言，Stitch 提供了更多的点数。
00:03:40它每天允许 400 个设计点数和 15 个重新设计点数，所以即便是在一天内，
00:03:46你也能获得充足的使用额度，每月的点数更是可观。通常一个简单的设计花费 3 个
00:03:51点数，并随复杂程度和生成次数而变化，所以你可以完成大量的设计。
00:03:56Claude design 有独立的每周额度限制。这个限制
00:04:00不计入你的其他 Claude code 额度，所以即使设计额度用完，你也可以
00:04:05自由使用 Claude 的其他功能。但正如我们在上一个视频中提到的，这个限制在实践中几乎不可用，
00:04:10因为它不允许你自由实验，在你能进行任何实质性构建之前就会耗尽，
00:04:15如果你在 Pro 计划中，情况会更糟，因为它只允许你在额度用完前
00:04:20尝试寥寥几个设计。因此，如果你真的想从 Claude design 中有所收获，
00:04:24你需要切换到他们的 Max 计划。所以比较两者的成本，Stitch 以绝对优势胜出，
00:04:29因为它至少允许你自由探索设计，而 Claude design 却不行。我们用同样的提示词
00:04:34测试了这两个工具，并简要说明了网站风格和我们想要的版块。
00:04:39Claude design 像往常的 Claude code 一样创建了待办事项并开始工作。
00:04:44就在 Claude design 还在花费时间时，我们把完全相同的提示词给了 Google Stitch。
00:04:49Stitch 做的第一件事就是创建设计系统，将颜色、字体、
00:04:54图标和按钮等一切内容可视化。甚至在 Claude design 完成之前，Stitch 就已经做好了。它构建了一个
00:04:59着陆页，使用了其设计系统中完全相同的风格，并在主色调和
00:05:04强调色之间取得了完美平衡。Claude design 花费了更多时间，完成后开始执行
00:05:09验证步骤。与 Stitch 的静态页面不同，Claude design 的每个部分都是交互式的。
00:05:15在第一次运行时，它让我们在强调色和主主题颜色之间做出选择，
00:05:20这样我们可以自己进行微调，而不必重新输入提示词。在设计质量测试中，
00:05:25我们会把票投给 Google Stitch，因为它的设计比其他的要好得多。Stitch 创造性地
00:05:30使用了调色板来匹配风格并符合应用的基调，而 Claude design 的选择
00:05:34感觉很普通，缺乏深度。此外在速度方面，Stitch 也胜出了，因为 Claude
00:05:39design 在每个设计上花费的时间太长了。每当 Claude design 需要添加图像时，它会创建 SVG
00:05:45并将其集成到设计中。除非你提供自己的资产，否则它完全依赖于 SVG
00:05:50生成。而 Google 拥有 Nano Banana，这是它自己的图像生成模型。所以
00:05:55Stitch 将其直接集成到产品中，即使你没有明确要求，它也会在设计的
00:06:00所有版块中使用图像生成，结果会变得好得多。无论
00:06:05高品质的 SVG 表现如何，它们都无法与图像模型竞争。因此，在这种情况下，Google Stitch
00:06:10是明显的赢家。Stitch 并不以动画见称，因为它的唯一重点是设计，
00:06:16但我们还是尝试看看它是如何处理动画的。它确实尝试添加了一些，但这些动画
00:06:21无法直接看到，只能在单独的标签页中预览，而且它只生成了
00:06:26页面一个版块的滚动显现效果。但当我们把同样任务交给 Claude design 时，它添加了多个
00:06:32动画，例如 Hero 区域下方的跑马灯。滚动显现效果也添加了，但它更加
00:06:37协调，并且适当地应用于每个组件，而不仅仅是 Hero 区域。Claude design
00:06:43在动画方面比 Stitch 强得多，因为它使用了像 Shaders 这样的流行库，并且能够
00:06:48创建更具交互性的动画，这些动画会随着鼠标移动和点击而改变行为。
00:06:54所以，在动画方面，Claude design 是明显的赢家。此外，如果你喜欢我们的内容，
00:06:59请考虑按下点赞按钮，因为这有助于我们创作更多此类内容并触达
00:07:04更多人。为了测试两者对应用的理解程度和对修改的处理能力，我们要求它们
00:07:09在现有应用的基础上创建注册和登录页面。Stitch 首先完成了设计，为每个页面
00:07:14使用了相同的设计系统，并在每个页面上实现了相同的页眉和页脚。我们可以
00:07:19通过原型功能查看它们的流转情况，并观察每个按钮是如何相互连接的。
00:07:24Claude design 的实现更符合应用的理念，它对需求的理解
00:07:28更透彻。它创造性地构建了登录页面，在注册页面上甚至更进一步，
00:07:33实现了多种账户类型。我们还想看看两者在合并修改方面的表现。
00:07:38在 Claude design 中，我们只需添加评论并一起发送，它就开始实现
00:07:44这些更改。而在 Stitch 上，我们必须对想要修改的区域进行标注，但结果并不完全是
00:07:49我们想要的。它只是在引言之后错误地添加了一个页脚，这看起来很奇怪。
00:07:54总的来说，使用 Stitch 进行迭代并不友好，因为每次请求修改它都会创建一个新屏幕，
00:07:59到最后屏幕会变得非常杂乱。Claude design 的体验要好得多，因为
00:08:04更改会直接反映在设计上，而且由于它理解应用，因此能够正确地实现更改
00:08:09而不会偏离风格。所以，在设计迭代方面，Claude design 显然是
00:08:14更好的选择。每个工具都有自己的设计系统。对于 Claude design 来说，设计系统代表了你的
00:08:20品牌，因为该工具是为致力于品牌工具包的团队设计的。你可以添加相关描述，
00:08:25以及字体、Logo、资产及其他一切，它会创建一个代表你品牌风格的
00:08:30完整系统。对于 Stitch 而言，设计系统是一个文件，它不代表品牌，而是
00:08:36代表一个特定的设计。这个文件不仅限于 Stitch。你可以将其导出并在任何
00:08:41代理（Agent）中使用，它将被直接理解并执行。正如我们之前提到的，你可以从
00:08:46其他网站导入设计系统，或者创建自己的。Stitch 已经开源了 design.md 文件，
00:08:52其中包含了 npm 安装命令和正确的格式。每个设计系统都有其
00:08:57不同的用途，但我们更喜欢 Google 的，因为它允许轻松的跨平台切换，而且不会
00:09:02将你锁定在 Stitch。既然我们已经测试了设计，现在该谈谈两者的
00:09:07从设计到代码的交付情况。正如我们之前提到的，Claude design 提供了更多的导出选项
00:09:13和权限控制。它允许你导出为 PDF、幻灯片，甚至导出到 Canvas，以便你
00:09:18在那里进一步完善设计。但我们最常用的交付模式是交付给 Claude code，
00:09:23因为那是我们开发应用最频繁的地方。只需复制一个简单的提示词并将其粘贴到
00:09:28Claude code 中，它就会复制设计并在应用中实现。而 Google Stitch 则拥有
00:09:33更好的交付模式。Stitch 有一个 MCP，通过它你可以将其连接到你的
00:09:39代码代理，让它向 Stitch 发送提示词以创建设计，并从 Stitch 中提取设计来实现在
00:09:44应用中。Claude design 没有任何 MCP 集成，所以我们更喜欢 Stitch 的 MCP，因为它
00:09:49工作方式恰恰相反，意味着代码代理可以用 Stitch 特定的语言向其发送提示词，我们
00:09:53不必操心提示词的编写，依然能得到想要的设计。Stitch 还允许你
00:09:58导出为 Zip 代码，但你还有其他选择。你可以将其导出到 Google AI Studio，
00:10:04在那里你可以利用 Studio 的资源和直接集成在应用中的 Firebase 进一步构建应用，
00:10:09或者你可以直接将其导出到 Figma，以便与其他人在那里协作。我们最常
00:10:14使用 MCP 导出，因为通过这种集成，我们不必担心交付问题，代码
00:10:19代理可以轻松自行处理。它还允许你导出为 PRD（产品需求文档），你可以将其交付给其他人
00:10:25或代码代理，让他们轻松地实现应用而不会出现任何问题。所以，在交付
00:10:30方式上，Stitch 是明显的赢家。本视频到此结束。如果你想支持
00:10:35本频道并帮助我们继续制作此类视频，你可以通过下方的“超级感谢”按钮进行支持。
00:10:40一如既往，感谢观看，我们下期再见。