1实现原理 · 为什么它能做到
纯提示型 skill，无任何运行时机制：仓库根 SKILL.md（445 行）是主指令，把 TL;DR 级规范留在正文，细节下沉到 4 个本地知识库文件，并在正文用显式指针告诉模型去读哪个。
SKILL.md
### Local References (read these for detailed implementations)
注：该小节 4 条指针分别指向 REFERENCE.md、resources/design-tokens.css、resources/components.jsx、resources/ui-patterns.md；模型据此按需取用，而不是把 5468 行全塞进上下文。这是『指令薄、资产厚』的典型写法。
规范被固化成可直接粘贴的 CSS 自定义属性：SKILL.md 与 design-tokens.css 提供 224 个变量（含亮/暗两套值），模型无需自行推演字号与色值。
resources/design-tokens.css
* Apple HIG Design Tokens
注：这些变量同时被 resources/components.jsx 以 var(--...) 形式引用（如 borderRadius: 'var(--radius-full)'、fontFamily: 'var(--font-system)'），形成『token → 组件』的单一来源，改一处即全量生效。
把 HIG 的经验值写成硬数字阈值，让模型用可判定的条件代替主观审美判断。
SKILL.md
- **iOS:** Minimum 44×44 points
注：同类量化项还有 8pt 栅格（--space-1…--space-12）、正文对比度 4.5:1、Tab Bar 高度 49px、Alert 宽度 270px、Sheet 的 large/medium detents——都是可被输出直接核对的数值。
亮/暗双模式靠同一组变量名的两套重定义 + prefers-color-scheme 媒体查询实现，而不是两套 class 或运行时切换逻辑。
resources/design-tokens.css
--label-primary: #FFFFFF;
注：design-tokens.css 内共有 5 类媒体查询分支（dark、prefers-contrast: high 及其 dark 组合、prefers-reduced-motion: reduce、print）；SKILL.md 侧同步给出 dark 覆盖块，两边数值一致。
组件能力以可复制的 React 模板承载：12 个 export const 组件放在单个 .jsx 文件里，拷入宿主项目即可用；文件自带副作用（导入即注入全局 keyframes）。
resources/components.jsx
import React, { forwardRef, useState, useEffect, useRef } from 'react';
注：该文件是模板资产而非被 skill 执行的程序；副作用为浏览器 DOM 操作，见 security.file_writes 说明。
可选效果显式开关化：玻璃/毛玻璃效果只在用户明确要求时使用，默认走实心背景。
SKILL.md
- **Glass/blur effects only when user explicitly requests**
注：SKILL.md 的 Default Behavior 段同时要求『Always provide non-glass fallback』；该要求只存在于指令层，成品 CSS 未配套降级（见 verification.second_pass）。
触发完全依赖 frontmatter description 的 Use when 子句 + 正文触发短语表，无语义路由脚本、无工具声明。
SKILL.md
**Trigger phrases:**
注：frontmatter 仅 name 与 description 两个键；触发短语给出中英双语（如 “苹果风格的界面”“符合 HIG 的设计”），README 另给『Apple-style / HIG-compliant / iOS-style』示例。
2核心能力
01SF Pro 排版体系：12 级 iOS 字号刻度 + Display/Text 使用阈值 + 行高与字重规则
02完整 Apple 系统色板与语义色：9 个 system 色 + gray1-6 + label 四级 + background 三级 + separator，含 dark 覆盖
038pt 栅格间距体系与最小可点区域（iOS 44×44pt、visionOS 60pt），并给出同心圆角规则
04组件模式规范：按钮（胶囊/次级/按下缩放）、卡片、输入框、Tab Bar、Toolbar、Sheet、Alert、List 逐项给出形态与数值
05Apple 标准动效：4 条缓动曲线 + 1 条弹簧曲线 + 4 档时长，另含 hover 光晕与按下缩放反馈
06SF Symbols 集成：monochrome/hierarchical/palette/multicolor 四种渲染模式与使用场景，并给网页替代写法（私有区字形或内联 SVG + aria-label）
07无障碍要求：文本对比度 4.5:1（大字 3:1）、prefers-reduced-motion 归零动效、强制语义 HTML（button/nav/main + aria 属性）
08输出契约与自检：要求完整可运行代码、设计理由（rationale）、响应式断点、亮暗双模式与 aria 属性，并以 9 条 Best Practices Checklist 收尾核对
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | react（仅 resources/components.jsx 需要，React 18+；skill 自身不安装、不打包） |
| network | developer.apple.com（HIG / Design Resources / SF Symbols / Fonts 文档外链，正文只列为参考，未指示抓取） |
| network | img.shields.io（README 顶部三个徽章图片，渲染时由 GitHub/浏览器拉取，非 skill 行为） |
| network | github.com（README 内 user-attachments 示例图与仓库自身链接） |
| network | fashion-editorial.vercel.app（作者风格融合演示站，仅 README 展示链接） |
| cli | cp / xcopy —— README 安装步骤中的系统命令，由用户手工执行，skill 运行时不调用任何 CLI |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 规范数值是人抄的时点快照，无版本标注与同步机制 — 字号、圆角、色值等为 2025-2026 时点的人工抄录，skill 不含与 Apple 官方文档的同步/校验；Apple 改版后不会自动更新，且 ui-patterns.md 的 TOC 已被证实与实体脱节（8 项 vs 4 项），提示该资产确有维护滞后。
- 正确性无法自动验证，误用仍会自称『HIG 合规』 — 全部结论依赖模型自身知识与文中数值，skill 无校验脚本、无测试、无示例对比图断言；若模型把 44pt 误用到 macOS、忽略 Dynamic Type 或错配亮暗色值，输出侧不会报警。
- 『非玻璃回退』纪律未落到成品资产 — design-tokens.css 的 .glass/.glass-dark 无 @supports 降级（全仓 @supports 零命中）；用户显式要玻璃效果又遇到不支持 backdrop-filter 的宿主时，回退只能靠模型临场补。
- 外链带来的间接注入面与知识时效假设 — SKILL.md/README 指向 developer.apple.com 等外部文档；若模型主动抓取并把这些页面内容当成规范来源，就引入第三方内容的间接注入面——skill 自身未指示抓取，但外链的存在会诱导这一行为。
- 『风格融合』定位会稀释合规语义 — README 主张把 HIG 当基础框架再叠加赛博朋克/奢侈品牌等风格（并附示例站 fashion-editorial.vercel.app）。这类输出的目标是『Apple 味』而非严格 HIG 合规，用户按名字取义可能误判合规程度。
- 组件模板是示例级而非生产级 — components.jsx 使用 inline style、未抽象主题切换与 Dynamic Type、aria 属性仅 3 处（aria-checked / aria-modal / aria-label）、且导入即产生全局副作用；文件自称模板（“Use these components as templates”），但仍可能被原样粘贴进生产项目。
绿色，放心使用：无脚本执行（pin commit 的 11 个 tracked 文件全为 .md/.css/.jsx/.png/.gif/LICENSE/.gitignore，权限位全部 100644，无 shebang、无 .sh/.py/.js），无网络调用（源码零 fetch/axios/XMLHttpRequest/curl/wget/HTTP 客户端），无凭证读取（无 env/keychain/密钥/令牌读取），无本地文件写入（skill 不指示写盘；唯一的 DOM 副作用发生在宿主浏览器页面内）。注意点属知识型而非代码型：数值需人工判断是否适配真实项目，外链阅读可选，组件模板为示例级。
5第二遍独立确认
- [ok] skill.path = "."（根 SKILL.md） — git ls-tree -r --name-only HEAD 显示 SKILL.md 位于仓库根，无 skills/、.claude/skills/、plugins/ 子目录；与 brief 中 path=待定位 的自行确认要求一致。
- [ok] commit 与 pin 一致 — 本地 HEAD = ff17b91ff2903ecd52940afabf97de5a73c9cd1b，与 pin ff17b91ff290 一致；git log -1 为 2026-02-17 20:03:07 +0800 “Update README_CN.md”。
- [ok] meta.official_desc 逐字来自 SKILL.md frontmatter — 与 SKILL.md 第 3 行 description 完全一致，含尾句 “Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.”；frontmatter 只有 name 与 description 两个键。
- [ok] 无脚本执行 / 无隐藏可执行文件 — 11 个 tracked 文件仅 .md/.css/.jsx/.png/.gif/LICENSE/.gitignore；无 .sh/.py/.js/.mjs/.ts；grep '^#!' 在 tracked 内容零命中；git ls-files -s 全部模式 100644。
- [ok] 无网络调用 — 全文本文件 token 扫描无任何 HTTP 客户端调用；URL 仅出现在文档超链接（developer.apple.com ×10、img.shields.io ×6、github.com ×2、fashion-editorial.vercel.app ×2）与 README 徽章/示例图。
- [ok] React 为唯一第三方依赖 — components.jsx 仅一行 import，自 'react' 取 React/forwardRef/useState/useEffect/useRef；文件头部 @requires React 18+ 与 @requires CSS Variables from design-tokens.css。仓库无 package.json，故该依赖不随 skill 安装。
- [discrepancy] ui-patterns.md 的 TOC 与实体不符 — TOC 列 8 个模式（含 Settings Page / Profile Page / Search Interface / Chat Interface），但文件内 `## ` 级标题仅 4 个（Complete Login Page / Dashboard Layout / Product Card Grid / Pricing Table）；那 4 个缺失标题在全文各只出现 1 次（即 TOC 自身），确认为目录先行、内容未跟进。不影响已交付的 4 个示例可用性，但属资产维护缺口。
- [discrepancy] 『必须提供非玻璃回退』只在指令层，成品 CSS 未配套 — SKILL.md 要求 “Always provide non-glass fallback for browsers without backdrop-filter support”，而 design-tokens.css 的 .glass / .glass-dark 直接写 backdrop-filter 与 -webkit-backdrop-filter，全仓 grep '@supports' 零命中，无纯色降级分支。因默认走实心背景、玻璃为显式可选，实际暴露面小，但自述纪律与成品资产不完全对齐。
6结论
适合：适合：① 让 agent 快速产出『Apple 味』的 Web/H5 界面（营销页、设置页、登录页、聊天页等），尤其需要亮暗双模式与无障碍属性的前端原型；② 需要一份现成的 HIG 数值/色板/CSS 变量作为项目风格起点或基线；③ 想把 HIG 当基础框架再叠加其它风格（README 明示用法）；④ 教学/评审场景，用它的数值清单当作 HIG 要点的速查表。
不适合：不适合：① 需要与 Apple 官方 HIG 逐条对标的合规审计（数值为人工抄录，无出处与版本标注）；② 原生 iOS/macOS（SwiftUI/UIKit）开发——产出面向 Web 的 CSS/React，44pt 规则按 Web px 表述；③ 依赖真实 SF Symbols 字体资源、Dynamic Type 或 Apple 设计资源全套的场景（仅给网页替代写法与私有区字形）；④ 期待 skill 自带构建/测试/预览流水线的场景（无脚本、无包管理、无 CI）；⑤ 高保真交付且拒绝二次重构的项目（组件模板为示例级）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 apple-hig-designer.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent4ba67b0a653218fd…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库axiaoge2 / axiaoge2/Apple-Hig-Designer
原始 GitHubaxiaoge2/Apple-Hig-Designer ↗
Stars152
最近推送2026-02-17
本 skill commit
ff17b91ff2许可MIT（仓库根 LICENSE：Copyright (c) 2024 Apple HIG Designer Contributors；GitHub API spdx_id=MIT）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。