Moe Skill 技能

技能简介

moe 是一款面向大模型的「文字到动画」在线 MCP 服务，让 AI 用自然语言直接驱动网页中的交互式动画。它并非视频生成工具，而是把动画写进产品页面里——让 UI 真正"动"起来，并响应用户的点击、滚动和数据变化。moe 把动画视为可在浏览器里实时跑的小程序，前端嵌入 `` 即可调用。

核心能力

• 一句话生成动画：用自然语言描述动作，AI 自动编写、校验并渲染动效，无需手写 CSS/JS 动画代码。
• 对话式迭代：在和 AI 的多轮对话中不断调整动画细节，AI 会实时出图确认，直到满意为止。
• 响应式交互：动画可绑定页面数据、用户点击或滚动事件，会随交互变化而非单纯线性播放。
• 跨端自适应：同一份动画自动适配手机窄屏到桌面宽屏，并支持中英等多语言文案布局。
• 多模型兼容：同时支持 Claude Code、Cursor、Codex、Grok 等带 MCP 能力的 AI 客户端。

安装配置

1. Claude Code：执行 claude mcp add --transport http moe https://mcp.animate.moe/mcp --header "Authorization: Bearer YOUR_KEY"。
2. Cursor：在 .cursor/mcp.json 中添加 moe 服务器的 url 和 Authorization 头。
3. Codex：编辑 ~/.codex/config.toml，加入 [mcp_servers.moe] 段，填入 url 与 http_headers。
4. 获取 Key：访问 https://mcp.animate.moe/signup 注册账号、生成专属 API Key。
5. 网页嵌入：在产品页面引入 ，再用 标签挂载场景。

使用步骤

1. 在支持 MCP 的 AI 客户端中描述想要的动效，例如「让吉祥物呼吸、眨眼、举手」。
2. AI 用 moe 脚本语言编写动效、校验、生成预览图，可在对话中反复修改。
3. 满意后对 AI 说「publish」，即可拿到两行可直接粘贴到网页的代码。
4. 将代码嵌入目标页面，动画即可与产品数据、用户点击、滚动事件联动。
5. 后续若需修改，再次向 AI 下达指令即可，网页会跟随更新，无需重新发布。

适用场景

• App 欢迎页：让吉祥物或标题文字跟随用户状态自然呼吸、眨眼。
• 数据可视化：让图表元素跟随数值变化做弹性动画，而不是机械地切换数字。
• 产品介绍页：让功能卡片在用户悬停时展开交互式细节演示。
• 营销落地页：让 Hero 区元素响应滚动做视差动画，提高停留时长。
• 互动小游戏：用 AI 即时生成可玩的小型网页互动体验。

适用人群

• 独立开发者与初创团队，想快速为产品加入高品质动效但没时间写代码。
• 设计师转型开发者，希望用对话方式产出可上线运行的动画组件。
• 大厂前端工程师，需要快速 demo 动效 idea 与 PM/设计协作。
• 内容创作者，想为博客或新媒体文章嵌入可交互的动态示意图。

工作原理

moe 把动画视作可编程资源：AI 用 moe 自定义的脚本语言（.moec）描述动作，moe 引擎在浏览器端实时解析、校验并执行。它不输出 mp4 视频，而是把可重放的活体动画嵌入页面，使其能响应真实事件而非线性播放。前端用 `` 标签即可调用，后端通过 MCP 协议让 AI 直接编写、调试、发布场景文件。

官方链接

• 产品主页：https://animate.moe
• 注册与 Key 管理：https://mcp.animate.moe/signup