What makes Apple Design notable?

987 downloads. Trust evidence available

How should Apple Design be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Apple Design

苹果设计原则与流体交互动效知识库，源自 WWDC 设计演讲，为 Web 平台翻译的 17 条交互设计原则 Skill: Apple Design Owner: cindypapa Summary: 苹果设计原则与流体交互动效知识库，源自 WWDC 设计演讲，为 Web 平台翻译的 17 条交互设计原则 Tags: apple:1.0.1, design:1.0.1, interaction:1.0.1, latest:1.0.1, motion:1.0.1, ui:1.0.1, ux:1.0.1 Version history: v1.0.1 | 2026-07-17T03:59:23.319Z | user OpenClaw edition: 17 Apple interaction design principles converted from Emil Kowalski's Claude Code skill. v1.0.0 | 2026-07-17T03:51:58.480Z | auto Apple-design v1.

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

987

Updated

Oct 11, 2026

Version

1.0.1

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 987 downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 987 downloadsadoption · observed Oct 11, 2026
Latest release: 1.0.1release · observed Jul 17, 2026
Handshake status: UNKNOWNsecurity

What changed

Newest first. Only changes that point at a source are listed.

Release 1.0.1release
OpenClaw edition: 17 Apple interaction design principles converted from Emil Kowalski's Claude Code skill.
Observed Jul 17, 2026 · source

Install and run

Setup complexity: low.

clawhub skill install s171tsgfz5gnz75p6mgabptb6x8416qw:apple-design

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-cindypapa-apple-design/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

26,772 characters of source documentation, loaded on request.

Extracted files

3 files captured from the source.

SKILL.md

---
name: apple-design
description: 苹果设计原则与流体交互动效知识库，源自 WWDC 设计演讲，为 Web 平台翻译的 17 条交互设计原则
version: 1.0.1
---

# Apple Design — 苹果交互设计原则

苹果的界面设计与流体动效方法论，从 WWDC 设计演讲（主要是 WWDC 2018 Designing Fluid Interfaces）浓缩提炼，翻译为 Web 平台（CSS、Pointer Events、requestAnimationFrame、Motion/Framer Motion）。

## 触发条件

当以下任一情况出现时，加载本 skill：
- 构建或审查手势驱动的 UI（拖拽、滑动、Sheet、轮播）
- 需要设计弹簧动画、惯性动画、可中断过渡
- 讨论毛玻璃效果、半透明材质、景深层次
- 排版设计（字号、字距、行高）
- 无障碍设计（减弱动态效果、降低透明度、高对比度）
- 用户提到「苹果风格」「iOS 风格」「流体界面」「Apple Design」等关键词
- 审查现有 UI 的交互体验

## 核心哲学

界面流畅 = 行为像物理世界：即时响应、连续运动、携带动量、边界受阻、可在运动中重定向。

苹果设计服务四大人性需求：**安全感/可预测性、理解、成就、愉悦**。每条规则都服务其中之一。

核心理念：**动效从当前屏幕值开始，继承用户速度，向前投影动量，并在任意瞬间可被抓住并反转。弹簧是实现这一切的工具，因为它们天然可中断且感知速度。**

---

## 17 条交互设计原则

### 原则 1：即时反馈 (Immediate Response)

**响应是基础，延迟一旦出现，直接操控感就「断崖式下跌」。**

- **在 pointer-down 时响应，而非 release**。按钮在被按下的瞬间就应高亮。等到 click/touch-up 才给反馈会感觉「死气沉沉」。
- **警惕每一毫秒延迟**。审查 debounce、人工定时器、transition 等待、~300ms 点击延迟。输入路径上任何非必要的延迟都是退化。
- **反馈在交互过程中必须是连续的**，而非仅在结束时。拖拽、滑块、抽屉 —— 全程 1:1 跟随指针更新 UI。

```css
/* 反馈在按下时生效，瞬间 */
.button:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}
```

> ⚠️ 对照检查：按钮 hover 和 active 状态是否有明显区分？拖拽过程中 UI 是否跟随手指？是否有不必要的 debounce 或 setTimeout？

### 原则 2：1:1 跟随 (Direct Manipulation)

**「触摸和内容应该一起移动。」**

- 拖拽时元素必须紧贴手指，并**尊重抓取时的偏移量**。抓取时跳到元素中心会立刻破坏沉浸感。
- 使用 Pointer Events + `setPointerCapture`，确保手指移出元素边界后仍可追踪。
- 追踪短期的速度/位置历史（最近几次 pointermove 事件），而不仅是当前点 —— 松开时需要速度。

```javascript
el.addEventListener('pointerdown', (e) => {
  el.setPointerCapture(e.pointerId);
  const grabOffset = e.clientY - el.getBoundingClientRect().top;
  // 追踪位置 + 时间戳历史，用于计算速度
});
```

> ⚠️ 对照检查：拖拽时元素是否始终在手指下方？是否保留了抓取偏移量？是否在手指移出元素边界后仍能继续拖拽？

### 原则 3：可中断动画 (Interruptible Animation)

**「思考和手势是并行的。」**

每个动画必须在任意时刻都可中断、可重定向。用户必须能在动画中途抓住移动中的元素并反转方向，无需等待动画完成。

- **绝不在过渡期间锁定输入**。
- **始终从 presentation value（当前屏幕值）开始动画**，而非 target value。中断时读取元素实时的屏幕 transform，从那里启动新动画。从逻辑值/target 值开始会产生可见的跳跃。
- **手势驱动的东西避免 CSS transition 和 @keyframes** —— 它们无法在运动中被平滑抓住并反转。弹簧默认从当前值开始动画，正合中断所需。
- 手势反转时**融合速度**，不要硬切。在反转点用一个动画替换另一个会产生速度断层「撞墙」。选择能在重新设定目标时继承速度的弹簧库。
- **将 2D 运动分解为独立的 X 和 Y 弹簧**。对 2D 距离使用单个弹簧会在 X 和 Y 速度不同时失衡。

> 弹簧是一个可对话的动画系统：新输入只是改变目标，运动保持连续。任何用户可触摸的东西都应该用弹簧。

> ⚠️ 对照检查：动画进行中用户能否打断？打断后动画是否从当前状态平滑过渡？CSS transition 是否被误用于手势驱动的交互？

### 原则 4：弹簧参数 (Spring Parameters)

苹果用两个设计师友好参数替代了物理三元组（mass/stiffness/damping）：

- **Damping ratio（阻尼比）**：控制过冲。1.0 = 临界阻尼，无弹跳，平滑停靠。< 1.0 = 过冲振荡，越小越弹。
- **Response（响应时间）**：数值以秒为单位，越小越快。这不是「时长」—— 弹簧没有固定时长，停靠时间由参数共同决定。

**默认策略**：
- 大多数 UI 使用 damping 1.0（临界阻尼）—— 优雅且不分散注意力。
- 仅在手势自带动量时（快速滑动、投掷、拖拽释放）才加弹跳（damping ~0.8）。菜单淡入时过冲是错的；卡片被弹飞时过冲是对的。

**苹果实际参数表**：

| 交互类型 | Damping | Response |
|---------|---------|----------|
| 移动/重定位（如画中画） | 1.0 | 0.4 |
| 旋转 | 0.8 | 0.4 |
| 抽屉/Sheet | 0.8 | 0.3 |

**Web 映射（Motion / Framer Motion）**：

```javascript
import { animate } from 'motion';

// 临界阻尼默认值（无过冲）
animate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 });

// 动量交互 — 微弹跳，仅因为前面有快速滑动
animate(el, { y: target }, { type: 'spring', bounce: 0.2, durati

_meta.json

{
  "ownerId": "kn743vfjd6cp88q16gxc32qhk182rchq",
  "slug": "apple-design",
  "version": "1.0.1",
  "publishedAt": 1784260763319
}

skill-card.md

## Description:

Apple Design provides Apple-inspired UI, motion, typography, accessibility, and interaction-review guidance for web interfaces.

This skill is ready for commercial/non-commercial use.

## Publisher:

[cindypapa](https://clawhub.ai/user/cindypapa)

### License/Terms of Use:

MIT-0

## Use Case:

Designers, developers, and UI reviewers use this skill to apply Apple-style interaction principles to web interfaces, especially gesture-driven components, fluid motion, translucent materials, typography, and accessibility behavior.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: The skill may be invoked for broad UI, typography, accessibility, or interaction-review requests where Apple-style guidance is not the user's intended design direction.

Mitigation: Confirm that Apple-inspired interaction guidance is appropriate before applying the skill broadly, or narrow trigger wording during deployment.

## Reference(s):

- [ClawHub skill page](https://clawhub.ai/cindypapa/skills/apple-design)
- [Publisher profile](https://clawhub.ai/user/cindypapa)

## Skill Output:

**Output Type(s):** [text, markdown, code, guidance]

**Output Format:** [Markdown with CSS and JavaScript code examples]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [Documentation-only guidance; no code execution, persistence, credential access, or hidden data movement is reported by the security evidence.]

## Skill Version(s):

1.0.1 (source: frontmatter and server release evidence)

## Ethical Considerations:

Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.

Github ReposUpdated 3d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW

Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular