Apple Design Skill 使用教程：让 Codex 学会苹果式界面与流畅动效

你让 Codex 写一个底部抽屉，它能给你圆角、阴影、毛玻璃，看起来"很像苹果"。可真机一滑——抽屉和手指脱节，松手不跟速度，关到一半再拉却要从头开始。页面没坏，就是"不对劲"。这种不对劲累积起来，就是大家嘴里的"AI 网页味"。

Apple Design Skill 想解决的正是这个。它不是新模型，也不是 Apple 官方产品，而是一份叫 SKILL.md 的规则文件，由 Vercel、Linear 前设计工程师 Emil Kowalski 整理开源。装进去之后，Codex、Claude Code 这类编码智能体在设计页面、写手势交互或审动画时，多了一套可以执行的判断标准。我通读了一遍规则和源码说明，下面把它讲清楚——包括它真能做什么、做不了什么。

它到底是什么，不是什么

Skill 可以理解为写给编程智能体的专业工作手册。安装工具（Vercel Labs 的 Skills CLI）会把规则放进 Codex、Claude Code 能发现的目录，处理相关任务时智能体就读取这份文件，按里面的原则生成代码、检查交互或提修改建议。

它和普通提示词的区别很关键：提示词通常只描述结果，比如"做得像苹果一点"；Skill 把判断标准写了下来——什么时候该反馈、拖动怎么跟手、动画被打断后从哪继续、速度怎么传给弹簧、开了"减少动态效果"后又该怎么降级。

但这里有三个边界必须说清楚，免得你期待错东西：

• 不是 Apple 官方规范。 它是社区作者把 WWDC 演讲和人机界面指南"翻译"成 CSS、Pointer Events、requestAnimationFrame() 的 Web 实践。参考价值高，但属于社区整理，不会自动获得 Apple 的设计、商标或产品授权。
• 是更大技能包里的一个。 emilkowalski/skills 仓库其实有 5 个 Skill：emil-design-eng（设计判断手册）、review-animations（按标准审查）、improve-animations（扫全库给分级修复）、animation-vocabulary（统一动效术语）、apple-design（本文主角）。本文只拆 apple-design，但你装整个包更划算。
• 不会动你源码。 它只往智能体的上下文里塞规则，不碰你的代码库结构，也不替你做架构决定。

为什么 AI 界面总"能用但不顺手"

AI 很容易生成一张看起来完整的页面：导航、卡片、按钮、阴影、圆角都不缺。真正的问题在使用时才冒头——按钮要等松手才有反馈，抽屉拖动时与手指脱节，关闭动画还没结束就不能再操作，弹窗一律用固定时长淡入，毛玻璃层层叠加后文字发糊。

这些问题换一套配色解决不了。它们属于交互行为、运动连续性、渲染细节。Apple Design Skill 的价值，恰好在于把"做得高级"这句说不清的话，改写成前端能执行的规则。换句话说：它补的是 AI 缺的那块"品味"，不是补语法。

17 条原则在解决什么

官方 Skill 列出 17 项原则。下面我按"它解决哪类痛点"分成几组说，而不是逐字搬。完整原文在仓库 SKILL.md，建议装完直接读。

第一组：反馈要"即时"

• 立即响应：按下或触碰控件那一刻就给视觉反馈，不要等 click 完成，更不要人为加延时。连续手势要持续响应，而不是防抖后断断续续。
• 直接操控：拖动物体尽量 1:1 跟随，用 Pointer Events、setPointerCapture() 和抓取偏移，避免元素突然跳到指针中心。
• 认真处理手势细节：轻触、拖动、滚动可能从同一次按下开始。要设合理拖动阈值、点击容差和命中范围，尽量并行判断。

第二组：运动要"连续"

• 动画可打断：用户在动画中途反向操作时，从屏幕上当前看到的位置继续，不跳回起点、不等旧动画播完。
• 用运动行为代替固定动画：手势驱动的位移适合弹簧，而不是写死 200ms 或 300ms。
• 继承手势速度：松手瞬间元素不该突然丢失速度，拖动速度要传给后续弹簧。
• 预测惯性终点：按释放速度和减速率估算可能停在哪，再选吸附点。轮播、卡片堆叠、滑动删除都靠这步。

第三组：空间要"讲得通"

• 保持空间一致：元素从哪出现，就沿可理解路径回到哪。菜单由按钮展开时，缩放中心和收起方向都应和触发按钮有关。
• 提前暗示方向：过渡的中间画面要让用户知道动作会带界面去哪。
• 边界用橡皮筋阻尼：拖过界不立刻锁死也不无限移，越远阻力越大。

第四组：材质与无障碍

• 用材质表达层级：半透明、模糊、阴影、遮罩要说明前后关系，多个浅色玻璃层不宜无节制叠加。
• 视觉/声音/触觉同步：反馈要有原因且同时发生，关键事件才加音效或震动。
• 尊重无障碍偏好：检测 prefers-reduced-motion、prefers-contrast，减少动态不是删光动画，而是换成更稳的反馈。
• 按字号处理字体：大字、正文、小标签不能只改字号，字距行高字重也要随尺寸变。

剩下几条偏"设计哲学"：目的、主动权、责任、熟悉感、灵活性、简单、工艺与愉悦；以及"用真实交互验证"——高保真静态图暴露不出手势和过渡问题，要尽早做可操作原型，在真机上慢放逐帧检查。

最值钱的一条：动画可打断

很多"苹果风"页面把力气全花在圆角、模糊、回弹上，结果只是视觉模仿。真正拉开体验差距的是连续性。

举例子：一个底部抽屉正在关闭，用户又向上拖。好的实现会读取抽屉当前屏幕位置，立刻交给新拖动手势，关闭速度平滑过渡到向上速度。差的实现通常两种：锁住输入等动画结束；或者中断后把抽屉跳回某个逻辑位置。两种都让人觉得界面"没跟上手"。

这也是 Skill 不建议在手势场景完全依赖 CSS Keyframes 的原因。关键帧适合预先确定、无需中途接管的"演出动画"；抽屉、轮播、拖拽卡片这类交互，需要读取当前显示值、速度和新目标，通常更适合 requestAnimationFrame() 或 Motion / Framer Motion 这类支持弹簧与手势的工具。

速度、惯性与弹簧怎么接

Skill 的思路不是"松手后播一个回弹"，而是把手势结束看作运动的延续：先记录最近一段指针历史算出释放速度，再把速度交给弹簧。

relativeVelocity = gestureVelocity / (target - current)

要预测惯性距离，按减速率估算：

projectedDistance =
  (initialVelocity / 1000) * decelerationRate
  / (1 - decelerationRate)

Skill 给的常用减速率约 0.998，要更快停下可从 0.99 附近测起；弹簧阻尼比通常从 1.0 起步，带明显惯性的手势可试约 0.8。这些数字不是固定答案——组件尺寸、输入设备、帧率都影响手感，仍要在真机调。我自己在几个项目里踩过的坑是：桌面浏览器顺滑，手机上一塌糊涂，根因就是没在触屏上验证过速度采样。

毛玻璃只是材质，不是层级

这份 Skill 对半透明界面给的处理相当克制：用 backdrop-filter 时，要让模糊强度、背景明暗、阴影共同表达层级；面积越大、越靠近用户的表面，通常要更明确的分离。阻塞式模态框可以配遮罩，非阻塞侧栏不该把整个背景压暗。

连续叠加浅色半透明层是高频错误。它让背景色不断混合、边界越来越糊、文字对比度失控。更稳的做法是限制玻璃层数量，并为不支持透明、开启减少透明度或要更高对比度的用户准备实色回退。

一行命令装进 Codex

安装前需要 Node.js 18+。用 Vercel Labs 的 Skills CLI，默认项目级安装便于团队复现、也不影响其他项目。

只装 apple-design 并给 Codex：

npx skills@latest add emilkowalski/skills \
  --skill apple-design \
  -a codex

同时给 Codex 和 Claude Code：

npx skills@latest add emilkowalski/skills \
  --skill apple-design \
  -a codex \
  -a claude-code

想在本机所有项目用，加 -g：

npx skills@latest add emilkowalski/skills \
  --skill apple-design \
  -g \
  -a codex

装完用 npx skills list 确认是否被识别；更新用 npx skills update apple-design。项目级安装时，Codex 通常从 .agents/skills/ 发现 Skill，Claude Code 用 .claude/skills/。不同版本客户端和 CLI 可能调整目录或链接方式，最终以 npx skills list 输出和当前客户端文档为准。若全局装了不生效，先改项目级安装排除路径问题。

怎么在 Codex 里真正用起来

安装只是让智能体"有机会读"规则。任务描述仍要明确组件、输入方式、技术栈、验收条件。只说"做成苹果风格"，模型大概率又把注意力放圆角和模糊上。

从零实现一个交互组件

使用 apple-design skill 实现移动端底部抽屉。
技术栈为 React 和 Motion。

要求：
- pointer down 后立即反馈；
- 拖动与指针保持 1:1；
- 松手时把纵向速度传给弹簧；
- 打开和关闭动画均可随时打断；
- 支持 prefers-reduced-motion；
- 给出 Playwright 交互测试。

审查现有页面

使用 apple-design skill 审查当前项目中的
Modal、Sheet 和 Carousel。

先按严重程度列出问题，重点检查：
输入延迟、动画可打断性、速度衔接、
材质层级、文字对比度和减少动态效果。
确认问题后再修改代码，并说明验证方法。

排查"拖动很假"的原因

使用 apple-design skill 分析这个卡片拖拽组件。
释放后有明显脱节，请检查速度采样、
momentum projection、目标吸附和弹簧初速度。
不要只调整 duration。

这类提示把规则落到具体文件和可验证行为上。若项目已有设计系统，还应明确要求保留现有颜色、字号、组件 API 和无障碍语义，避免智能体为了"统一风格"重写整个界面。

它最适合哪、解决不了哪

适合：需要拖拽/吸附/滑动切换的移动端 Web 页；底部抽屉、模态框、轮播、卡片堆叠等连续交互组件；已有页面的动效与交互审查；设计稿转代码后对手感/层级/无障碍做第二轮修整；团队缺专职动效设计师、需要一套讨论和验收词汇。

要谨慎：普通后台表格、内容管理页、高频录入工具——它们更看重信息密度、键盘效率和稳定性，过多弹簧、玻璃材质和空间转场反而拖慢操作。Skill 提供的是判断框架，不是要求所有页面都做同一种视觉。

我的判断

Apple Design Skill 最有用的地方，不是让 Codex 生成一张"像苹果官网"的页面，而是给设计和前端之间补上一套可执行的共同语言。以前你只能说"这个抽屉不跟手"，现在能继续追问：反馈发生在按下时吗？拖动 1:1 吗？松手速度交给弹簧了吗？动画被反向操作时从当前显示值继续吗？

把问题问到这一层，AI 才更可能改对代码。至于毛玻璃、圆角、回弹，只是最后看到的表象。把它当"审查清单 + 设计词汇表"用，而不是"一键变高级"的魔法按钮——这大概是这个项目最实在的打开方式。