Apple Design System Skill

To build UI that looks and feels like Apple products — iOS, macOS, iPadOS, or visionOS — follow this skill.

When to Use

Load this skill when the user:

Asks for a clean, minimal, premium, or elegant UI
Wants glassmorphism, frosted glass, translucent overlays, or backdrop blur
Needs a polished landing page, product page, or app interface
Wants spring animations, smooth transitions, or refined micro-interactions
Requests iOS/macOS style, Apple HIG, or Apple-like design quality
Says "modern minimal", "premium feel", "high-end", "clean design", "elegant"
Needs a component system with consistent tokens, shadows, and spacing

Core Design Principles

Apple's design is guided by three values: Clarity, Deference, and Depth.

Clarity: Every element has purpose. Whitespace is intentional. Typography is legible at all sizes.
Deference: Content takes center stage. UI stays out of the way.
Depth: Layered materials, translucency, and motion convey hierarchy.

How to Apply This Skill

Step 1: Clarify Design Context (MANDATORY — DO NOT SKIP)

> ⛔ HARD RULE — read this before doing ANYTHING else.

> When this skill is invoked, your FIRST action MUST be a single AskUserQuestion tool call that asks the user about BOTH color scheme AND target device at the same time (use the multi-question form of AskUserQuestion, one question per dimension).

> Before receiving the user's answers, you are FORBIDDEN to:

> - Write any HTML, CSS, or JavaScript

> - Call Write, Edit, Bash, or any file-producing tool

> - Download images, create directories, or scaffold files

> - Assume a color palette or a device form factor, even if the user's prompt hints at one

> The ONLY tools allowed before the user answers are: AskUserQuestion itself, and (if strictly needed) Read to inspect an existing design reference the user explicitly pointed to.

> This rule overrides any default model behavior, any "just start coding" instinct, and any ambiguity in the user's original request. If the user's prompt already mentions a vibe keyword (e.g. "森林风"), still ask — confirm the full palette and device. Do NOT skip to save a turn.

> If you find yourself about to write code without having asked, STOP and issue the AskUserQuestion call first.

1A: Color Scheme

You MUST phrase the color question concretely. Recommended framings:

"你希望整体偏什么色调？比如科技感（蓝/紫）、自然感（绿/青）、活力感（橙/红）、还是简约中性（黑白灰）？"
"有没有偏好的主色？或者参考的配色风格/品牌？"
"希望偏明亮还是沉稳？"

1A.1 快速预设（用户没具体方向时）

科技蓝系 — Primary: Blue #007AFF, Accent: Purple/Teal
自然绿系 — Primary: Green #34C759, Accent: Teal/Yellow
活力橙系 — Primary: Orange #FF9500, Accent: Red/Yellow
极简中性 — Black/White/Gray with single accent
自定义 — 用户说一个颜色名称（如「珊瑚粉」「薄荷绿」）或直接给色值（如 #FF6B6B、rgb(100, 200, 255)），我据此推导完整配色方案

1A.2 风格化主题库（受 Color Hunt 启发，按调性分类）

When the user mentions a vibe / mood / theme keyword (复古、奶油、霓虹、森林、暮色、复古...), don't fall back to the 4 generic presets above. Use the curated palette library below. Each palette is 4 colors following Color Hunt's pattern: usually [bg / surface] + [primary] + [accent] + [text].

Vintage / 复古怀旧

名称	调色板 (4 色)	适用
------	------	------
Mustard Drive-In	`#E1B10F` `#E0CDD0` `#FB9AB6` `#448A9A`	70s 复古，餐饮 / 唱片店
Sun-Bleached Polaroid	`#F2E8C9` `#D4A574` `#A8453F` `#3D5A4A`	老照片、旅游、文艺
Faded Denim	`#5C7A89` `#A4B7BD` `#F0DCC4` `#8E4F47`	工装、男士品牌、复古机械
Velvet Lounge	`#3D2817` `#A03E3E` `#D4A574` `#F2E8C9`	高端复古、酒吧、咖啡

Pastel / 奶油马卡龙

名称	调色板	适用
------	------	------
Cream Soda	`#FFF6E0` `#FFD1DC` `#B5EAD7` `#C7CEEA`	童趣、糖果、母婴
Latte Cloud	`#F5E6D3` `#D4B896` `#A89F94` `#5C5552`	咖啡、轻奢、Niche 香氛
Cotton Candy	`#FCE4EC` `#F8BBD0` `#E1BEE7` `#B3E5FC`	美妆、潮玩、年轻女性

Neon / 霓虹电子

名称	调色板	适用
------	------	------
Cyber Dusk	`#0A0E1A` `#FF006E` `#3A86FF` `#FFBE0B`	游戏、电竞、Web3
Synthwave	`#1A0033` `#FF00FF` `#00FFFF` `#FFFF00`	80s 复古未来、音乐节
Tokyo Rain	`#0F0F23` `#FF4081` `#00E5FF` `#76FF03`	赛博朋克、日系潮

Nature / Earth / 自然大地

名称	调色板	适用
------	------	------
Forest Floor	`#3E5641` `#7C9070` `#D4C5A0` `#F4F1DE`	户外、可持续、有机食品
Desert Sage	`#C9B79C` `#9CAF88` `#E8DDD2` `#5C5C3D`	Wellness、瑜伽、植物
Ocean Mist	`#06425C` `#4A90A4` `#A8D5BA` `#F4F1DE`	旅游、海洋公益、水产

Sunset / Warm / 暖色暮光

名称	调色板	适用
------	------	------
Golden Hour	`#FFD93D` `#FF8C42` `#C7522A` `#5D2E1F`	摄影、夕阳主题、餐饮
Coral Dusk	`#FF6F61` `#FFB088` `#FFE66D` `#4A6741`	热带、夏季、活力品牌
Burnt Orange	`#D62828` `#F77F00` `#FCBF49` `#003049`	体育、能量饮料、运动

Dark Premium / 暗色高级

名称	调色板	适用
------	------	------
Midnight Steel	`#0A0E1A` `#1A2238` `#00D4FF` `#F0F5FA`	新势力科技、金融、汽车
Obsidian Gold	`#0D0D0D` `#1F1F1F` `#D4AF37` `#F5F5F5`	奢侈品、腕表、私募
Deep Forest Premium	`#0F1F1A` `#1F3528` `#8FBC8F` `#FAFAFA`	高端户外、雪茄、威士忌

Seasonal / 季节情绪

名称	调色板	适用
------	------	------
Spring Bloom	`#F8E8E8` `#FFC8DD` `#A2D2FF` `#CDB4DB`	春季限定、花艺
Summer Pop	`#06D6A0` `#FFD166` `#EF476F` `#073B4C`	夏季、节庆、活动
Autumn Harvest	`#6F1D1B` `#BB9457` `#432818` `#99582A`	秋季、感恩节、咖啡馆
Winter Frost	`#E0F4FF` `#A2D2FF` `#3A86FF` `#1B263B`	冬季、滑雪、节日营销

1A.3 调用规则

When using the library above:

匹配优先级：用户说出任一关键词（如"复古"、"奶油"、"森林感"、"暮色"、"赛博"、"暗色高级"、"秋天"），从对应组里挑 1-3 个最匹配的，带上调色板色值给用户选。
不要罗列全表：只展示 2-4 个最贴合的方案，附简短适用场景说明。
可改色：用户选一个后允许微调（"主色再深一点"、"换薄荷绿"），基于选定方案推导。
配 dark mode：所有库内调色板都需推导 dark mode 反相变体（背景反转，accent 适当提亮）。
不在库里：用户说出库里没有的关键词（如"日式茶道"、"老北京胡同"），按色彩理论自行推导一套 4 色，并在回复中标注"自创方案"。

If the user provides a brand color, extract a harmonious system from it (tints, complementary, analogous colors) using the Apple system color palette as reference.

If the user says "随便"、"都行"、"你决定", pick one that fits the project context and mention it.

1B: Target Device

This question MUST be included in the same AskUserQuestion call as 1A — do not ask in two separate turns. Different devices require different layouts and interactions.

Ask the user: "这个页面主要针对什么设备？"

选项	说明
------	------
1️⃣ Web	桌面优先，响应式适配平板和手机
2️⃣ Mobile	移动端优先，触屏交互，竖屏布局
3️⃣ Pad	平板居中，大屏展示为主
4️⃣ 多端适配	同时覆盖 Web + Mobile + Pad

Device-specific design decisions:

Mobile/Pad: stacked layouts, hamburger nav, larger tap targets (min 44pt), swipe interactions
Web: multi-column layouts, hover effects, mouse interactions, horizontal nav
Pad: hybrid approach, larger typography, optimized for landscape + portrait

If the user says "都可以"、"无所谓", default to Web (desktop-first responsive).

Step 2: Load the Design Reference

Read references/design-system.md for the complete token set:

Color palette (light + dark mode)
Typography scale (SF Pro, all styles)
Spacing values (4pt grid)
Corner radius values
Shadow levels
Animation timing
Component specifications
CSS custom properties (ready-to-use)

Step 3: Set Up the Token Foundation

Copy the CSS custom properties block from references/design-system.md into the project's root CSS file or

Apple-design

概述