00:00:00今天你将学习如何结合全新的 Claude Design 和 Seed Dance 2.0 的强大功能
00:00:06来创建像这样精美的动画网站。我将带你一步步完成整个工作流程
00:00:12即使你以前从未做过此类工作，也能轻松重现。在过程中
00:00:17我还会展示如何通过一些技巧和诀窍，充分利用 Anthropic 的这款全新工具。
00:00:22现在，要创建一个这样的网页，我们首先需要从背景视频入手
00:00:28而要获得背景视频，我们首先需要一张起始图片。现在我们将
00:00:32使用 Nano Banana Pro 来创建那张起始图片，然后我们将用它
00:00:37通过 Seed Dance 2.0 将其转化为视频。所有这些都将在 Higgsfield 上完成，它
00:00:44是我的一站式 AI 内容创作工具库。所以，首先我们要前往
00:00:49Image 页面，进入 Nano Banana Pro，你会立刻看到我一直在制作的
00:00:55一些图片，它们对我们的网页来说应该很眼熟，尤其是这些。
00:01:01我使用的具体提示词可以在我的免费课程中找到，描述栏里有链接
00:01:05但我在这里想重点说明的是图片本身，而不是具体的
00:01:11提示词，因为你想创作的图片肯定与我的不同
00:01:15而更在于构图。为什么这张图片要这样设计？当我们查看
00:01:21最终成品时就很明显了，对吧？我们在屏幕右侧
00:01:26放置了一个大型主视觉图，但在左侧仍需要留出留白来放置文字。当我让 Nano Banana
00:01:31Pro 创作这张图片时，我就预设了这种构图。我想：我们要一张
00:01:38从中间大概切开的图片，右侧放置我们显眼的图片，然后
00:01:44左侧就是放置主标题文字的地方，这里就像是标语所在的位置。
00:01:51我们会在顶部放置某种导航栏，用户可以点击
00:01:55“主页”或不同页面，这里会有一些按钮，比如“注册”
00:02:00或“了解更多”，底部可能还会有一个滚动条。我事先就知道这一点
00:02:04在要求 Nano Banana Pro 为你创作图片时，你需要提前考虑到这一点
00:02:10因为无论最终采用哪种构图，都将直接决定
00:02:17你的提示词。现在你可能想问：“Chase，我根本不知道有哪些选项，
00:02:22我一开始就不知道该用什么构图，我该怎么决定呢？”嗯，
00:02:25最简单的方法就是找一些你喜欢的网站，开始拆解它们的
00:02:30英雄区和落地页构图。一个很好的寻找灵感的地方是 Dribbble。
00:02:35也就是那个有三个 B 的 Dribbble。如果我搜索“Landing Page SaaS”，你可以搜索
00:02:40落地页或者其他任何关键词，你就会明白我的意思了。比如看这个，
00:02:47他们把图片放在底部，文字放在顶部。我们可以用同样的方法
00:02:52处理这个，也许我们可以把他移到中心，把云朵放在两侧
00:02:56把文字放在这里，构图就完全变了。或者我们想要那种
00:03:02以图片为核心，文字围绕排布，再添加其他元素的设计吗？
00:03:07当你浏览并向下滚动时，你会发现有无数种方式
00:03:11可以实现。但你需要提前知道，或者至少在脑海里
00:03:16准备两三个方案，然后当你去 Nano Banana Pro 时，就可以提供
00:03:22反映那种风格的提示词。所以总结一下，在创作图片时，首要任务就是确定
00:03:26构图。所谓构图，就是决定留白在哪里，文字在哪里
00:03:32无论是在左侧、中间、右侧还是顶部都无所谓，只要选定一种
00:03:37并让你的提示词反映出来即可。另外，在提示词方面，可以依赖像 Claude 这样
00:03:42的工具帮你编写。今天演示我们将使用这张图片，我也会把复制品
00:03:47放在社区里，如果你想跟着我一步步操作的话。有了静态图片
00:03:51在手，我们现在要前往 Claude Design。整体流程是：图片在
00:03:56Nano Banana Pro 中创建，然后在 Design 中模拟我们的网站。一旦我们得到了
00:04:01我们满意的设计、落地页等等，我们再将那张图片转化为
00:04:05视频，因为最后一步做起来非常简单。所以如果你是 Claude Design 的新手
00:04:10别担心，我们会在本视频中讲到关键点。但我还有一个深入讲解的视频
00:04:14会更细致一些，你也可以观看。我会在上方添加链接，但就
00:04:18目前而言，我们要做的是前往左侧点击 Prototype，然后
00:04:24给它起个项目名称，我叫它 SD2。对于设计系统，在这个项目中你可能
00:04:30不需要，也不必使用。如果你想深入了解设计系统
00:04:35可以查看那个深度讲解视频。我们将选择高保真，然后创建
00:04:40这会带你进入页面。首先要做的是添加一些背景信息
00:04:45我们需要添加的背景信息就是我们下载的图片，你可以看到左下角
00:04:49我已经上传了我的截图。接下来，我们要给它一个提示词。当然你可以继续
00:04:55添加更多截图，如果能从 Dribbble 等地方找来好的示例，我强烈建议你这样做。
00:04:59如果你在 Dribbble 上找到了你喜欢的整体构图，也一并加上。
00:05:04说到实际的提示词，我强烈建议依靠像 Claude
00:05:09Code 这样的工具帮你写出来。这里展示的就是 Claude Code 帮我生成的提示词，我准备
00:05:13把它粘贴到 Claude Design 中。这是为了我们虚构的 SaaS 公司 Olympus，它是一个市场情报
00:05:19平台。它详细说明了公司业务，非常细致地描述了英雄区
00:05:25以及页面上想要显示的版块，还增加了一些关于动画的内容。现在
00:05:30非常重要的一点是，我们在末尾加了这句话：“在开始之前，请问我任何问题。”
00:05:36Claude Design 最酷的地方在于它能像 Claude Code 一样运作，它会制定一个计划模式
00:05:42所以我会给出这个确切的提示词，然后它会问我一堆
00:05:46问题，以更深入地了解我试图构建的东西。而那个计划模式功能
00:05:50最棒的一点是，即使你一开始给出的提示词很烂
00:05:54没有像这样详细，你依然可以通过 Claude Design 经历这个问答过程
00:06:01得到一个相当不错的初稿。所以，我把内容粘贴进去，然后
00:06:06点击发送。这里简单提一下 Claude Design 的使用限制。Claude Design 运行在
00:06:11它自己的额度限制下，这与你平时的 Pro 额度、Max 5 或 Max 20 限制是分开的
00:06:18Claude 是独立计算的，而且它可能是个资源消耗大户，所以要时刻留意。以我为例
00:06:23我已经用完了额度，因为我用得非常多，所以我现在使用的是额外额度。
00:06:28参考一下，当我独自完成今天演示的所有操作时，在额外额度方面
00:06:33创建这个落地页大约花费了我 5 美元。我其实可以花得更少，
00:06:38但这样你就知道我们处于什么阶段了。这是它返回的问题。
00:06:43关于版块排版，我们想要什么？选择现代神话风格的配色方案。
00:06:52让我们使用反转模式，之后它生成后，我们还可以通过“微调”
00:06:58获得更多选择。文案语气，让我们采用神话风格，因为如果你没意识到的话
00:07:06公司名字叫 Olympus，是个情报应用，所以我们一直使用的这张图片
00:07:11是想比喻成普罗米修斯之火。英雄区
00:07:17构图，全出血图片，好的，就选全出血。版块顺序，boom boom boom，你
00:07:26如果不知道的话，总是可以让它为你决定。嗯，社会认同部分也让它决定吧。
00:07:32这里有个很酷的东西：“微调”。稍后你会明白微调的意义，但我总是
00:07:39建议尽可能多地使用微调，以后我们还可以添加更多。点击继续。
00:07:45现在它开始为我们构建了。快速熟悉一下
00:07:50Claude Design。在右上角的“共享”处，如果我点击这个
00:07:56我们并不会被困在 Claude Design 里。最酷的是，我稍后会展示给你们看
00:08:01我们可以将其导出到 Claude Code，一旦我们有了 89% 的解决方案，就不需要
00:08:07在额度上被过度消耗了。我们可以带到 Claude Code 里，根据我们的
00:08:12喜好进行修改。我们还可以将其导出为 HTML，发给 Canva，或导出为 PPT 或 PDF
00:08:17以供下载。我们还可以邀请团队成员，进行协作。所以
00:08:22Claude Design 非常多才多艺。这是 Claude Design
00:08:27反馈给我的结果。在本视频中，我会把它移来移去。首先
00:08:33请注意右侧的“微调”。微调是这个页面上的一个菜单，允许我们
00:08:40非常快速地更改网页的不同微观元素。我可以更改强调色，可以更改
00:08:48主题，从亮色变暗色（下面看起来更明显），可以更改标题、Logo 标志、
00:08:54定价名称、任何动画效果。所以迭代网页的不同版本变得非常非常容易。
00:09:03此外，如果我点击右上角的编辑按钮，我可以进行更细粒度的编辑。
00:09:07我可以点击像上方这个按钮的东西，直接更改
00:09:13颜色。我可以更改字体、内边距、透明度等等。我还有
00:09:19添加评论的功能。我可以点击同一个按钮，而不直接更改
00:09:25具体数值，我可以留下一条评论，比如“放大一点，缩小一点”，或者我可以在上面画图。
00:09:30我可以画出这个东西，选定所有这些部分并说：“嘿，向左移”，然后发送给
00:09:39下方的 Claude。它实际上会截取我刚刚写的东西的截图
00:09:44并理解为：“哦，好的，向左移一点点。”现在我们能看到它向左移了
00:09:49它上面还有个我们也可以移除的讨厌的东西。但在这一点上你应该做的是
00:09:55首先，快速浏览一下，我对整体
00:10:02设计的初步印象如何？看起来没问题。最重要的是，根据我们的图片
00:10:09我们需要回到 Nano Banana Pro 中编辑这张图片吗？我们需要把它变小、变大还是怎样？如果看起来
00:10:14不错，我的建议是，在 Claude Design 中我们使用两步走流程：第一，我
00:10:21想看到我的网页的不同变体。我指的不是小的调整，
00:10:26我指的是至少再看两个完全不同的布局，来确定我想走哪条路。
00:10:32一旦我们在宏观层面找到了喜欢的变体，我们就深入研究它
00:10:37并让它向我们展示更多微调选项，不仅仅是 5 个微调，而是 15 个，这样我们才能真正得到
00:10:43我们喜欢的方案，因为目标是在引入视频之前，并在引入 Claude Code 之前达到 90% 的解决方案
00:10:48使其成为我们自己的。要做到这一点很容易。我们要做的
00:10:53就是提示 Claude Design。我说：“你能为我们的网页创建两个额外的布局变体吗？”
00:10:58除了当前这个，我还可以点击切换它们。所以，只是一些我们可以包含的新设计。
00:11:03这种先创建宏观变体，一旦确定变体后，再创建大量
00:11:09微调的想法，这才是 Claude Design 与 Claude Code 的真正区别。现在，直接
00:11:16一个接一个提示，我认为 Design 在前端方面比 Claude Code 稍微好一点，但这种
00:11:20那种我们能非常非常快速地进行的变异和视觉迭代，我认为这是 Claude Design 的一大
00:11:27突破，这也是它的价值所在。因为如果我们试图在
00:11:32Claude Code 内部做同样的事情，会比较费劲。这就是我所说的，在顶部我们有电影感
00:11:37版本，那是最初的版本，现在它还给了我们一个存档版本和一个终端版本。你可以
00:11:45看到它们都非常独特。而且这适用于整个页面，不仅仅是英雄区
00:11:53而是全部。坦白说，看着这个，我觉得终端版本看起来真的很酷。我们
00:12:01必须更换这里的图片，并且肯定得放弃视频，但是
00:12:09你立刻看到这个，我觉得它看起来很酷，绝对和你
00:12:13日常见到的 AI 创建的网页不同。这就是我所说的在
00:12:20实际应用 Claude Design 时，利用这些变体，因为我
00:12:24从来没想过能做这样的事情，甚至不知道如何给出提示词来得到这个。我真的
00:12:29很喜欢这个。但为了让视频保持进度，我们要做的就是保持
00:12:35电影感版本。但我展示给你们看是因为，你的想法是：选择你喜欢的，然后
00:12:40进入 Claude Design 流程的第二步，即微调、微调、再微调。所以我们有
00:12:46所有这些微调，但就像我之前要求 Claude Design 给我更多变体一样，现在
00:12:51我将要求它在给我的微调上变得非常激进。我不需要知道我想要什么微调
00:12:56我不需要知道：哦，我想要能够更改主题、标题或 Logo。我
00:13:00不知道，直接给我一堆，我们会搞定的。所以我写下了：让我们坚持
00:13:04电影感版本，你可以移除另外两个，并激进地增加可用微调的数量。
00:13:11现在看看它提供了什么。我们可以看到它添加的所有额外微调
00:13:15我们从大约 5 个微调增加到了大约 15 个左右，这太棒了。所以我们有这些原始的
00:13:22带有强调色、主题、Logo 标志、那个看起来不错，字体、正文字体、等宽字体、文字缩放
00:13:36重点是，我现在可以一遍又一遍地浏览所有这些。我甚至可以
00:13:42更改 CTA 叠加层、暗度、余烬发光，它不会停止，它不会停止。所以我浏览了
00:13:51我这边的所有微调，去掉了余烬，这就是我们最终得到的。现在我有
00:13:56能力全屏查看它，如果我点击顶部的 Present，全屏显示，这样我们能更好地了解
00:14:02它看起来会是什么样。就目前而言，对我来说，这看起来很不错。记住，我们不需要在 Claude Design 里
00:14:08得到 100% 的解决方案。我们要尽可能接近，我们要做我们可以做的所有设计
00:14:14决策，然后我们想做的是带回 Claude Code 进行微小的
00:14:18调整。因为请记住，Claude Design 是个资源消耗大户，你获得的额度有限，所以我们要
00:14:23确保用在刀刃上。现在我们可以过渡到视频版块，在那里我们获取这个背景并进行
00:14:29动画处理。顺便提一下，重要的是我们用静态背景完成了所有这些操作，因为
00:14:35当谈到移动端用户时，我们不想让我们的移动端用户被某些巨大的视频冲击
00:14:39这会拖慢他们的速度。所以如果有人在移动端并且访问我们在这里设置的网站，他们
00:14:43只会看到静态图片。所以我们将使用 Seed Dance 进行处理。所以我又回到了这里，在
00:14:47Higgsfield 内部，前往 Seed Dance 2.0。你不一定要用 Seed Dance，Seed Dance 只是目前最好的一个
00:14:52其他选择包括 Kling 3.0，你也可以使用像 Veo 3.1 之类的。而视频设置
00:14:58非常简单，字面上你只需要获取你的图片，然后把它拖进这里
00:15:04所以你字面上只需要把它拖拽到这里作为起始帧，然后我们就给它
00:15:08一个提示词。现在提示词非常基础，我只写了：保持动作极慢，云朵几乎
00:15:15不动，他手中火的余烬缓慢飘动。然后我们就得到了像这样的东西。我们要
00:15:21微妙，不要疯狂，你不想让它看起来像一个疯狂的电子游戏，你想要它几乎
00:15:26只看起来像一个动画般的、低调的 GIF。这是因为英雄图片只是给我们
00:15:32网站增添了一些情调，你不希望它占据一切。其次，如你在这里看到的
00:15:37它会反转，因为最多你只能从中得到 15 秒。理想情况下你可以创建
00:15:43一个完美的循环，但这可能有点困难。所以最好的赌注是做我们这里做的事，只做一个
00:15:4815 秒的视频。这听起来很多，但实际上它并不太重。而且
00:15:54当我们做 15 秒时，有人访问你的网站，并且
00:15:59他们只是坐在你的英雄页上阅读 15 秒，然后他们因为
00:16:04在循环时反转回来的剪辑而感到震惊的情况是不太可能的。最可能的情况是他们去
00:16:10你的英雄区，哇，看起来很酷。10 秒后他们已经向下浏览落地页剩下的部分去看看你
00:16:15到底是做什么的。所以提示词保持简单，保持微妙。如果你想发疯，请便，让它
00:16:20尽可能长，达到 15 秒。你想要它是 16:9，并且至少是
00:16:261080p。有些模型会给你增强提示词的选项，大致意思就是说
00:16:30嘿，你输入了糟糕的提示词，我们让它变得更好。别这样做。你总是想要完全控制
00:16:34你的提示词，并且预期你必须做几次变体，直到你弄清楚
00:16:40所以很可能为了得到一个真正有效的，你必须这样做四五次
00:16:45直到你最终得到你想要的输出。但一旦我们得到了那个输出，我们所要做的就是
00:16:50下载它，然后我们跳回 Claude Design，我们只是要把那个 mp4 文件丢进
00:16:57提示词窗口。所以我刚刚把它上传到了左下角，然后我写道：我们可以把静态图片
00:17:01换成我刚刚上传的视频，作为英雄区背景吗？然后它会给你像
00:17:05这样的东西。它就是如此简单。就在这一点上，我们在
00:17:12Claude Design 内部基本上完成了。我的意思是，如果你想做更多更改，做更多微调，完全取决于你。但如果你
00:17:17到了这个地方，我会说你已经准备好从 Claude Design 中移动出来，现在把
00:17:22这个带到像 Claude Code 这样的东西，就像我们早些时候谈到的那样。非常容易做到。我们将转到
00:17:26共享，我们将去 Hand off to Claude Code。因为这包含一个 mp4 视频
00:17:34如果你尝试只做复制命令，下载它可能会遇到一些麻烦。所以你
00:17:38真正想做的是你只是想下载 Zip，所以它会获取
00:17:44所有文件，所有那些实时视频，幕后的所有编码内容，并放入一个 Zip
00:17:49文件中。所以你可以做 Download Zip，然后你提取所有这些，然后你只是要
00:17:56把那个提取的文件夹丢进 Claude Code，并说：“下载所有内容，我们现在要
00:18:03使用所有这些代码创建一个网站。”你在那个时候基本上完成了。所以我丢了进去
00:18:10并说：“提取所有这些文件用于我们正在构建的网页，然后启动一个开发服务器。”
00:18:14这是开发服务器上的网页，它已经启动。随之，向 Claude Code 的传输就完成了
00:18:19你设置好了动画英雄区。它有视频，有静态图片，一切都准备好了
00:18:25让你做细微的更改，然后推送到 GitHub，然后再推送到 Vercel 并实际
00:18:29在线托管。所以这就是我今天要留给你们的地方。我希望这能够 shedding
00:18:33light 在如何结合 Claude Design 和 Seed Dance 2.0 的力量来创建这些
00:18:39动画网站上。像往常一样，让我知道你们的想法，一定要查看 Chase AI，如果
00:18:44你想亲手获取所有这些资源。我会再见你们。