用腾讯 Hy3 手搓顶级动效网站（4 套方案）
背景
最近在抖音上刷到不少「用 codex 做顶级动效前端」的视频，页面效果非常炫，但网上几乎没有对应教程——短视频只展示效果，不教做法。研究踩坑之后，我摸索出 4 套可以做顶级动效前端的方案。普通人 2 小时内基本能免费搞定；而以前这种活，至少需要十年老前端干 3 天，经纪公司报价 5000 美元以上。
提醒：网上部分「codex 做动效」的短视频是假的——只是去 GSAP 拿了示例网站录屏后吹成自己做的，纯引流。短视频内容要仔细甄别。
工具与模型
- Agent 工具：workbuddy。安装即用、性价比高；相比 codex 门槛更低、更便宜，已逐渐成为我心目中的 top1 Agent。
- 模型：腾讯混元 3（Hy3）。我参与过内测，前端能力与审美都不错，Agent 干活也稳。
关于 Hy3
- MoE 架构，总参数 295B（大模型里算小尺寸），但能力不输 GLM-5.1（744B）等，部分能力达到 DeepSeek V4 Pro（1600B）水平。
- 开源：https://github.com/Tencent-Hunyuan/Hy3
- 专门针对 Coding 和 Agent 场景做了大幅优化，尤其是前端理解、组件生成、自动 Debug。
- 上下文长度目前是 256k（希望下个版本能到 1M）。
- 价格很良心，比 DeepSeek V4 Pro 还便宜；发布后两周内免费。
- 实测结论：workbuddy + Hy3 是目前性价比最高的方案。
方案一：用开源动效库（ReactBits）
适合做如 lusion.co 那种精致动效 UI。
参考来源
- 对标站点：lusion.co
- 动效素材库：https://www.reactbits.dev/（免费动画/动效复用网站）
步骤
- 不要从零描述理想网站，一定要找对标，直接告诉 workbuddy 你想要什么。
- 明确架构：Vite + Vanilla JS + Three.js。
- 给每个页面写详细描述——不只是风格，而是各页面具体内容、布局、效果怎么分布。描述越准确，Hy3 对页面的理解越清楚，生成出的骨架越清晰。
- 打开 reactbits.dev，点击 Strands，挑喜欢的动效，点 Copy Prompt，交给 workbuddy 把页面某部分仿照该效果做出对应动效。
- workbuddy 会根据你提供的内容 + 要修改的地方替换排版。中间遇到小 bug，Hy3 通常能一次修复。
- 把所有动态效果载入页面，即生成最终网站一。想视觉更好，还可以融入视频。
方案二：视频素材 + 模板
素材来源
- 视频/图片素材：https://pixabay.com（免费）
- 模板站：motionsites.ai（部分免费，网上常见的炫酷排版特效基本都能找到）
步骤
- 在 pixabay 找好想要的视频/图片素材，在 motionsites 找好模板（将素材和 prompt 放在同一文件夹下）。
- 在 motionsites 中 Copy Full Prompt，连同素材一起丢给 workbuddy。
- workbuddy + Hy3 能很好把握整体走向，按需求稳定输出，不会瞎编。
- 可用 workbuddy 的设计专家 skill推进项目；改页面切换效果时甚至可以激进地交给它改，最终效果往往不错。
方案三：视频当背景，拆帧做页面
素材来源同方案二，但这次背景用一整个完整视频。
步骤
- 把视频模板丢给 workbuddy，让它按不同秒数拆解视频，在每个时间段做不同的网页（滚动叙事）。
- 动效直接让 workbuddy 生成，加上拆解的背景视频后会有高级感。
- 另一种更简单的前端的玩法：直接丢一整个视频给 workbuddy 让它帮忙处理。
方案四：3D 模型 + 动效（进阶）
稍复杂，需要用到相关 Skill 和 MCP 工具。
工具
- 3D 生成 Skill：
hy-3d-gen（封装了混元 3D API）- https://github.com/kangarooking/kangarooking-skills/tree/main/hy-3d-gen
- 添加到 workbuddy 的 skill 即可。
- Blender MCP：负责 3D 资产加工。
- 打开 Blender，导入 hy-3d-gen 生成的龙模型 GLB；调整姿态、朝向、比例、材质、灯光；做相机动画（绕龙飞、推进、拉远、俯冲）；做物体动画（龙身摆动、翅膀扇动、宝石折射、粒子场）。
- shadcn MCP：主要用于 UI 组件动效。
- 生成按钮、卡片、导航、弹窗、表单动效；统一 Tailwind / React 组件风格；让文字信息区、个人介绍区、卡片区更规范。
- 注：shadcn MCP 本质就是 reactbits.dev 的 MCP 版本。
踩坑提示
生成 3D 模型之前，最好先生成图片，再图生 3D。否则 AI 直接文生 3D 容易翻车（我第一次文生「龙」直接生成了一条蠕虫 🤦♂️）。
我最终生成了一个「水晶龙」3D 模型，提示词如下：
A crystalline dragon sculpture in elegant hovering pose,
body composed of translucent sapphire and amethyst crystal segments,
internal light refraction and caustic patterns visible through the gems,
faceted diamond-like scales with high gloss and low roughness,
delicate ice-blue wing membranes with prismatic light dispersion,
clean geometric stylization,
PBR glass and gemstone material setup,
soft studio lighting on pure white background,
premium collectible figurine style, 4K texture（图生 3D 需要环境里安装了绘图 skill，丢给 workbuddy 即可搞定。）
完整主页提示词示例
帮我做一个顶级动效个人主页，名字叫「神族九帝」。
我想要类似 Awwwards / Lusion 那种高级 3D 交互官网，不是普通 landing page。主视觉是一条水晶质感的中国龙，用 Three.js 加载 GLB 模型，全屏展示。随着页面往下滑，龙的姿态、镜头、背景颜色、光效和内容都要变化，形成滚动叙事的感觉。
请使用当前环境里可用的工具：
- 用 hy-3d-gen 这个 3D skill 生成或处理中国龙 GLB 模型。
- 如果需要调整模型姿态、材质、相机动画或导出 GLB，可以调用 blender MCP。
- 如果需要做按钮、卡片、导航、信息区等 UI 组件，可以参考 shadcn MCP，但不要做成普通后台组件风格。
页面内容包括：首页、关于我、个人理念、头衔、擅长领域、公众号成果、联系我。我的头像、图片素材、自我介绍信息、现有项目资料都在当前目录下，请先查看当前目录里的文件和素材，再决定怎么设计。
整体风格要东方、神秘、科技、高级，有粒子、闪电、光晕、Bloom、鼠标拖尾等动效。首屏要有冲击力，滚动过程要明显感觉到 3D 场景在变化。
不要做普通卡片堆叠网页，也不要用静态图片假装 3D。请做成一个真正可运行的前端页面，并在完成后启动本地预览。部署
做好的网页可以用 EdgeOne Makers 快速部署到公网，方便分享给朋友。
总结
好看的炫酷前端 UI，本质基本都是：
视频 + 动效，或 3D 模型 + 动效 + 交互
把视频当背景（可设关键帧，在固定几帧显示主要内容），把动效当修饰，把所有需求交给 workbuddy，就能做出高端前端效果。Hy3 的前端代码能力、审美和 Agent 能力都挺不错——整个任务要跑很久、涉及多个工具调用，都能完成得不错，改起动效来也是「指哪打哪」。
一个值得思考的趋势：当 workbuddy 这类 Agent 把技术门槛打到 0 之后，真正的门槛变成了「你有没有品味，能不能判断什么才是好的」。正如 Kevin Kelly 在《必然》中所说：技术进步的方向，是把原本只有专家才具备的执行力持续下放给普通人——但「专家的门槛」不会消失，只会往更上游迁移。代码执行那层正在被 workbuddy + Hy3 接管，下一层门槛，开始往眼光和品味走。