{"id":"616d6f60-92eb-4fe2-8072-1d0d8cf6825c","entityType":"agent","slug":"clawhub-cindypapa-apple-design","name":"Apple Design","canonicalUrl":"https://www.xpersona.co/agent/clawhub-cindypapa-apple-design","canonicalPath":"/agent/clawhub-cindypapa-apple-design","generatedAt":"2026-10-12T23:32:40.292Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T22:04:04.329Z","emptyReason":null},"description":"苹果设计原则与流体交互动效知识库，源自 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.","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 987 downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s171tsgfz5gnz75p6mgabptb6x8416qw:apple-design","sourceUrl":"https://clawhub.ai/cindypapa/apple-design","homepage":"https://clawhub.ai/cindypapa/skills/apple-design","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/cindypapa/apple-design","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/cindypapa/skills/apple-design","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"苹果设计原则与流体交互动效知识库，源自 WWDC 设计演讲，为 Web 平台翻译的 17 条交互设计原则 Skill: Apple Design Owner: cindypapa Summary: 苹果设计原则与流体交互动效知识库，源自 WWDC 设计演讲，为 Web 平台翻译的 17 条交互设计原则 Tags: ap"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T22:04:04.329Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T22:04:04.329Z","emptyReason":null},"stars":null,"forks":null,"downloads":987,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"1.0.1","tractionLabel":"987 downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T22:04:04.324Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T22:04:04.329Z","lastCrawledAt":"2026-10-11T22:04:04.324Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T22:04:04.324Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.1","createdAt":"2026-07-17T03:59:23.319Z","changelog":"OpenClaw edition: 17 Apple interaction design principles converted from Emil Kowalski's Claude Code skill.","fileCount":3,"zipByteSize":12259},{"version":"1.0.0","createdAt":"2026-07-17T03:51:58.480Z","changelog":"Apple-design v1.0.0 — 初始发布 - 精炼自 WWDC 演讲的 17 条苹果交互设计原则，覆盖流体动画、手势、材质、排版等核心理念 - 针对 Web 平台，详细映射 CSS、Pointer Events、Framer Motion 等实现方式 - 包含每条原则的技术要点和对照检查，辅助构建“苹果风格”UI - 涉及动效参数、惯性动画、弹簧模型、多感官反馈与无障碍支持等最佳实践","fileCount":3,"zipByteSize":12217}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s171tsgfz5gnz75p6mgabptb6x8416qw:apple-design","setupComplexity":"low","setupSteps":["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":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cindypapa-apple-design/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cindypapa-apple-design/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cindypapa-apple-design/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cindypapa-apple-design/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cindypapa-apple-design/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cindypapa-apple-design/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-12T23:32:40.291Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cindypapa-apple-design/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cindypapa-apple-design/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cindypapa-apple-design/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cindypapa-apple-design/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T22:04:04.329Z","emptyReason":null},"readme":"Skill: Apple Design\n\nOwner: cindypapa\n\nSummary: 苹果设计原则与流体交互动效知识库，源自 WWDC 设计演讲，为 Web 平台翻译的 17 条交互设计原则\n\nTags: 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\n\nVersion history:\n\nv1.0.1 | 2026-07-17T03:59:23.319Z | user\n\nOpenClaw edition: 17 Apple interaction design principles converted from Emil Kowalski's Claude Code skill.\n\nv1.0.0 | 2026-07-17T03:51:58.480Z | auto\n\nApple-design v1.0.0 — 初始发布\n\n- 精炼自 WWDC 演讲的 17 条苹果交互设计原则，覆盖流体动画、手势、材质、排版等核心理念\n- 针对 Web 平台，详细映射 CSS、Pointer Events、Framer Motion 等实现方式\n- 包含每条原则的技术要点和对照检查，辅助构建“苹果风格”UI\n- 涉及动效参数、惯性动画、弹簧模型、多感官反馈与无障碍支持等最佳实践\n\nArchive index:\n\nArchive v1.0.1: 3 files, 12259 bytes\n\nFiles: skill-card.md (1805b), SKILL.md (22069b), _meta.json (131b)\n\nFile v1.0.1:SKILL.md\n\n---\nname: apple-design\ndescription: 苹果设计原则与流体交互动效知识库，源自 WWDC 设计演讲，为 Web 平台翻译的 17 条交互设计原则\nversion: 1.0.1\n---\n\n# Apple Design — 苹果交互设计原则\n\n苹果的界面设计与流体动效方法论，从 WWDC 设计演讲（主要是 WWDC 2018 Designing Fluid Interfaces）浓缩提炼，翻译为 Web 平台（CSS、Pointer Events、requestAnimationFrame、Motion/Framer Motion）。\n\n## 触发条件\n\n当以下任一情况出现时，加载本 skill：\n- 构建或审查手势驱动的 UI（拖拽、滑动、Sheet、轮播）\n- 需要设计弹簧动画、惯性动画、可中断过渡\n- 讨论毛玻璃效果、半透明材质、景深层次\n- 排版设计（字号、字距、行高）\n- 无障碍设计（减弱动态效果、降低透明度、高对比度）\n- 用户提到「苹果风格」「iOS 风格」「流体界面」「Apple Design」等关键词\n- 审查现有 UI 的交互体验\n\n## 核心哲学\n\n界面流畅 = 行为像物理世界：即时响应、连续运动、携带动量、边界受阻、可在运动中重定向。\n\n苹果设计服务四大人性需求：**安全感/可预测性、理解、成就、愉悦**。每条规则都服务其中之一。\n\n核心理念：**动效从当前屏幕值开始，继承用户速度，向前投影动量，并在任意瞬间可被抓住并反转。弹簧是实现这一切的工具，因为它们天然可中断且感知速度。**\n\n---\n\n## 17 条交互设计原则\n\n### 原则 1：即时反馈 (Immediate Response)\n\n**响应是基础，延迟一旦出现，直接操控感就「断崖式下跌」。**\n\n- **在 pointer-down 时响应，而非 release**。按钮在被按下的瞬间就应高亮。等到 click/touch-up 才给反馈会感觉「死气沉沉」。\n- **警惕每一毫秒延迟**。审查 debounce、人工定时器、transition 等待、~300ms 点击延迟。输入路径上任何非必要的延迟都是退化。\n- **反馈在交互过程中必须是连续的**，而非仅在结束时。拖拽、滑块、抽屉 —— 全程 1:1 跟随指针更新 UI。\n\n```css\n/* 反馈在按下时生效，瞬间 */\n.button:active {\n transform: scale(0.97);\n transition: transform 100ms ease-out;\n}\n```\n\n> ⚠️ 对照检查：按钮 hover 和 active 状态是否有明显区分？拖拽过程中 UI 是否跟随手指？是否有不必要的 debounce 或 setTimeout？\n\n### 原则 2：1:1 跟随 (Direct Manipulation)\n\n**「触摸和内容应该一起移动。」**\n\n- 拖拽时元素必须紧贴手指，并**尊重抓取时的偏移量**。抓取时跳到元素中心会立刻破坏沉浸感。\n- 使用 Pointer Events + `setPointerCapture`，确保手指移出元素边界后仍可追踪。\n- 追踪短期的速度/位置历史（最近几次 pointermove 事件），而不仅是当前点 —— 松开时需要速度。\n\n```javascript\nel.addEventListener('pointerdown', (e) => {\n el.setPointerCapture(e.pointerId);\n const grabOffset = e.clientY - el.getBoundingClientRect().top;\n // 追踪位置 + 时间戳历史，用于计算速度\n});\n```\n\n> ⚠️ 对照检查：拖拽时元素是否始终在手指下方？是否保留了抓取偏移量？是否在手指移出元素边界后仍能继续拖拽？\n\n### 原则 3：可中断动画 (Interruptible Animation)\n\n**「思考和手势是并行的。」**\n\n每个动画必须在任意时刻都可中断、可重定向。用户必须能在动画中途抓住移动中的元素并反转方向，无需等待动画完成。\n\n- **绝不在过渡期间锁定输入**。\n- **始终从 presentation value（当前屏幕值）开始动画**，而非 target value。中断时读取元素实时的屏幕 transform，从那里启动新动画。从逻辑值/target 值开始会产生可见的跳跃。\n- **手势驱动的东西避免 CSS transition 和 @keyframes** —— 它们无法在运动中被平滑抓住并反转。弹簧默认从当前值开始动画，正合中断所需。\n- 手势反转时**融合速度**，不要硬切。在反转点用一个动画替换另一个会产生速度断层「撞墙」。选择能在重新设定目标时继承速度的弹簧库。\n- **将 2D 运动分解为独立的 X 和 Y 弹簧**。对 2D 距离使用单个弹簧会在 X 和 Y 速度不同时失衡。\n\n> 弹簧是一个可对话的动画系统：新输入只是改变目标，运动保持连续。任何用户可触摸的东西都应该用弹簧。\n\n> ⚠️ 对照检查：动画进行中用户能否打断？打断后动画是否从当前状态平滑过渡？CSS transition 是否被误用于手势驱动的交互？\n\n### 原则 4：弹簧参数 (Spring Parameters)\n\n苹果用两个设计师友好参数替代了物理三元组（mass/stiffness/damping）：\n\n- **Damping ratio（阻尼比）**：控制过冲。1.0 = 临界阻尼，无弹跳，平滑停靠。< 1.0 = 过冲振荡，越小越弹。\n- **Response（响应时间）**：数值以秒为单位，越小越快。这不是「时长」—— 弹簧没有固定时长，停靠时间由参数共同决定。\n\n**默认策略**：\n- 大多数 UI 使用 damping 1.0（临界阻尼）—— 优雅且不分散注意力。\n- 仅在手势自带动量时（快速滑动、投掷、拖拽释放）才加弹跳（damping ~0.8）。菜单淡入时过冲是错的；卡片被弹飞时过冲是对的。\n\n**苹果实际参数表**：\n\n| 交互类型 | Damping | Response |\n|---------|---------|----------|\n| 移动/重定位（如画中画） | 1.0 | 0.4 |\n| 旋转 | 0.8 | 0.4 |\n| 抽屉/Sheet | 0.8 | 0.3 |\n\n**Web 映射（Motion / Framer Motion）**：\n\n```javascript\nimport { animate } from 'motion';\n\n// 临界阻尼默认值（无过冲）\nanimate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 });\n\n// 动量交互 — 微弹跳，仅因为前面有快速滑动\nanimate(el, { y: target }, { type: 'spring', bounce: 0.2, duration: 0.4 });\n```\n\n> ⚠️ 对照检查：静止出现/消失的元素是否误加了弹跳？菜单/弹窗动画是否用了 bounce？用户手势结束后的动画是否继承了动量？\n\n### 原则 5：速度继承 (Velocity Handoff)\n\n手势结束时，动画必须以手指的精确速度继续，**拖拽和动画之间不能有可见的接缝**。这是「流畅」与「还行」的最大分水岭。\n\n- 将指针的释放速度作为弹簧的**初始速度**传入。\n- 某些弹簧 API 需要相对速度 —— 用剩余距离归一化：`relativeVelocity = gestureVelocity / (targetValue − currentValue)`\n- 例：元素在 y=50，目标 y=150（剩余 100px），手指移动 50px/s → 初始弹簧速度 = 50/100 = 0.5。\n- Framer Motion / Motion 直接接受绝对 px/s 速度（velocity 选项），通常直接传原始值。\n\n```javascript\n// 拖拽结束时，把手势速度传给弹簧\nanimate(el, { y: targetY }, {\n type: 'spring',\n bounce: 0.2,\n duration: 0.4,\n velocity: releaseVelocity // px/s\n});\n```\n\n> ⚠️ 对照检查：拖拽松开后元素是否平滑过渡到目标？还是突然变速？手势速度和动画速度之间是否有「接缝」？\n\n### 原则 6：动量投影 (Momentum Projection)\n\n**「小输入，大输出。」**\n\n不要从释放点直接吸附到最近的边界。用速度投影停靠位置——就像滚动的减速过程一样——然后吸附到投影点最近的目标。\n\n苹果的精确投影函数（来自 Designing Fluid Interfaces 示例代码）：\n\n```javascript\n// decelerationRate ≈ 0.998（正常滚动感）；0.99（更快吸附）\nfunction project(initialVelocity /* px/s */, decelerationRate = 0.998) {\n return (initialVelocity / 1000) * decelerationRate / (1 - decelerationRate);\n}\n\nconst projectedEndpoint = currentPosition + project(releaseVelocity);\nconst target = nearestSnapPoint(projectedEndpoint); // 从投影中选择目标\nanimateSpringTo(target, { velocity: releaseVelocity }); // 然后交棒速度（原则5）\n```\n\n> ⚠️ 注意：物理课本的 v²/(2·decel) 不是苹果用的 —— 用上面的指数衰减形式。这是好的底部 Sheet 和轮播（Vaul、Embla）的标准行为。\n\n> ⚠️ 对照检查：轮播/Sheet 滑动后停靠的位置是最近的边界还是动量投影后的边界？用户轻轻滑动和用力滑动是否产生不同的停靠点？\n\n### 原则 7：空间一致性 (Spatial Consistency)\n\n**「如果某物从某个方向消失，我们期望它从那里出现。」**\n\n- **进入和退出沿同一路径**。从右侧滑入的面板必须从右侧消失。右进/下出让人感觉断裂和困惑。\n- **锚定交互到源头**。菜单、弹出框、Sheet 应从触发它的元素展开——设置 `transform-origin` 到触发器，使按钮与内容的空间关系一目了然。\n- **镜像缓动曲线**：可逆过渡的入出缓冲互为反转（进出使用互为反转的 cubic-bézier 控制点）。\n\n> ⚠️ 对照检查：弹窗的出现和消失方向是否一致？菜单是否从触发按钮的位置展开？过渡的缓入缓出是否对称？\n\n### 原则 8：轨迹预判 (Trajectory Telegraph)\n\n人类从轨迹预判终点。中间帧的运动应该暗示物体将去向何方——控制中心模块「向上向外朝手指增长」。让中间帧指向结果，而非盲目地线性插值。\n\n> ⚠️ 对照检查：动画的中间状态是否暗示了最终位置？元素运动轨迹是否自然？还是只是 A→B 的线性插值？\n\n### 原则 9：橡皮筋边界 (Rubber-banding)\n\n到达边界时，应逐渐增加阻力而非硬停止。硬停读作「冻结」；连续阻力读作「响应了，但没更多内容了」。阻尼随拖拽超出边界的距离增加。\n\n```javascript\n// 超出越多，跟随越少 —— 真实物体在停止前会减缓\nfunction rubberband(overshoot, dimension, constant = 0.55) {\n return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));\n}\n```\n\n> ⚠️ 对照检查：列表/页面滚动到边界时是否有弹性效果？还是硬生生停在边界？Sheet 拖拽超出最大高度时是否有阻尼？\n\n### 原则 10：手势识别 (Gesture Recognition)\n\n- **Tap**：touch-down 时高亮（瞬间），touch-up 时提交。在目标周围添加 ~10px 的滞后/触摸内边距，允许滑开取消和滑回恢复。\n- **Drag/swipe**：在确认方向前要求小的移动阈值（滞后 ~10px），确认后 1:1 追踪。\n- **并行检测所有可能的手势**，一旦意图明确就果断取消落选者。避免只报告最终状态的手势识别器（swipeleft 类事件）—— 它们丢弃了反馈所需的连续追踪。\n- **最小化歧义延迟**。双击检测必然延迟单击；只在确实存在双击的地方支付这个成本。\n\n> ⚠️ 对照检查：按钮是否在按下瞬间就有视觉反馈？手势冲突是否正确处理？是否有不必要的手势识别延迟？\n\n### 原则 11：帧间平滑 (Frame-Level Smoothness)\n\n**流畅在于帧内的内容，而不仅仅是帧率。**\n\n- 保持每帧的位置变化量低于感知阈值，避免频闪。\n- 极快运动时，微妙的动态模糊/拉伸比硬锐利线更能传达速度感。\n- `requestAnimationFrame` 是 Web 的显示器同步时钟（苹果用 CADisplayLink）。仅动画合成器友好的属性 —— `transform` 和 `opacity` —— 并用 `will-change` 提示即将运动的地方。\n\n> ⚠️ 对照检查：动画是否使用 transform/opacity？是否使用了 will-change？快速移动的元素是否有视觉虚化效果？\n\n### 原则 12：毛玻璃材质 (Translucent Materials)\n\n苹果用半透明材质作为浮动功能层，带来结构感而不抢占注意力。Web 上用 `backdrop-filter` 近似。\n\n- **导航栏/工具栏/Sheet 用半透明层构建**（`backdrop-filter: blur()` + 半透明背景），内容在下方滚动 —— 而非不透明条占据固定区域。\n- **材质重量编码层级**：更深/更重的材质分隔结构区域（侧边栏）；更轻的材质吸引注意力到交互元素（按钮）。绝不在另一个半透明表面上再叠一层半透明 —— 可读性会崩溃。\n- **越大越厚重**：大表面比小芯片更强的模糊 + 更深的阴影。考虑上下文感知阴影 —— 在密集/文字性内容上更重以获得分隔，在纯色背景上更轻。\n- **变暗聚焦，分离保持流动**。模态任务配对表面与变暗遮罩，并将背景推后/推下。并行的非阻塞面板使用半透明和偏移但不加遮罩，保持流程不断。堆叠 Sheet 时，逐层加深遮罩并推后每一层父级。\n- **生动性**：在半透明表面上，不要用灰色文字 —— 使用更高对比度、略微加粗、小 letter-spacing。彩色放在实色层上，而非半透明前景。\n- **滚动边缘效果**，而非硬分割线。在粘性标题下，用模糊/渐变遮罩替代 1px 边框 —— 仅在浮动 UI 确实覆盖内容的地方。\n- **材质化出现**，不要只是淡入。毛玻璃表面在进入/退出时间时动画化模糊半径和缩放，让表面读作真实材质到达，而非普通的透明度淡入。\n\n```css\n.toolbar {\n background: rgba(255, 255, 255, 0.6);\n backdrop-filter: blur(20px) saturate(180%);\n border-top: 1px solid rgba(255, 255, 255, 0.4); /* 明亮顶边 = 光线捕捉材质 */\n}\n```\n\n> ⚠️ 对照检查：导航栏是否用 backdrop-filter 而非纯色？是否有叠加半透明层的场景？模态弹窗是否有遮罩？滚动内容与浮动 UI 交界处是否有柔和过渡？\n\n### 原则 13：多感官反馈 (Multi-Sensory Feedback)\n\n三条组合感官的规则（源自 Designing Audio-Haptic Experiences）：\n\n- **因果性** —— 必须明确是什么触发了反馈。在实际因果事件上触发（开关翻转、项目吸附归位），并将反馈特征与动作的物理性匹配。\n- **和谐性** —— 视觉、声音、触觉必须在同一帧触发。它们之间的延迟会摧毁沉浸感。不要让 CSS transition 落后于音频/触觉。\n- **效用性** —— 仅在值得的地方添加反馈。保留触觉/声音给有意义的时刻（成功、错误、提交、吸附）。过度反馈会让用户习惯性忽略全部。\n\n> ⚠️ 对照检查：音效/触觉是否与视觉动作同步？反馈是否过度使用？关键操作的反馈是否有明确的因果对应？\n\n### 原则 14：减弱动态效果 (Reduced Motion)\n\n减弱动态 ≠ 没有反馈 —— 是更温和、不触发前庭不适的等效方案。响应三个独立信号并融入组件：\n\n- `prefers-reduced-motion: reduce` —— 将滑动/弹簧/视差替换为短时透明度淡入淡出或静态过渡。丢弃弹性/过冲。保留有助于理解的透明度/颜色变化。\n- `prefers-reduced-transparency: reduce` —— 让半透明表面更雾化/更实：提高背景不透明度，去除模糊。\n- `prefers-contrast: more` —— 近乎实色背景配明确对比度的边框。\n\n另外：**避免**全视口移动背景、慢速循环振荡（接近 0.2Hz/每 5 秒一周）、亮度的突然跳跃（暗↔亮主题切换时需缓动）。大移动物体在移动时做半透明处理，大面积表面在大范围重新定位时淡出，停稳后淡入。\n\n```css\n@media (prefers-reduced-motion: reduce) {\n .sheet { transition: opacity 200ms ease; transform: none !important; }\n}\n@media (prefers-reduced-transparency: reduce) {\n .toolbar { background: white; backdrop-filter: none; }\n}\n```\n\n> ⚠️ 对照检查：是否提供了 reduced-motion 的替代动画？reduced-transparency 下毛玻璃层是否变实？是否有可能导致眩晕的大面积动画？\n\n### 原则 15：排版设计 (Typography)\n\n苹果让字体随尺寸变化形态（源自 WWDC 2020 The Details of UI Typography）。\n\n- **字距（letter-spacing）随字号变化** —— 不能所有尺寸共用一个值。大标题文字需要负字距（字母变大会显得间距过大）；小文字需要略微正字距以保证可读性。固定 letter-spacing 总在某处是错的。收紧标题，正文接近 0。\n- **行高（line-height）随字号反向变化**。大标题用紧凑行高，正文用宽松行高。对高上伸/下伸字符的文字加大行高；密集信息型 UI 收紧行高。\n- **用 粗细 + 字号 + 行高 组合构建层级**，而非仅靠字号。用粗细强调 —— 它增加存在感而不占用更多空间。\n- **尊重用户的文字大小设置（Dynamic Type）**。用 rem/em 而非固定 px 来缩放布局，使大字号不会破坏排版。\n- **默认使用平台系统字体**，它自带光学尺寸、字距表和可读性调优。有理由时才覆盖。\n\n```css\n:root { font: 100%/1.5 system-ui, sans-serif; }\n\n.display {\n font-size: clamp(2rem, 5vw, 4rem);\n line-height: 1.05; /* 大文字用紧凑行高 */\n letter-spacing: -0.02em; /* 大文字用负字距 */\n font-optical-sizing: auto;\n}\n```\n\n> ⚠️ 对照检查：不同字号的 letter-spacing 是否差异化？正文行高是否舒适？大标题行高是否紧凑？字号是否用 rem/em？\n\n### 原则 16：苹果八大设计原则 (Design Principles)\n\n动效和工艺服务于苹果的八项设计原则（源自 WWDC 2026 Principles of Great Design）：\n\n1. **Purpose（目的）**—— 有意图地创造；决定不构建什么。每个功能都向用户索取时间、注意力和信任——只在值得的地方花这笔预算。\n2. **Agency（能动性）**—— 让人掌控：提供选择，不强迫单一路径。配以宽容性——滑动手势轻松撤销，确认对话框仅用于真正破坏性、不可逆的操作（少用；滥用会让用户习惯性点确认）。\n3. **Responsibility（责任）**—— 以用户利益行事。隐私：在正确时机询问，只申请必需权限，透明说明。安全：预判滥用和危害——尤其 AI 场景。添加预览、确认、声明；风险大于价值的宁可砍掉。\n4. **Familiarity（熟悉感）**—— 建立在已知之上。用不过于字面化也不过于抽象的隐喻（垃圾桶 = 删除），并尊重物理常识。保持一致：看起来一样的东西必须行为一样、位置一样。\n5. **Flexibility（灵活性）**—— 为不同场景、设备和全范围能力设计。适应平台（iPhone = 快速触摸；桌面 = 精确指针的深度工作流）和情境。包容性设计。单一布局无法满足所有人时，允许个性化。\n6. **Simplicity（简洁）**—— 不是极简主义。剥离不必要的，让核心目的发光；把所有东西塞在一起看似极简，实则不简单。简明（平实语言、无行话、少步骤）且清晰（用层级——顺序、间距、对比度——让最重要的最显眼）。每个元素都有存在理由。\n7. **Craft（工艺）**—— 对细节不妥协的关注建立信任。精美的排版、随明暗主题自适应的颜色、清晰的图标、给出即时自然反馈的响应式动画。没有任何随机——每个间距、时间、对齐值都是可辩护的刻意选择。\n8. **Delight（愉悦）**—— 是做好前七条的成果，不是事后撒上的彩屑。决定你希望用户感受到的情绪（平静、自信、兴奋），并在每个决策中强化它。\n\n### 原则 17：交互设计战术 (Interaction Tactics)\n\n- **四种反馈类型**：状态、完成、警告、错误。确认有意义的操作，暴露持续状态，问题前先警告，内联验证（非提交时）。\n- **导航寻路**：每个屏幕应回答——我在哪？我能去哪？那有什么？我怎么离开？绝不困住用户。\n- **分组与映射**：接近暗示关系；控件放在它影响的东西附近，排列控件以映射它们改变的东西。如果需要标签来解释控件，映射就弱了。\n- **直接、具体的标签** 优于安全通用的。按内容命名导航项（「进度」「资源库」），而非含糊的伞概念（「首页」）。具体性创造可预测性。\n- **交互式原型**胜过「百万张静态设计」。通过构建和把玩来发现界面；工作原型也设定了防止平庸最终实现的基准。\n- **交互和视觉一起设计**。「你不应该能分辨出一个在哪结束、另一个从哪开始。」动效不是像素之后加上的一层。\n- **用真实的人和真实情境测试**，并用新鲜眼光审查动效——慢放/逐帧检查全速下不可见的问题。\n\n---\n\n## 速查表\n\n| 需求 | 技术 | 具体数值 |\n|------|------|---------|\n| 默认 UI 弹簧 | 临界阻尼，无过冲 | damping 1.0, response 0.3–0.4 |\n| 动量/投掷弹簧 | 欠阻尼，轻微弹跳 | damping ~0.8, response 0.3–0.4 |\n| 手势→弹簧速度 | 传递释放速度 | 归一化: gestureVelocity / (target − current) |\n| 投掷落点 | 投影动量 | current + (v/1000)·d/(1−d), d≈0.998 |\n| 干净中断 | 从 presentation 值开始 | 读取屏幕上实时的 transform |\n| 避免反转\"撞墙\" | 重设目标时继承速度 | 选择能融合速度的弹簧库 |\n| 可逆过渡 | 镜像缓动曲线 | 互逆 cubic-bézier |\n| 判断反转 vs 提交 | 用速度方向，非位置 | 在释放时刻判断 |\n| 1:1 拖拽 | Pointer Events + capture | 尊重抓取偏移量 |\n| 反馈 | pointer-down 时，全连续 | 绝不仅结束时 |\n| 边界 | 橡皮筋，非硬停 | 渐进阻力 |\n| 半透明 UI | backdrop-filter 层 | 内容在下方滚动 |\n| 排版字距 | 随字号变化，非固定 | 大文字收紧字距(-0.02em)，正文接近 0 |\n| 减弱动态 | 淡入淡出，非滑动/弹簧 | @media (prefers-reduced-motion) |\n\n---\n\n## 使用方式\n\n当用户请求 UI 设计审查或交互开发时：\n\n1. **审查模式**：对照上述 17 条原则逐项检查现有 UI，标记违反原则的地方并给出修改建议。\n2. **构建模式**：在开发新 UI 时，主动应用这些原则，确保交互自然流畅。\n3. **技术映射**：将苹果原生概念（CADisplayLink → requestAnimationFrame，additive animations → spring with velocity handoff）准确映射到 Web 技术栈。\n4. **代码输出**：始终提供可运行的 CSS/JS 代码示例，而非仅文字描述。\n\nFile v1.0.1:_meta.json\n\n{\n \"ownerId\": \"kn743vfjd6cp88q16gxc32qhk182rchq\",\n \"slug\": \"apple-design\",\n \"version\": \"1.0.1\",\n \"publishedAt\": 1784260763319\n}\n\nFile v1.0.1:skill-card.md\n\n## Description:\n\nApple Design provides Apple-inspired UI, motion, typography, accessibility, and interaction-review guidance for web interfaces.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[cindypapa](https://clawhub.ai/user/cindypapa)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDesigners, 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.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: 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.\n\nMitigation: Confirm that Apple-inspired interaction guidance is appropriate before applying the skill broadly, or narrow trigger wording during deployment.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/cindypapa/skills/apple-design)\n- [Publisher profile](https://clawhub.ai/user/cindypapa)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, guidance]\n\n**Output Format:** [Markdown with CSS and JavaScript code examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Documentation-only guidance; no code execution, persistence, credential access, or hidden data movement is reported by the security evidence.]\n\n## Skill Version(s):\n\n1.0.1 (source: frontmatter and server release evidence)\n\n## Ethical Considerations:\n\nUsers 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.\n\nArchive v1.0.0: 3 files, 12217 bytes\n\nFiles: skill-card.md (1759b), SKILL.md (22069b), _meta.json (131b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: apple-design\ndescription: 苹果设计原则与流体交互动效知识库，源自 WWDC 设计演讲，为 Web 平台翻译的 17 条交互设计原则\nversion: 1.0.0\n---\n\n# Apple Design — 苹果交互设计原则\n\n苹果的界面设计与流体动效方法论，从 WWDC 设计演讲（主要是 WWDC 2018 Designing Fluid Interfaces）浓缩提炼，翻译为 Web 平台（CSS、Pointer Events、requestAnimationFrame、Motion/Framer Motion）。\n\n## 触发条件\n\n当以下任一情况出现时，加载本 skill：\n- 构建或审查手势驱动的 UI（拖拽、滑动、Sheet、轮播）\n- 需要设计弹簧动画、惯性动画、可中断过渡\n- 讨论毛玻璃效果、半透明材质、景深层次\n- 排版设计（字号、字距、行高）\n- 无障碍设计（减弱动态效果、降低透明度、高对比度）\n- 用户提到「苹果风格」「iOS 风格」「流体界面」「Apple Design」等关键词\n- 审查现有 UI 的交互体验\n\n## 核心哲学\n\n界面流畅 = 行为像物理世界：即时响应、连续运动、携带动量、边界受阻、可在运动中重定向。\n\n苹果设计服务四大人性需求：**安全感/可预测性、理解、成就、愉悦**。每条规则都服务其中之一。\n\n核心理念：**动效从当前屏幕值开始，继承用户速度，向前投影动量，并在任意瞬间可被抓住并反转。弹簧是实现这一切的工具，因为它们天然可中断且感知速度。**\n\n---\n\n## 17 条交互设计原则\n\n### 原则 1：即时反馈 (Immediate Response)\n\n**响应是基础，延迟一旦出现，直接操控感就「断崖式下跌」。**\n\n- **在 pointer-down 时响应，而非 release**。按钮在被按下的瞬间就应高亮。等到 click/touch-up 才给反馈会感觉「死气沉沉」。\n- **警惕每一毫秒延迟**。审查 debounce、人工定时器、transition 等待、~300ms 点击延迟。输入路径上任何非必要的延迟都是退化。\n- **反馈在交互过程中必须是连续的**，而非仅在结束时。拖拽、滑块、抽屉 —— 全程 1:1 跟随指针更新 UI。\n\n```css\n/* 反馈在按下时生效，瞬间 */\n.button:active {\n transform: scale(0.97);\n transition: transform 100ms ease-out;\n}\n```\n\n> ⚠️ 对照检查：按钮 hover 和 active 状态是否有明显区分？拖拽过程中 UI 是否跟随手指？是否有不必要的 debounce 或 setTimeout？\n\n### 原则 2：1:1 跟随 (Direct Manipulation)\n\n**「触摸和内容应该一起移动。」**\n\n- 拖拽时元素必须紧贴手指，并**尊重抓取时的偏移量**。抓取时跳到元素中心会立刻破坏沉浸感。\n- 使用 Pointer Events + `setPointerCapture`，确保手指移出元素边界后仍可追踪。\n- 追踪短期的速度/位置历史（最近几次 pointermove 事件），而不仅是当前点 —— 松开时需要速度。\n\n```javascript\nel.addEventListener('pointerdown', (e) => {\n el.setPointerCapture(e.pointerId);\n const grabOffset = e.clientY - el.getBoundingClientRect().top;\n // 追踪位置 + 时间戳历史，用于计算速度\n});\n```\n\n> ⚠️ 对照检查：拖拽时元素是否始终在手指下方？是否保留了抓取偏移量？是否在手指移出元素边界后仍能继续拖拽？\n\n### 原则 3：可中断动画 (Interruptible Animation)\n\n**「思考和手势是并行的。」**\n\n每个动画必须在任意时刻都可中断、可重定向。用户必须能在动画中途抓住移动中的元素并反转方向，无需等待动画完成。\n\n- **绝不在过渡期间锁定输入**。\n- **始终从 presentation value（当前屏幕值）开始动画**，而非 target value。中断时读取元素实时的屏幕 transform，从那里启动新动画。从逻辑值/target 值开始会产生可见的跳跃。\n- **手势驱动的东西避免 CSS transition 和 @keyframes** —— 它们无法在运动中被平滑抓住并反转。弹簧默认从当前值开始动画，正合中断所需。\n- 手势反转时**融合速度**，不要硬切。在反转点用一个动画替换另一个会产生速度断层「撞墙」。选择能在重新设定目标时继承速度的弹簧库。\n- **将 2D 运动分解为独立的 X 和 Y 弹簧**。对 2D 距离使用单个弹簧会在 X 和 Y 速度不同时失衡。\n\n> 弹簧是一个可对话的动画系统：新输入只是改变目标，运动保持连续。任何用户可触摸的东西都应该用弹簧。\n\n> ⚠️ 对照检查：动画进行中用户能否打断？打断后动画是否从当前状态平滑过渡？CSS transition 是否被误用于手势驱动的交互？\n\n### 原则 4：弹簧参数 (Spring Parameters)\n\n苹果用两个设计师友好参数替代了物理三元组（mass/stiffness/damping）：\n\n- **Damping ratio（阻尼比）**：控制过冲。1.0 = 临界阻尼，无弹跳，平滑停靠。< 1.0 = 过冲振荡，越小越弹。\n- **Response（响应时间）**：数值以秒为单位，越小越快。这不是「时长」—— 弹簧没有固定时长，停靠时间由参数共同决定。\n\n**默认策略**：\n- 大多数 UI 使用 damping 1.0（临界阻尼）—— 优雅且不分散注意力。\n- 仅在手势自带动量时（快速滑动、投掷、拖拽释放）才加弹跳（damping ~0.8）。菜单淡入时过冲是错的；卡片被弹飞时过冲是对的。\n\n**苹果实际参数表**：\n\n| 交互类型 | Damping | Response |\n|---------|---------|----------|\n| 移动/重定位（如画中画） | 1.0 | 0.4 |\n| 旋转 | 0.8 | 0.4 |\n| 抽屉/Sheet | 0.8 | 0.3 |\n\n**Web 映射（Motion / Framer Motion）**：\n\n```javascript\nimport { animate } from 'motion';\n\n// 临界阻尼默认值（无过冲）\nanimate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 });\n\n// 动量交互 — 微弹跳，仅因为前面有快速滑动\nanimate(el, { y: target }, { type: 'spring', bounce: 0.2, duration: 0.4 });\n```\n\n> ⚠️ 对照检查：静止出现/消失的元素是否误加了弹跳？菜单/弹窗动画是否用了 bounce？用户手势结束后的动画是否继承了动量？\n\n### 原则 5：速度继承 (Velocity Handoff)\n\n手势结束时，动画必须以手指的精确速度继续，**拖拽和动画之间不能有可见的接缝**。这是「流畅」与「还行」的最大分水岭。\n\n- 将指针的释放速度作为弹簧的**初始速度**传入。\n- 某些弹簧 API 需要相对速度 —— 用剩余距离归一化：`relativeVelocity = gestureVelocity / (targetValue − currentValue)`\n- 例：元素在 y=50，目标 y=150（剩余 100px），手指移动 50px/s → 初始弹簧速度 = 50/100 = 0.5。\n- Framer Motion / Motion 直接接受绝对 px/s 速度（velocity 选项），通常直接传原始值。\n\n```javascript\n// 拖拽结束时，把手势速度传给弹簧\nanimate(el, { y: targetY }, {\n type: 'spring',\n bounce: 0.2,\n duration: 0.4,\n velocity: releaseVelocity // px/s\n});\n```\n\n> ⚠️ 对照检查：拖拽松开后元素是否平滑过渡到目标？还是突然变速？手势速度和动画速度之间是否有「接缝」？\n\n### 原则 6：动量投影 (Momentum Projection)\n\n**「小输入，大输出。」**\n\n不要从释放点直接吸附到最近的边界。用速度投影停靠位置——就像滚动的减速过程一样——然后吸附到投影点最近的目标。\n\n苹果的精确投影函数（来自 Designing Fluid Interfaces 示例代码）：\n\n```javascript\n// decelerationRate ≈ 0.998（正常滚动感）；0.99（更快吸附）\nfunction project(initialVelocity /* px/s */, decelerationRate = 0.998) {\n return (initialVelocity / 1000) * decelerationRate / (1 - decelerationRate);\n}\n\nconst projectedEndpoint = currentPosition + project(releaseVelocity);\nconst target = nearestSnapPoint(projectedEndpoint); // 从投影中选择目标\nanimateSpringTo(target, { velocity: releaseVelocity }); // 然后交棒速度（原则5）\n```\n\n> ⚠️ 注意：物理课本的 v²/(2·decel) 不是苹果用的 —— 用上面的指数衰减形式。这是好的底部 Sheet 和轮播（Vaul、Embla）的标准行为。\n\n> ⚠️ 对照检查：轮播/Sheet 滑动后停靠的位置是最近的边界还是动量投影后的边界？用户轻轻滑动和用力滑动是否产生不同的停靠点？\n\n### 原则 7：空间一致性 (Spatial Consistency)\n\n**「如果某物从某个方向消失，我们期望它从那里出现。」**\n\n- **进入和退出沿同一路径**。从右侧滑入的面板必须从右侧消失。右进/下出让人感觉断裂和困惑。\n- **锚定交互到源头**。菜单、弹出框、Sheet 应从触发它的元素展开——设置 `transform-origin` 到触发器，使按钮与内容的空间关系一目了然。\n- **镜像缓动曲线**：可逆过渡的入出缓冲互为反转（进出使用互为反转的 cubic-bézier 控制点）。\n\n> ⚠️ 对照检查：弹窗的出现和消失方向是否一致？菜单是否从触发按钮的位置展开？过渡的缓入缓出是否对称？\n\n### 原则 8：轨迹预判 (Trajectory Telegraph)\n\n人类从轨迹预判终点。中间帧的运动应该暗示物体将去向何方——控制中心模块「向上向外朝手指增长」。让中间帧指向结果，而非盲目地线性插值。\n\n> ⚠️ 对照检查：动画的中间状态是否暗示了最终位置？元素运动轨迹是否自然？还是只是 A→B 的线性插值？\n\n### 原则 9：橡皮筋边界 (Rubber-banding)\n\n到达边界时，应逐渐增加阻力而非硬停止。硬停读作「冻结」；连续阻力读作「响应了，但没更多内容了」。阻尼随拖拽超出边界的距离增加。\n\n```javascript\n// 超出越多，跟随越少 —— 真实物体在停止前会减缓\nfunction rubberband(overshoot, dimension, constant = 0.55) {\n return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));\n}\n```\n\n> ⚠️ 对照检查：列表/页面滚动到边界时是否有弹性效果？还是硬生生停在边界？Sheet 拖拽超出最大高度时是否有阻尼？\n\n### 原则 10：手势识别 (Gesture Recognition)\n\n- **Tap**：touch-down 时高亮（瞬间），touch-up 时提交。在目标周围添加 ~10px 的滞后/触摸内边距，允许滑开取消和滑回恢复。\n- **Drag/swipe**：在确认方向前要求小的移动阈值（滞后 ~10px），确认后 1:1 追踪。\n- **并行检测所有可能的手势**，一旦意图明确就果断取消落选者。避免只报告最终状态的手势识别器（swipeleft 类事件）—— 它们丢弃了反馈所需的连续追踪。\n- **最小化歧义延迟**。双击检测必然延迟单击；只在确实存在双击的地方支付这个成本。\n\n> ⚠️ 对照检查：按钮是否在按下瞬间就有视觉反馈？手势冲突是否正确处理？是否有不必要的手势识别延迟？\n\n### 原则 11：帧间平滑 (Frame-Level Smoothness)\n\n**流畅在于帧内的内容，而不仅仅是帧率。**\n\n- 保持每帧的位置变化量低于感知阈值，避免频闪。\n- 极快运动时，微妙的动态模糊/拉伸比硬锐利线更能传达速度感。\n- `requestAnimationFrame` 是 Web 的显示器同步时钟（苹果用 CADisplayLink）。仅动画合成器友好的属性 —— `transform` 和 `opacity` —— 并用 `will-change` 提示即将运动的地方。\n\n> ⚠️ 对照检查：动画是否使用 transform/opacity？是否使用了 will-change？快速移动的元素是否有视觉虚化效果？\n\n### 原则 12：毛玻璃材质 (Translucent Materials)\n\n苹果用半透明材质作为浮动功能层，带来结构感而不抢占注意力。Web 上用 `backdrop-filter` 近似。\n\n- **导航栏/工具栏/Sheet 用半透明层构建**（`backdrop-filter: blur()` + 半透明背景），内容在下方滚动 —— 而非不透明条占据固定区域。\n- **材质重量编码层级**：更深/更重的材质分隔结构区域（侧边栏）；更轻的材质吸引注意力到交互元素（按钮）。绝不在另一个半透明表面上再叠一层半透明 —— 可读性会崩溃。\n- **越大越厚重**：大表面比小芯片更强的模糊 + 更深的阴影。考虑上下文感知阴影 —— 在密集/文字性内容上更重以获得分隔，在纯色背景上更轻。\n- **变暗聚焦，分离保持流动**。模态任务配对表面与变暗遮罩，并将背景推后/推下。并行的非阻塞面板使用半透明和偏移但不加遮罩，保持流程不断。堆叠 Sheet 时，逐层加深遮罩并推后每一层父级。\n- **生动性**：在半透明表面上，不要用灰色文字 —— 使用更高对比度、略微加粗、小 letter-spacing。彩色放在实色层上，而非半透明前景。\n- **滚动边缘效果**，而非硬分割线。在粘性标题下，用模糊/渐变遮罩替代 1px 边框 —— 仅在浮动 UI 确实覆盖内容的地方。\n- **材质化出现**，不要只是淡入。毛玻璃表面在进入/退出时间时动画化模糊半径和缩放，让表面读作真实材质到达，而非普通的透明度淡入。\n\n```css\n.toolbar {\n background: rgba(255, 255, 255, 0.6);\n backdrop-filter: blur(20px) saturate(180%);\n border-top: 1px solid rgba(255, 255, 255, 0.4); /* 明亮顶边 = 光线捕捉材质 */\n}\n```\n\n> ⚠️ 对照检查：导航栏是否用 backdrop-filter 而非纯色？是否有叠加半透明层的场景？模态弹窗是否有遮罩？滚动内容与浮动 UI 交界处是否有柔和过渡？\n\n### 原则 13：多感官反馈 (Multi-Sensory Feedback)\n\n三条组合感官的规则（源自 Designing Audio-Haptic Experiences）：\n\n- **因果性** —— 必须明确是什么触发了反馈。在实际因果事件上触发（开关翻转、项目吸附归位），并将反馈特征与动作的物理性匹配。\n- **和谐性** —— 视觉、声音、触觉必须在同一帧触发。它们之间的延迟会摧毁沉浸感。不要让 CSS transition 落后于音频/触觉。\n- **效用性** —— 仅在值得的地方添加反馈。保留触觉/声音给有意义的时刻（成功、错误、提交、吸附）。过度反馈会让用户习惯性忽略全部。\n\n> ⚠️ 对照检查：音效/触觉是否与视觉动作同步？反馈是否过度使用？关键操作的反馈是否有明确的因果对应？\n\n### 原则 14：减弱动态效果 (Reduced Motion)\n\n减弱动态 ≠ 没有反馈 —— 是更温和、不触发前庭不适的等效方案。响应三个独立信号并融入组件：\n\n- `prefers-reduced-motion: reduce` —— 将滑动/弹簧/视差替换为短时透明度淡入淡出或静态过渡。丢弃弹性/过冲。保留有助于理解的透明度/颜色变化。\n- `prefers-reduced-transparency: reduce` —— 让半透明表面更雾化/更实：提高背景不透明度，去除模糊。\n- `prefers-contrast: more` —— 近乎实色背景配明确对比度的边框。\n\n另外：**避免**全视口移动背景、慢速循环振荡（接近 0.2Hz/每 5 秒一周）、亮度的突然跳跃（暗↔亮主题切换时需缓动）。大移动物体在移动时做半透明处理，大面积表面在大范围重新定位时淡出，停稳后淡入。\n\n```css\n@media (prefers-reduced-motion: reduce) {\n .sheet { transition: opacity 200ms ease; transform: none !important; }\n}\n@media (prefers-reduced-transparency: reduce) {\n .toolbar { background: white; backdrop-filter: none; }\n}\n```\n\n> ⚠️ 对照检查：是否提供了 reduced-motion 的替代动画？reduced-transparency 下毛玻璃层是否变实？是否有可能导致眩晕的大面积动画？\n\n### 原则 15：排版设计 (Typography)\n\n苹果让字体随尺寸变化形态（源自 WWDC 2020 The Details of UI Typography）。\n\n- **字距（letter-spacing）随字号变化** —— 不能所有尺寸共用一个值。大标题文字需要负字距（字母变大会显得间距过大）；小文字需要略微正字距以保证可读性。固定 letter-spacing 总在某处是错的。收紧标题，正文接近 0。\n- **行高（line-height）随字号反向变化**。大标题用紧凑行高，正文用宽松行高。对高上伸/下伸字符的文字加大行高；密集信息型 UI 收紧行高。\n- **用 粗细 + 字号 + 行高 组合构建层级**，而非仅靠字号。用粗细强调 —— 它增加存在感而不占用更多空间。\n- **尊重用户的文字大小设置（Dynamic Type）**。用 rem/em 而非固定 px 来缩放布局，使大字号不会破坏排版。\n- **默认使用平台系统字体**，它自带光学尺寸、字距表和可读性调优。有理由时才覆盖。\n\n```css\n:root { font: 100%/1.5 system-ui, sans-serif; }\n\n.display {\n font-size: clamp(2rem, 5vw, 4rem);\n line-height: 1.05; /* 大文字用紧凑行高 */\n letter-spacing: -0.02em; /* 大文字用负字距 */\n font-optical-sizing: auto;\n}\n```\n\n> ⚠️ 对照检查：不同字号的 letter-spacing 是否差异化？正文行高是否舒适？大标题行高是否紧凑？字号是否用 rem/em？\n\n### 原则 16：苹果八大设计原则 (Design Principles)\n\n动效和工艺服务于苹果的八项设计原则（源自 WWDC 2026 Principles of Great Design）：\n\n1. **Purpose（目的）**—— 有意图地创造；决定不构建什么。每个功能都向用户索取时间、注意力和信任——只在值得的地方花这笔预算。\n2. **Agency（能动性）**—— 让人掌控：提供选择，不强迫单一路径。配以宽容性——滑动手势轻松撤销，确认对话框仅用于真正破坏性、不可逆的操作（少用；滥用会让用户习惯性点确认）。\n3. **Responsibility（责任）**—— 以用户利益行事。隐私：在正确时机询问，只申请必需权限，透明说明。安全：预判滥用和危害——尤其 AI 场景。添加预览、确认、声明；风险大于价值的宁可砍掉。\n4. **Familiarity（熟悉感）**—— 建立在已知之上。用不过于字面化也不过于抽象的隐喻（垃圾桶 = 删除），并尊重物理常识。保持一致：看起来一样的东西必须行为一样、位置一样。\n5. **Flexibility（灵活性）**—— 为不同场景、设备和全范围能力设计。适应平台（iPhone = 快速触摸；桌面 = 精确指针的深度工作流）和情境。包容性设计。单一布局无法满足所有人时，允许个性化。\n6. **Simplicity（简洁）**—— 不是极简主义。剥离不必要的，让核心目的发光；把所有东西塞在一起看似极简，实则不简单。简明（平实语言、无行话、少步骤）且清晰（用层级——顺序、间距、对比度——让最重要的最显眼）。每个元素都有存在理由。\n7. **Craft（工艺）**—— 对细节不妥协的关注建立信任。精美的排版、随明暗主题自适应的颜色、清晰的图标、给出即时自然反馈的响应式动画。没有任何随机——每个间距、时间、对齐值都是可辩护的刻意选择。\n8. **Delight（愉悦）**—— 是做好前七条的成果，不是事后撒上的彩屑。决定你希望用户感受到的情绪（平静、自信、兴奋），并在每个决策中强化它。\n\n### 原则 17：交互设计战术 (Interaction Tactics)\n\n- **四种反馈类型**：状态、完成、警告、错误。确认有意义的操作，暴露持续状态，问题前先警告，内联验证（非提交时）。\n- **导航寻路**：每个屏幕应回答——我在哪？我能去哪？那有什么？我怎么离开？绝不困住用户。\n- **分组与映射**：接近暗示关系；控件放在它影响的东西附近，排列控件以映射它们改变的东西。如果需要标签来解释控件，映射就弱了。\n- **直接、具体的标签** 优于安全通用的。按内容命名导航项（「进度」「资源库」），而非含糊的伞概念（「首页」）。具体性创造可预测性。\n- **交互式原型**胜过「百万张静态设计」。通过构建和把玩来发现界面；工作原型也设定了防止平庸最终实现的基准。\n- **交互和视觉一起设计**。「你不应该能分辨出一个在哪结束、另一个从哪开始。」动效不是像素之后加上的一层。\n- **用真实的人和真实情境测试**，并用新鲜眼光审查动效——慢放/逐帧检查全速下不可见的问题。\n\n---\n\n## 速查表\n\n| 需求 | 技术 | 具体数值 |\n|------|------|---------|\n| 默认 UI 弹簧 | 临界阻尼，无过冲 | damping 1.0, response 0.3–0.4 |\n| 动量/投掷弹簧 | 欠阻尼，轻微弹跳 | damping ~0.8, response 0.3–0.4 |\n| 手势→弹簧速度 | 传递释放速度 | 归一化: gestureVelocity / (target − current) |\n| 投掷落点 | 投影动量 | current + (v/1000)·d/(1−d), d≈0.998 |\n| 干净中断 | 从 presentation 值开始 | 读取屏幕上实时的 transform |\n| 避免反转\"撞墙\" | 重设目标时继承速度 | 选择能融合速度的弹簧库 |\n| 可逆过渡 | 镜像缓动曲线 | 互逆 cubic-bézier |\n| 判断反转 vs 提交 | 用速度方向，非位置 | 在释放时刻判断 |\n| 1:1 拖拽 | Pointer Events + capture | 尊重抓取偏移量 |\n| 反馈 | pointer-down 时，全连续 | 绝不仅结束时 |\n| 边界 | 橡皮筋，非硬停 | 渐进阻力 |\n| 半透明 UI | backdrop-filter 层 | 内容在下方滚动 |\n| 排版字距 | 随字号变化，非固定 | 大文字收紧字距(-0.02em)，正文接近 0 |\n| 减弱动态 | 淡入淡出，非滑动/弹簧 | @media (prefers-reduced-motion) |\n\n---\n\n## 使用方式\n\n当用户请求 UI 设计审查或交互开发时：\n\n1. **审查模式**：对照上述 17 条原则逐项检查现有 UI，标记违反原则的地方并给出修改建议。\n2. **构建模式**：在开发新 UI 时，主动应用这些原则，确保交互自然流畅。\n3. **技术映射**：将苹果原生概念（CADisplayLink → requestAnimationFrame，additive animations → spring with velocity handoff）准确映射到 Web 技术栈。\n4. **代码输出**：始终提供可运行的 CSS/JS 代码示例，而非仅文字描述。\n\nFile v1.0.0:_meta.json\n\n{\n \"ownerId\": \"kn743vfjd6cp88q16gxc32qhk182rchq\",\n \"slug\": \"apple-design\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1784260318480\n}\n\nFile v1.0.0:skill-card.md\n\n## Description:
\nProvides Apple-inspired interaction, motion, typography, material, and accessibility design guidance for Web UI work.
\n\nThis skill is ready for commercial/non-commercial use.
\n\n## Publisher:
\n[cindypapa](https://clawhub.ai/user/cindypapa)
\n\n### License/Terms of Use:
\nMIT-0
\n\n\n## Use Case:
\nDevelopers and designers use this skill when building or reviewing Web interfaces that need Apple-inspired fluid interaction, motion, typography, translucent materials, and accessibility-aware UI behavior. It helps agents produce design critique, implementation guidance, and runnable CSS or JavaScript examples.
\n\n### Deployment Geography for Use:
\nGlobal
\n\n## Known Risks and Mitigations:
\nRisk: The skill may steer UI reviews toward Apple-inspired styling even when that style is not appropriate for the product.
\nMitigation: Review generated design recommendations against the product's brand, platform conventions, accessibility requirements, and user context before applying them.
\n\n\n## Reference(s):
\n\n\n## Skill Output:
\n**Output Type(s):** [Guidance, Markdown, Code]
\n**Output Format:** [Markdown with CSS and JavaScript code examples]
\n**Output Parameters:** [1D]
\n**Other Properties Related to Output:** [Design recommendations should be reviewed for fit with the product's own visual language.]
\n\n## Skill Version(s):
\n1.0.0 (source: frontmatter and server release evidence)
\n\n## Ethical Considerations:
\nUsers 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.
","readmeExcerpt":"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.","codeSnippets":[],"executableExamples":[{"language":"css","snippet":"/* 反馈在按下时生效，瞬间 */\n.button:active {\n transform: scale(0.97);\n transition: transform 100ms ease-out;\n}"},{"language":"javascript","snippet":"el.addEventListener('pointerdown', (e) => {\n el.setPointerCapture(e.pointerId);\n const grabOffset = e.clientY - el.getBoundingClientRect().top;\n // 追踪位置 + 时间戳历史，用于计算速度\n});"},{"language":"javascript","snippet":"import { animate } from 'motion';\n\n// 临界阻尼默认值（无过冲）\nanimate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 });\n\n// 动量交互 — 微弹跳，仅因为前面有快速滑动\nanimate(el, { y: target }, { type: 'spring', bounce: 0.2, duration: 0.4 });"},{"language":"javascript","snippet":"// 拖拽结束时，把手势速度传给弹簧\nanimate(el, { y: targetY }, {\n type: 'spring',\n bounce: 0.2,\n duration: 0.4,\n velocity: releaseVelocity // px/s\n});"},{"language":"javascript","snippet":"// decelerationRate ≈ 0.998（正常滚动感）；0.99（更快吸附）\nfunction project(initialVelocity /* px/s */, decelerationRate = 0.998) {\n return (initialVelocity / 1000) * decelerationRate / (1 - decelerationRate);\n}\n\nconst projectedEndpoint = currentPosition + project(releaseVelocity);\nconst target = nearestSnapPoint(projectedEndpoint); // 从投影中选择目标\nanimateSpringTo(target, { velocity: releaseVelocity }); // 然后交棒速度（原则5）"},{"language":"javascript","snippet":"// 超出越多，跟随越少 —— 真实物体在停止前会减缓\nfunction rubberband(overshoot, dimension, constant = 0.55) {\n return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));\n}"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: apple-design\ndescription: 苹果设计原则与流体交互动效知识库，源自 WWDC 设计演讲，为 Web 平台翻译的 17 条交互设计原则\nversion: 1.0.1\n---\n\n# Apple Design — 苹果交互设计原则\n\n苹果的界面设计与流体动效方法论，从 WWDC 设计演讲（主要是 WWDC 2018 Designing Fluid Interfaces）浓缩提炼，翻译为 Web 平台（CSS、Pointer Events、requestAnimationFrame、Motion/Framer Motion）。\n\n## 触发条件\n\n当以下任一情况出现时，加载本 skill：\n- 构建或审查手势驱动的 UI（拖拽、滑动、Sheet、轮播）\n- 需要设计弹簧动画、惯性动画、可中断过渡\n- 讨论毛玻璃效果、半透明材质、景深层次\n- 排版设计（字号、字距、行高）\n- 无障碍设计（减弱动态效果、降低透明度、高对比度）\n- 用户提到「苹果风格」「iOS 风格」「流体界面」「Apple Design」等关键词\n- 审查现有 UI 的交互体验\n\n## 核心哲学\n\n界面流畅 = 行为像物理世界：即时响应、连续运动、携带动量、边界受阻、可在运动中重定向。\n\n苹果设计服务四大人性需求：**安全感/可预测性、理解、成就、愉悦**。每条规则都服务其中之一。\n\n核心理念：**动效从当前屏幕值开始，继承用户速度，向前投影动量，并在任意瞬间可被抓住并反转。弹簧是实现这一切的工具，因为它们天然可中断且感知速度。**\n\n---\n\n## 17 条交互设计原则\n\n### 原则 1：即时反馈 (Immediate Response)\n\n**响应是基础，延迟一旦出现，直接操控感就「断崖式下跌」。**\n\n- **在 pointer-down 时响应，而非 release**。按钮在被按下的瞬间就应高亮。等到 click/touch-up 才给反馈会感觉「死气沉沉」。\n- **警惕每一毫秒延迟**。审查 debounce、人工定时器、transition 等待、~300ms 点击延迟。输入路径上任何非必要的延迟都是退化。\n- **反馈在交互过程中必须是连续的**，而非仅在结束时。拖拽、滑块、抽屉 —— 全程 1:1 跟随指针更新 UI。\n\n```css\n/* 反馈在按下时生效，瞬间 */\n.button:active {\n transform: scale(0.97);\n transition: transform 100ms ease-out;\n}\n```\n\n> ⚠️ 对照检查：按钮 hover 和 active 状态是否有明显区分？拖拽过程中 UI 是否跟随手指？是否有不必要的 debounce 或 setTimeout？\n\n### 原则 2：1:1 跟随 (Direct Manipulation)\n\n**「触摸和内容应该一起移动。」**\n\n- 拖拽时元素必须紧贴手指，并**尊重抓取时的偏移量**。抓取时跳到元素中心会立刻破坏沉浸感。\n- 使用 Pointer Events + `setPointerCapture`，确保手指移出元素边界后仍可追踪。\n- 追踪短期的速度/位置历史（最近几次 pointermove 事件），而不仅是当前点 —— 松开时需要速度。\n\n```javascript\nel.addEventListener('pointerdown', (e) => {\n el.setPointerCapture(e.pointerId);\n const grabOffset = e.clientY - el.getBoundingClientRect().top;\n // 追踪位置 + 时间戳历史，用于计算速度\n});\n```\n\n> ⚠️ 对照检查：拖拽时元素是否始终在手指下方？是否保留了抓取偏移量？是否在手指移出元素边界后仍能继续拖拽？\n\n### 原则 3：可中断动画 (Interruptible Animation)\n\n**「思考和手势是并行的。」**\n\n每个动画必须在任意时刻都可中断、可重定向。用户必须能在动画中途抓住移动中的元素并反转方向，无需等待动画完成。\n\n- **绝不在过渡期间锁定输入**。\n- **始终从 presentation value（当前屏幕值）开始动画**，而非 target value。中断时读取元素实时的屏幕 transform，从那里启动新动画。从逻辑值/target 值开始会产生可见的跳跃。\n- **手势驱动的东西避免 CSS transition 和 @keyframes** —— 它们无法在运动中被平滑抓住并反转。弹簧默认从当前值开始动画，正合中断所需。\n- 手势反转时**融合速度**，不要硬切。在反转点用一个动画替换另一个会产生速度断层「撞墙」。选择能在重新设定目标时继承速度的弹簧库。\n- **将 2D 运动分解为独立的 X 和 Y 弹簧**。对 2D 距离使用单个弹簧会在 X 和 Y 速度不同时失衡。\n\n> 弹簧是一个可对话的动画系统：新输入只是改变目标，运动保持连续。任何用户可触摸的东西都应该用弹簧。\n\n> ⚠️ 对照检查：动画进行中用户能否打断？打断后动画是否从当前状态平滑过渡？CSS transition 是否被误用于手势驱动的交互？\n\n### 原则 4：弹簧参数 (Spring Parameters)\n\n苹果用两个设计师友好参数替代了物理三元组（mass/stiffness/damping）：\n\n- **Damping ratio（阻尼比）**：控制过冲。1.0 = 临界阻尼，无弹跳，平滑停靠。< 1.0 = 过冲振荡，越小越弹。\n- **Response（响应时间）**：数值以秒为单位，越小越快。这不是「时长」—— 弹簧没有固定时长，停靠时间由参数共同决定。\n\n**默认策略**：\n- 大多数 UI 使用 damping 1.0（临界阻尼）—— 优雅且不分散注意力。\n- 仅在手势自带动量时（快速滑动、投掷、拖拽释放）才加弹跳（damping ~0.8）。菜单淡入时过冲是错的；卡片被弹飞时过冲是对的。\n\n**苹果实际参数表**：\n\n| 交互类型 | Damping | Response |\n|---------|---------|----------|\n| 移动/重定位（如画中画） | 1.0 | 0.4 |\n| 旋转 | 0.8 | 0.4 |\n| 抽屉/Sheet | 0.8 | 0.3 |\n\n**Web 映射（Motion / Framer Motion）**：\n\n```javascript\nimport { animate } from 'motion';\n\n// 临界阻尼默认值（无过冲）\nanimate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 });\n\n// 动量交互 — 微弹跳，仅因为前面有快速滑动\nanimate(el, { y: target }, { type: 'spring', bounce: 0.2, durati"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn743vfjd6cp88q16gxc32qhk182rchq\",\n \"slug\": \"apple-design\",\n \"version\": \"1.0.1\",\n \"publishedAt\": 1784260763319\n}"},{"path":"skill-card.md","content":"## Description:\n\nApple Design provides Apple-inspired UI, motion, typography, accessibility, and interaction-review guidance for web interfaces.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[cindypapa](https://clawhub.ai/user/cindypapa)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDesigners, 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.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: 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.\n\nMitigation: Confirm that Apple-inspired interaction guidance is appropriate before applying the skill broadly, or narrow trigger wording during deployment.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/cindypapa/skills/apple-design)\n- [Publisher profile](https://clawhub.ai/user/cindypapa)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, guidance]\n\n**Output Format:** [Markdown with CSS and JavaScript code examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Documentation-only guidance; no code execution, persistence, credential access, or hidden data movement is reported by the security evidence.]\n\n## Skill Version(s):\n\n1.0.1 (source: frontmatter and server release evidence)\n\n## Ethical Considerations:\n\nUsers 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."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"苹果设计原则与流体交互动效知识库，源自 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.","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":710,"uniquenessScore":59,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T22:04:04.329Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T22:04:04.329Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-12T23:32:40.292Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"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!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"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","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}