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