00:00:00随着生成式AI变得如此强大。
00:00:02新工具层出不穷,其中Google自从Gemini 3发布以来真的大幅提升了实力。
00:00:07因此,你可能在X上看到有人一次性做出这些令人惊艳的落地页,并声称这个模型改变了游戏规则。
00:00:14但他们在撒谎。
00:00:15事实是,他们需要使用多种工具来构建这些网站。
00:00:18Google一直在疯狂推出由Gemini 3和Nano Banana驱动的实验性工具。
00:00:23但Google并没有提供将它们组合使用的方法。
00:00:26所以你需要一个完整的工作流程来整合所有这些工具。
00:00:29今天我们有很多内容要讨论,因为我没想到它们配合得如此出色。
00:00:34你在这些网站上看到的动画只是一系列帧的集合。
00:00:37但如果你用AI工具生成这些帧,结果往往不一致。
00:00:41Google通过发布一个名为WISC的实验性工具来解决这个问题,它专为资产生成而设计。
00:00:47它由Nano Banana提供图像生成能力。
00:00:49我经常使用WISC为主视觉区域生成图像序列。
00:00:53我用简单的词语提供提示,逐步更新每个序列的细节,然后在主视觉区域使用生成的图像。
00:01:01通过整个流程,我创建了这个落地页,并实现了相机的酷炫动画效果。
00:01:07首先,我们只生成序列的第一帧和最后一帧,然后使用这两个关键帧为主视觉区域创建动画。
00:01:14但如果你没有结构地随意输入提示,那么你想要的关键帧就不会有相同的结构连续性。
00:01:20为此,你必须明确定义主体、视觉意图以及图像中想要的细节层次。
00:01:26WISC使用主体、场景和风格框架来指导图像生成,让你能将它们组合成一个全新的视觉效果。
00:01:33所以我详细说明了我想要什么样的相机,镜头上的反光效果如何呈现,分辨率和图像深度,它完全按照提示创建了视觉效果。
00:01:44生成的图像并不总能符合你的预期。
00:01:47这种情况下,你只需用简单的词语说明需要改变的地方,它就会将改变融入新的视觉效果中。
00:01:53我最喜欢WISC的一点是,你不需要写冗长详细的提示就能获得出色的结果。
00:01:58这是因为它使用Gemini 3作为中间层,在你的简单词语基础上编写详细提示,从而产生优质的视觉效果。
00:02:05现在问题来了,我为什么选择WISC。
00:02:08虽然Nano Banana需要大量文本提示,
00:02:10而Google的Mix Board是为情绪板设计的,
00:02:13两者都没有针对快速、
00:02:15可控的图像重混进行优化。
00:02:16WISC的核心优势在于结合参考图像,让你能够更好地控制生成的图像。
00:02:21完成第一帧后,我希望最后一帧是相机的侧面视角,镜头拆解开来展示内部组件。
00:02:28所以我提示它生成技术剖面图,明确说明如何分层展示内部镜片,以及背景应该如何呈现。
00:02:35第一次尝试并没有成功。
00:02:37它也拆解了内部电路,而我不想展示那部分。
00:02:40如我之前所说,你只需说明需要做的改变。
00:02:42所以我指示它只展示镜头分层,之后它成功生成了图像,没有显示内部电路。
00:02:49现在,WISC也支持使用VIO模型制作动画。
00:02:53但WISC的动画专注于对单张图像进行动画处理,而不是能够连接多个关键帧。
00:02:58所以我使用了另一个叫做Google Flow的工具。
00:03:01Flow使用Gemini规划故事,用Google的图像模型设计稳定的角色,并用VIO创建视频内容。
00:03:07我已经创建了相机动画的起始帧和结束帧,现在想在它们之间创建过渡。
00:03:13所以我使用了帧转视频选项并提供了我的帧。
00:03:16为了确保平滑过渡,你需要在提示词中说明起始帧如何过渡到结束帧,因为这为模型提供了一个逻辑路径。
00:03:24你的提示词应该包括你希望动画如何流动、起始帧应该如何过渡到结束帧以及动画风格,这些细节确保动作是有意为之的。
00:03:33有时这些模型在处理复杂任务时容易出错,所以第一次并没有正确生成我的动画。
00:03:38生成的视频在旋转方向和结束帧上都完全错误,导致过渡显得很生硬。
00:03:44解决方法很简单,
00:03:45就是重新调整提示词并做一些必要的修改来确保动画正确,
00:03:50就像我提示它改变相机旋转的方向以实现更流畅的过渡一样,
00:03:54之后它生成了我想要的版本,
00:03:56我就下载下来用在我的项目中。
00:03:58现在视频生成功能在免费套餐中并非无限制提供,因为视频生成模型成本很高。
00:04:04根据地区不同,每月只提供180个积分。
00:04:08由于使用VIO 3.1生成每个视频需要消耗20个积分,所以每月最多可以生成9个视频。
00:04:14由于Flow生成的视频是MP4格式,
00:04:17无法直接用于Hero区域,
00:04:19因为它们更难通过滚动动画进行映射,
00:04:22因此我使用免费的在线转换器将它们转换为WebP格式。
00:04:26我上传了MP4视频,将转换设置调整为生成最高质量的动态WebP,它转换成了WebP格式,然后我下载下来用在项目中。
00:04:35选择WebP很重要,
00:04:37因为这样更容易映射滚动交互,
00:04:40在网页上这种格式被视为图片,
00:04:43不需要像其他格式那样使用媒体播放器包装器。这些文件更加紧凑,
00:04:49性能更好,
00:04:50非常适合短视频动画内容。
00:04:52我将转换后的WebP文件添加到新初始化的Next.js项目的public目录中,因为这是项目中所有资源文件存放的位置。
00:05:00现在动画准备好了,我想把它添加到落地页的Hero区域中。
00:05:05我通常使用XML格式向Claude提示,
00:05:08因为他们的模型针对理解XML进行了优化,
00:05:11让它们能够更可靠地解析结构化意图,
00:05:14并独立推理每个部分。
00:05:15我给Claude的提示词包括:在上下文标签中说明我想构建什么、
00:05:21动画资源的位置以及滚动动画应该如何工作和我们的目标。我在需求标签中包含了所有要求,
00:05:28在动画行为标签中描述了动画应该如何表现,
00:05:32并在提示词中直接在各自的标签内指定了实现细节、
00:05:36约束条件和所需输出。当我给Claude这个提示词时,
00:05:40它自动按照我的要求实现了动画。尽管我们的Hero区域看起来不错,
00:05:46但其余组件看起来还是像AI通常生成的那种普通网站。这是因为我们期望从原生CSS中获得高质量结果,
00:05:55而不是依赖现有的精美组件库。
00:05:57有多个UI库,
00:05:58每个都有自己的专属风格和设计主题,
00:06:01但你必须选择最适合你项目风格的库。对于我的相机落地页,
00:06:05我追求的是Apple风格的UI,
00:06:07最接近这个理念的库是Hero UI。它构建在Tailwind CSS之上,
00:06:13并依靠Framer Motion让整个网站的组件生动起来。
00:06:17该库支持大多数常用框架,
00:06:19如 Next.js、
00:06:21Vite 和 Laravel。因此将它与我现有的 Next.js 设置一起使用非常简单。有两种安装方式。你可以通过安装命令在整个项目中安装所有组件,
00:06:32或者根据需要安装单个组件,
00:06:34这就是我在使用 Claude 时所做的。我提示 Claude 用 Hero UI 组件替换现有组件,
00:06:42网站得到了显著改进,
00:06:43使网站看起来更加专业。用户通过查看 UI 的吸引力在几秒钟内就能决定是否留在落地页上。动效有助于引导访客的注意力到我们希望他们注意的功能上,
00:06:54从而确保更高的用户留存率。使用原生 JavaScript 从零开始实现动画可能很有挑战性,
00:07:00所以我依赖现有的库来简化这个过程。在这个项目中,
00:07:04我使用了 Motion.dev,
00:07:06这是一个免费的开源库,
00:07:08提供了大量即用型动画。通常,
00:07:10动画需要手动将 DOM 更新与动画时序同步。然而,
00:07:14Motion.dev 通过在内部处理 DOM 更新来抽象这个逻辑。它会在用户滚动时自动更新组件,
00:07:21因此动画播放流畅,
00:07:23无需手动跟踪滚动位置。该库使用 motion 组件而不是标准组件。这些组件在 props 中定义了开始和结束状态,
00:07:31库会自动处理它们之间的过渡逻辑。对于我们的落地页,
00:07:35我提示 Claude 使用该库实现视差和滚动动画。结果,
00:07:39通过引导注意力到页面的关键部分,
00:07:42用户体验得到了改善。描述页面各部分应该如何呈现是一个繁琐的过程。最好是从现有的画廊中获取灵感,
00:07:49那里有人们发布他们的作品。我使用了 21st.dev,
00:07:53这是一个平台,
00:07:54为由多位设计师构建的各种 UI 组件提供灵感。这些组件构建在流行的 UI 库之上,
00:08:00如 Aceternity UI、
00:08:03Prism UI、
00:08:04Coconut UI、
00:08:06Magic UI 等等。在寻找想法时,
00:08:09我发现了这个行动号召部分,
00:08:11它在我的落地页上看起来会很棒。我最喜欢 21st.dev 的一点是,
00:08:16对于我想使用的任何组件,
00:08:18我只需复制一个专门为 AI 编码代理量身定制的提示词。我不需要自己指导 Claude。该提示词结构非常详细,
00:08:26包括项目要求,
00:08:27如 ShadCN 和 TypeScript 支持。它提供了代码和指令,
00:08:32供编码代理直接粘贴到组件目录中。它包含所有必要的依赖代码以及应该添加的路径,
00:08:38并列出了需要安装的 NPM 包。它还包括为你的 AI 代理提供的实现指南,
00:08:43详细说明了将组件直接集成到应用程序中所需的所有步骤,
00:08:47以及代理应该如何根据特定项目的需求对其进行调整。我把这个提示词给了 Claude,
00:08:54它集成了与我复制提示词完全相同的行动号召部分。它还添加了我们已安装的 motion 库中的动效,
00:09:01尽管我没有在任何地方明确提到要添加动效。我还从 21st.dev 获取了页脚,
00:09:07尽管演示页脚包含了 GitHub 和 Twitter 的图标。
00:09:11当我给 Claude 复制的提示词时,
00:09:14它省略了 GitHub 图标,
00:09:16因为它与我们的项目无关。它定制了页脚,
00:09:19只包含与相机产品网站相关的图标,
00:09:21创建了一个完美适合我们落地页的页脚。这就是本期视频的结尾。
00:09:25如果你想支持本频道并帮助我们继续制作这样的视频,可以使用下方的超级感谢按钮。一如既往,感谢观看,我们下期见。