这是什么
从 Apple WWDC 设计演讲（主要是 Designing Fluid Interfaces）提炼的知识，对应到 CSS、Pointer Events 和弹性动画库，覆盖响应、可打断、惯性、材质、字体和无障碍。
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible tran
它对设计意味着什么
- 反馈在 pointer-down 就触发，按下去的元素不再毫无回应。
- 动画从屏幕当前实时值起步，打断时不会突然跳一下。
- 快速滑动会预测落点，甩出去的方向就是它停下的地方。
包含哪些内容
- Response
- Direct manipulation
- Interruptibility
- Momentum projection
- Materials and depth
- Reduced motion and accessibility
如何安装
apple-design
-
克隆这个仓库。
git clone https://github.com/emilkowalski/skills -
把 Codex 指向这个 Skill 文件。
skills/apple-design/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
让 Codex 做底部面板、抽屉或拖拽交互。
-
它用 pointer capture 做 1:1 跟手，并记录速度历史。
-
松手时把速度交给弹性动画，用内置的阻尼参数收尾。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。