00:00:00每周都有新工具发布，你怎么知道哪些设计工具才真正值得一用？
00:00:04问题在于，每天都有新工具面世，都承诺高品质，但大多数不过是噱头。
00:00:09在测试工具的过程中，我们发现有几个确实名副其实，而且非常契合我们的工作流。
00:00:15我们的一位团队成员当时正在为一辆汽车制作产品落地页，首屏部分包含一个 3D 动画。
00:00:21该网站的源代码以及使用的所有功能都可以在 AI Labs Pro 中找到。
00:00:25对于还不了解的人，这是我们最近推出的社区，你可以在那里获得即插即用的模板、提示词、所有命令和技能，直接应用于本视频及以往视频的项目中。
00:00:36如果你觉得我们的内容有价值并想支持本频道，这是最好的方式。链接就在描述栏中。
00:00:42构建这样一个网站的第一步是拥有高质量的素材，为此我使用了 Tripo3D，这是一款 AI 驱动的 3D 物体生成器。
00:00:50登录后，我获得了约 300 个积分，足够进行大约 10 次生成。
00:00:54现在我需要一张图片来转换成 3D 模型。
00:00:57我有一张用于首屏的汽车图片，但背景干扰了模型生成，因为背景和前景的识别对这类工具来说很困难，我不想在糟糕的输出上浪费积分。
00:01:08所以我用 Canva 的背景移除工具去掉了背景，你也可以使用 Remove BG，它是一个免费的替代方案。
00:01:16背景移除后，我进入 Tripo3D 并将该图片作为参考提供给它。
00:01:21生成模型大约花了 1 分钟，它在很大程度上还原了图片。
00:01:25我可以从各个角度检查所有视图，模型在每一侧都始终与实物非常相似。
00:01:313D 模型准备就绪后，我将其导出。
00:01:34在 Tripo3D 的免费计划中，你只有 15 次导出机会，所以我确保对生成结果满意，并在两次尝试中下载了效果最好的那个。
00:01:43我将分辨率设置为 4K 并导出了它。
00:01:45GLB 文件下载完成后，我将其添加到新初始化的 Next.js 应用的 public 目录中，以便轻松访问。
00:01:52选择导出为 GLB 而非其他格式，是因为 GLB 将纹理和材质包含在单个文件中，而不是分开存储，且它是原生的 Web 格式，能轻松与 Web 库集成。
00:02:04GLB 文件就绪后，是时候在 Web 应用中实现它了。
00:02:08为了构建落地页，我选择了最近发布且仅适用于 macOS 的 Codex 应用。
00:02:14你可能会想，既然我们已经有了 Claude Code，为什么还要在视频中使用 Codex？
00:02:19随着新产品的发布，他们提供了更高的限制额度和慷慨的免费配额，所以现在正是你们充分利用它的最佳时机。
00:02:29但你可以在你选择的任何智能体（Agent）中使用同样的流程。
00:02:32我下载了 Codex 并在其中打开了项目文件夹。
00:02:34界面在很大程度上类似于 AntiGravity 的智能体管理器，但更侧重于智能体而非代码。
00:02:40“技能”功能是我们最喜欢的部分。
00:02:43在其他智能体中，当你需要创建自己的技能时，必须获取开源的技能创建器并从中构建。
00:02:49但 Codex 已经内置了技能创建器，并提供了大量安装即用的常用技能，这是其他智能体所不具备的。
00:02:56为了简化 3D 动画过程，我使用了技能创建器，并详细描述了它应该如何构建动画以及应该使用哪些库。
00:03:06它问了几个问题，回答完毕后，它运行了技能创建器中的脚本，构建了技能并使其准备就绪。
00:03:13现在有一点不同之处。
00:03:14通常，智能体将技能安装在他们的 .agent 或 .claud 文件夹中，但 Codex 将其安装在根文件夹，所以我手动将其移动到了 .agent 文件夹。
00:03:24但它确实遵循了 Claude 布局的相同开源智能体框架模式，包含脚本、引用和所有用于增强技能能力的资产。
00:03:33它还包含一个 yaml 文件，其中的通用提示词作为参考，让智能体知道哪些用户提示词会触发该技能。
00:03:40我给 Codex 下达了任务，要求它使用刚刚创建的技能来设置动画，并在提示词中包含了所有必需的细节。
00:03:47它开始了执行并运行了安装命令。
00:03:49花了相当长的时间后，它完成了任务，但它说由于环境中的命令超时，无法安装依赖项，所以我让它将依赖项直接写入 package.json。
00:04:01当我手动运行安装命令时，由于项目中不同版本的库导致依赖冲突，我遇到了错误。
00:04:08我不得不使用 Codex 多次调试，直到首屏的动画终于达到了我想要的效果。
00:04:14由于 Codex 完成单个功能需要很长时间，我将任务拆分成了四个子任务。
00:04:21每个任务包含落地页的一个功能，并与其他任务隔离，明确了目标、要求和限制条件。
00:04:28我使用了 Codex 的多智能体功能，让每个智能体负责其中一项任务。
00:04:32由于它们都在同一个落地页上工作，我让它们在不同的工作树（Work Trees）中操作，而不是都在主分支上更改，因为多个智能体同时处理同一部分会导致代码冲突。
00:04:43几乎所有的智能体都在差不多的时间内完成了任务。
00:04:46我合并了输出，所有功能都实现在了一起且没有冲突，而且考虑到 Codex 单独运行的速度，这种方式明显更快。
00:04:55既然网站已经准备好并拥有了所需的组件，但除了首屏之外的其他部分都没有动画，看起来很呆板，所以我转向了 GSAP。
00:05:03GSAP 是许多专业人士使用的 JavaScript 动画库，它能提供稳定的性能。
00:05:09由于之前出现了依赖冲突和超时错误，我先去终端使用 npm install 命令手动安装了 GSAP。
00:05:18我给 Codex 发送了一个非常详细的提示词，包含添加动画的指令，并特别告诉它不要改动首屏，因为那里已经很完美了。
00:05:27我添加了关于如何以及在哪里添加动画的具体指令。执行这项任务花了很长时间。
00:05:33出现了一些小错误，我通过将错误信息反馈给 Codex 来进行迭代处理。
00:05:37在那之后，动画被成功实现，首屏也保持原样。
00:05:42但其他所有部分都添加了滚动触发动画，这让整个网站的感觉有了显著提升。
00:05:48尽管网站现在有了动画，但与首屏相比，这些组件看起来依然有些扁平。
00:05:54于是我去了 Aceternity UI 并从中选择了组件，因为 Aceternity 的组件自带许多开箱即用的微交互和动画。
00:06:04我让 Codex 将现有组件替换为 Aceternity 的，同时保持原有的动画不变。
00:06:10实现之后，我注意到它添加了一些与应用主题不符的渐变色。
00:06:14于是我给它发了一张截图，指出这些渐变色与现有主题不搭，随后它将它们改成了匹配的颜色。
00:06:21但当我查看动画时，它实现的组件是静态的，没有 Aceternity 组件通常具备的微交互。
00:06:30所以我告诉 Codex，有些 Aceternity 组件内置了诸如悬停倾斜等微交互，并要求它使用那些组件而不是普通组件。
00:06:38之后，组件就有了内置的悬停倾斜和交互效果，整个网站感觉互动性明显增强。
00:06:44为了进一步提升视觉效果，我使用了一个名为 post-processing 的公共仓库，它可以通过 NPM 包获取。
00:06:51它是一个后处理动画层，在使用 React Three Fiber 时应用于后期效果。
00:06:56通过它，我们可以使用伽马校正（Gamma Correction）等图像处理功能以及其他优化手段，以获得高性能的结果。
00:07:01我给 Codex 发送了提示词，让它使用这个库创建微妙的光效，并引导我完成整个过程。
00:07:07它起初没做对，输出结果没有明显变化。
00:07:11我不得不通过再次提示进行多次调试，直到它终于做对了效果，并为 3D 模型添加了微妙的光晕，配合首屏的暖色调灯光，让整个部分看起来更加精致。
00:07:23本期视频到这里就结束了。
00:07:25如果你想支持本频道并帮助我们继续制作这样的视频，可以通过下方的 Super Thanks 按钮进行捐赠。
00:07:31一如既往，感谢观看，我们下期再见。