Transcript
00:00:00Claude Design 刚刚发布并改变了设计领域的一切，但实际上它
00:00:04比大多数人意识到的要更炒作。
00:00:05这就是为什么你在 X 上看到的并不是全部真相。
00:00:09如果你认为 Claude Design 有什么开创性，或者那些到处流传的
00:00:13疯狂演示就是你必须改用它的证据，那你其实错了。
00:00:17工具本身甚至不是那些设计看起来那么好的原因，而且人们
00:00:21使用它的方式正在悄悄地产生负面影响，大多数人还没有察觉到。
00:00:25Claude Design 在发布的那一刻就被营销为设计行业的
00:00:29革命性产品。
00:00:30人们开始称它为 Figma 杀手或设计师的终结者，其影响大到
00:00:34足以让 Figma 的股价持续下跌，估值也受到了打击。
00:00:38它是一个用于创建逼真原型、线框图、设计、演示文稿以及其他
00:00:43各种类型设计的工具。
00:00:44但现实是，它更多的是炒作而非其他。
00:00:47它实际上就是把 Claude Code 重新包装并作为另一款工具出售，因为 Claude Code
00:00:52可以做同样的事情，甚至更多。
00:00:54Claude Design 中确实有编辑和评论等功能，但如果给它合适的工具，
00:00:58Claude Code 也能做到同样的事情。
00:01:01当我们说这是 Claude Code 的重新包装版时，并不是因为我们没有测试过。
00:01:05我们给它一个简单的提示，要求它创建一个社区网站，并回答了它提出的
00:01:09问题。
00:01:10它创建了两个本身令人印象深刻的设计，比 Claude
00:01:14以前生成落地页的方式要好得多，但它们仍然有很多问题。
00:01:18一个版本在定价部分被切断了，而且完全没有页脚，所以我们测试了
00:01:23Claude Code 用类似的提示表现如何。
00:01:25我们使用高强度的 Opus 4.7 来比较两者，它产生的设计
00:01:30与 Claude Design 的能力不相上下。
00:01:32有一些问题，比如注册按钮的字体颜色没有选对，
00:01:37但总的来说，这是一个构建得非常好的设计。
00:01:39尽管没有 Claude Design 内置的设计框架，也没有任何特殊提示，
00:01:43完全靠它自己，在我们几乎没有提供任何指导的情况下完成了。
00:01:48但是你肯定在周围看到的那些演示看起来很令人印象深刻，背后隐藏着一些东西。
00:01:52东西。
00:01:53社交媒体上流传的内容更多是基于炒作，而不是该工具
00:01:57自己实际能做的事情。
00:01:58人们通过遵循大量的工作流程来生成设计，然后表现得好像 Claude
00:02:03Design 一次性构建了所有东西一样。
00:02:05但同样的流程可以直接在 Claude Code 中运行，根本不需要 Claude Design。
00:02:09。
00:02:10所以，即使这个产品是为设计师打造的，他们也应该使用 Claude Code 而不是
00:02:14Claude Design，因为这样他们就能够尝试不同的变体，进行更多实验，
00:02:19并获得与 Claude Design 相同甚至更好的结果。
00:02:22他们可以用 Claude Code 进行更多次迭代，而不是在设计
00:02:26刚有起色时就被切断。
00:02:28在现有网站的基础上进行构建，而不是每次都重新开始，让他们
00:02:32对每个设计的方向有更好的控制。
00:02:35而且因为 Claude Code 产生的一切都是真实的代码，他们最终得到的不是
00:02:39一个一次性的原型，而是可以直接交付到产品中，而无需
00:02:43事后由其他人重新构建的东西。
00:02:45最重要的是，Claude Design 还存在成本问题。
00:02:48Claude Code 可以以更低的成本完成同样的事情，而 Claude Design 是单独构建的
00:02:53并计入每周运行的限额，它不会计入你的其他限额，
00:02:57但它消耗使用的速度比你通过其他 Claude 应用程序使用模型时
00:03:02预期的要快得多。
00:03:03这打击设计师最严重，因为配额太低，他们无法真正进行他们需要的
00:03:08实验，并且在几次设计迭代后限额就用完了。
00:03:12而这正是许多人所抱怨的。
00:03:15当有人使用它时，即使在最高的最高计划下，在
00:03:19大约 20 次设计迭代后，他们很快就用完了设计限额。
00:03:23还有很多人说他们在一个小时内就达到了限额，最终得到的只是一个简单的
00:03:27设计，而这用 Claude Code 一次性就能轻松实现。
00:03:31所以它在实践中并不是真的可用，因为他们在能够完成正在进行的
00:03:35工作流之前就已经达到了限额，与 Claude Code
00:03:39限额相比，这使得它更糟糕。
00:03:40Claude Design 的作品之所以看起来如此令人印象深刻，实际上是 Opus 4.7 模型发布的原因，而不是
00:03:45工具本身。
00:03:46Opus 4.7 再次成为了具有惊人能力的最先进模型，并且在所有
00:03:50基准测试中都表现得更好。
00:03:52但这里真正重要的升级是视觉。
00:03:54该模型具有更出色的视觉能力，并且可以以比以前高得多的分辨率
00:03:59查看图像。
00:04:00Claude Opus 4.6 能够以 1.15 百万像素的分辨率分析图像，而
00:04:074.7 能够分析 3.75 百万像素。
00:04:10所以这意味着它能够更好地从参考资料中理解设计。
00:04:14如果你给它一个参考设计，它会以更清晰的视觉处理该参考资料，
00:04:18并捕捉到以前会忽略的东西。
00:04:20随着这次模型升级，Anthropic 填补了 Claude 模型唯一缺乏并需要
00:04:25大量工作的地方，那就是前端设计。
00:04:27该模型在完成任务时更有品位和创造力，它独自就能产生
00:04:31更高质量的界面和设计。
00:04:34所以当 Claude Design 发布时，因为它令人疯狂的设计而备受炒作，
00:04:38但实际上是模型变得更好了。
00:04:41并不是工具变得如此疯狂地好，从而产生了你所看到的不同的视觉效果。
00:04:45。
00:04:46Claude Design 是 Anthropic 销售某种东西并通过其制造炒作的另一种聪明方式。
00:04:50现在你可以在 Claude Code 2 中获得与 Claude Design 相同的好处，甚至可能
00:04:55更好。
00:04:56你可以通过创建一个简单的技能在 Claude Code 中复制 Claude Design 的提问流程。
00:05:00当你在 Claude Design 中创建一个项目时，你给出一个提示，它会问很多问题，
00:05:04以便它可以正确确定设计方向。
00:05:07它问的比 Claude Code 的规划模式多得多，但一个技能可以做完全相同的事情。
00:05:11该技能包含有关如何运行提问会话的说明，就像 Claude Design
00:05:16一样，使用问题来填补提示创建的空白，并询问需要构建的内容。
00:05:21它定义了何时触发后续问题以及流程应该如何实际运作。
00:05:25它还包括用于运行会话的示例问题、问题库，甚至
00:05:30网站的 ASCII 布局，以便它可以确定落地页中元素的位置。
00:05:34页。
00:05:35当你给它一个提示时，它会使用该技能并询问与它识别出的空白相关的问题，
00:05:39就像 Claude Design 一样。
00:05:41它会在不同领域提出多个问题，一旦它拥有了实现所需的
00:05:45所有信息，它就会开始构建。
00:05:47最好的是它直接输出代码，所以没有设计到代码的移交。
00:05:51通过这种方法，你可以随心所欲地迭代，而不用担心在仅仅一小时内
00:05:55用尽限额。
00:05:57来自相同类型提示的 UI 生成以及 Claude Code 中类似的问题流程
00:06:01或多或少与 Claude Design 生成的内容相似。
00:06:05主要区别在于 Claude Design 在某些方面有优势，它通过添加小动画使
00:06:09网站更具沉浸感，使其看起来更引人入胜。
00:06:13但在我们继续前进之前，让我们先听听赞助商的话。
00:06:16HeyGen 你可能尝试过用
00:06:18人工智能工具制作视频。
00:06:1920分钟后，你还在忙于处理时间轴、重新录制配音，以及与看起来像糟糕配音的
00:06:24口型同步作斗争。
00:06:25HeyGen 省去了所有这些。
00:06:26HeyGen 是刚刚发布了全新 CLI 的人工智能视频生成器，这意味着一个完整的数字
00:06:31孪生替身视频可以通过单个命令生成。
00:06:34没有时间轴，没有相机，没有摄制组。
00:06:36记录一次你的数字孪生替身，HeyGen 让你在无需重拍的情况下持续发布内容，
00:06:40将新闻通讯、PDF、PowerPoint 变成视频。
00:06:44用视频代理从单个提示生成完全编辑的多场景视频，然后通过完全的口型同步
00:06:48为全球观众进行翻译。
00:06:51在 developers.heygen.com 上使用替身、声音、视频代理、翻译等功能构建
00:06:56数字孪生替身需要经过验证的同意。
00:06:59你的内容绝不会被用于训练公共模型，整个平台是为
00:07:03企业级安全性而构建的。
00:07:04在不接触相机的情况下开始发布工作室质量的视频。
00:07:07点击置顶评论中的链接，立即尝试 HeyGen。
00:07:11当你展示 Claude Design 时，你在 X 上可能看到的绝大多数滚动交互设计
00:07:15只是使用视频背景的网站，这使它们看起来远比
00:07:20它们实际的情况更高级，并给人一种它们比实际更令人印象深刻的印象。
00:07:24大多数演示通常只是从提供现成提示模板的网站复制的提示。
00:07:28。
00:07:29这些提示包括一个指向旨在用作背景的视频的链接，以及
00:07:33关于如何实现它的详细指南。
00:07:36因此，只要给定类似的提示，任何代理都有能力实现这种网站，而不仅仅是 Claude Design。
00:07:40。
00:07:42但这些只是展示站点的样本提示。
00:07:45实际上，生产级应用程序是使用像 Lenis 这样的库构建的，它
00:07:49被用于许多生产应用程序以及 GSAP，这是实现平滑动画的
00:07:54最流行的库之一，使网站体验远比
00:07:59以前更具沉浸感。
00:08:00为了测试这一点，我们实际上下载了一个视频，并在我们的提示中告诉 Claude Code
00:08:04使用该视频作为英雄部分，连同我们想要的颜色主题，它自己实现了
00:08:08网站的其余部分。
00:08:10我们只需要纠正它一次，即我们需要解释该视频的内容。
00:08:14它完美地将风格融入了落地页，使其比
00:08:18以前的版本好得多。
00:08:19该网站实现得非常好，这考虑到提示是多么简单，确实非常强大，
00:08:23它包含了不同的动画和交互，使网站的这一部分
00:08:28比以前使用 Claude 的能力更强大、更具交互性。
00:08:32现在在 Claude Code 中，你还可以比 Claude
00:08:36Design 更轻松地用更多工具补充它，因为 Claude Code 技术能力更强，并且可以更无缝地实现事物。
00:08:42你甚至可以使用像 Scrolly Telling 这样的开源技能，它基本上启用了滚动
00:08:46叙事动画在你的项目中。
00:08:48所以有了这个技能，Claude 可以轻松地从简单的提示中实现多级叙事，
00:08:53并努力创建比 Claude Design 自己能够做到的更深入的动画。
00:08:57。
00:08:59另外，如果你喜欢我们的内容，考虑按下点赞按钮，因为它帮助我们
00:09:03创建更多这样的内容并触达更多人。
00:09:07使用 Claude Code 而不是 Claude Design 使实现 UI 更容易，因为通过
00:09:11Claude Code，你可以通过整合来自 shad cn、Aeternity 或 Hero UI 的组件，轻松集成内置设计系统，
00:09:16这些组件已经包含了大量预构建的动画。
00:09:22这减少了模型需要弄清楚每个组件应该如何外观和表现的需求，
00:09:27而是让它专注于改进整体设计。
00:09:30所以输出比默认直接在 Claude Design 中工作更容易达到。
00:09:35你还可以使用前端设计技能或其他根据你的项目量身定制的技能，
00:09:39使用分析项目当前状态的技能创建器构建。
00:09:43这有助于它更有效地实现功能，而不会浪费时间。
00:09:47Claude Code 也更灵活，因为你可以将 MCP 服务器连接到它。
00:09:51例如，你可以使用 shad cn MCP 服务器，这样代理就可以自己安装正确的组件，
00:09:56而不是被明确告知使用什么以及在哪里使用。
00:09:59同样，你可以使用各种 MCP，它们有助于更有效地构建 UI，而不是依赖
00:10:04纯粹生成的设计。
00:10:06即使使用像 Opus 4.7 这样的模型和像 Claude Design 这样的工具，直接生成的网页设计
00:10:11通常会揭示它们是由模型产生的，因为它们倾向于遵循相似的模式。
00:10:16但使用已建立的库有助于减少这个问题，并使输出感觉更自然
00:10:20且不那么可预测。
00:10:22使用 Claude Code 而不是 Claude Design 的最大优势在于你可以将其连接
00:10:26到 Git。
00:10:27现在，即使你也可以将 GitHub 连接到 Claude Design，两者在工作方式上存在巨大差异
00:10:30。
00:10:31Claude Design 的 Git 集成相当基础。
00:10:34它主要允许它从连接的 GitHub 存储库中获取文件，并使用它们来
00:10:38理解设计。
00:10:39但它的目的主要限于阅读和参考。
00:10:42它并不能真正对存储库进行更改。
00:10:45Claude Code 则截然不同。
00:10:47它可以执行完整的 Git 操作，如提交、分支等。
00:10:51因此，如果你的实现出现问题，或者如果你在做出
00:10:55更改后更喜欢旧版本，你可以使用 Git 轻松回退到以前的版本。
00:10:59这是你在使用 Claude Design 时无法做到的，这使得
00:11:02Claude Code 成为一种更强有力的方法。
00:11:04为了设计不同的原型，而不是去 Claude Design 或使用 Figma，
00:11:09如果你直接用 HTML 制作模型，效率会更高。
00:11:12为了尝试不同的变体，你还可以利用并行代理和工作树
00:11:16来划分任务，类似于 Claude Design 探索设计的方式，但以 Git 管理的方式，
00:11:21这样你就可以保留最佳版本，并轻松丢弃其余版本。
00:11:24你只需给它一个提示，要求它在单独的工作树中使用子代理，并要求每个代理
00:11:29实现同一设计的不同变体。
00:11:31有了它，Claude 将在单独的工作区中生成代理。
00:11:35使用并行代理可以帮助你在探索多个方向的同时，节省时间和精力
00:11:39。
00:11:40现在，一旦每个代理完成了工作，你就会得到多个变体，你可以随时审查
00:11:44并选择最适合你需要的那个。
00:11:47从那里，你可以进行更改并基于你最喜欢的确切风格继续构建应用程序。
00:11:51。
00:11:52并且尽管不是由 Claude Design 生成的，每个生成的设计仍然具有
00:11:57审美外观，完全通过代码创建的 SVG 来描绘元素，并且整体平衡感好得多。
00:12:02。
00:12:04然后你可以将你的首选版本合并到主分支中，并删除包含
00:12:08你不喜欢的设计的工作树。
00:12:09这里使用的技能以及其他资源在 AI Labs Pro 中可用于此视频
00:12:15以及我们以前的所有视频，你可以从中下载并用于你自己的项目。
00:12:19如果你在我们所做的事情中发现了价值，并希望支持该频道，这是最好的方法
00:12:23。
00:12:24链接在描述中。
00:12:25视频到这里就结束了。
00:12:26如果你想支持该频道并帮助我们继续制作像这样的视频，你可以通过
00:12:30使用下方的超级感谢按钮来做到这一点。
00:12:33一如既往，感谢观看，下期再见。