Apple Liquid Glass 设计技能
让 AI 编码代理直接产出苹果级别的「macOS 液态玻璃」风格网页界面，用可执行的设计规则替代泛泛的风格提示。
该 skill 为纯文档/样式指导，不含脚本、网络请求、凭证访问或外部副作用，权限面最小；第三方素材（motion.md 改编自 emilkowalski/skills、图标来自 Lucide）在 SKILL.md、README 与 LICENSE 中均有明确署名和许可声明，并声明与 Apple 无隶属。扣分点：发布者身份未经注册表验证，且仓库元数据许可证字段为 NOASSERTION，来源归因链路只能依赖仓库自述，无法静态核实 examples 与截图确由该流程产出。
各文件内部引用一致（SKILL.md 工作流引用的 design-system.md、tokens.css、patterns.md、components.md、app.md、icons.md、motion.md、review.md、checklist.md、reference.html 均在文件清单中说明），规则自洽、决策树明确、对异常输入有自检关卡。扣分点：静态审查无法执行验证，无自动化测试或 CI 证据，错误反馈质量只能由文档推断，未达可执行复现标准。
触发条件清晰（'Apple style'、'liquid glass'、'苹果风'、'液态玻璃'等中英触发词均列出），明确两模式（Build/Review）、框架无关定位及非适用边界（非 Apple 素材、明确区分 web 与 App 层），中文字体栈（PingFang）已纳入。扣分点：纯本地 markdown+CSS，无海外服务依赖，环境适配良好；但边界场景（如与既有设计系统冲突时的处理）描述较少，语义触发精度缺乏实际调用证据。
文档分层清晰（入口→规格→组件→模式→检查表→参考页），渐进披露结构好，MIT 许可证明确，第三方署名完整，双语文档。扣分点：无版本号、无 CHANGELOG、无维护责任与更新路径说明，仓库许可证元数据为 NOASSERTION，发布者未验证，治理与维护信号不完整。
README 提供端到端示例页（account.html、wallet.html）与截图，规则具体可操作，相比'让模型自由发挥'有明确的边际价值主张。扣分点：静态审查无法验证产出可直接使用，截图与示例未经独立复现，比较收益（对照替代方案）仅有作者自述，封顶 7 分。
有多类证据（SKILL.md、规格文档、tokens.css、示例 HTML、截图、许可证文件、第三方署名），可审计的原始材料较充分。扣分点：无第三方执行证据、无 CI/测试，'示例由该 skill 构建'这一关键主张仅有作者自述，未达多源独立佐证标准，静态封顶 5 分。
- 静态审查，未执行任何代码；示例页面与截图未经独立复现，产出质量待实际使用验证。
- 发布者身份未经 FollowSkills 注册表验证；仓库许可证元数据为 NOASSERTION，使用前请确认 LICENSE 文件（MIT）效力。
- 无版本号与更新日志，后续修订可能改变规则内容，建议固定 commit 使用。
- 引用的第三方素材（emilkowalski/skills、Lucide）需自行确认其上游许可条款仍然适用。
这个 Skill 能做什么，适合哪些场景？
这是一个面向 AI 编码代理的便携设计技能，通过纯 Markdown 与 CSS 教会代理产出苹果官网、Apple Newsroom 或最新 macOS 那种冷静、克制的「液态玻璃」视觉风格。它不是可导入的组件库，而是一套设计系统加决策纪律，核心原则包括：统一面板优于碎片卡片、毛玻璃只用于真正重叠的图层、灰阶为主而色彩仅作强调。技能包含完整设计规范、可移植 CSS tokens、可复制组件、动效层、iOS 外壳层、线性图标层和自检清单，且不依赖任何前端框架。
读取 SKILL.md 后按固定工作流执行：读取 design-system.md 全量规范；将 tokens.css 的 :root 自定义属性注入项目；从 patterns.md 选择页面配方（720 阅读容器 / 1080 网格，detail/index/home/form 原型）；从 components.md 复制导航、统一面板列表、卡片网格、分段控件、按钮等现成组件；交互图层应用 motion.md（弹簧缓动、同路径进出、材质化、reduced-motion）；手机屏幕读取 app.md（iPhone 设备框、大标题折叠导航、标签栏、底部抽屉）；需要图标时使用 icons.md（Lucide 线性图标集）；最后对照 reference.html 并通过 checklist.md 门禁。还有 review.md 模式可审计现有 CSS/页面，输出带 file:line 引用的优先修复清单。
- 前端开发者要求代理构建任何需要「苹果质感」的网页或组件时
- 设计已上线但感觉碎片化、卡片堆砌、通用化的界面需要重设计时
- 移动端 App / iOS 界面原型（手机壳、底部抽屉、标签栏）场景
- 已有 UI 需要审计「是否足够 Apple」并按 token 体系修复时
- React/Vue 等框架项目中需要一套可移植的苹果风设计 token 与组件结构时
- 用户用「苹果风」「液态玻璃」「clean Apple UI」等触发词提出需求时
这个 Skill 有哪些优点和局限？
- 纯 Markdown + CSS，框架无关，无构建步骤、无运行时依赖
- 包含 tokens、组件、页面配方、动效、iOS 外壳、图标、参考页和自检清单的完整体系
- 反垃圾清单直接指出 AI 生成页面的典型问题（碎片卡片、滥用毛玻璃、彩虹渐变、暖米色底）
- 附完整可交互示例页面（账户页、钱包 App 页）验证输出效果
- 动效层改编自 Emil Kowalski 的 MIT 技能，图标来自 Lucide（ISC），许可清晰
- 仓库 GitHub 元数据缺失描述与 topics，License 字段为 NOASSERTION，需以仓库内 LICENSE（README 称 MIT）为准
- README 声称不隶属于 Apple，商标归属 Apple Inc.，用于商业品牌场景需自行评估
- 无自动化测试套件，效果依赖代理对规则的实际遵循程度
- 未在 Claude Code 之外的代理平台上提供验证证据（虽然技术上可移植）
- 「Apple 品质」为审美判断，最终效果需人工对照 reference.html 验收
如何安装这个 Skill？
将仓库克隆到代理的技能目录。Claude Code：git clone https://github.com/naplesblue/apple-design-skill.git ~/.claude/skills/apple-liquid-glass 。其他代理则指向 SKILL.md 即可，纯 Markdown + CSS，无构建步骤、无依赖。
如何使用这个 Skill？
安装后代理会通过 SKILL.md 的 frontmatter 自动发现技能，当任务匹配触发词（"Apple style"、"liquid glass"、"make it look like apple.com"、"苹果风"、"液态玻璃"或任何要求苹果级界面的请求）时自动加载。构建模式下代理按固定工作流产出；审计模式下提供现有 CSS/页面让其走 review.md 流程。examples/account.html 和 examples/wallet.html 提供了可交互的完整示例。