Apple Design

Complete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and mobile applications.

6 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add XOVIET-GAME/apple-design-skill --skill apple-design

Manual install

git clone --depth 1 https://github.com/XOVIET-GAME/apple-design-skill.git /tmp/apple-design-skill
mkdir -p ~/.claude/skills
cp -r /tmp/apple-design-skill/. ~/.claude/skills/apple-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Apple Design System & Human Interface Guidelines (HIG)

This skill equips AI coding agents with the exact principles, visual specifications, component architectures, typography metrics, color tokens, motion curves, and automated compliance auditing defined by **Apple's Human Interface Guidelines (HIG)** across iOS, iPadOS, macOS, watchOS, visionOS, and modern Apple-grade Web UI.

---

## 🎯 Operational Modes

### Mode 1 — Design & Build from Scratch
When tasked with creating new screens, apps, or web interfaces in Apple style:
1. Choose the platform-native navigation paradigm (e.g. Bottom Tab Bar for iOS, Sidebar for macOS/iPad, Ornaments for visionOS).
2. Establish the 8pt spatial grid and continuous squircle curvature (`G2 continuity`).
3. Apply the SF Pro / New York typography scale with optical tracking rules.
4. Implement semantic Dynamic Colors (Light & OLED Dark mode) and Liquid Frosted Glass materials.
5. Apply Apple spring physics (`cubic-bezier(0.25, 1, 0.5, 1)`) and tactile active feedback (`scale(0.97)`).

### Mode 2 — Apple HIG Compliance Audit & Scoring
When reviewing an existing codebase, mockup, or component:
1. Run the audit tool `node skills/apple-design/scripts/audit-apple-design.mjs` to perform automated static scanning with a **0–100 Scoring Rubric**.
2. Perform exact mathematical WCAG contrast checks and 44×44pt touch-target validations.

Read the full skill on GitHub

Details

Skill name: apple-design
Repository: XOVIET-GAME/apple-design-skill
License: MIT
Repo updated: 25 October 2026

FAQ

What does the Apple Design skill do?

How do I install the Apple Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add XOVIET-GAME/apple-design-skill --skill apple-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Apple Design popular?

It lives in XOVIET-GAME/apple-design-skill, which has 6 GitHub stars and 0 forks.

Related skills

Build Your Own Component

ethankongee/build-your-own-component

Generate a complete UI component library with 24 components (Accordion through Tooltip). Supports React or Vanilla JS. Can produce 1-3 design variations for side-by-side comparison. Use when the user wants to create a component library, design system, UI kit, or build reusable UI components.

Frontend & Design

Telegram Premium Emojis

abbosahmad/telegram-premium-emojis

Comprehensive guide, design system, and code generator for Telegram Bot Premium Custom Emojis, Aiogram 3 card UI, icon_custom_emoji_id inline buttons, and sticker pack discovery.

Frontend & Design

Cockpit UI Skill

KrasAndy/cockpit-ui-skill

暗色 cockpit 风格的 UI/UX 词库与 cheatsheet。Claude 在开发能源 / 工业驾驶舱、暗色 dashboard、B 端 SaaS 前端时加载本 skill,会按 cheatsheet 中的三主题 token、字号 / 间距 / 圆角 / 阴影梯度、6 个核心组件 API(LayoutShell / SplitPane / ResponsiveGrid / DataTable / ThemeProvider / I18nProvider)以及实际可导出的 React + TypeScript 代码。

Frontend & Design

Figma Design Extract

jeltehomminga/figma-design-skills

Extract exact design values from a Figma node into a build-ready spec table, instead of eyeballing a screenshot. Use when the user shares a figma.com node URL, or says "implement this Figma design", "build this component from Figma", "extract the Figma values", or "match the Figma". This is design-to-code only - to push code into Figma, use figma-generate-design instead.

Frontend & DesignIn 1 list

Elementor Pro Designer Skill

jainshwetank/elementor-pro-designer-skill

Use this skill whenever helping someone build, design, or troubleshoot layouts in Elementor Pro V4 using the visual editor. Triggers on ANY mention of Elementor, page builder, Flexbox widget, Div block, section layout, widget configuration, responsive breakpoints, dark mode, scroll animations, Interactions tab, Variables Manager, Class Manager, Custom Code snippets, or any visual design work inside the Elementor panel. Also trigger when someone asks how to position elements, set spacing, apply typography, configure dark mode, prevent FOUC, or build scroll-triggered effects in Elementor. ALWAYS

Frontend & Design

Design Fidelity Verify

jeltehomminga/figma-design-skills

Prove a running app matches its design spec by measuring rendered values, not eyeballing a screenshot. Use when the user says "verify the design", "is this pixel-perfect", "check against Figma", "does the app match the design", or "design QA this screen". Runs a bounded vision+numeric loop over web or mobile, classifying every spec row rather than reporting a bare pixel delta. Consumes the figma-design-extract spec table.

Frontend & DesignIn 1 list

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.