Design & Motion · axiaoge2/Apple-Hig-Designer

apple-hig-designer

Name: apple-hig-designer
Author: axiaoge2/Apple-Hig-Designer

Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Pure prompt-based skill with no runtime mechanisms: The repository root SKILL.md (445 lines) serves as the primary instruction, keeping TL;DR-level specifications in the main body while delegating details to 4 local knowledge base files, using explicit pointers in the body to guide the model on what to read.

SKILL.md

### Local References (read these for detailed implementations)

The section contains 4 pointers directing to REFERENCE.md, resources/design-tokens.css, resources/components.jsx, and resources/ui-patterns.md respectively; the model retrieves them on demand instead of stuffing all 5,468 lines into the context. This is a classic pattern of 'lean instructions, rich assets'.

Specifications are solidified into copy-pasteable CSS custom properties: SKILL.md and design-tokens.css provide 224 variables (including light/dark sets), so the model does not need to deduce font sizes or color values on its own.

resources/design-tokens.css

* Apple HIG Design Tokens

These variables are concurrently referenced in resources/components.jsx via var(--...) syntax (e.g., borderRadius: 'var(--radius-full)', fontFamily: 'var(--font-system)'), creating a single source of truth from 'tokens → components' where changes in one place take effect globally.

Transforms empirical HIG values into hard numerical thresholds, enabling the model to substitute subjective aesthetic judgment with determinable conditions.

SKILL.md

- **iOS:** Minimum 44×44 points

Similar quantified rules include the 8pt grid (--space-1…--space-12), 4.5:1 body text contrast ratio, 49px Tab Bar height, 270px Alert width, and large/medium detents for Sheets—all of which are concrete values directly verifiable against the output.

Light/dark dual modes are achieved via two sets of overrides under the same variable names combined with the prefers-color-scheme media query, rather than relying on two sets of classes or runtime toggling logic.

resources/design-tokens.css

--label-primary: #FFFFFF;

design-tokens.css contains 5 media query branches (dark, prefers-contrast: high and its dark combination, prefers-reduced-motion: reduce, and print); SKILL.md synchronously provides dark override blocks with identical values across both sides.

Component capabilities are delivered as copy-ready React templates: 12 export const components reside in a single .jsx file, ready to use once copied into a host project; the file carries side effects (injecting global keyframes upon import).

resources/components.jsx

import React, { forwardRef, useState, useEffect, useRef } from 'react';

This file is a template asset rather than a program executed by the skill; side effects involve browser DOM manipulation, as described in security.file_writes.

Optional visual effects are explicitly toggleable: Glass/frosted glass effects are only applied when explicitly requested by the user, defaulting to solid backgrounds.

SKILL.md

- **Glass/blur effects only when user explicitly requests**

The Default Behavior section in SKILL.md also requires 'Always provide non-glass fallback'; this requirement exists only at the instruction level, as the provided CSS lacks paired fallback styles (see verification.second_pass).

Triggering relies entirely on the 'Use when' clause in the frontmatter description plus in-body trigger phrases, without semantic routing scripts or tool declarations.

SKILL.md

**Trigger phrases:**

The frontmatter contains only name and description keys; trigger phrases are provided in both English and Chinese (e.g., “苹果风格的界面”, “符合 HIG 的设计”), while the README also provides examples like 'Apple-style / HIG-compliant / iOS-style'.

2Core Capabilities

01SF Pro typography system: 12-level iOS type scale + Display/Text usage thresholds + line height and font weight rules

02Comprehensive Apple system color palette and semantic colors: 9 system colors + gray1-6 + 4 label levels + 3 background levels + separator, with dark mode overrides

038pt grid spacing system and minimum tap target sizes (iOS 44×44pt, visionOS 60pt), along with concentric corner radius rules

04Component pattern specs: Explicit structures and values for buttons (capsule/secondary/press scaling), cards, inputs, Tab Bar, Toolbar, Sheet, Alert, and List

05Standard Apple animations: 4 easing curves + 1 spring curve + 4 duration tiers, plus hover glow and press scale feedback

06SF Symbols integration: 4 rendering modes (monochrome/hierarchical/palette/multicolor) and use cases, with web fallbacks (private use area glyphs or inline SVG + aria-label)

07Accessibility requirements: Text contrast ratio of 4.5:1 (3:1 for large text), zeroing motion with prefers-reduced-motion, and mandatory semantic HTML (button/nav/main + aria attributes)

08Output contract and self-verification: Requires fully runnable code, design rationale, responsive breakpoints, light/dark dual modes, aria attributes, and final verification against a 9-point Best Practices Checklist

3External Dependencies

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

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt instructions and rule text without script execution or external impact

Audit Notes: Green, safe to use: No script execution (all 11 tracked files in the pinned commit are .md/.css/.jsx/.png/.gif/LICENSE/.gitignore with 100644 file permissions, no shebang, no .sh/.py/.js), no network calls (zero fetch/axios/XMLHttpRequest/curl/wget/HTTP clients in source code), no credential access (no reading of env/keychain/secrets/tokens), no local disk writes (the skill does not instruct disk writes; the sole DOM side effect occurs in the host browser page). Caveats are informational rather than code-related: values must be manually verified for real-world project fit, external reading links are optional, and component templates are sample-level.

5Second-Pass Verification

[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' 零命中，无纯色降级分支。因默认走实心背景、玻璃为显式可选，实际暴露面小，但自述纪律与成品资产不完全对齐。

6Verdict & Scenarios

Zero dependencies and zero scripts, yet delivers actionable, quantified specs: 5,468 lines of text assets translate HIG empirical rules (44pt tap target, 8pt grid, 4.5:1 contrast, cubic-bezier curves) into concrete numbers and copy-pasteable CSS directly usable by the model.

Clear three-tier asset separation (TL;DR rules → 1,792 lines of pattern references → ready-to-paste CSS/JSX deliverables), allowing the model to load content on demand without flooding context window all at once.

Production-ready assets for immediate reuse: CSS variables and 12 React components are tied together as a single source of truth via var(--...), ready upon import (including built-in keyframes and Modal interaction details).

Restrained and predictable visual strategy: Defaults to solid backgrounds and requires explicit user requests for glass effects, avoiding default blur effects that degrade readability and rendering performance.

Disciplined delivery with a self-check checklist (9 points) and output contract (fully runnable code, design rationale, responsive breakpoints, aria attributes), minimizing partial or snippet-only outputs.

Clean security posture: No scripts, no network requests, no credentials, no disk writes; pure text skill with minimal audit overhead.

Best for: Best suited for: (1) Prompting agents to quickly generate 'Apple-flavored' Web/H5 interfaces (marketing pages, settings pages, login screens, chat interfaces, etc.), particularly front-end prototypes requiring light/dark modes and accessibility attributes; (2) Needing a ready-made set of HIG values, color palettes, and CSS variables as a project design baseline; (3) Layering other design styles on top of HIG as a foundational framework (an explicitly supported use case in README); (4) Educational or design review scenarios using its value checklists as a quick HIG reference sheet.

Not for: Not suited for: (1) Strict compliance audits requiring item-by-item verification against official Apple HIG (values are manually curated without source/version tags); (2) Native iOS/macOS (SwiftUI/UIKit) development—outputs are Web-oriented CSS/React where 44pt rules are expressed in Web px; (3) Scenarios depending on genuine SF Symbols font assets, Dynamic Type, or full Apple design resource kits (only web fallbacks and private use area glyphs are provided); (4) Scenarios expecting built-in build/test/preview pipelines from the skill (no scripts, package managers, or CI); (5) High-fidelity deliverables rejecting subsequent refactoring (component templates are sample-level).

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload apple-hig-designer.tar.gz

sha256: 4ba67b0a653218fd…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit ff17b91ff2.