这是什么
一个反查词典。你大致描述一个动效,Skill 原样给出准确术语,几个都可能沾边时还会列出近义项。
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when t
它对设计意味着什么
- 让设计师拿到对的词,好去给 Agent 写提示。
- 区分容易混的成对概念,比如 clip-path 和 mask、pop in 和 bounce。
- 拒绝生造术语,命名始终靠得住。
包含哪些内容
- Entrances and exits
- Sequencing and timing
- Transitions between states
- Scroll
- Spring animations
- Polish and effects
如何安装
animation-vocabulary
-
克隆这个仓库。
git clone https://github.com/emilkowalski/skills -
把 Codex 指向这个 Skill 文件。
skills/animation-vocabulary/SKILL.md -
然后描述你想要的界面,Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
描述你看到的效果,比如「iOS 那种橡皮筋回弹滚动」。
-
它给出加粗的术语,外加一句词典式释义。
-
两个术语都说得通时,让它列出备选。
这里的每个插件都免费开源,并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗下一步
用 Open Design 做设计,省掉那些配置
你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。