用 AI 手搓顶级动效网站：4 套方案全攻略

前言

最近某音上经常刷到一些用 AI 做顶级动效前端的视频，效果非常惊艳。但很多是假的——只是拿了 GSAP 的示例网站录屏，吹说是自己用 AI 做的。

实际上，用 WorkBuddy + 腾讯刚发布的混元 Hy3 模型，确实可以做出顶级动效网站，而且有 4 套成熟方案。本文整理了这些方案，从简单到复杂，总有一款适合你。

工具选择

• WorkBuddy：Agent 平台，安装即用，性价比高
• 腾讯混元 Hy3：MoE 架构，295B 参数，开源，前端能力突出
• 最近 Hy3 免费使用

Hy3 在 Coding 和 Agent 场景做了大幅优化，前端理解、组件生成和自动 Debug 能力很强。

方案一：开源动效库

适合有明确视觉参考的场景。不要从零描述你的理想网站，找对标直接告诉 AI 你要什么。

流程：

1. 找对标网站（如 lusion.co）
2. 在 reactbits.dev 找动效素材
3. 明确架构：Vite + Vanilla JS + Three.js
4. 给 AI 详细页面描述（布局、内容、效果分布）
5. 从 reactbits 复制动效 prompt 让 AI 集成

遇到小 bug，Hy3 也能一次修复。

方案二：视频素材 + 模板

适合需要视频背景的场景。

素材来源：

• pixabay.com — 免费视频/图片素材
• motionsites.ai — 模板网站

流程：

1. 在素材网站找到喜欢的模板
2. 从 motionsites 复制 full prompt
3. 将素材和 prompt 放在同一文件夹
4. 交给 WorkBuddy + Hy3 处理

WorkBuddy 还能指定设计专家 skill 帮助推进项目。

方案三：视频当背景，拆帧做页面

适合用一个完整视频驱动页面设计。

流程：

1. 准备一个完整的背景视频
2. 丢给 WorkBuddy，让它拆解视频在不同秒数做不同网页
3. 动效让 AI 直接生成
4. 配合拆解的视频帧，产生高级感

方案四：3D 模型 + 动效

最复杂但效果最震撼的方案。需要借助外部工具。

所需工具：

• Hy3 3D API — 封装为 skill 使用
• Blender MCP — 3D 资产加工（调整姿态、材质、灯光、相机动画）
• shadcn MCP — UI 组件动效

关键经验：

• 先图生 3D 模型，不要直接文生 3D（效果不可控）
• 生成 3D 模型前先让 AI 生成参考图

示例 prompt：

帮我做一个顶级动效个人主页，主视觉是一条水晶质感的中国龙，
用 Three.js 加载 GLB 模型，全屏展示。
随着页面往下滑，龙的姿态、镜头、背景颜色、光效和内容都要变化，
形成滚动叙事的感觉。

总结

当 AI Agent 把技术门槛打到 0 之后，真正的门槛变成了「你有没有品味，能不能判断什么才是好的」。

内容整理自公众号「袋鼠帝AI客栈」公开发布的文章。