Apple Style Design System
Paste the following prompt into your AI chat to install this skill:
Please install @user_a7af8eab/apple-design-skill using https://skillhub.cn/install/skillhub.md.
About this skill
Problem Addressed
Apple-design targets a practical UI problem: building interfaces that should feel Apple-like, but often end up as inconsistent templates. Common pain points include glassmorphism, frosted glass, translucent overlays, shadow hierarchy, motion rhythm, and mobile spacing that lack a shared token system. The skill turns Apple HIG-inspired values into implementation rules: Clarity, Deference, and Depth—content first, UI out of the way, and hierarchy expressed through material and motion.
How It Works
The skill first forces two context decisions: color scheme and target device. For color, it supports presets such as tech blue, natural green, vivid orange, and minimal neutral, or derives a four-color palette from a brand color or mood keyword and infers a dark-mode variant. For device, it distinguishes Web, Mobile, Pad, and multi-device targets, which drives layout, navigation, tap targets, and interaction patterns.
After confirmation, it loads references/design-system.md, establishes CSS custom property tokens, and applies an SF Pro type scale aligned with Apple text styles. Component guidance covers buttons, input fields, navigation bars, cards, alerts/sheets, and a mobile spacing system: --gap-card: 12px, --padding-card: 16px, --radius-card: 20px, and --margin-page: 16px. Preview rules also matter: one phone prototype, double-click the status bar to toggle theme, a rectangular mockup frame, and a page background that contrasts with the app background.
Boundaries
It fits clean, restrained, premium product pages, landing pages, app interfaces, and component prototypes, especially iOS/macOS-style or glassmorphism UI. The key is to confirm color and device first, then build from tokens. For strongly branded, non-Apple, or heavy 3D/WebGL work, the skill should be treated as a base design system rather than a complete visual direction.
Use Cases
- A front-end engineer builds a product landing page and needs iOS-style cards, buttons, and navigation with consistent radius, shadows, and spacing.
- A designer creates a mobile app prototype with one phone preview, double-click status-bar theme switching, and CSS variable-based spacing.
- A solo developer builds a SaaS feature page with frosted glass, backdrop blur, and spring animations without generic template stacking.
- A product team reviews a high-fidelity demo that needs Web, Mobile, and Pad layouts aligned with Apple HIG-style interface rules.
Best For
- A front-end engineer implementing web components who wants Apple-style tokens and component rules applied directly in CSS.
- A product designer building high-fidelity prototypes who needs consistent iOS-style buttons, cards, navigation bars, and spacing.
- A solo developer demoing a mobile app who wants single-phone preview, light/dark theme switching, and mobile spacing constraints.
- A front-end lead owning brand landing pages who wants restrained, clean, premium-feel page components.
Related Skills
Generate an interactive HTML product detail page from images and copy, with multi-product carousel, inline text editing, design controls, and PDF/JPG/PSD export support.
Enter a material name to get preview and download links for free, commercially usable video assets, with paid platform options, pricing, and search suggestions when results are limited.
A local CLI for Dreamina image and video generation, including credit checks, async submission, result queries, and task history review.
An AI-guided workflow for Chinese video dubbing and subtitles that configures iFlytek or edge-tts, splits audio, generates SRT, and composes the final video.