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'.
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
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].
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
Always ask this second question. Different devices require different layouts and 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 <style> tag. This establishes the full token foundation with automatic dark mode support.
Step 4: Apply Typography
Use the SF Pro system font stack:
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
Match type scale to Apple's text styles (e.g., Large Title 34pt, Headline Semibold 17pt, Body Regular 17pt).
Step 5: Build Components
Reference the component patterns in references/design-system.md for:
⚠️ All icons MUST come from Remix Icon (https://remixicon.com/). Do NOT use emoji, Unicode symbols, or custom SVGs drawn from scratch. Remix Icon provides a consistent, professional icon set with both line and fill variants.
5.5.1 How to Include Remix Icon
Option A — CDN (fastest, recommended for prototyping):
Then use as: <i class="ri-[name]-[line|fill]"></i> (e.g., <i class="ri-home-line"></i>)
Option B — Download individual SVGs:
# Search icon names from https://remixicon.com/# Download SVG and inline directly into HTML
5.5.2 Style Rule — Line Default, Fill for Tab Bar
Context
Style
Class
Example
Header icons (search, notif)
Line
ri-*-line
<i class="ri-search-line"></i>
Card/feature icons
Line
ri-*-line
<i class="ri-shield-check-line"></i>
Social media icons
Fill
ri-*-fill
<i class="ri-twitter-x-fill"></i>
Bottom Tab Bar
Fill
ri-*-fill
<i class="ri-home-fill"></i>
Action buttons (like, comment)
Line
ri-*-line
<i class="ri-heart-line"></i>
Active tab indicator
Fill
ri-*-fill
<i class="ri-compass-fill"></i>
Why: Line icons are cleaner for content-heavy UI; fill icons have stronger visual weight, ideal for bottom navigation where icons need to "pop" as tap targets.
5.5.3 Semantic Icon Reference Table
Always pick the icon that matches the semantic meaning, not just the visual shape.
Meaning
Remix Icon (Line)
Remix Icon (Fill)
Notes
Home
ri-home-line
ri-home-fill
Tab bar default
Search
ri-search-line
—
Header/nav
User / Profile
ri-user-line
ri-user-fill
Profile tab
Heart / Like
ri-heart-line
ri-heart-fill
Like action
Star / Favorite
ri-star-line
ri-star-fill
Bookmark/rate
Message / Chat
ri-message-3-line
ri-message-3-fill
DM/chat
Settings
ri-settings-3-line
ri-settings-3-fill
Settings
Bell / Notification
ri-notification-3-line
ri-notification-3-fill
Alerts
Menu / Hamburger
ri-menu-3-line
—
Mobile nav
Close / X
ri-close-line
—
Dismiss
Arrow left / Back
ri-arrow-left-line
—
Navigation
Arrow right / Forward
ri-arrow-right-line
—
Navigation
Check
ri-check-line
ri-check-fill
Confirm
Plus / Add
ri-add-line
ri-add-fill
Create action
Trash / Delete
ri-delete-bin-line
ri-delete-bin-fill
Remove
Edit / Pencil
ri-edit-line
ri-edit-fill
Edit
Eye / View
ri-eye-line
ri-eye-fill
Show/hide
Lock
ri-lock-line
ri-lock-fill
Security
Mail / Email
ri-mail-line
ri-mail-fill
Contact
Phone
ri-phone-line
ri-phone-fill
Call
Location / Pin
ri-map-pin-line
ri-map-pin-fill
Address
Calendar
ri-calendar-line
ri-calendar-fill
Date
Image / Photo
ri-image-line
ri-image-fill
Gallery
Camera
ri-camera-line
ri-camera-fill
Photo
Download
ri-download-line
—
Save
Share
ri-share-line
ri-share-fill
Share
Link
ri-link
—
URL
Shopping Bag
ri-shopping-bag-line
ri-shopping-bag-fill
E-commerce
Cart
ri-shopping-cart-line
ri-shopping-cart-fill
Cart
Credit Card
ri-bank-card-line
ri-bank-card-fill
Payment
Filter
ri-filter-line
—
Filter
Sort
ri-sort-desc
—
Sort
Refresh
ri-refresh-line
—
Reload
More / Ellipsis
ri-more-2-fill
—
Overflow menu
Compass / Discover
ri-compass-3-line
ri-compass-3-fill
Discover tab
Fire / Trending
ri-fire-line
ri-fire-fill
Hot/trending
Lightning
ri-flashlight-line
ri-flashlight-fill
Flash/speed
Award / Badge
ri-award-line
ri-award-fill
Achievement
Globe / Web
ri-global-line
—
Website
Code
ri-code-line
—
Developer
Briefcase
ri-briefcase-line
ri-briefcase-fill
Work
Coffee
ri-cup-line
ri-cup-fill
Cafe/break
Car
ri-car-line
ri-car-fill
Automotive
Plane
ri-plane-line
ri-plane-fill
Travel
Moon / Night
ri-moon-line
ri-moon-fill
Dark mode
Sun
ri-sun-line
ri-sun-fill
Light mode
Eye-off
ri-eye-off-line
—
Hide
User Plus
ri-user-add-line
—
Follow
Users / Group
ri-group-line
ri-group-fill
Team
Time / Clock
ri-time-line
ri-time-fill
History
Chat AI / Bot
ri-robot-line
ri-robot-fill
AI features
Sparkles
ri-magic-line
ri-magic-fill
AI/generative
Qr code
ri-qr-code-line
—
QR scan
Send / Arrow up
ri-send-plane-line
ri-send-plane-fill
Submit/send
External link
ri-external-link-line
—
Open link
5.5.4 Icon Sizing & Color
Use CSS for sizing — never set icon font-size via inline HTML attributes:
/* Icon base — inherit text color, match line height */.icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
vertical-align: middle;
}
/* Size variants */.icon-sm { font-size: 16px; }
.icon-md { font-size: 20px; }
.icon-lg { font-size: 24px; }
.icon-xl { font-size: 32px; }
/* In light/dark mode, use text color variable */.icon {
color: var(--label-primary); /* adapts to both modes */
}
Bottom tab bar icons MUST use fill style for both active and inactive states to maximize tap target visibility:
<divclass="tab-bar"><aclass="tab-item active"><iclass="ri-home-fill"></i><!-- fill, active --><span>首页</span></a><aclass="tab-item"><iclass="ri-compass-3-fill"></i><!-- fill, inactive — same weight as active --><span>发现</span></a><aclass="tab-item"><iclass="ri-add-circle-fill"></i><!-- fill, prominent CTA --><span>发动态</span></a><aclass="tab-item"><iclass="ri-message-3-fill"></i><span>消息</span></a><aclass="tab-item"><iclass="ri-user-fill"></i><span>我的</span></a></div>
5.5.7 Checklist — Icon Quality
Every icon comes from Remix Icon (ri-* class) — NO emoji, NO Unicode symbols
Line icons used for: headers, cards, actions, content UI
Fill icons used for: bottom tab bar, social icons, active states
Icon color uses CSS variable (var(--label-primary) or var(--accent-primary))
Icon sizes defined via CSS classes, not inline style="font-size:..."
Tab bar icons all use fill style for visual consistency
Notification badge positioned correctly with border matching background
Step 5.6: Mobile App Scroll Architecture (MANDATORY — Sticky 粘在手机屏幕视口)
⚠️ 核心诉求（同时满足）：
Header / Tab Bar 粘在"手机屏幕"的顶部和底部 —— 不是浏览器视口，是手机 mockup 的边界
Header / Tab Bar 的 backdrop-filter 毛玻璃真正生效 —— 内容必须物理上从它们下方穿过
All color tokens in references/design-system.md include dark mode variants via @media (prefers-color-scheme: dark). Always use CSS variables — never hardcode hex values.
IMPORTANT — Dual Mode Output: Whenever generating a UI (page, component, section, etc.), always ensure both Light and Dark Mode styles are fully implemented so the user can switch between them:
Light Mode — using light mode color tokens (:root)
Dark Mode — using dark mode color tokens (html[data-theme="dark"] override)
⚠️ 不要左右并排渲染两台手机（一台 Light + 一台 Dark）。只渲染一台手机/页面，通过 双击 Status Bar 切换主题 的方式让用户在两种模式间切换（手机原型场景见 Step 5.2；Web 场景可用右下角主题按钮或 prefers-color-scheme）。双模式的质量要求并没有降低 —— 两种模式的 token 都必须完整、可读、有对比度。
IMPORTANT — Visual Elements Must Also Adapt: Every visual element that has a dark-mode variant (gradient backgrounds, card images, hero sections, icon tints, overlay colors, decorative shapes) must have a corresponding light-mode version. Use [data-theme="dark"] / [data-theme="light"] attribute selectors or @media (prefers-color-scheme: dark) for background gradients, image overlays, and decorative elements. Do NOT hardcode a dark gradient and leave the light mode with the same dark colors — they must be visually appropriate for both modes.
Step 9: Dual Mode Quality Checklist (MANDATORY — Do This Before Output)
After writing all CSS, STOP and verify every element in BOTH modes using the following checklist. If any item fails, fix it before presenting the result.
Typography & Text:
All text uses CSS variables (var(--text-primary), var(--text-secondary), etc.) — never hardcode #FFFFFF or #000000 for body text
Light mode: text on light backgrounds has sufficient contrast (dark text on light bg, NOT white-on-light)
Dark mode: text on dark backgrounds is visible (light/white text on dark bg, NOT black-on-dark)
Labels, captions, metadata text also use variables and are visible in both modes
Buttons & Interactive Elements:
Primary buttons use var(--accent-primary) and are visible in both light and dark modes
If using a dark brand color (e.g., gold, red, deep blue) as button bg, it works on light backgrounds
Secondary/outline buttons use a dedicated variable like var(--cta-btn-secondary-color) — NOT var(--text-inverse) which breaks in light mode
Hover/active states are visible in both modes (avoid state-only reliance on dark bg assumptions)
Hero Sections — Critical:
Hero background: if :root has a dark --hero-bg value (e.g., #0A0A0A), there MUST be an explicit [data-theme="light"] block that overrides it to a light value. Do NOT rely on [data-theme="dark"] alone — if [data-theme="light"] is missing, the hero stays dark in light mode.
If the brand intentionally keeps Hero dark in both modes (luxury brands), then :root --hero-bg should be light and [data-theme="dark"] --hero-bg should be dark — not the reverse.
Hero overlay gradients: use CSS variables (--hero-overlay-gold, --hero-overlay-red) that are defined in BOTH mode blocks, not hardcoded rgba() values.
Hero title color: use var(--hero-title-color) which is defined in both mode blocks — do NOT use var(--text-primary) which may conflict with dark hero backgrounds.
Hero price tags / floating badges: use var(--hero-price-text) instead of hardcoded color: white
Hero decorative gradients: both light and dark mode versions (e.g., light mode: muted pastel overlay on gray bg; dark mode: gold/red glow on black bg)
CTA / Call-to-Action Sections:
CTA background uses var(--cta-bg) which can differ between modes
CTA title uses var(--cta-text) — NOT var(--text-inverse) or var(--text-primary) which breaks in the opposite mode
CTA secondary buttons use var(--cta-btn-secondary-color) with both mode values
Example: Dark CTA → --cta-bg: #1A1A1A, --cta-text: #FAFAFA, --cta-text-muted: rgba(250,250,250,0.55)
Visual Backgrounds & Gradients:
Hero sections: both [data-theme="light"] and [data-theme="dark"] / @media define distinct gradient backgrounds appropriate for each mode
Section backgrounds use var(--bg-primary), var(--bg-secondary) — adapt automatically
Dark CTA sections need a light-mode fallback (do NOT leave #000 as the only bg)
Decorative shapes, dividers, overlays all have both-mode variants
Cards & Component Surfaces:
Card backgrounds use var(--bg-tertiary) or var(--bg-secondary) — visible in both modes
If using a dark card background on a potentially light section, it MUST have both mode variants: light mode → light gray cards (#EBEBF0) with dark text; dark mode → near-black cards (#1A1A1A) with light text
Card borders use var(--glass-border) — subtle in both light and dark
Card image areas have gradients for both modes (do NOT hardcode dark-only gradient)
Hover states (e.g., border-color: var(--accent-primary)) are visible in both modes
Shadows & Elevation:
Light mode: use rgba(0,0,0,0.08–0.18) shadows for elevation
Dark mode: use rgba(0,0,0,0.3–0.6) shadows (darker = more visible on dark bg)
Do NOT use white/bright shadows in dark mode — use black-based shadows
Shadow color variables (--shadow-sm, --shadow-md, etc.) must differ between modes
Glass / Frosted Elements:
Glass nav bars: var(--glass-bg) and var(--glass-border) adapt to both modes
Translucent cards: both light-mode (rgba(255,255,255,0.8)) and dark-mode (rgba(20,20,20,0.8)) variants exist
Icons & Emojis:
Icons/emoji on dark backgrounds are visible (white/light icons)
Icons/emoji on light backgrounds are visible (dark/contrasting icons or use text color variable)
Icon backgrounds (rgba(accent, 0.1)) adapt to both modes
Footer 背景使用 var(--footer-bg) — :root MUST be light (#F0F0F4 or similar), [data-theme="dark"] MUST be dark (#1C1C1E or similar)
CRITICAL: Do NOT swap these values.:root = light mode defaults, [data-theme="dark"] = dark mode overrides. Common mistake: writing dark values in :root and light values in [data-theme="dark"] — this inverts the entire theme.
Practical test — read your CSS and mentally simulate:
Set html[data-theme="light"] — does the hero look right? Are buttons visible? Is text readable? Are there any white-on-light failures?
Set html[data-theme="dark"] — does the same element still look good? Any black-on-black or white-on-white failures? Do adjacent sections have enough contrast?
If something fails → fix both mode values, then re-verify.
The golden rule: Every hardcoded color that sits on a background must have a counterpart for the opposite mode. If in doubt, use a CSS variable.
Strategy for hero sections in luxury/premium brands:
The safest approach for hero-heavy pages (car brands, luxury, portfolio) is to keep the hero dark in BOTH modes — this is standard luxury brand practice. Define hero-specific text variables (--hero-text, --hero-text-muted) that stay white in both modes, while the rest of the page adapts normally. This avoids the complexity of designing two full hero backgrounds.
Step 10: Image Sourcing Workflow (MANDATORY — Unsplash First, AI as Fallback)
Every UI page needs real imagery. Default source = Unsplash. AI-generated imagery is a fallback only, not the default choice.
10.0 Decision Tree — Unsplash vs. AI (MUST follow)
Use Unsplash's curated collections or photo IDs to find high-quality, consistent images. For each image, pick a specific Unsplash photo ID from the table below, or search Unsplash using web_search for the right photo.
Common image types and recommended search terms:
Image Type
Unsplash Search Term
Luxury car / sports car
luxury car dark dashboard or sports car editorial
Technology / product
minimal product photography or tech device studio
Nature / green energy
forest sunlight minimal or clean energy wind
Portrait / person
professional portrait studio or creative director
Architecture
modern architecture concrete or luxury interior minimal
Abstract / gradient
abstract gradient purple or neon lights dark
Office / workspace
minimal workspace natural light
Fashion / lifestyle
editorial fashion photography
Tip: Use web_search to find the right Unsplash photo ID for your specific theme. Search: site:unsplash.com [description].
10.2.1 Check photo dimensions BEFORE downloading
⚠️ Critical: Always verify photo dimensions before downloading. A photo with insufficient resolution will be blurry on high-DPI screens.
Dimension check method — use curl HEAD request:
# Check file size of a candidate photo before downloading
curl -sI "https://images.unsplash.com/photo-[PHOTO_ID]?w=1200&q=80" \
| grep -i content-length
If content-length < 300KB for a card thumbnail → resolution is likely too low, pick a different photo ID
If content-length < 100KB for an avatar → resolution too low
If Unsplash returns HTTP 403/404 → photo unavailable, try different ID
After confirming size is adequate, then proceed with full download
Dimension reference table:
Image type
Min width
Min content-length (估算)
Action if too small
Hero (full-width)
1200px
≥ 400KB
Pick different photo
Card thumbnail
600px
≥ 150KB
Pick different photo
Avatar (mobile app)
300px
≥ 80KB
Pick different photo
Section image
800px
≥ 200KB
Pick different photo
Decision flow:
Search Unsplash → get candidate photo ID
curl -sI → check content-length
Size OK → download; Size too small → go back to step 1, pick another photo ID
Download → verify file size again (ls -la)
File < 1KB or broken → use Picsum fallback
10.3 Download images to local directory
Create a project-local images/ folder and download images using curl:
# Create images directory in the projectmkdir -p /Users/dayviwang/WorkBuddy/20260413101943/[project-name]/images
# Download an image — use the correct Unsplash photo ID
curl -L "https://images.unsplash.com/photo-[PHOTO_ID]?w=1920&q=80&auto=format&fit=crop" \
-o "/Users/dayviwang/WorkBuddy/20260413101943/[project-name]/images/hero.jpg"# For card thumbnails (min 600px wide to avoid blurry on retina)
curl -L "https://images.unsplash.com/photo-[PHOTO_ID]?w=800&q=80&auto=format&fit=crop" \
-o "/Users/dayviwang/WorkBuddy/20260413101943/[project-name]/images/card-01.jpg"# For avatar / portrait (min 300px, mobile app use 400px)
curl -L "https://images.unsplash.com/photo-[PHOTO_ID]?w=400&q=80&auto=format&fit=crop" \
-o "/Users/dayviwang/WorkBuddy/20260413101943/[project-name]/images/avatar-01.jpg"# Fallback: if Unsplash returns a tiny file (<1KB) or is inaccessible,# use Picsum as a reliable fallback:
curl -L "https://picsum.photos/1920/1080" \
-o "/Users/dayviwang/WorkBuddy/20260413101943/[project-name]/images/hero.jpg"
curl -L "https://picsum.photos/800/600" \
-o "/Users/dayviwang/WorkBuddy/20260413101943/[project-name]/images/card-01.jpg"
# Step 1: Check content-length via HEAD request
curl -sI "https://images.unsplash.com/photo-[PHOTO_ID]?w=1200&q=80" \
| grep -i content-length
# Content-Length: 523871 → OK (≥ 300KB)# Content-Length: 58000 → Too small, pick another photo# Step 2: Only if size is adequate, download
curl -L "https://images.unsplash.com/photo-[PHOTO_ID]?w=1920&q=80&auto=format&fit=crop" \
-o "images/hero.jpg"# Step 3: Post-download double checkls -la images/
# <1KB → download failed, retry with Picsum or different ID
10.4 Dual-mode images (for dual-mode pages)
For pages with dark + light mode, images should adapt:
Best approach: Use CSS filter — dark mode images are naturally darker, so adding filter: brightness(0.9) contrast(1.05) in [data-theme="light"] makes them feel consistent with a light UI
Alternative: Download two versions — a dark version and a bright/editorial version, swap them with src changes in JavaScript
Avoid: Never put a bright photo in a dark hero — always use an appropriately toned photo for the dark context
10.5 Reference local images in HTML
Use local paths in the HTML instead of Unsplash hotlinks:
<!-- Hero — dark-appropriate photo, local file --><divclass="hero-visual"><imgsrc="images/hero-car.jpg"alt="Luxury car" /></div><!-- Card — CSS handles dark/light adaptation via filter or dual-src --><imgsrc="images/card-product-light.jpg"data-dark-src="images/card-product-dark.jpg"alt="Product" />
Image attribution: Always credit Unsplash photographers in an images/credits.txt file or in the page footer:
Photos from Unsplash:
- [Photographer Name](https://unsplash.com/photos/[ID]) — [description]
10.6 Rounded corners for all images (MANDATORY)
Every <img> tag MUST have a matching CSS rule applying rounded corners. Raw rectangular images feel unfinished; rounded corners are a hallmark of polished Apple-style UI.
Avatar / small thumbnails → border-radius: var(--radius-sm) (8px)
Full-bleed section images → border-radius: var(--radius-xl) (20px) or larger
Example CSS:
/* Global — every image: cover fill + rounded corners */img {
border-radius: var(--radius-md);
object-fit: cover; /* fill by shortest edge, crop excess, no gaps */object-position: center; /* crop from center */
}
/* Hero — extra round */.hero-visualimg,
.hero-visual.hero-car {
border-radius: var(--radius-lg);
}
/* Cards — medium round */.model-cardimg,
.card-thumb {
border-radius: var(--radius-md);
}
/* Avatar — fully round */.avatar {
border-radius: 50%;
object-fit: cover;
}
10.7 Do this for every image slot
Never leave <img> tags with src="" or broken placeholder URLs. Every image slot must be filled with a real, downloaded photo and have rounded corners applied before the page is presented.
Quick Reference
Need
Token / Value
Primary action color
var(--apple-blue) → #007AFF
Page background
var(--bg-primary)
Card background
var(--bg-secondary)
Body text
var(--label-primary)
Secondary text
var(--label-secondary)
Body font
var(--font-system)
Code font
var(--font-mono)
Card radius
var(--radius-lg) → 16px
Touch target
44px minimum
Base grid
4px
Key Differentiators
To achieve authentic Apple quality:
Continuous (squircle) corners — use border-radius with large values, or SVG clip-path for pixel-perfect squircle
System color palette only — avoid arbitrary hex colors; stick to the token set
4pt grid — all spacing in multiples of 4px
Spring animations — never use linear easing for UI motion
Translucency over opacity — prefer backdrop-filter blur over flat overlays
Thin borders — use 0.5px or 1px borders with low-opacity white/black
SF Symbols aesthetic — thin, optically balanced icons that match text weight
