动效技能 · rossark-motion-skill
rossark-motion技能可以装进Claude Code或Codex，它把动画师的原则、动效引擎和逐帧测量工具一起交给AI。顶部的视频来自一个教程频道：同一个吉祥物场景，先不用技能做一遍，再读了技能后做一遍，然后左右并排对比。我们还收集了其他案例，包括在技能公开当天就把它用到自己健身应用吉祥物上并完成部署的开发者。
2026年10月26日·3 个案例
这个技能由独立应用开发者ROSS在10月22日发布。代码仓库说明，演示里的画面和动作全部是基于模板用代码做出来的。 ROSS原本想让自己应用的引导页和付费页插图动起来，由此做出了这个方法，并在发布帖里写道：“@rive_app is overkill. i just want my apps to feel alive.（用Rive有点大材小用，我只是想让自己的应用有活着的感觉）”。Rive是制作应用动画的专业工具。
四天后的10月26日，这条发布帖的浏览量超过16.6万次，收藏的人（书签3,343）比点赞的人（2,034）还多。 发布当天晚上，一位说法语的开发者就把这个技能用在了自己健身记录应用的教练吉祥物上，并完成了部署。
技能里包含动画师的12条原则（用同一个时钟驱动整个场景、落地时身体先压扁再恢复、眨眼约110毫秒闭上190毫秒睁开等）、面向React Native和SwiftUI的动效引擎，以及逐帧测量结果的工具。虽然没有网页版模板，但文档写明同样的方法在网页上也适用，而且免费（MIT许可证）。
Reference 01自己开发并使用健身记录网页应用SachaRbone Fit的开发者SachaRM7 · GitHub
技能公开大约五个小时后，SachaRM7就把让教练吉祥物动起来的改动（PR）合并进应用并完成了部署。吉祥物在“准备”“休息”“鼓励”三种状态下轻轻呼吸、微微倾斜。鼓励动作只播放一次；当吉祥物不在屏幕内、标签页被隐藏，或设备开启了“减弱动态效果”时，动画就会停止。在显示得非常小的位置保留静态图片，也没有引入任何新库。
SachaRM7在第一次改动里写道：“Les images restent aplaties: yeux et bras ne bougent pas indépendamment.（图片被合成了一整张，眼睛和手臂无法单独动）”。在接下来的改动中，又把手臂和大拇指从图里拆出来单独驱动，加入了身体保持不动、抬起前臂、用1.8秒竖起大拇指的动作。 在现在公开的对比页面上，可以看到教练在静态图旁边举起握拳的手臂、竖起大拇指，并且按照运动页（40px）、首页（72px）、教练页（120px）实际使用的尺寸展示。
Reference 02教程 · 介绍Claude Code代码仓库的YouTube频道WifiCoding（吉祥物是Claude为测试画的）
WifiCoding先让Claude画了一个橙色小吉祥物，然后让它把同一个10秒场景做两遍：吉祥物四处张望、眨眼，然后跳起来抓住一个信封。一遍不用技能，一遍先读技能再做。
不用技能的版本出了七个错误：五个计时器各自运行，而不是共用一个时钟；每个姿势都生硬地停住；有一段长达4.5秒身体完全不动。起跳前没有下蹲，落地时身体也没有被压扁，叶子不随跳跃摆动，眼睛也不跟着信封走。开启技能的版本在起跳前会下蹲，落地时身体先被压扁再恢复。用技能自带的测量工具一测，身体静止的最长时间从4.5秒缩短到了0.3秒。
频道最后这样总结：“the difference between the left and the right is exactly the difference between something animated and something alive.（左右两边的差别，正是‘会动的东西’和‘活着的东西’之间的差别）”
Reference 03官方演示 · 开发这个技能的独立应用开发者ROSS
除了小孩降落到手机屏幕里踢球、挥手的Reveal，代码仓库里还有更多演示。Garden是一个10秒的场景：女孩浇水后，嫩芽长大开花，蝴蝶飞来，随后花瓣凋落，又变回嫩芽。Chef是一个9.6秒的场景：厨师第二次翻松饼时，松饼落在厨师帽上，又滑回锅里。
“使うと効く場面 ・キャラやマスコットを、待機中も生きてるように見せたいとき ・連打や動きの途中で触られる要素（ガクガク → ふわっと1回で着地） ・跳ねる・着地など、重さを出したい動き”
适用的场景：想让角色或吉祥物在待机时也显得有生命；会被连续点击或在动画途中被点击的元素（卡顿抖动 → 轻轻一次落定）；跳跃、落地等需要表现重量感的动作
一位写过Codex相关书籍的网页工程师，在Codex中用21秒的左右对比视频比较了不用技能和开启技能的效果后发的帖子。测试是在网页上进行的。
“a tiny bit of motion makes a half-built app feel alive. smart skill to have around”
只要加一点点动效，做了一半的应用就有了生气。值得常备的好技能
一位公开记录iPhone应用开发过程的开发者，在作者用这个技能让应用角色动起来的视频下的回复。
“効かない場面 ・ボタン、タブ、単純なアイコン（素の Codex で十分） ・派手さを出したいとき（控えめな動きになる） トークン消費は約 1.4 倍。影や瞬きなど細かい部分は少し手直しが必要でした”
不适用的场景：按钮、标签页、简单图标（原生Codex就够了）；想要华丽效果时（动作会偏克制）。token消耗约为1.4倍。阴影、眨眼等细节还需要手动稍作修改
“It is a method, not magic, so you still need to look at the result. And Claude told me itself that it did not watch the two videos. It checked the frames and the numbers instead.”
这是一种方法，不是魔法，所以结果还是得自己看。Claude自己也说了，它并没有看这两段视频，而是检查了帧和数字
“Really want to use this, but my mascot is just PNG assets”
真的很想用，可我的吉祥物只有PNG素材
一位独自开发记账应用的开发者在发布帖下的回复。
把下面的提示词粘贴到Claude Code、Codex等编程智能体里即可。要动起来的图需要是眼睛、手臂、身体彼此分开的SVG，这样各部分才能单独动。
请阅读 https://www.working-ref.com/zh/reference/rossark-motion-2026-10 ，然后从GitHub安装rossark0/rossark-motion-skill这个技能。接着看看我项目里的图和页面，提出三个适合做成动画的建议。我选一个后就直接开始；如果没有合适的，就先做吉祥物待机时呼吸和眨眼的动画。只用我自己拥有的原创图片，不要用别人的角色，并且让我能直接在浏览器或应用页面上看到结果。
这篇参考对你有帮助吗？
Work Smarter with AI
订阅成功 下一期起，我们在你的邮箱见。