跳转到使用指南
animation-vocabulary作者 Emil Kowalski

Animation Vocabulary Skill.

一个用于动效与视频的 Claude Code 和 Codex skill:将模糊的动效描述反向转换为精确术语的词汇表。

  • Motion & Video
emilkowalski/skills · skills/animation-vocabulary/SKILL.mdSKILL.md
--- name: animation-vocabulary description: 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 the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building … --- ## Quick Start ## Instructions ## Examples ## Glossary
上游文件前置元数据与章节标题,读取于 2026-09-14 · 全文 12,884 字符

01 功能说明

animation-vocabulary skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

animation-vocabulary 是一个用于命名网页动效的反向查找词汇表。你可以用宽泛的描述来描述某个效果——比如“弹出层打开时那种有弹性的效果”、“iOS 的橡皮筋式滚动效果”——它会返回准确的术语,以及该词汇表自身的说明,格式为 Stagger — Animate several items one after another。

它面向需要用准确措辞去提示 AI 或设计师、而不是自己动手设计或构建动画的设计师和开发者。术语表涵盖入场与退场、编排与时序、运动与变换、缓动、弹簧动画、滚动、反馈与交互、性能,以及需要了解的原理,并对比诸如 Clip-path 与 Mask 这类容易混淆的概念。

它产出什么

  • 匹配到的术语及词汇表自身的定义,以一行格式化文本呈现
  • 一份带有条件说明的近似替代方案清单
  • 当没有任何匹配项时,会有一个明确标记的近似结果
查看示例提示词 ↗

工作方式

  1. 01
    匹配感觉,而非关键词

    用户描述动效看起来或感觉起来是什么样子,这种感受会被映射到术语表中,而不是与技术字符串进行匹配。

  2. 02
    以 Skill 的固定格式回答

    一行:术语加粗,接一个破折号,然后是术语表自身对该术语的描述。答案前不加任何铺垫。

  3. 03
    先给出最佳匹配,再列出备选项

    当多个术语都符合时,最佳匹配排在最前,随后列出一到两个备选项,并说明各自的差异。

  4. 04
    先给出术语,然后停止

    术语先给出,除非用户要求更多,否则不展开推理过程。

02 找到适合场景

何时使用 animation-vocabulary Skill

在 Claude Code 或 Codex 中使用 animation-vocabulary skill,当任务是这类运动和视频时。下面的适用范围和限制取自 skill 自己的文件。

适合场景

  • 你能准确想象出这个效果,却叫不出名字,例如从触发按钮中生长出来的弹出层。
  • 你需要的是能用来向 AI 或设计师说明需求的词汇,而不是自己去实现它。
  • 请求以命名问题的形式出现:这个……叫什么?
  • 你只能描述出一种物理手感,比如过度滚动的阻力与回弹。

了解边界

  • 设计或实现该动画——本 skill 的范围仅限于为效果命名。
  • 超出该术语表范围的词:skill 不会扩充术语表,而是报告这一空缺。

需要提供的信息

  • 输入事先不需要任何技术信息;该 skill 读取的是描述内容,而不是关键词列表。
  • 输入请说明它是从哪个元素中生长出来或依附于哪个元素,因为像“origin-aware animation”这样的术语正是由这种关系定义的。

03 Skill 内部

animation-vocabulary Skill 为 Claude Code 和 Codex 设定的规则

SKILL.md 为 Agent 设定的 6 条具体指令、默认值与边界——文件中真正改变结果的那部分。

  1. 引用术语表原文,不做转述

    这些描述被视为权威参考文本,因此会原样引用,而不是为用户重新改写措辞。

  2. 明确对比相互竞争的术语

    相近的一组术语,如 Clip-path 与 Mask、Pop in 与 Bounce、Shared element transition 与 Layout animation,必须并列呈现比较,而不是默默地选一个。

  3. 绝不臆造术语

    如果术语表中没有确切的术语,就直接说明;可以使用术语表中已有的词汇来解释这个概念,但不能创造新名称。

  4. 读懂意图

    触发条件是用户对所见效果的直白描述,而不是关键词搜索;被直觉感知到的感觉才是需要解析的输入。

  5. 保持简洁

    命名类问题应该得到一个名称,而不是一篇论文;只有在用户要求时,长度才会增加。

  6. 保持术语表同步

    skill 内置的术语表是项目 /vocabulary 页面的一个精选快照,两者应在其中任一方发生变化时同步更新。

04 投入使用

在 Claude Code 或 Codex 中安装 animation-vocabulary

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 animation-vocabulary 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

针对 skills/animation-vocabulary/SKILL.md 的通用 skills CLI 形式;仓库可能会记录其自己的路径。

给 Skill 一个首次动效和视频任务

使用你自己的内容和约束调整此提示,然后在 Claude Code 或 Codex 中运行它。

Example prompt
**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

来源:SKILL.md § Examples(代码块)。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 回答呈现为一行术语表条目:加粗术语、破折号、文件本身的表述,例如橡皮筋回弹条目。
  • 如果存在替代名称,会以列表形式出现,每条都带有一句说明该术语适用条件的文字。
  • 存在竞争关系的术语会在你选择之前被分开列出,而不是合并成一个答案。

在 OpenDesign 中 通过其 SKILL.md 链接导入 animation-vocabulary:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Repository
github.com/emilkowalski/skills 分支 main
Skill 文件
skills/animation-vocabulary/SKILL.md 内容校验和在验证时记录;提交 d23d7f8
License
MIT 来自 LICENSE。
仓库星标数
37,516 GitHub 快照拍摄于 2026-09-14,针对整个 emilkowalski/skills 仓库,该仓库在此目录中包含 9 个 skills。不是 animation-vocabulary 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 快速开始展示单行答案的形式:加粗术语、破折号、术语表描述。
  2. 使用说明六条编号规则:读取意图、逐字引用、消除歧义、给出近似值、保持在术语表范围内、保持简洁。
  3. 示例三个实际查询示例:一个基于感觉的查询、一个消歧查询和一个物理感觉查询。
  4. 术语表十二组术语列表,从“进入与退出”到“须知原则”。
Skill 自身的描述
"反向查找词汇表,将对 Web 动画或动效的模糊描述转换为其准确术语(「弹出框打开时的弹跳效果」→ Pop in;「iOS 的橡皮筋滚动」→ Rubber-banding)。用于当用户问「这叫什么……」,或描述一个不知道名字的动效并想要正确的词来向 AI 或设计师提问时。用于命名效果,而不是设计或构建效果。"

来自 SKILL.md 的前言描述。完整文件约 12,884 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 animation-vocabulary Skill 的问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

使用它之前我需要先知道这个术语吗?

不需要。你可以尽力描述该效果——文件本身给出的例子就是“iOS 橡皮筋滚动效果”——回复会以术语 Rubber-banding 的形式返回,并附带术语表中的描述。

如果我的效果不在术语表中会怎样?

它会给出最接近的术语,并明确说明这只是一个近似值,或者用术语表中的词汇重新描述该效果,例如“这是一种缩放进入的错落动画(stagger of scale-in entrances)”。它不会编造一个不在列表中的术语。

它会为我设计或构建这个动画吗?

不会。该 skill 的范围仅限于为效果命名;设计或构建动画明确不在其范围内。你需要拿着它返回的术语,去向负责构建该动效的人或工具下达 brief。

Animation Vocabulary

在真实的动效与视频任务上运行 animation-vocabulary。

下载 OpenDesign,从其 SKILL.md 链接导入 animation-vocabulary,粘贴上述提示词,在结果出现前阅读计划。

终端
npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows