1仕組みと動作原理
ランタイム機構を一切持たない純粋なプロンプト型スキル：リポジトリルートの 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 をそれぞれ指しており、モデルは5,468行を一度にコンテキストへ詰め込むのではなくオンデマンドで取得します。これは『薄い指示、厚いアセット』の典型的な構成です。
仕様を直接コピー＆ペースト可能な 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)'）で参照され、『トークン → コンポーネント』の単一情報源を形成し、1箇所の変更が全体へ反映されます。
HIG の経験則を厳格な数値の閾値として記述し、モデルが主観的な美的判断ではなく判定可能な条件に基づき動作するように設計。
SKILL.md
- **iOS:** Minimum 44×44 points
同様の定量化ルールには 8pt グリッド（--space-1…--space-12）、本文コントラスト比 4.5:1、Tab Bar の高さ 49px、Alert 幅 270px、Sheet の large/medium デテントなどがあり、いずれも出力結果から直接検証可能な数値です。
ライト/ダークのデュアルモードは、同一変数名の2組の再定義と prefers-color-scheme メディアクエリによって実現され、2組のクラスやランタイムの切り替えロジックに依存しない。
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';
このファイルはスキルによって実行されるプログラムではなくテンプレートアセットです。副作用はブラウザ 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 の2つのキーのみが存在します。トリガーフレーズは英語と中国語の両方で提供され（例：“苹果风格的界面”, “符合 HIG 的设计”）、README にも『Apple-style / HIG-compliant / iOS-style』の例が記載されています。
2コア機能
01SF Pro タイポグラフィ体系：12段階の iOS タイプスケール + Display/Text の使用閾値 + 行高およびフォントウェイト規則
02完全な Apple システムカラーパレットとセマンティックカラー：9つの system カラー + gray1-6 + label 4段階 + background 3段階 + separator（ダークモード上書き対応）
038pt グリッドスペーシング体系と最小タップ領域（iOS 44×44pt、visionOS 60pt）、および同心円状の角丸規則
04コンポーネントパターンの仕様：ボタン（カプセル/セカンダリ/押下縮小）、カード、入力フィールド、Tab Bar、Toolbar、Sheet、Alert、List の構造と数値を個別定義
05Apple 標準アニメーション：4つのイージングカーブ + 1つのスプリングカーブ + 4段階の所要時間、ホバー時の光彩や押下時の縮小フィードバック
06SF Symbols 統合：4つのレンダリングモード（monochrome/hierarchical/palette/multicolor）と利用シナリオ、および Web 向け代替手法（私用領域グリフまたはインライン 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外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| 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推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: スクリプト実行や外部影響を伴わない、純粋なプロンプト指示およびルールテキスト
監査ノート： グリーン（適合・安全な使用）：スクリプト実行なし（ピン留めされたコミットの追跡対象11ファイルはすべて .md/.css/.jsx/.png/.gif/LICENSE/.gitignore でパーミッションはすべて 100644、shebang なし、.sh/.py/.js なし）、ネットワーク呼び出しなし（ソースコード内に fetch/axios/XMLHttpRequest/curl/wget/HTTP クライアントは皆無）、クレデンシャル読み取りなし（env/キーチェーン/秘密鍵/トークンの読み取りなし）、ローカルディスク書き込みなし（スキルがディスク書き込みを指示せず、唯一の 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結論
最適な用途： 適した用途：① エージェントに『Apple らしさ』を持つ Web/H5 画面（マーケティングページ、設定画面、ログイン画面、チャット画面など）を素早く出力させたい場合（特にライト/ダーク両モードとアクセシビリティ属性が必要なフロントエンドプロトタイプ）；② プロジェクトのデザインベースラインとして活用できる HIG の数値・カラーパレット・CSS 変数が手元に必要な場合；③ HIG を基礎フレームワークとし、その上に他のスタイルを重ねて適用したい場合（README に記載の利用法）；④ 数値リストを HIG 要点のクイックリファレンスとして活用する教育・レビューの現場。
不向きな用途： 適さない用途：① Apple 公式 HIG と1対1の厳密な照合を必要とするコンプライアンス監査（数値は手動で収集されたもので、出典やバージョン表記がないため）；② ネイティブ iOS/macOS（SwiftUI/UIKit）開発（出力は Web 向けの CSS/React であり、44pt ルールも Web の px 単位で表現されているため）；③ 本物の SF Symbols フォントリソース、Dynamic Type、または Apple デザインリソース一式に依存するケース（Web 代替手法と私用領域グリフのみ提供）；④ スキル単体でビルド/テスト/プレビューのパイプラインまで完結することを期待するケース（スクリプト、パッケージ管理、CI なし）；⑤ 二次リファクタリングを許容しない高精度な納品を求めるプロジェクト（コンポーネントテンプレートはサンプルレベルのため）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload apple-hig-designer.tar.gz
sha256:
Option B · Copy Guide for Agent4ba67b0a653218fd…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit ff17b91ff2.