motion-and-microinteractions
Codex 界面动效技能:菜单、开关和减少动态效果
EnglishCodex 安装步骤
- 在临时目录用 git clone https://github.com/Eldergenix/Codex-Design.git 取得仓库,进入克隆目录后运行 git checkout --detach 99b4b08ff62b8dd3a7a112438c1460fd6a02d09c,核对本页标明的 SKILL.md。
- 把整个 skills/motion-and-microinteractions 文件夹复制到你的项目中,路径为 .agents/skills/motion-and-microinteractions,保留同目录的脚本、模板与参考资料。
- 从项目目录打开 Codex,在 CLI 输入 /skills 或通过 $motion-and-microinteractions 选择技能,再用下方样例验证。列表没有更新时重新启动 Codex。
中文摘要
为菜单、开关和浮层选择可中断的短动效,说明状态变化和界面层级。适合现有界面反馈不清晰,或需要同时核对常规与减少动态效果设置的项目。
SKILL.md 中文导读
可复现示例
让 Codex 检查一个示例设置页:菜单打开后从右侧移入,切换开关时标签淡出再出现。要求保留状态反馈,补充减少动态效果模式,并列出快速打开后立即关闭的验收步骤。工作步骤
- 写出交互前后的状态和需要传达的变化。
- 为普通与减少动态效果模式定义可观察的反馈。
- 用键盘、鼠标和快速反向操作验证状态与可读性。
验收方法
菜单和开关的完成状态清晰。快速重复操作可正常中断过渡,减少动态效果模式下内容仍可见、功能仍可操作。
GitHub 原文 · 更新日期
适用环境
适用于可加载项目技能的 Codex。示例可在本地项目中验证。
常见问题
哪些状态值得加动效?
优先考虑需要说明位置变化、选中状态或打开层级的交互。先在小组件上验证时间、可中断性与减少动态效果偏好。