design-motion-principles

design-motion-principles

目录条目 — 完整技能：kylezantos/design-motion-principles

决策树

1. 是否已安装完整技能？

   • 全局：f=~/.agents/skills/design-motion-principles/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • 项目：f=.agents/skills/design-motion-principles/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → 技能已作为 design-motion-principles 安装，调用它并继续
   • pointer → 转到第 2 步

2. 检测范围，然后安装：

   [ -e ~/.agents/skills/design-motion-principles ] && echo "global" || echo "project"
   

   全局：

   npx skills add kylezantos/design-motion-principles --skill design-motion-principles -g -y
   

   项目：

   npx skills add kylezantos/design-motion-principles --skill design-motion-principles -y
   

   Claude Code： 发送以 ! 开头的命令作为聊天消息，即可在不离开对话的情况下运行命令。

注意事项

• 许可证： MIT

安装后调用

• 技能名称：design-motion-principles
• 触发短语："add animation", "audit animation", "hover state", "enter exit animation", "motion review", "AI slop motion"

技能会根据你的请求判断模式：

你说	模式
"animate this", "add motion", "make it feel alive"	创建
"audit my animations", "review motion", "check for AI slop"	审查
不明确	技能会询问要使用哪种模式

功能

两种模式，三个视角，并根据项目背景调整权重：

模式	输出
创建	发现背景、调整视角权重，然后生成内置动效的组件（React / Framer Motion / CSS / HTML）
审查	动效差距分析和反 AI 糟粕检查清单，以带品牌风格的 HTML 报告形式呈现，包含自动循环的 CSS 演示；也可使用 --terminal 输出内联 Markdown

三个视角：

• Emil Kowalski — 克制与速度。“这真的需要动效吗？”
• Jakub Krehel — 产品级精修。“这够含蓄吗？”
• Jhey Tompkins — 创意实验。“它还能变成什么？”

这三个视角之间富有成效的张力，而非一概套用某一个视角，正是其核心。技能会读取自身的 workflows/ 和 references/ 文件夹，因此必须通过技能 CLI 安装，不能只复制 SKILL.md。

不适用场景

• 静态布局、色彩或排版工作（使用设计系统技能，例如 ui-ux-pro-max）
• 只需要 Emil Kowalski 的单一视角指导（使用 emilkowalski-skill）
• 需要 JavaScript 状态的交互式手势驱动动画（使用 framer-motion-skills）