我和 AI 做 RIVE 预览插件的过程复盘
文章记录了我与 AI 协作完成 Rive 预览插件的过程，希望能给你一些启发。
这个想法起源于今年一月。
作为 Eagle 的重度用户，我最近越来越多地使用 Rive 制作动画，但 Eagle 不支持 Rive 文件预览。导致想用 Eagle 管理 .riv 文件的我，只能通过文件名去区分。
于是我产生这个制作格式拓展插件的想法。
这篇文章记录了我与 AI 协作完成 Rive 预览插件 的过程，希望能给你一些启发。
我的开发流程
整个开发过程，我总结为三个阶段：调研 → 开发 → 打磨。
第一步：让 AI 帮我做调研
一开始，我打开 YouMind，直接说：
“我想创建一个 Eagle 插件用来预览 Rive 文件，请帮我搜索查找相关的文档和规范。”
AI 给了我很多相关文档，还检索到了相关的开源项目。这一步特别关键——它帮我省去了大量搜索和筛选的时间。
它帮我检索到了很多我需要的资料：
- Eagle 插件开发文档 — 了解插件的开发规范
- Rive 官方 Runtime — 负责渲染动画
- 相关开源项目 — 看看别人是怎么做的
有了这些资料，我就有了基础。
第二步：站在巨人肩膀上开发
找到合适的开源项目后，我没有让 AI 从零开始写代码，而是基于开源项目来改。
最终我选用了 rive-rip 这个最近更新时间在两年前的开源项目。
将这个开源项目克隆到本地后我先让 AI 帮我理解项目：
- “这个项目的核心逻辑在哪里？”
- “技术栈是什么？我需要注意什么？”
大致了解之后，就可以让 AI 开始干活了。
然后我告诉 AI：“基于这个开源项目和 Eagle 插件的规范，完善插件功能。”
AI 基于开源项目完成插件后，还需要在 Eagle 测试各项功能是否可用，持续与 AI 沟通、反馈、修改一系列问题。
第三步：美化 + 持续打磨
到这里，插件能用了，但不好用。接下来该设计师出场了。
美化视觉
看到 Paper 可以直接复制 TailwindCSS 和 ReactCSS 代码，所以我尝试用 Paper 绘制了界面布局和风格。
然后，直接在 Paper 里复制 TailwindCSS 代码丢给 AI：“在不改变现有按这个样式优化现有改。”
这一步特别爽——画出来就等于写出来了。设计师的视觉能力，在这里成了最大的优势。
持续打磨
接下来就是漫长的打磨期。不断测试、发现问题、反馈给 AI、再测试。
比如缩放功能，我提出要加，AI 很快实现了。但测试后发现：
- 重置按钮的图标显示不对
- 滚轮缩放不能以鼠标位置为中心
- 放大后没法移动画布
我把问题一个个反馈给 AI，它逐一修复。光是重置按钮的图标，就改了三次才搞定。
好在 AI 让试错成本变得很低——你可以试 10 种方案，选最好的那个。
最后发布
确保功能正常后，打包、写文档、提交到 Eagle 社区。
当然，打包、写文档这种细活还是让 AI 干。
最终成果
聊了这么多过程，来看看做出来的东西。
Rive 预览是一款为 Eagle 提供 .riv（Rive 运行时文件）完整预览支持的插件。
主要功能
缩略图生成 — 自动为 Rive 文件生成缩略图，在 Eagle 资源库中一眼就能识别内容。
交互式预览 — 完整的动画播放控制、状态机交互、数据绑定编辑。
画布操作 — 支持放大/缩小、重置视图，可以按住 Space 拖拽平移，或用 Ctrl + 滚轮缩放——操作逻辑和主流设计工具一致。
状态机与时间线 — 右侧面板可以切换查看动画的状态机和时间线，支持触发器点击、布尔值切换、数值调整、ViewModel 属性编辑。
背景切换 — 提供透明棋盘格、白色、黑色三种背景，方便在不同场景下检查动画效果。
性能监控 — 右上角实时显示 FPS，绿色（≥50）、橙色（30-49）、红色（<30），及时发现性能问题。
多语言支持 — 界面语言自动跟随 Eagle 应用设置（简体中文 / English）。
完全离线 — 内置 Rive 运行时，离线也可用。
文件格式支持
| 格式 | 说明 | 预览 | 缩略图 |
|---|---|---|---|
.riv | Rive 运行时格式 | ✅ 完整支持 | ✅ 自动生成 |
.rev | Rive 编辑器备份 | ℹ️ 提示打开编辑器 | ✅ 占位图 |
插件现已上架 Eagle 资源社区，免费使用。
我的收获
1. 意外学会了一些技术
虽然 AI 写了大部分代码，但在和它对话的过程中，我被迫理解了一些技术概念。
现在我能看懂基础代码结构，原来还能通过 GitHub Action 自动打包。
2. 更懂“设计决策的代价”
亲手实现产品，让我更理解“实现成本”这个词。
比如，我最初想在右侧面板同时显示状态机和时间线，但实现后发现空间太挤。这种“想得很好但跑不通”的体验，以前只能听开发说，现在自己体会到了。
3. AI 协作的体会
角色变了：从“画图的”变成了“产品负责人”。AI 负责实现，我负责决策。
沟通能力更重要：怎么描述需求、怎么验收 AI 的产出——这些“软技能”变得特别重要。
判断力是核心：AI 能给你 10 个方案，但选哪个、为什么选，必须自己判断。
4. 最大的收获
完成这个项目最大的收获，不是插件本身，而是证明了自己可以。
从“有问题等开发”到“有问题自己解决”，这种心态的转变，可能比技术能力的提升更珍贵。
感谢你看完这篇文章
如果你也是设计师，正在犹豫要不要尝试 AI coding，我的建议是：不要等“学会编程”再动手，边做边学。
把 AI 当搭档，而不是万能答案机。我们最大的优势不是写代码，而是懂用户、会表达、能判断。
这个时代，技术不再是门槛，想象力才是。
当工具不再限制我们，我们能创造的，远比想象中更多。
相关链接
- Rive 预览插件：https://community-cn.eagle.cool/plugin/041323c2-e4b8-433e-a079-160d73deea24
- rive-rip 开源项目：https://github.com/albertcai101/rive-rip
- Paper 设计工具：https://paper.design/