Rive CLI接入编程智能体，用提示词做交互动画

能对光标或点击作出反应的交互式图形，例如Spotify的年度回顾Wrapped和FigJam里的加载图标，都是用Rive制作的。过去，做这类图形要在Rive桌面编辑器里花上好几个小时：搭建画板、绑定骨骼、连接状态切换，还要手动为每个交互编写脚本。如今Rive推出了命令行界面（CLI），可以接入Claude Code、Codex等编程智能体，同样的工作可以从一段文字提示词开始。下面通过五个案例，从简单的物理效果到3D台灯计时器，看看智能体擅长什么，又有哪些地方仍需要人来把关。

Rive与Lottie、MP4有何不同

Rive图形由应用内的运行时实时绘制，并且可以内置状态机，也就是一组根据输入在不同动画状态之间切换的规则。正因如此，它能响应指针悬停、触摸、手势和输入值。相比之下，Lottie文件或MP4视频只是播放一段固定的序列。

多邻国的角色就是一个广为人知的例子。多层状态机让角色在Idle、Correct Answer、Incorrect Answer和Neutral等状态之间切换，口型也保持同步。智能手表表盘和智能家居控制面板也是用同样的方式制作的。

难点一直在于手工投入。Rive CLI把这部分工作交给编程智能体，智能体可以根据自然语言指令生成、编写脚本并预览交互式矢量图形。

准备工作

免费套餐已经包含编辑器和CLI。

用来试验，免费套餐就够了，但从免费套餐导出的每个动画都会强制带有Rive启动画面。正式发布时如需去掉它，必须使用付费套餐。

准备工作分四步：

1. 注册一个免费的Rive账号。
2. 在Claude Code桌面应用中新建一个只用于Rive工作的项目文件夹。
3. 选择Claude Opus 5.5，把推理强度设为High，并开启Bypass permissions，以免频繁修改文件时反复弹出审批提示。
4. 在该文件夹中通过Claude Code运行Rive官网上的一行安装脚本。

完成后，Claude Code就能在本地创建Rive画板、编写脚本并进行预览。由于Bypass permissions会跳过审批检查，像这样只在专用文件夹中开启似乎更为稳妥。

从静态图片到可交互的效果

第一个案例是最简单的交互。向Claude Code提供一张参考图，图中是中间渐隐的竖向渐变条，要求它在黑色背景上用蓝色线条重新绘制，并让光标划过时线条像绷紧的吉他弦一样动起来。

智能体用Rive使用的脚本语言Luau自行编写物理逻辑。脚本会追踪指针，在接触点勾住并弯折线条，松开后以5Hz的频率弹响振动，再逐步衰减。在预览中，光标扫过画布时，只有接触点的线条被精确地拨开，随后平稳地静止下来。

用两张截图做出UI组件

第二个案例把静态画面变成可用的界面组件。两张截图取自OpenAI的宣传素材：一张是收起状态的胶囊形提示栏，上面写着“Ask ChatGPT”；另一张是同一提示栏展开后的白色卡片，里面有一张水族箱缩略图和一段已输入的问题。指令只有一句话：做一个悬停时提示框会展开的动画。

Claude Code读取两种状态后，构建出一个圆角矢量容器。悬停时，卡片以略微越过再回弹的缓动（动作加速与减速的曲线）放大，图标随之切换，图片淡入，文字在闪烁的光标后逐字打出。

这里的经验是同时提供起始状态和结束状态。有了两张截图，模型就能准确知道动画从哪里开始、到哪里结束，并补全中间的动作。

同样的方法也适用于硬件风格的界面。提供几张圆形智能家居温控器的截图后，Claude Code会从零做出一个原型：可拖动的旋钮覆盖从制冷到制热的范围，温度数字随之更新，配有模式切换按钮，背景的柔和光效也会随设置变化。

读取并重建网站的悬停效果

更复杂的布局，测试对象是Dropbox的品牌规范网站。页面底部有一个便当格布局，也就是把大小不同的格子像便当盒一样拼在一起的布局，包含Framework、Voice & Tone、Logo、Typography、Color、Imagery、Iconography和Motion八个格子。每个格子都有自己的悬停效果，从贝塞尔曲线弯曲、引文滑动，到标志菱形展开、挂锁锁梁打开，各不相同。

提示词把网站地址交给Claude Code，要求它滚动到页面底部，分析便当格布局，并连同悬停动画一起在Rive中重建。智能体读取页面，以1024x768的视口为基准，算出每一行和每一列的宽度、间距和RGB颜色值，再以矢量图形重建整个布局，并配上相同的触发效果。

第一版很好地抓住了结构和动作，但挂锁锁扣这类更细的微动画仍需要手工打磨。与其把结果当作成品，不如把它看作快速产出的初稿，这样更准确。

重建后的布局还可以更换风格。以在X上看到的一款带深色霓虹按键的未来感掌上游戏手柄为参考，Claude Code把布局改成了深色的Claude Code主题。标有Chat、Write、Code、Edit、Work、Analyze和Research的圆角卡片，在悬停时会亮起紫色和白色的线框光效。

借助MCP制作角色加载界面

制作角色动画时，要通过MCP（Model Context Protocol，即把AI智能体连接到外部工具和数据的标准）引入更多工具。

1. 用ChatGPT生成基础形象：一只坐在笔记本电脑前的白色兔子。
2. 通过Mobbin MCP服务器把Claude Code连接到应用界面素材库Mobbin，搜索带动效的移动端加载界面。参考对象是自我关怀宠物应用Finch，它把角色放在圆形进度环中。
3. 要求Claude Code让兔子平时飞快地打字，光标悬停时抬起头挥手。
4. 把一张插画拆成可动部件后，手臂动作显得生硬，于是用Higgsfield MCP调用GPT Image 2.5，为每个姿势分别生成风格一致的图片。
5. 把完成的兔子放进Finch风格的圆形加载动画中，配上一句表示“准备中”的简短说明，做成交互式新手引导加载界面。

自动拆分一张静态插画，往往会留下僵硬的关节和粗糙的边缘。为每个姿势生成风格一致的图片再叠加使用，是切实可行的解决办法。

▲ 角色加载界面与姿势图片

把Blender模型变成Rive小组件

最复杂的案例把Blender中的3D建模与Rive结合起来。这一步从Codex开始，Codex可以直接控制操作系统和Blender应用，完成3D资产的建模和绑定。绑定是指为模型加上骨骼，使其能够活动。

向Codex提出需求：做一盏鼠尾草绿的复古关节台灯，能在折叠的休眠姿态和直立点亮的姿态之间切换。Codex建好模型，设置机械骨骼约束，检查动画关键帧，再把资产和一段预览视频一起导出。

接着把这些文件交给Claude Code，同时附上一位3D艺术家的演示：他在Blender中为一个宝箱绑定骨骼，导入Rive，并通过Rive CLI开放了这些骨骼。然后要求Claude Code按照与兔子相同的插画风格，依照以下规格制作一个专注计时器：

完成的小组件在悬停时动作流畅，开灯后从25:00开始正常倒计时。就Blender工作而言，Codex目前看来是更合适的智能体，因为它能在系统层面操作，并直接与Blender的界面交互。

哪些交给智能体，哪些自己检查

把Rive CLI与编程智能体结合起来，过去要花几个小时的时间轴工作，变成了几分钟就能完成的初稿。第一版结果很少能比得上精心手工制作的动画，因此要预留一轮手动调整。比较稳妥的起步方式如下：

• 注册免费的Rive账号，并把CLI安装在专用文件夹中。
• 在处理更大的作品之前，先用吉他弦这类简单的悬停效果检验智能体的输出。
• 做UI时，务必同时提供起始状态和结束状态的截图。
• 把第一版结果当作初稿，细节靠手工完善。
• 发布前，确认是否需要付费套餐来去掉Rive启动画面。