Rive 设计师狂喜!Claude 现在真的懂 Rive 动画了

Rive 设计师的福音：Claude 现在真的懂 Rive 了

你用过 Rive 吗？那个 Figma 团队做的、能让设计稿”活过来”的交互动画工具。用过的都知道——它强大到爆炸，但文档散落各处，API 命名诡异，每次写一段 Luau 脚本都要翻半天官方文档。

直到我发现 BowTiedSwan/rive-skills——一个把整个 Rive 平台知识灌进 Claude 的 Skill 包。

它能帮你做什么

简单说，Claude 从此就是你的 Rive 工程师。它懂：

• Rive Editor 全部操作：artboard、shape、constraint、layout、text、动画模式
• Luau 脚本协议：Node、Layout、Converter、PathEffect、Test 五种全包
• State Machine 状态机：states、inputs、transitions、listeners、layers 完整工作流
• Data Binding 数据绑定：View Models、lists、converters、运行时数据流
• Events 事件系统：Rive events、audio events、自定义属性、运行时事件处理

另外还覆盖了6 大运行时：React/Next.js、Vanilla JS、Canvas、WebGL、Flutter、iOS、Android、React Native、Unity、Unreal、Defold——基本上你能想到的运行环境都有。

为什么 Rive 设计师需要它

Rive 真正难的不是”动起来”，而是把交互逻辑写对。比如一个按钮的 hover 状态需要 state machine 切换，复杂的角色动画需要 IK constraint，滚动同步动画需要 view model 实时绑定。

以前这些都要查文档 + Stack Overflow + 自己造轮子。现在你只需要告诉 Claude：”我要做一个滚动驱动的角色跑步动画，触发时切换 idle→run 状态”，它直接给你完整可用的代码。

这套 Skill 的硬核程度

主 SKILL.md 只负责快速索引，14 份 reference 文档覆盖了所有 API 细节：

• rive-scripting-api.md：完整 Luau API
• rive-state-machine.md：状态机从基础到高级
• rive-react-runtime.md：React/Next.js 集成 hooks
• rive-mobile-runtimes.md：iOS/Android/React Native 原生接入
• rive-game-runtimes.md：Unity/Unreal/Defold 游戏引擎

每一份都是给 Claude 用的”专业手册”，而不是糊弄人的 200 行概览。

谁适合用

• 产品设计师：想给网页/移动端加炫酷交互动画
• 前端工程师：用 React/Next.js 集成 Rive 动画
• 游戏开发者：用 Unity/Unreal 做角色 UI 动画
• 独立开发者：做 SaaS 落地页的滚动动效

MIT 协议，免费用，作者 @bowtiedSwan 还在持续更新。

如果你正在做交互设计、想给产品加点”哇塞”的动效，这套 Skill 装上就用。

https://github.com/BowTiedSwan/rive-skills

GitHub: https://github.com/BowTiedSwan/rive-skills