【免费下载链接】oil-uiUI design skill for Claude Code, Codex and other AI agents: explore distinct directions, compare them side by side, refine against real screenshots. 给 AI Agent 用的 UI 设计 Skill。项目地址https://gitcode.com/gh_mirrors/oi/oil-ui点击查看免费下载做界面动效时很多人卡在同一件事上动画能动但就是没有手感——按钮按下去木讷、面板滑出来发飘、整页切换慢吞吞。开源项目oil-ui一个给 AI Agent 用的 UI 设计 Skill在动效规范里给了一套很实用的解法用动作 实物命名弹簧参数用一张时长表管住所有界面动效。这篇文章把这两张核心表和配套规则整理出来照着抄就能让 AI 生成的界面动起来有质感。为什么 AI 动效容易塑料感AI 生成界面时最爱用默认缓动ease配一坨 300ms结果就是按钮、面板、数字各动各的方向互相打架所有元素同时起跑、同样幅度看起来只是一起闪了一下离开和进入一样慢用户觉得卡。oil-ui 的思路是手感不是玄学是从材质和调性推导出来的参数。它在 references/motion.md 里规定完全不动的界面像一张截图——按下没有回应、切换没有来路用户只能猜发生了什么。每个界面先做三处基本动效新界面和改动了操作流程的界面先把这三处做出来再谈花样主操作的反馈按下立刻有回应完成时交出结果按钮陷下去再弹回、勾号画出来、数字滚到新值。一处状态切换的来路选中、展开、换视图时让人看见东西从哪里来、到哪里去。第一次进入时的一次出场主角先到其余按阅读顺序跟上只在首次进入时播放。这三处之外再加的动效每个都要承担反馈、引导或品牌表达中的一项职责——滚动淡入、视差、跟随鼠标这类装饰最容易变成干扰。灵魂所在6 组动作 实物弹簧参数表动效的手感从方向的材质和调性推出用动作 实物来命名并选参数弹簧刚度 / 阻尼。这是 oil-ui 动效规范里最值得收藏的一张表动作实物参照刚度 / 阻尼适合场景咔嗒磁铁吸合、卡扣、拨动开关350–400 / 10–15按钮、开关、下拉展开滑入气压闭门器、抽屉阻尼250–300 / 20–25底部面板、抽屉、折叠流淌倒蜂蜜、雾气弥散150–200 / 30–40页面转场、主视觉出现砸落锤击、重物落桌400–500 / 5–10确认选择、完成反馈回弹橡皮球、蹦床300 / 8庆祝提示、儿童与游戏漂浮氦气球、飘絮100 / 25冥想、梦幻场景、空闲循环三条配套规则直接决定参数用得对不对重的材质偏咔嗒和砸落石、金属、陶轻的材质偏漂浮和流淌纸、布、雾——参数要跟视觉方向一致。高频操作用短促的动作少见的品牌时刻才用绵长的。过冲幅度跟着面积走整页、面板这类大面积元素过冲不超过 1–2%否则整块画面会晃徽章、勾选标记这类小东西可以过冲 10–20%显得有弹性。阻尼偏低的参数比如回弹只用在小物件上。 网页上怎么落地oil-ui 给了个巧妙做法按刚度和阻尼对位移做数值积分取 20–30 个采样点写进 CSS 的linear()缓动时长取位移稳定在终点 0.5% 以内的时刻不支持的浏览器退回相近的cubic-bezier。界面动效时长规则一张表管住全部操作时长不用纠结按对象查表即可来自 动效规范对象时长要点按下、开关、选中指示150–300ms按下缩到 0.96–0.98约 80ms 内立即生效松开再弹回下拉、气泡、提示180–250ms从触发点方向展开缩放从 0.96 左右开始不从 0 开始面板、抽屉、侧栏250–400ms按移动距离取值越远越长整页或视图切换350–500ms超过 500ms 就会让人等首次进入依次出现每项间隔 40–80ms总长不超过 600ms重新渲染时不重播两个容易被忽略的细节离开比进入快退出时长约为进入的 60–70%用加速曲线进入用减速曲线或弹簧。悬停上浮 2–4px阴影随之加深位移超过 20px 的悬停效果会显得轻浮。让动效彼此接上呼应与界面过渡好手感的核心是呼应——一个动作引起的变化沿同一条路传下去从被操作的地方出发点加入购物袋商品缩成一个点飞进袋子袋子上的数字跟着跳一下一次切换朝一个方向卡片往左滑标题、序号和底色也往左换主角先动其余被带动被影响的东西晚 40–80ms 跟上、幅度更小形状接力按钮展开成面板、搜索图标拉长成输入框用户一眼看出是同一个东西。界面过渡还有几条铁律下一项从右边进、上一项从左边进方向随意比没动画更让人迷惑只变形状时不做交叉淡化否则新旧画面叠出重影被移除的淡出、新加入的淡入、留下的滑位三者分开处理。整页转场按稳不稳分三档选遮罩式最简单最稳绝大多数页面适用交叠式要管好两个 DOM 的层级和内存共享元素式最顺也最容易出问题快速双击、中途打断都容易错位必须留好退路出错时直接显示到位状态。检查动效三遍操作 一个开关做完动效别只看一遍oil-ui 的检查清单很克制按正常速度操作一遍往回操作一次、快速连按几次——没有重影和跳动、元素不突然出现、不卡在中间状态才算过开启减少动态效果后所有状态直接到位内容一样不少。性能上优先只动transform和opacity动画要能被打断连续快速操作时从当前位置接着走不跳回起点重播。延伸阅读模块路径说明动效规范本文参数表来源references/motion.md三处基本动效、弹簧表、时长与检查滚动叙事references/scroll-narrative.md落地页区块出场、滑动驱动叙事游玩手感references/play.md游戏、抽奖的演出时长与操控Skill 主入口SKILL.mdoil-ui 的完整工作流小提示oil-ui 交付时还会要求录屏按正常速度看一遍——该动的地方没动就补上。动效好不好最终还是要靠眼睛和手指投票。赞分享【免费下载链接】oil-uiUI design skill for Claude Code, Codex and other AI agents: explore distinct directions, compare them side by side, refine against real screenshots. 给 AI Agent 用的 UI 设计 Skill。项目地址https://gitcode.com/gh_mirrors/oi/oil-ui点击查看免费下载相关推荐如何做出自然的弹跳感torph 弹簧缓动 Spring Easing 参数调优完整指南如何做出自然的弹跳感torph 弹簧缓动 Spring Easing 参数调优完整指南 torph 是一个零依赖的动画文本组件 TextMorph支持 ReRemix UI 动画实现指南CSS 优先的状态、进入/退出、布局与弹簧动效Remix UI 动画实现指南CSS 优先的状态、进入/退出、布局与弹簧动效 本篇指南以 Remix UI 的动画模型为核心讲解如何在“浏览器已拥有状态”时后端前端Web框架Victory 图表动画完全指南如何用 VictoryAnimation 与 Transition 三步做出惊艳动效Victory 图表动画完全指南如何用 VictoryAnimation 与 Transition 三步做出惊艳动效 ! Victory React 图表库动数据可视化UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考