apple-design

name	apple-design
description	This skill should be used when the user wants to build clean, modern, high-quality UI with a premium feel — including requests for minimal design, frosted glass / glassmorphism effects, elegant landing pages, polished app interfaces, smooth spring animations, dark mode support, or refined component systems. Also applies when the user asks for iOS/macOS/visionOS-style design, Apple HIG, or says things like 'make it clean', 'premium UI', 'modern minimal', 'frosted glass', 'elegant interface', 'high-end design', or 'add icons to the page'.
description_zh	Apple 风格 UI 生成——简洁、精致、高级感。生成前会先询问配色方向（预设或自定义色值）和目标设备（Web/Mobile/Pad），输出双模式（浅色/深色）预览，配备 SF Pro 字体、毛玻璃、Spring 动效、响应式布局等完整设计规范。
description_en	Apple HIG design system: SF Pro typography, system colors, 4pt grid, component patterns, glassmorphism, and spring animations for iOS/macOS-style UI
version	1.5.0
author	Dayvi
license	MIT
allowed-tools	Read,Write,Bash

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 (ALWAYS Do This First)

Before writing any code, ask TWO questions — color scheme AND target device. Do not assume either.

1A: Color Scheme

Suggested questions to ask:

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

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

1. 科技蓝系 — Primary: Blue #007AFF, Accent: Purple/Teal
2. 自然绿系 — Primary: Green #34C759, Accent: Teal/Yellow
3. 活力橙系 — Primary: Orange #FF9500, Accent: Red/Yellow
4. 极简中性 — Black/White/Gray with single accent
5. 自定义 — 用户说一个颜色名称（如「珊瑚粉」「薄荷绿」）或直接给色值（如 #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].