跳到技能内容
词映 AI导航
发现工具选型指南Skills 技能AI 快讯AI图片AI视频AI文档AI办公AI助手AI搜索AI编程AI音频AI设计AI智能体模型与开发AI学习模型评测AI提示词内容检测AI金融AI 3D扫描与识别其他工具跨境电商 AI
词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航
发现工具选型指南Skills 技能AI 快讯AI图片AI视频AI文档AI办公AI助手AI搜索AI编程AI音频AI设计AI智能体模型与开发AI学习模型评测AI提示词内容检测AI金融AI 3D扫描与识别其他工具跨境电商 AI
技能目录24 小时热门TOP100 技能每日更新
Skills 技能/Eldergenix/Codex-Design/motion-and-microinteractions

motion-and-microinteractions

Codex 界面动效技能:菜单、开关和减少动态效果

English

Codex 安装步骤

  1. 在临时目录用 git clone https://github.com/Eldergenix/Codex-Design.git 取得仓库,进入克隆目录后运行 git checkout --detach 99b4b08ff62b8dd3a7a112438c1460fd6a02d09c,核对本页标明的 SKILL.md。
  2. 把整个 skills/motion-and-microinteractions 文件夹复制到你的项目中,路径为 .agents/skills/motion-and-microinteractions,保留同目录的脚本、模板与参考资料。
  3. 从项目目录打开 Codex,在 CLI 输入 /skills 或通过 $motion-and-microinteractions 选择技能,再用下方样例验证。列表没有更新时重新启动 Codex。

中文摘要

为菜单、开关和浮层选择可中断的短动效,说明状态变化和界面层级。适合现有界面反馈不清晰,或需要同时核对常规与减少动态效果设置的项目。

SKILL.md 中文导读

可复现示例

让 Codex 检查一个示例设置页:菜单打开后从右侧移入,切换开关时标签淡出再出现。要求保留状态反馈,补充减少动态效果模式,并列出快速打开后立即关闭的验收步骤。

工作步骤

  1. 写出交互前后的状态和需要传达的变化。
  2. 为普通与减少动态效果模式定义可观察的反馈。
  3. 用键盘、鼠标和快速反向操作验证状态与可读性。

验收方法

菜单和开关的完成状态清晰。快速重复操作可正常中断过渡,减少动态效果模式下内容仍可见、功能仍可操作。

GitHub 原文 · 更新日期 2026-11-11

适用环境

适用于可加载项目技能的 Codex。示例可在本地项目中验证。

常见问题

哪些状态值得加动效?

优先考虑需要说明位置变化、选中状态或打开层级的交互。先在小组件上验证时间、可中断性与减少动态效果偏好。

技能信息

GitHub 仓库
Eldergenix/Codex-Design

收集于互联网

相关推荐

  • codex-design-core 技能

    Eldergenix/Codex-Design

  • Codex 设计系统技能:整理 CSS 变量和深浅主题

    Eldergenix/Codex-Design

  • Codex 空状态技能:设计加载、流式输出与重试

    Eldergenix/Codex-Design

  • Codex 前端交接技能:拆分组件并记录验证结果

    Eldergenix/Codex-Design

  • Codex React Native 界面技能:处理键盘和安全区

    Eldergenix/Codex-Design

  • ChatGPT 产品设计需求澄清技能:从想法到设计简报

    Eldergenix/Codex-Design

词映 AI 导航Skills 技能
工具分类全部工具已本地化技能选型指南AI 快讯