用腾讯刚发布的Hy3手搓顶级动效网站！这4套方案可以封神了【建议收藏】

大家好，我是袋鼠帝

最近在某音上经常刷到一些codex做顶级动效前端的视频。

当时直接给我惊到了！这前端页面也太炫了，顶级动效，谁看谁不迷糊啊。

然后，我翻了一下，目前网上基本没有这种教程。抖音上是短视频，他们只是展示了效果。。

我花了大量时间去研究，踩了不少坑之后，终于构建出了这种顶级动效网站。

先看看我做的这四个前端页面，效果还是很棒的：

网站一：

网站二：

网站三：

网站四：

像这种效果的，搁以前，可能要一个十年老前端干至少3天。经纪公司甚至可能要价5000美元以上。

而现在普通人，可能在2小时内就能免费搞定。

这里必须得说一下：后来我才知道，他们那个抖音视频是假的。

md，就是去人家gsap拿了个示例网站录屏了一下而已，然后吹说是自己用codex做的，纯引流...

所以，短视频这块，大家还是要仔细甄别。

但我也确实摸索出4套可以做出这种顶级动效前端的方案，分享给大家。总有一种适合你（也可以混合使用）。三连在看，养成习惯～

而且你越愿意花时间打磨，效果会越好。

好了，话不多说，接下来开始喂饭！

构建过程（工具）

在开始构建之前，先介绍一下，我们这次用到的工具和模型。

工具我选择了workbuddy，原因很简单，安装即用，贼拉方便，而且性价比超高。

codex的门槛较高，而且较贵。

关键，workbuddy已经逐渐成为大众心目中的top1 Agent。用的人贼多。

并且腾讯发布了最新的混元3模型（Hy3），我之前参与了内测，感觉Hy3前端能力挺强的，审美也很不错。Agent能力也很强（干活不错）。

关键是混元Hy3最近两周还是免费的！

我测试下来，用workbuddy + Hy3 不仅价格便宜，而且效果还好。是目前性价比最高的方案。

这里稍微说一下Hy3：

腾讯这次发布Hy3的是 MoE 架构，总参数295B，在大模型里面算是小尺寸了，但是感觉能力完全不输GLM-5.1（744B）等大尺寸模型，部分能力达到DeepSeek V4 Pro（1600B）。

并且还是开源的～

https://github.com/Tencent-Hunyuan/Hy3

专门在Coding和Agent场景做大幅优化，特别是前端理解、组件生成和自动Debug。但有点可惜的是上下文长度是256k，希望下个版本能到1M。

价格这块Hy3很良心，贼便宜（比DeepSeek V4 Pro还便宜）：

方案一：用开源动效库

我们先来看一下网站一是怎么做的

不要从零开始描述你的理想网站。一定要找对标，直接告诉workbuddy你想要什么。

我的网站一参考了：lusion.co

素材参考来源：reactbits.dev

（这是一个免费的动画，动效复用网站）

先来看看提示词

如何用workbuddy做出这样精美的ui呢？

首先你要明确架构：Vite + Vanilla JS + Three.js

其次我们要给每个页面都有一个详细的描述，这个描述不仅仅只是描述页面的风格，而是描述出各个页面具体有哪些内容，内容怎么布局，效果怎么分布

当你描述准确之后，混元Hy3就会得到一个更清楚的对页面的理解

这样一份清晰的提示词给出来，就可以得到一个清晰的简单的骨架。

但是想要丰富动效我们还需要用到这个网站（是个开源项目）：

https://www.reactbits.dev/

进入站点，点击strands，就会出现很多不同的效果

然后我们找到喜欢的效果，点击copy Prompt，就可以交给workbuddy，把网页中某个部分的排版，仿照这个效果做出对应的动效。

交给workbuddy，它就会根据你提供的内容以及你要修改的地方进行替换排版：

就算中间遇到一些小bug，Hy3也能一次修复，不得不说改bug的能力是一流的。

稍加修饰以后，我们就可以做出这样的效果：

然后将所有的动态效果载入我们的页面就生成了最终的网站一

是不是很简单

当然，要想视觉效果更好，我们还可以融入视频。

方案二：视频素材 + 模板

素材参考来源：

pixabay.com

（这是一个免费的视频图片素材网站）

motionsites.ai（这是模板网站，有些免费内容，大家在网上看见的炫酷排版特效基本都能在这里找到）

在这两个网站上找好我们想要的模板素材之后，在motionsites中copy full prompt给workbuddy（将素材和prompt放在同一个文件夹下）

workbuddy + 混元Hy3就能很好的把握我们的整体走向，在这方面做得很好，它不会瞎编，能按照要求稳定输出。

在这里我还要说一个workbuddy很好用的功能，能指定设计专家为我们做设计，找到好用的skill帮助项目推进。

我修改的时候还狠狠的放纵了一波，将页面的切换效果完全交给它让它激进的修改，没想到最终效果还挺好

然而就这样一次做出来的效果就已经很棒了

前端融入视频这块还有另外一个更简单的玩法。

直接丢一整个视频给workbuddy，让它帮忙处理。

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

这次用的，也是和网站2一样的素材来源，但是这次的背景视频是一个完整的视频。

然后把上面这个视频模板丢给workbuddy，叫workbuddy为我拆解视频在不同的秒数中做不同的网页。

这次的动效，是直接让workbuddy做出来的，感觉还挺不错，然后加上我们拆解的背景视频就会有一种高级感。

方案四：3D模型 + 动效

这个方案会稍微复杂一点：

需要用到相关Skill和MCP工具

用到了混元3D的API，我把它封装成了skill

https://github.com/kangarooking/kangarooking-skills/tree/main/hy-3d-gen

可以添加到workbuddy的skill

MCP工具用到了Blender和shadcn

PS：shadcn mcp就是上面提到的开源网站：www.reactbits.dev 的MCP

blender MCP：负责 3D 资产加工。

比如它可以：

打开 Blender，导入混元 3D / hy-3d-gen 生成的龙模型 GLB

调整龙的姿态、朝向、比例、材质、灯光

做相机动画，比如绕龙飞、推进、拉远、俯冲

做物体动画，比如龙身摆动、翅膀扇动、宝石折射感、粒子场...

shadcn MCP：主要用于 UI 组件的动效。比如：

生成漂亮的按钮、卡片、导航、弹窗、表单动效

统一 Tailwind / React 组件风格

让页面里的文字信息区、个人介绍区、卡片区更规范

给大家分享一个坑：生成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

丢给workbuddy搞定（前提是安装了绘图skill）

然后丢给workbuddy + Hy3开发：

帮我做一个顶级动效个人主页，名字叫「袋鼠帝 KangarooKing」。

我想要类似 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快速把网页部署到公网，方便快速分享给你的朋友们

以上，用workbuddy做顶级动效前端算是我挖掘的新能力（目前还需要借助一些外部工具，希望后续能内置）。

但workbuddy更丝滑的还是办公能力，它内置了超级多的专家团，skill，MCP。能覆盖几乎所有的办公场景。

我的，欢迎大家试用。

比如我让它帮我整理一下邮箱里面所有收到的发票，并按月份整理

完成的很好。干活儿也省心～

「最后」

那些好看的炫酷的前端ui基本都是视频+动效，或者3D模型+动效+交互，将视频当成背景（可将视频设置关键帧，让它在固定某几个帧下显示主要内容），将动效当成修饰的效果之后将所有需求交给workbuddy，这样我们就可以做出高端的前端效果。

并且，我感觉Hy3的前端代码能力和审美都还挺不错的，Agent能力也很强。因为整个任务需要跑很久，同时里面涉及多个工具调用，都完成的不错。改动效的时候也是指哪打哪。

我还有个感受是：做前端这件事，以前的门槛可能在「你会不会写代码、搞不搞得定 Three.js等等...」

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

Kevin Kelly 在《必然》里有个说法，大意是：技术进步的方向，就是把原来只有专家才能做到的执行力，持续下放给普通人——但「专家的门槛」不会消失，只会往更上游迁移。

放在前端这件事上，代码执行那层正在被 Workbuddy + Hy3 接管；

下一层门槛，开始往眼光和品味那个方向走了。

现在，像我这种不懂前端的人都能很快用workbuddy构建一个顶级动效的前端网页，前端的 兄弟还有活路吗？接下来吃香的可能是设计师吧...

下次大家如果有做前端的需求，你可以直接用这几套方案，搭配workbuddy快速做出一个顶级动效的前端网站，惊艳你的老板和同事。

我是袋鼠帝，一个致力于帮你把AI变成生产力的博主。我们下期见～

能看到这里的都是凤毛麟角的存在！

如果觉得不错，随手点个赞、在看、转发三连吧~

如果想第一时间收到推送，也可以给我个星标⭐

谢谢你耐心看完我的文章～