离谱！腾讯首款设计Agent-Miora把网站动效的天捅破了！【附教程】

大家好，我是刚刚出差WAIC回来，累瘫了的袋鼠帝

本来昨天在床上躺的好不好的，突然刷到消息：

腾讯发布了他们首款设计Agent：Miora（腾讯设计妙境）

我直接强行开机，弹到座位上，开始咔咔研究。

Miora这玩意儿，我咋一看也不知道怎么读，官方说可以读“妙哇” emmm...确实很好记，妙蛙种子

这次腾讯推出的设计Agent，是workbuddy团队研发的。而且还是基于与 WorkBuddy 同源的智能体架构。有了这层背书，应该还是很好用的。

我突然想到最近我的开源项目：仓颉skill（cangjie-skill）越来越火了，目前已经4.3 K Star，还在持续上涨中。。（欢迎Star）

PS：最近会上线workbuddy，可以期待一波～

仓颉skill也一直缺个官网，正好可以试试Miora，看能不能帮到我。

于是，我就去深度使用了一下。发现，卧槽，真滴好用。

先看下Miora给我设计的仓颉skill官网动效（随着滚动条上下滑动，页面的场景也不断变换，而且极其丝滑），这超高质量的网站动效，就是我想要的，！！

并且，你可以更换成任何你想要的画面效果。这能拯救任何网站的审美！还有一个作用：可以装13

所以我迫不及待写了这篇文章，想跟大家分享。因为在AI领域，真的很少让我能有ah moment了。

所以，这篇其实是一篇干货教程。建议收藏～

并且，我还把这套生成高质量网站动效的工作流沉淀成了skill，目前已免费开源到我的skills合集（kangarooking-skills）：

https://github.com/kangarooking/kangarooking-skills/tree/main/scroll-promo-site-builder

在腾讯Miora里面上传这个skill，就能用起来了

要做到这种视觉程度的前端网页，光靠一两句提示词是不行的。整个制作过程，还是有一些门道的。

接下来我会把这套工作流，给大家剖析一下。

Miora是啥，能干嘛？

不过，在正式分享工作流之前，我们还是先简单介绍一下Miora：

其实我一开始以为Miora跟workbuddy一样，是有一个桌面应用需要下载的。

结果我找半天没找到，发现Miora目前还只能在网页端使用。

miora.design

一般这种新产品，都是有羊毛薅的，更何况是腾讯的新品。

而且我发现这次羊毛还挺多～

注册就送1000积分，但是你看，20$/月的套餐，也才送2000积分啊。这相当于是注册直接送10$。

然后模型这块，可以看到Miora已经接入了目前最顶的生图（GPT-image2）、生视频模型（Seedance2.0），同时还有腾讯自家强大的hy-3D 模型。

当然也有很多其他模型选择。算是非常开放了。

Miora能做的事情也不少，包含品牌设计、影视创意、电商广告、互动游戏、网页

超高质量网站动效工作流分享

然后我的想法是：

为我的仓颉skill做一个可以滚动的官网，这个官网总体风格是皮克斯动画风格，根据鼠标的上下滚动以动画的形式为大家展现仓颉skill是怎么工作的，以很简单的动画形式让大家知道仓颉skill的工作原理。

这个官网包含网页设计，视频生成和网页代码设计；

大家看到的鼠标每向下滑或者向上滑，出现不同的会动的画面，都是一段段视频拼接起来的。

这次用到了腾讯Miora和一个开源skill（名字叫：scroll-world）。

我自己参与的不算多，几乎就是在关键点做一下决策。

生图调用了image2.0 ，生视频调用了seedance2.0，最后再生成网页代码。

这个开源skill在这：

https://github.com/oso95/scroll-world

首先在输入框中输入我的需求：

我这里的描述也很简单，我给Miora提供了参考网站和我的产品信息，还有开源skill的项目地址，我要求它先输出需求文档和开发文档供我确认。

接着我发现我忘记给他提供网页风格导致它生成的需求文档和我的预期不符。

立马给他提供了我想要的风格-皮克斯动画风格，还要求在网页上融入logo元素（就是我的袋鼠头像）

也可以自定义选择模型，基本上生图，生视频的主流模型都包含在内了。

接着Miora就给了我一份非常详细的需求文档和开发文档。

做开发的朋友应该对这俩文档并不陌生，在开发这类项目的时候我们一般也是先生成需求文档，各个部门开会把需求对齐，这个需求文档就是让AI和我自己的需求对齐，避免AI后续开发时出现大方向上的错误导致超出预期的返工。

所以需求文档和开发文档很重要，一定要和AI把要求都对齐再让AI动手开发。

这是Miora给我的需求文档和开发文档，我粘贴在vs code里面了，方便展示。

ok，需求文档确定好之后，它先生成首页的三个版本供我挑选，这里真的非常聪明了，没有盲目的生成一堆图片，而是先让我确认整个网站的风格和元素设计。

我一眼就看中了第一张图里的蒸汽机元素和第三张图里的火车元素。

然后就让他融合这两个元素生成最终的首图。

接下来就是按照开发文档的步骤生成场景图，每生成一张场景图都会向我确认，最后生成的场景图会在右边画布中。这个交互可以说非常棒了。

同时，生成的图里面有些小瑕疵不满意的话可以直接在画布中进行修改，这个功能也很方便。

全部场景图生成好之后，Miora会根据场景图生成五个单独的场景视频。

这是生成的其中两个视频的录屏。

然后通过场景视频的首尾帧相连生成四个过渡视频。

最后将这些视频进行拼接，放回到页面里就完成了。

整个过程沉淀为skill了，上传到Miora就能用～

可能有人会问：scroll-world 本来就是一个 Skill，为什么我还要再做一个？

因为我开源的并不是把它简单改个名字。scroll-world 提供了非常关键的滚动视频、首尾帧连接和网页播放思路；而我在这次仓颉 Skill 官网的实际制作中，又补上了产品定位、需求文档、视觉风格确认、角色一致性、完整分镜、逐场景审核、视频连续性检查，以及 React 网站和本地预览交付等环节。

简单来说：如果你只需要一个通用的滚动穿梭网站生成方案，可以直接使用 scroll-world；如果你希望从一份产品资料开始，按照“需求确认—视觉设计—生图—生视频—转场检查—网页交付”的步骤完整跑下来，可以使用我整理的 scroll-promo-site-builder。

这套 Skill 借鉴了 scroll-world 的关键实现思路，并按照 MIT License 保留了完整的来源和版权说明。

「最后」

回头看整个过程，我自己干的活其实少得可怜：提需求、确认文档、挑首图、给场景图挑挑毛病。

剩下的生图、生视频、首尾帧过渡、拼接、写代码，几乎全是Miora自己吭哧吭哧跑完的。

放在以前，这种滚动动效官网，设计师和前端得来回拉扯很久才能做出来。

现在人的位置因为Agent越来越高，慢慢挪到了"关键点做决策"上：审美、判断、知道自己要什么，反而变成了最值钱的部分。

趁羊毛还在，用Miora免费给自己的项目也优化一套动效官网吧！

跑通一次，你对设计Agent的理解一定会更深，做任何事情永远都需要实践，这跟你看十篇教程的效果完全不一样。

出差回来累瘫，我研究到了后半夜（抬头一看）。但这个ah moment，值了。

如果你也跑出了什么好玩的效果，欢迎来评论区甩出来康康～

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

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

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

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

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