What makes this skill different from standard CSS generation?

It enforces specific Apple design tokens such as SF Pro typography, 980px pill buttons, and glassmorphism effects that are characteristic of high-end Apple software.

Is the generated design accessible?

Yes, the skill integrates accessibility standards including a minimum 4.5:1 contrast ratio and legible font hierarchies as part of its core principles.

Can I use this for mobile app development?

Absolutely. The skill includes specific rules for mobile-friendly interfaces, such as 44px minimum touch targets and responsive spacing systems.

What frontend frameworks is this compatible with?

The skill generates standard CSS variables and design patterns that can be easily integrated into any framework, including React, Vue, Tailwind, or vanilla HTML/CSS.

Does this skill support dark mode automatically?

Yes, the skill includes predefined CSS variables for both light and dark modes to ensure a consistent and modern appearance across all system themes.

Apple UI Design System

Name: Apple UI Design System
Author: BarisSozen

byBarisSozen

デザインツール

Generates high-fidelity, Apple-inspired user interfaces using minimalist aesthetics, premium styling, and best-in-class UX principles.

概要

The Apple UI Design skill empowers developers to build sophisticated, high-performance interfaces that emulate the signature aesthetic of modern macOS and iOS applications. It provides Claude with a comprehensive framework for typography, glassmorphism, responsive spacing, and fluid animations, ensuring that every front-end component adheres to the principles of clarity, deference, and depth. This skill is ideal for projects requiring a premium look-and-feel, dark mode support by default, and a focus on intuitive user experiences through strict UX rules and standardized design tokens.

主な機能

System-optimized typography hierarchy using SF Pro and responsive scaling.
Strict UX compliance checklist for accessibility, contrast, and touch targets.
Comprehensive color philosophy with native Light and Dark mode support.
Fluid micro-animations using cubic-bezier transitions for a premium feel.
0 GitHub stars
Advanced UI patterns including glassmorphism cards and pill-shaped interactive elements.

ユースケース

Developing high-end product landing pages that require 'Apple-like' polish and depth.
Refining existing frontend components to meet professional accessibility and spacing standards.
Building a premium SaaS dashboard with a clean, distraction-free minimalist interface.

概要

主な機能

System-optimized typography hierarchy using SF Pro and responsive scaling.
Strict UX compliance checklist for accessibility, contrast, and touch targets.
Comprehensive color philosophy with native Light and Dark mode support.
Fluid micro-animations using cubic-bezier transitions for a premium feel.
0 GitHub stars
Advanced UI patterns including glassmorphism cards and pill-shaped interactive elements.

ユースケース

Developing high-end product landing pages that require 'Apple-like' polish and depth.
Refining existing frontend components to meet professional accessibility and spacing standards.
Building a premium SaaS dashboard with a clean, distraction-free minimalist interface.