前端与 UI

animation-vocabulary

把含糊的动效描述,翻成精确的技术术语。

这是什么

一个反查词典。你大致描述一个动效,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
来自上游 SKILL.md

它对设计意味着什么

  • 让设计师拿到对的词,好去给 Agent 写提示。
  • 区分容易混的成对概念,比如 clip-path 和 mask、pop in 和 bounce。
  • 拒绝生造术语,命名始终靠得住。

包含哪些内容

  • Entrances and exits
  • Sequencing and timing
  • Transitions between states
  • Scroll
  • Spring animations
  • Polish and effects

如何安装

animation-vocabulary

  1. 克隆这个仓库。

    git clone https://github.com/emilkowalski/skills
  2. 把 Codex 指向这个 Skill 文件。

    skills/animation-vocabulary/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 描述你看到的效果,比如「iOS 那种橡皮筋回弹滚动」。

  2. 它给出加粗的术语,外加一句词典式释义。

  3. 两个术语都说得通时,让它列出备选。

这里的每个插件都免费开源,并附上真实的上游源地址。

在 codex-design 清单上了解更多 ↗

下一步

用 Open Design 做设计,省掉那些配置

你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。