Claude Design Just Unlocked AI Motion Graphics

TL;DR: Claude Design 的动画功能可通过提示词、参考图片和可复用设计系统，基于转录文本生成与语音同步的动态图形；本文包含作者使用的确切提示词、工作流和剪辑流程。 ## Claude Design 的动画功能：很多人忽视了，却是作者最常用的功能 Claude Design 正在越来越受欢迎，但有一个功能被大多数人忽视——动画。作者表示，这正是他使用最多的功能，也是他制作 YouTube 视频中所有动态图形的方式。其最独特之处在于：可以放入一段转录文本，Claude Design 就能生成与所说的话完全同步的动画。 本文将介绍它能制作的动画类型、作者在视频中使用的确切提示词和流程，并包含剪辑过程。 ## 如何访问 Claude Design 需要订阅付费的 Claude 计划（Pro 或 Max）才能使用 Claude Design。访问方式有两种： - 访问 claude.ai/design - 在 Claude 的侧边栏中找到它 进入后，有多种模板可供选择，包括幻灯片、移动应用设计、UI 原型图、简历、3D 物体等。本视频专注于动画。 作者会依次展示： 1. 仅使用提示词创建动画 2. 使用参考图片 3. 使用多张参考图片 4. 使用设计系统（完整的品牌风格和语音指南，每次可以基于它来工作） 对于每一个关于 Claude 的视频，作者都有一个包含 UI、标志、颜色等所有内容的设计系统。只需选择它、粘贴提示词、放入带时间戳的转录文本，然后发送即可。 ## 仅用提示词创建动画：LLM 训练示例 第一个例子，输入提示词： > “制作一个关于 LLM 如何训练以及如何工作的视觉解释动画。” 直接发送后，Claude 有时会返回一系列问题。对于这个非常模糊的提示词，它问了不少问题。作者的回答如下： - 面向好奇的专业人士和高管 - 30 秒（这只是个演示） - 16:9 宽高比 - 替我决定 - 替我决定 - 最少的标签 点击继续后，仅几分钟后结果就出来了。 结果带有调整面板，可以测试不同的强调色。作者非常喜欢那个开场镜头——“猫坐在垫子上”，这是他每次看到这个主题被解释时都会看到的例子。他认为那是一个很棒的转场，红色是他最喜欢的颜色。 底部还有时间线，可以调整每个镜头的时长。如果希望某个镜头更快，可以往里拖。 ### 用自然语言修改动画 最棒的是，可以用自然语言进行修改。例如，希望它用不同的短语作为例子，只需直接要求它修改那部分。 修改后，例子变成了“水壶开始沸腾”。它完美地改掉了，同时保持其他所有内容不变。作者跳到结尾检查问题部分，发现也换了。他指出，要从零开始创建这样一个动画需要很长时间，而这还算是一个相对简单的例子。 ## 数据可视化：动态图表与图形 另一个特别有用的功能是数据可视化，比如动态图表和图形。作者展示了一个快速示例，仅凭提示词生成，没有参考图片。 提示词要求：比较历史上不同的市场泡沫，以及目前在 AI 泡沫中的位置。 结果非常惊人。作者没有在提示词中提供任何数据，Claude 自己去研究并找到了所有要用的数据。所以仅凭一个提示词，就能得到一些非常有用的动画，且与典型的文本转视频生成器产出的内容大不相同。 ## 底层逻辑：Claude 编写的是代码，而不是渲染视频 Claude 在底层编写的是实际代码，比如 HTML、CSS 和 JavaScript，并且会实时展示。这三者分别对应结构、样式和动态效果。整个过程是实时发生的，这与返回一个完整视频文件的生成器完全不同。这也是为什么 Claude Design 中的输出如此容易进行精确编辑——它只是在修改那部分代码而已。 ## 免费指南：《Claude Design 实战》 视频中提到，他们制作了一份免费指南，叫做“Claude Design 实战”，里面包含今天就能尝试的用例。每个用例都有一个优化过的提示词，让用户更快地得到想要的结果。指南已更新，加入了作者在下一部分中用来创建这些动态图形的精确提示词。此外还有定制推介 PPT、从竞品截图制作落地页、社交媒体模板等工作流程。免费指南链接在视频描述中。 ## 基于图片的动画：单张参考图片 之前一个视频讲 Claude 生态系统时，作者用 GPT image 2 生成了想要画面效果的图片，几乎与想象的一模一样。但需要让它动起来。 工作方式：把图片放进去，然后说明想要什么样的动画。作者当时的说明大致是： > 开始时显示顶部三个层级，然后每一层按顺序淡入、暂停、再进入下一层，逐层向下走完整个生态系统。 设置暂停是因为把它当标题画面使用，讲到那一部分时就切换。 这个生成过程没有问任何问题，直接开始并返回了结果：从标题开始，然后是核心产品入场，有一个暂停，接着是通用层，然后是上下文记忆，一个暂停，最后是自治层。第一次就完美成功。 作者指出：结果看起来与参考图片不一样，因为 Claude 并不是在让图片本身动起来，而是用代码重新创建了这个概念。 ### UI 与界面模拟动画 使用图片参考可以做各种各样的事情。作者一直在用的一个重要用途是不同平台的 UI。把图片放进去，Claude 就能模拟光标移动、点击东西、弹出窗口、在提示框中打字，或者来回进行的对话。 这些内容用传统方式做非常困难，除非使用模板。你能找到一些常见平台的模板，但不太常见的平台肯定找不到，而且也没法做太多定制。这在这里节省了大量时间。 ## 多张参考图片 + 通用提示词 使用多张参考图片，可以真正地引导风格，使其在较长的生成过程中保持一致，同时包含特定的标志、UI、图标或任何需要的内容。 作者制作一个关于 Claude 的动画时，使用了： - 那个小小的 Claude 角色 - 提示框 - 聊天界面 - 一张希望背景看起来样子的图片 这四张图片提供了所需的一切。然后作者使用了一个相对简单的通用提示词，给 Claude 留出设计空间，这样可以用在不同产品、不同概念、不同解释类型的各种生成中。 ### 通用提示词（作者在视频中使用的） > 我希望制作动态图形，用于讲解人头像视频的上方。它们应该跟随转录文本，在匹配的时间戳处说明概念，尽可能默认使用图形和图标来解释概念。适用时使用界面截图。在适当的时候，尽量减少文字使用，用文字来强调关键点或给事物加标签。例外情况是，如果涉及定义，那么屏幕上显示精确的原文是有意义的。 作者解释：这个提示词相当通用，基本上适用于他制作的任何类型视频。关于尽量少用文字的部分，是因为 Claude 会默认使用大量文字，几乎像是全程配字幕，这一点他完全不喜欢，但修复起来很容易。 ### 为讲解人头像预留空间 接下来的部分是告诉 Claude： > 在右侧三分之一处留出空白区域，有时候是顶部三分之一，用来放置讲解人头像。否则，它会默认全程全屏，那样就没有地方放自己了。告诉它根据需要自由切换位置。但通常顶部三分之一开放是用于大的要点和定义，或者在需要时它也可以全屏。 这次作者还加了一行说明：给他添加的那张背景图供它使用，并让背景添加一个微妙的动画。宽高比是 16:9。 ### 获取转录文本：用 Gemini 生成 SRT 作者发现的最简单、最快的方法是使用 Gemini，说： > “给我这段的 SRT 转录文本” 然后放入想要生成动画的那段视频片段。5 到 10 秒后它就返回了。 SRT 代表 SubRip Text，是一种纯文本文件格式，包含时间码，下面是文字，中间有换行。Gemini 知道这是什么意思。点击复制，然后把它粘贴到提示词的结尾，发送即可。 这一次没有需要回答的问题。结果返回后，可以看到： - 右边留出了空间给讲解人头像 - 聊天界面看起来很棒 - 小 Claude 角色上下浮动 但当讲解人头像放在上面时才最有意义。作者加上讲解人头像，把整个内容带声音完整播放了一遍。 ### 用名称引用片段进行修改 Claude 全程只在右边留了空间，所以作者想在接近结尾时把开放空间切换到顶部。他发送了快速的后续修改： > “将对话和一轮回复移到底部中央，在顶部留出足够的空间给讲解人头像。” 那些是 Claude 给这些部分起的标题，可以在下面看到它们。作者通常需要修改时就直接用名称引用它们。修改结果回来了，效果非常完美。 ## 导出与剪辑流程 作者来到“分享”按钮，选择“视频”，把视频提升到 1080p 后导出，然后导入 Premiere。 - 手动添加缩放和位置关键帧，用贝塞尔曲线让运动变得平滑 - 对蒙版做类似的处理，手动调整到想要的位置，然后让它与运动同步 - 移动到下一个运动点，点击进去，重复同样的操作 - 一旦做过这些运动操作一次，就可以复制粘贴 ### 自建的 Premiere 插件 作者指出，在 Premiere 中做这些操作其实相当麻烦，所以他为 Premiere 构建了一个插件来解决这个问题。它还能处理其他对这种类型视频来说很耗时的操作，比如缩放、动态高亮等等。 这个插件目前是作者自己在用的个人插件，还不能使用。作者对此非常兴奋，并快速展示了一些功能。他整个是在 Cursor 中构建的。 **缩放**：点击想要缩放的位置，如果需要可以改变缩放比例，然后点击“动画”就完成了。 **高亮**：放置矩形，点击“放大”调整到恰到好处，可以改变颜色或动画风格。作者非常喜欢“描边”风格。点击“动画”后，高亮在缩放的同时动画进入，同时背景添加了淡入效果。 **弹出效果**：放置另一个矩形，它会动画展开到这个矩形。 ### 讲解人头像的处理 作者把讲解人头像片段放在上面，Claude 生成的视频放在下面。然后点击预设位置之一和一个形状，如果需要可以手动调整大小，还可以添加边框、改变颜色、添加渐变、发光或投影。 作者重新构图画面的位置，让橙色光线正好在蒙版顶部，然后点击“动画到此状态”。几秒钟后完成。 在后面的部分，他希望画面移动到中间位置。把播放头放在那里，点击“刷新画面”以看到它需要去哪里，再次点击位置和形状，确保橙色光线完美地在顶部，然后点击“动画”。 播放时，动画与作者说的话同步： > “而且大家都知道。它在三个界面上的工作方式完全相同。” 作者接着展示了完整片段： > “聊天是大家都知道的功能，它在三个界面上的工作方式完全相同。这是你与 Claude 来回交流的地方，用于头脑风暴、写作、研究、完善想法。它是一个思考伙伴。你可以通过内置功能扩展它，比如项目（Projects），它为它提供关于你工作的永久上下文，或者连接器（Connectors），让它使用你的其他工具，比如你的邮件或日历，还有工件（Artifacts），也就是聊天旁边打开的应用程序或文档窗口。但归根结底，聊天是一场对话。聊天所做的所有事情，即使它为你生成一个文件或构建一个小仪表盘，都发生在一轮之内，然后它交还给等待的你。” 作者表示，已经在不少视频里用过这些了，但对他来说仍然难以置信，获得这种质量的动态图形竟然如此简单。 ## 可复用的设计系统 上传一系列参考图片效果很好，但只适用于那一次生成。很多时候，你会希望在多个生成中使用一种风格，以保持不同镜头或不同视频之间的一致性，也许是为了每次都匹配品牌颜色。 作者制作很多关于 Claude 的视频，希望每次都有标志、UI 和颜色。甚至在一个视频内部，他通常一次只生成大约 30 秒或最多 2 分钟的片段，而一个视频里可能会有好几个这样的片段，所以需要创建一个可复用的设计系统。 创建方式： - 点击设计系统下拉菜单下的加号按钮 - 或者在下面的设计系统标签页中查看所有之前的设计系统 - 点击“创建设计系统” - 选择使用 Claude Code 创建，或者“在此创建” 然后可以： - 从 GitHub 链接代码 - 从电脑上传 - 上传 Figma 文件 - 放入希望它参考的图片 作者的例子：放入三张图片，用 GPT image 2 以一致的风格生成，覆盖他一些视频中可能会出现的各种内容。然后添加更多备注来引导它，点击“继续生成”，大约需要 5 分钟。 生成完成后，Claude 产出了完整的文档，包含： - 系统布局 - 内容基础 - 视觉基础 - 会在不同生成中使用的所有不同视觉元素：连接事物的线条类型、玻璃和描边的风格、发光层次、图标设计 这个列表一直往下走，里面有大量的内容。 作者总结：过去需要很久的设计与动画工作，如今通过 Claude Design 的动画能力、转录文本引导、参考图片和设计系统，整个流程变得极其高效。 Source: [Claude Design Just Unlocked AI Motion Graphics - YouTube](https://www.youtube.com/watch?v=97Y5cz7H8SM)