apple-design

Name: apple-design
Author: gethamster

github.com/gethamster设计与 UI3365 次安装5 周前更新

代码仓库

关于 apple-design

apple-design 是一项面向界面设计的技能，将 Apple WWDC 动效原则转化为 Web 平台实践，重点说明如何用弹簧动画实现可中断、响应速度的交互。

主要功能

01将 WWDC 界面原则转化为 Web 实践
02围绕当前画面值驱动动画
03继承并投射用户操作速度
04支持随时抓取、反向交互
05使用弹簧实现可中断动效

适用场景

01设计响应拖动的界面动效
02实现可随时反向的交互
03在 CSS 与 Pointer Events 中应用动效原则

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/gethamster/skills --skill apple-design

安装后在 Claude Code 中输入/apple-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

sections/

1-response-kill-latency.md

10-gesture-design-details-the-feel-checklist.md

11-frame-level-smoothness.md

12-materials-depth-translucency-conveys-hierarchy.md

13-multimodal-feedback-motion-sound-haptics.md

14-reduced-motion-accessibility.md

15-typography-optical-sizing-tracking-leading.md

16-design-foundations-the-eight-principles.md

17-process.md

2-direct-manipulation-1-1-tracking.md

3-interruptibility-the-single-most-important-principle.md

4-behavior-over-animation-use-springs.md

5-velocity-handoff-the-seam-between-drag-and-animation.md

6-momentum-projection-animate-to-where-the-gesture-is-going.md

7-spatial-consistency-symmetric-paths-anchored-origins.md

8-hint-in-the-direction-of-the-gesture.md

9-rubber-banding-soft-boundaries.md

quick-reference.md

the-core-idea.md

详细介绍

Apple Design

Apple 如何构建界面，让它不再像一台电脑，而是开始如同你自身的延伸。这些知识源自 Apple 的 WWDC 设计演讲，主要是 Designing Fluid Interfaces（WWDC 2018），并将其提炼、转化为适用于 Web 平台的内容（CSS、Pointer Events、requestAnimationFrame，以及 Motion/Framer Motion 等弹簧动画库）。

贯穿始终的核心理念是：当动画从屏幕上当前的值开始，继承用户的速度，将动量投射到后续运动中，并且能够随时被抓住和反向操作时，界面就会显得鲜活。 弹簧动画是实现这一切的工具，因为它本身就支持随时中断并感知速度。

支持 Markdown

登录后评论