00:00:00更新从未停止。
00:00:02Anthropic 刚刚发布了 Claude Design，
00:00:05它现在为我们提供了一个界面来创建 Web 应用、
00:00:09网站，基本上是任何我们想要的
00:00:11通过 Claude 界面实现的东西。
00:00:13这是他们版本的 Google Stitch。
00:00:16从这段演示视频中可以看到，
00:00:18它完全赋予了你调整一切的能力，
00:00:21利用这些设计，从宏观到微观。
00:00:23我们不仅在谈论 Web 应用，
00:00:25还在谈论移动端的界面设计。
00:00:27这挺有趣的，因为当我们讨论
00:00:28Anthropic 和 Claude Code 时，
00:00:30它最大的弱点之一就是前端设计。
00:00:32所以看到他们现在推出
00:00:34一个功能齐全的应用
00:00:36来解决这个弱点，真的很酷。
00:00:39在这段视频中，我将向你展示它是如何工作的。
00:00:41我们会做一个快速演示
00:00:42以便你可以亲自上手。
00:00:43Claude Design 是以 Opus 4.7 为核心创建的，
00:00:46如果你使用的版本在
00:00:49Pro Max 到 Enterprise 之间均可使用。
00:00:51它涵盖了从原型、模型
00:00:53到 PowerPoint 演示文稿的所有内容。
00:00:54我们可以将其导出到诸如
00:00:57Microsoft PowerPoint 或发送到 Canva。
00:00:59其中最酷的功能之一是品牌设计。
00:01:01你可以给它一个代码库，
00:01:03比如你网站的代码库，
00:01:05它会从网站中提取所有的品牌资产，
00:01:09这样它就能在设计中匹配
00:01:11颜色和字体等元素。
00:01:12要开始使用，只需前往 claud.ai/design，
00:01:15它会带你进入一个像这样的网页。
00:01:18在左侧，我们可以看到几个不同的选项：
00:01:20原型、幻灯片、使用模板或其他。
00:01:23正如我刚才提到的，在底部，
00:01:25我们有能力创建一个设计系统。
00:01:27如果我点击“设置设计系统”，
00:01:29我可以输入公司名称之类的信息，
00:01:33然后提供我的设计系统示例。
00:01:36你并不非得这么做，
00:01:38但这会有所帮助，如果你已经有
00:01:40想要匹配的现有设计。
00:01:41你可以给它提供 GitHub 链接。
00:01:43你实际上可以直接拖动文件夹。
00:01:45如果你电脑上存有代码库，
00:01:48你可以把它拖到这里，
00:01:49或者直接添加字体、Logo 和素材，
00:01:51以及任何其他备注。
00:01:52我所做的是在我电脑上选择了一个
00:01:55包含网站素材的文件夹，
00:01:57然后点击“继续生成”。
00:01:59当你这样做时，尤其是代码库较大时，
00:02:01首先，它不会上传整个代码库。
00:02:03它会识别哪些文件才是真正相关的。
00:02:05其次，你会看到一个弹出窗口提示：
00:02:07“嘿，这可能需要 15 到 20 分钟”，
00:02:09因为它需要遍历你所有的文件。
00:02:11如果你想从头开始，
00:02:12那也完全没问题。
00:02:13我们就先开始一个新的原型。
00:02:16我们把它命名为“Chase 演示”。
00:02:17我们有两个选项。
00:02:18你可以选粗略的线框图，
00:02:20或者直接生成高保真模型。
00:02:23我们选模型。
00:02:25这会带你进入这个页面。
00:02:26再次强调，这确实很有 Stitch 的感觉。
00:02:28我要告诉它：
00:02:29“设计一个交互式的深色主题图形，”
00:02:31“展示文化如何在城市间流动，”
00:02:33一个旋转的地球，城市之间由发光的路径连接。
00:02:35这和他们在演示中做的一样，
00:02:37但我很好奇我们在这里得到的东西
00:02:40是否真的能匹配视频中展示的素材，
00:02:43以及我们会看到什么样的差异。
00:02:45他们在广告里吹得有多神？
00:02:47我们要直接发送请求了。
00:02:48顺便说一下，你可以看到这里，
00:02:50我们还可以选择模型等内容。
00:02:52你可以添加附件。
00:02:53你甚至可以进行语音输入并导入任何内容。
00:02:55它立刻就开始问我们一些问题，
00:02:57这一点我非常喜欢。
00:02:58这和 Claude Code 里的计划模式非常相似。
00:03:02我们想要什么样的文化？
00:03:04我们就选混合地球风格吧。
00:03:07让我们来做这个流向路径。
00:03:13看起来很酷。
00:03:14调色板想用什么样的？
00:03:16选多色调。
00:03:18我立刻就喜欢上了
00:03:20我们现在能得到这些提示这一点。
00:03:21如果我用 Stitch，是不会得到这些的。
00:03:24用其他工具，我也不会得到这些。
00:03:26就像 Claude Code 中最强大的功能之一，
00:03:29我们在其他网页设计课程中也讨论过，
00:03:31就是拥有这种来回沟通的过程，
00:03:33来发现我们计划中的盲点。
00:03:37它问了我这么多问题，这太重要了。
00:03:39它问得相当细。
00:03:40即使是 Claude Code 的计划模式通常也只问三个。
00:03:43我们就设定拖动旋转。
00:03:45应该突出哪些城市？
00:03:47选前十名。
00:03:49UI 占比多少？
00:03:50来个完整的仪表盘。
00:03:53整体氛围。
00:03:54选编辑风格。
00:03:58我们就用编辑风格。
00:04:00哪些部分应该是可以微调的？
00:04:02哦，选流动颜色调色板。
00:04:07我会让它做三件事。
00:04:08让我们继续。
00:04:09一旦回答了这些问题，在左侧，
00:04:11它就会显示进度。
00:04:12再次强调，这和我们在 Claude Code
00:04:15开启计划模式并让它干活时看到的很像。
00:04:17顺便说一下，这显然是
00:04:19你必须在 Web 应用上才能做的事情。
00:04:22由于图形化的性质，这在终端里
00:04:24是无法实现的，原因显而易见。
00:04:27根据我读到的信息，
00:04:29我不认为这会被实装到
00:04:30桌面应用中，但也可能在未来的某个时候。
00:04:33但目前，你必须通过 Claude.ai 来操作。
00:04:35在它构建的时候，
00:04:36我们来聊聊你可能会有的疑问，
00:04:38比如，这和我直接把
00:04:39这段提示词发给聊天窗口，
00:04:41或者打开 Claude Code 并说：
00:04:43“嘿，我想要你”
00:04:45“构建这个交互式的东西”有什么区别。
00:04:47既然它最终只是，你懂的，
00:04:48为此创建某种 Web 应用。
00:04:50答案是，如果我们说得极简一点，其实没什么区别。
00:04:54对吧，它只是在写代码。
00:04:55结果是一样的。
00:04:56区别在于，再次强调，
00:04:58如果你曾以任何身份做过前端设计，
00:05:00哪怕只是一个简单的落地页，
00:05:02你就会明白能够
00:05:04直观地看到并对比这些东西的力量。
00:05:05这就是为什么 Google Stitch 这么酷，
00:05:08因为 Stitch 的牛逼之处
00:05:09甚至不在于设计理念，
00:05:11尽管我认为它确实很棒。
00:05:12而是在于我拥有一个 UI，
00:05:13能让我直观地看到一堆选项
00:05:15并以这种方式进行编辑。
00:05:17当我满意后，再把它拉入代码。
00:05:18从设计的角度出发，如果事事代码先行，
00:05:20那是很困难的。
00:05:22这会感觉有点笨拙。
00:05:23很难将一种视觉媒介
00:05:26转化为自然语言，
00:05:28再转化成代码，
00:05:29最后又变回视觉画面并精准实现，
00:05:32尤其是在刚开始的时候。
00:05:33我需要直观地看到东西。
00:05:34至少对我来说，我需要看到选项。
00:05:36所以有这个工具真是太棒了。
00:05:38对于 Anthropic 和 Claude Code 来说，这是巨大的一步，
00:05:41因为这曾是一个真正的弱点。
00:05:42这就是为什么你会看到像 Pencil 这样的应用
00:05:45变得如此流行，
00:05:46因为它为你提供了处理这些事情的
00:05:48视觉媒介。
00:05:49另外补充一点，正如你在底部看到的，
00:05:51这些都是功能完整的应用程序。
00:05:53它本质上是在做原型设计。
00:05:55所以你可以拥有这些所谓的 API。
00:05:58你应该更多地将此视为，
00:06:00不仅仅是一个像 Canva 这样的视觉设计工具。
00:06:03你应该更多地从
00:06:04Google Studio 这一类，
00:06:05比如 Google AI Studio 那种类型的工具来考虑。
00:06:07这就是它生成的成果。
00:06:08确实采用了编辑风格。
00:06:10我们可以看到地球就在这里。
00:06:12我可以用鼠标拖动它。
00:06:14我们可以调整旋转速度，改变发光强度，
00:06:18更换调色板。
00:06:19这挺酷的。
00:06:21然后这边有一些简短的说明。
00:06:25现在让我们谈谈编辑这个东西的能力。
00:06:27首先，我们在上面有这个微调小工具。
00:06:30这些微调主要涉及旋转速度
00:06:33之类的内容。
00:06:34我可以留评论，可以编辑，还可以绘图。
00:06:37我们还可以进入全屏，
00:06:39看看它真实呈现出来的样子。
00:06:41全屏下看起来挺有意思。
00:06:42实际上效果要好得多。
00:06:44但假设我想对它进行修改。
00:06:46显然我们可以在提示词窗口
00:06:49直接输入指令。
00:06:50但如果进入编辑模式，我可以做得更细致。
00:06:55这让我想起了 Cursor 的编辑器，
00:06:58甚至是 Lovable 之类的东西。
00:06:59我可以实际选中每个具体的城市。
00:07:04如果我选中整个地球，它就会在这里弹出来。
00:07:07我可以更改颜色等参数。
00:07:11那样看起有点丑。还有高度等所有参数。
00:07:14所以我能够非常具体地
00:07:16针对我想要更改的内容进行操作，这很棒。
00:07:18这比我用文字说：
00:07:19“嘿，我想改一下这个的大小”要好。
00:07:21我可以直接在这里选中它并进行编辑。
00:07:24我们也可以添加评论。
00:07:25我可以点击任何特定的东西。
00:07:27和编辑类似，但不是直接修改
00:07:29“嘿，这些具体的数值”。
00:07:31我可以点击地球并留下评论，比如：
00:07:34“能把地球调大一点吗？”
00:07:37发送给 Claude。
00:07:40它会创建一个评论队列。
00:07:41如果你不想立刻发送给 Claude，
00:07:43但你随时可以将其发送给 Claude，
00:07:45它就会开始工作。
00:07:46最重要的是，我们还可以绘图。
00:07:48我可以像这样，“好吧，”
00:07:50“我只想在这里加个月亮”。
00:07:52来个月亮吧。
00:07:53我想看到阿耳忒弥斯 2 号在这边飞来飞去。
00:07:56类似这样的东西。
00:07:56在右边这里，我们还有设计文件。
00:07:58所以你实际上可以查看
00:08:00底层的代码。
00:08:02最后，我们还可以将其
00:08:04导出并分享。
00:08:05如果我点击导出，我可以将其下载为压缩包。
00:08:07可以导出为 PDF、PowerPoint，或者发送给 Canva。
00:08:11或者更酷的是，我可以把它移交给
00:08:13Claude Code。
00:08:14它会给我提供在 Claude Code 中
00:08:15导入该项目的命令，这非常棒。
00:08:17今天的内容就到这里了。
00:08:18我知道刚才讲得有点紧凑，
00:08:19但只是想向你们展示
00:08:21如何操作这个工具以及有哪些可能性。
00:08:23请务必关注未来一两天内的深度解析，
00:08:26我会教你如何最大化利用它。
00:08:29一如既往，请告诉我你的想法。
00:08:31如果你想参加 Chase AI 大师班，
00:08:33链接就在置顶评论里。我们回见。