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

0•

デザインツール

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.

主な機能

01System-optimized typography hierarchy using SF Pro and responsive scaling.

02Strict UX compliance checklist for accessibility, contrast, and touch targets.

03Comprehensive color philosophy with native Light and Dark mode support.

04Fluid micro-animations using cubic-bezier transitions for a premium feel.

050 GitHub stars

06Advanced UI patterns including glassmorphism cards and pill-shaped interactive elements.

ユースケース

01Developing high-end product landing pages that require 'Apple-like' polish and depth.

02Refining existing frontend components to meet professional accessibility and spacing standards.

03Building a premium SaaS dashboard with a clean, distraction-free minimalist interface.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add barissozen/claude apple-ui-design

For use in Claude.ai and ChatGPT

Download Skill