skills.rest
BarisSozen
BarisSozenCOMMUNITY
Explore all skills by this author →
𝕏@BarisSozen3GitHub

apple-ui-design

Generate Apple-inspired UI design guidelines with typography, color, and spacing tokens.

1|Updated Jan 4, 2026
Search Tags:#typography#design-system#micro-interactions#color-palette#apple-ui#spacing-system
One-click install
npx skills add https://github.com/BarisSozen/claude --skill apple-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-ui-design
Source: https://github.com/BarisSozen/claude/tree/main/.claude/skills/apple-ui-design
Command: npx skills add https://github.com/BarisSozen/claude --skill apple-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides teams to deliver polished, Apple-inspired UI with a premium feel, reducing design drift and accelerating decision making.

Core Features & Use Cases

  • Typography System: Establish SF Pro Display-inspired typography with clear hierarchy.
  • Color & Spacing: Provide a cohesive color philosophy, accessible contrast, and a tight spacing rhythm across components.
  • UI Patterns: Define cards, buttons, micro-interactions, and progressive disclosure to maintain a clean, premium look.
  • Use Case: A product team needs a consistent onboarding flow with Apple-like polish across an iOS-style interface.

Quick Start

Start by defining typography tokens, color tokens, and a compact spacing system that align with Apple-inspired design.

Frequently Asked Questions about apple-ui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an Apple-inspired UI design system for consistent typography and spacing?▼

An Apple-inspired UI design system establishes SF Pro Display-inspired typography tokens, a cohesive color philosophy, and a tight spacing rhythm to enforce consistent interface patterns across platforms.

What are the essential UI patterns for a premium iOS-style interface?▼

Essential UI patterns for a premium iOS-style interface include defining cards, buttons, micro-interactions, and progressive disclosure to maintain a clean, polished look and reduce design drift.

Can I use this to build a consistent onboarding flow with Apple-like polish?▼

Yes, you can use this to build a consistent onboarding flow with Apple-like polish by applying its typography hierarchy, accessible color contrast, and spacing systems to modern product interfaces.

What's the best way to establish typography tokens for a modern design system?▼

The best way to establish typography tokens for a modern design system is to define a clear hierarchy using SF Pro Display-inspired typography, ensuring crisp UX and consistent application across components.

How do color palettes and spacing systems affect accessible contrast in UI design?▼

Color palettes and spacing systems affect accessible contrast by providing a cohesive color philosophy and a tight spacing rhythm, ensuring modern interfaces maintain premium aesthetics without sacrificing accessibility.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
udecodeudecode
434

1-app-design-document

Codify React UI design systems with pattern catalogs and typography tokens.

Official
Intermediate
AlexiosBluffMaraAlexiosBluffMara
2

popular-web-designs

Catalog design-system templates and tokens from real websites into structured HTML/CSS.

Community
Intermediate
tropekstropeks

design-consultation

Propose and document a complete design system in a DESIGN.md file.

Community
Advanced