design-motion-principles作者 Kyle Zantos

Design Motion Principles Skill.

一个用于动效和视频的 Claude Code 和 Codex skill：基于 Kowalski、Krehel 和 Tompkins 的原则，提供有目的的交互动效或现有动画的评审。

Motion & Video

kylezantos/design-motion-principles · skills/design-motion-principles/SKILL.mdSKILL.md

--- name: design-motion-principles description: Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit … --- ## STEP 0: Detect Mode (DO THIS FIRST) ## The Three Designers ## Context-to-Perspective Mapping ## Core Principles (Both Modes) ## Reference Index ## Workflow Index

前置信息和章节标题读取自 2026-09-14 的上游文件 · 完整内容 6,794 字符

01 功能说明

design-motion-principles Skill 在 Claude Code 和 Codex 中的作用

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

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

以 skill 自身的术语

一个面向编程 Agent 的交互与运动设计 skill，以两种模式运作。Create 模式构建具有目的性运动效果的交互组件；Audit 模式审查现有运动效果，并在带有循环演示的品牌化 HTML 报告中，逐设计师报告发现的问题，包括 AI-slop 模式。

它围绕三个视角组织建议——Emil Kowalski 关于克制与速度、Jakub Krehel 关于制作层面的打磨、Jhey Tompkins 关于趣味性实验——根据项目类型加权，而非一概适用。覆盖范围为 web 与 app UI 运动效果：HTML/CSS、React、Framer Motion、iOS/Android 转场以及设计系统动画。频率限制、依赖上下文的时长设置以及强制的 prefers-reduced-motion 处理在两种模式下都会执行。

它产出什么

在 Create 模式下构建的具有目的性运动效果的交互组件。
Audit 模式下的逐设计师审查报告。
一份包含发现问题循环演示的品牌化 HTML 报告。
一个默认以 HTML 渲染的审查报告模板，也可通过标志启用终端模式。

查看示例提示词 ↗

工作方式

01
从请求中检测模式
带有构建意味的措辞会选中 Create；audit、review、evaluate、feedback 或“这个运动效果好吗”之类的表述会选中 Audit。
02
读取匹配的工作流文件
模式检测是第 0 步，决定了后续一切——该模式对应的工作流文件将按原样执行。
03
根据上下文为三位设计师的观点加权
Emil、Jakub 和 Jhey 被视为依赖上下文的视角，而非普适规则。
04
应用频率与时长指导
首先确定交互触发的频率，然后再参考相关视角给出的时长目标。
05
为该模式输出产物
Create 返回组件；Audit 返回按设计师分类的报告，其中每项发现都会附上一张基于视觉容器模板构建的演示卡片。

02 找到适合场景

何时使用 design-motion-principles Skill

在 Claude Code 或 Codex 中使用 design-motion-principles skill 处理此类动效和视频工作。适用范围和限制见 skill 文件本身。

适合场景

生产力工具（如 Linear 或 Raycast），此时以 Emil 的克制与速度规则为主导，Jhey 仅用于新手引导。
儿童应用与教育产品，此时打磨感与愉悦感优先于生产力速度规则，Emil 仅保留给高频游戏交互。
创意作品集，由 Jakub 主导打磨，Jhey 负责创新，Emil 仅限于高频交互。
移动应用，由 Jakub 主导，Emil 辅助，Jhey 提供惊喜细节。

了解边界

网页与应用 UI 之外的动效工作——游戏引擎、Lottie、Rive 或视频——频率框架仍然适用，但特定设计师的技巧可能无法直接迁移。
明确排除以单一通用数值判断时长；未核对上下文权重就标记或限制时长的做法同样被排除。
无论项目类型如何，键盘触发的交互都完全排除在动画之外。

需要提供的信息

项目类型它决定了主要、次要与选择性权重，因此一个 SaaS 仪表盘会优先指向 Emil 而非 Jakub。
交互被触发的频率频率关卡会在添加或批准任何内容之前应用，因此答案会改变哪些内容甚至有资格被赋予动画。
动效本身及其技术栈过渡、悬停状态、微交互与进入/退出动画，涉及 React、Framer Motion、CSS 或 HTML。

03 Skill 内部

design-motion-principles Skill 为 Claude Code 和 Codex 制定的规则

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

让触发频率决定是否需要动画
每天触发数百次的高频交互不使用动画或只用瞬时过渡；罕见的交互则可以更具表现力。
始终处理 prefers-reduced-motion
该要求被明确规定为涵盖 Create 模式下生成的任何内容或 Audit 模式下审查的任何内容，没有例外。
当请求含糊不清时主动询问
像“看看这个弹窗动画”这样含糊的请求不会被凭空猜测——系统会要求用户选择 Create 或 Audit。
按项目类型重新权衡各设计师
该映射表会改变主要、次要与选择性视角；一个落地页以 Jakub 为主、Jhey 为辅，Emil 仅用于表单与导航。
以可见度作为质量测试标准
如果一个动效在每一次交互中都会引来赞叹，那它就被视为过于突出，不适合投入生产。
加载该模式要求的参考资料
Create 模式始终加载 Motion Cookbook（涵盖进入/退出、缓动、弹簧、clip-path、@property、FLIP、滚动驱动的配方）；Audit 模式加载其自身的常驻文件。

04 投入使用

在 Claude Code 或 Codex 中安装 design-motion-principles

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

将 design-motion-principles 添加到 Claude Code、Codex 或您的 Agent

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

Terminal

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles

针对 skills/design-motion-principles/SKILL.md 的通用 skills CLI 形式；该仓库可能记录了自己的路径。

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

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt

Audit the [command palette] open and close transition in our [React] app before it ships, and flag anything that reads as AI-slop motion. People use it hundreds of times a day, so tell me what should not animate at all and what should sit under 300ms. Then build the corrected version with Framer Motion and make sure it respects prefers-reduced-motion.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

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

确认动效的权重与该交互实际触发的频率相符，而不是取决于它看起来有多好。
用 200-500ms 的 Jakub 区间来衡量生产级打磨工作，而不是套用单一的全局时长。
在 Audit 模式下，按照系统化的审查清单逐项检查，而不是凭肉眼判断动画。
将发现的问题通过反清单质量关卡进行核验，该清单列出了 AI 陈词滥调式动效的分类和反模式。
对于复杂动画，检查 GPU 优化、will-change 的使用情况以及布局抖动问题。

在 OpenDesign 中，通过其 SKILL.md 链接导入 design-motion-principles：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

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

Author: Kyle Zantos
Repository: github.com/kylezantos/design-motion-principles 分支 main
Skill 文件: skills/design-motion-principles/SKILL.md 验证时已记录内容校验和；提交 4a9ca87
License: MIT 来自 LICENSE。
仓库星标数: 1,048 GitHub 快照于 2026-09-14 获取，针对整个 kylezantos/design-motion-principles 仓库。不是 design-motion-principles 的评分或使用量统计。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

第 0 步：检测模式（首先执行）根据请求的措辞判断是 Create 还是 Audit，遇到含糊情况时会主动询问。
三位设计师Emil、Jakub 和 Jhey 分别是谁，各自回答的问题，以及致敬声明。
情境到视角的映射七种项目类型对应主要、次要及选择性设计师权重。
核心原则（两种模式通用）频率关卡、时长指南、黄金法则以及不可省略的无障碍要求。
参考索引每个参考文件都配有其加载条件。
工作流索引两个工作流文件：构建组件，或审查动效并生成报告。

Skill 自身的描述

「基于 Emil Kowalski、Jakub Krehel 和 Jhey Tompkins 技术的动效和交互设计专家。两种模式 — 构建具有明确目的的动效交互组件，或审查现有动画以捕获 AI 生成的低质量动效模式（审查会生成带有循环演示的品牌化 HTML 报告）。在创建、添加、动画化或审查 UI 动效时使用：过渡、悬停状态、微交互、进入/退出动画，或任何在 React、Framer Motion、CSS 或 HTML 中的动效设计工作。提供具有上下文感知权重的每位设计师视角。」

来自 SKILL.md 的前置元数据描述。完整文件约 6,794 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 design-motion-principles Skill 的常见问题

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

我需要使用 React 吗，还是它也支持纯 CSS 和 HTML？

两者都在其覆盖范围内。该 skill 涵盖 Web 和应用界面的动效，涉及 HTML/CSS、React、Framer Motion 或 Motion、iOS/Android 过渡效果以及设计系统动画。

它如何判断是要构建内容还是审查内容？

它会从请求中读取 Create 或 Audit 的信号，当信号含糊时会主动询问。如果 AskUserQuestion 不可用，则会回退到一个纯文本问题，提供这两种模式供选择。

儿童应用会获得与仪表盘一样快速、克制的动效吗？

不会。权重取决于具体情境，因此儿童应用会更偏重 Jakub 和 Jhey 所代表的打磨与愉悦感，而不是 Emil 那种以效率为重的速度规则——在这种情境下，愉悦感被视为目标本身。

这项 skill 的背后是这三位设计师吗？

不是。这些视角是对他们公开发表的课程、文章、演讲和开源项目的提炼，而权重框架是这项 skill 自身的解读，以致敬的方式命名。

Design Motion Principles

在真实的动效与视频任务上运行 design-motion-principles。

下载 OpenDesign，从其 SKILL.md 链接导入 design-motion-principles，粘贴上面的提示词，并在结果之前阅读计划。

下载 OpenDesign 浏览所有 skills

终端

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles