apple-designyazan Emil Kowalski

Apple Design Skill.

UX araştırması için bir Claude Code ve Codex skill'i: Apple'ın hareketleri, fiziksel hareketi ve uzamsal hiyerarşisi web için çevrilmiş.

UX & Araştırma
UI kodu

OpenDesign İndir Kullanım kılavuzunu görüntüle

emilkowalski/skills · skills/apple-design/SKILL.mdSKILL.md

--- name: apple-design description: Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style … --- ## The Core Idea ## 1. Response — kill latency ## 2. Direct manipulation — 1:1 tracking ## 3. Interruptibility — the single most important principle ## 4. Behavior over animation — use springs ## 5. Velocity handoff — the seam between drag and animation

Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam hâliyle 22.559 karakter

01 Ne yapar

apple-design Skill'i Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Apple Design, Apple'ın WWDC arayüz konuşmalarını, özellikle Designing Fluid Interfaces'ı (WWDC 2018), akıcı ve fiziksel web UI'ları oluşturmak için kurallara damıtır. Sürükleme, kaydırma, sheet'ler, spring'ler, momentum, kesintiye uğratılabilir geçişler, yarı saydam materyaller ve derinlik, tipografi (optik boyutlandırma, tracking, leading) ve azaltılmış hareket davranışıyla ilgilenen jest odaklı arayüzler üzerinde çalışan tasarımcılara ve geliştiricilere yöneliktir.

Ana fikir, hareketin ekrandaki mevcut değerden başlaması, kullanıcının hızını devralması, momentumu ileriye doğru yansıtması ve her an tutulabilir ve geri alınabilir olması gerektiğidir. Spring'ler sabit süreli animasyonların yerini alır çünkü doğaları itibarıyla kesintiye uğratılabilir ve hıza duyarlıdırlar; skill, ortak bir kelime dağarcığı olarak kullanılan Apple'ın sekiz tasarım ilkesiyle sona erer.

Neler üretir

:active durumunda kontrolü 100ms ease-out geçişiyle ölçeklendiren basma geri bildirimi CSS'i.
Kritik sönümlenmiş varsayılanı ve momentum sıçrama varyantını yan yana gösteren motion spring çağrıları.
Varsayılan olarak decelerationRate 0.998 olan momentum projeksiyonunu uygulayan bir project() yardımcı fonksiyonu.
Yarı saydam araç çubuklarını, bulanıklık olmadan düz arka planlarla değiştiren azaltılmış saydamlık CSS'i.

Örnek istemi görün ↗

Nasıl Çalışır

01
İşaretçi basılmasında yanıt verin
Geri bildirim bırakmaya değil basmaya aittir: kontrolü basıldığı an vurgulayın ve ~300ms'lik dokunma gecikmesi dahil giriş yolundaki gereksiz her şeyi bir regresyon olarak ele alın.
02
İşaretçiyi 1:1 Takip Edin
Yakalama (capture) ile Pointer Events kullanın, böylece işaretçi elementin sınırlarının dışına çıksa da takip devam eder; kullanıcının nereden tuttuğuna saygı gösterin, elementin merkezine yapıştırmayın.
03
Hareketi Kesilebilir Hale Getirin
Hareket eden bir eleman, uçuş sırasında tutulabilir ve tersine çevrilebilir olmalıdır; kullanıcı bir animasyonu yeniden yönlendirmeden önce mevcut animasyonun bitmesini asla beklememelidir.
04
Hareketi Yaylarla (Springs) Modelleyin
Bir yay, hedefini basitçe değiştirerek yeni girdiyi emer, böylece hareket sürekli kalır; sabit süreli senaryolarda yeniden hedeflenecek bir şey yoktur.
05
Bırakma Anındaki Hızı Devredin
Yaya, bırakma anındaki işaretçi hızını verin ki sürükleme ile animasyon arasında bir dikiş izi olmasın; API göreli hız istediğinde kalan mesafeye göre normalize edin.
06
Momentumu Yansıtın, Sonra Yapıştırın
Parmağın bırakıldığı yerden yapıştırmayın; dinlenme konumunu kaydırma yavaşlamasının yapacağı gibi yansıtın ve bu yansımaya en yakın yapıştırma hedefini seçin.

02 Uyumunuzu bulun

apple-design Skill Ne Zaman Kullanılır

Bu türden UX araştırması için Claude Code veya Codex'te apple-design skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Sürükleme, kaydırma, sheet, momentum ve kesilebilir geçişler gibi jest odaklı UI oluşturma veya inceleme.
Nav bar, toolbar ve sheet'lerin yüzen bir işlevsel katman olarak davrandığı, yarı saydam malzemeler ve derinlik üzerinde çalışma.
Optik boyutlandırma, tracking ve leading'in boyutla birlikte değişmesi gerektiği, bir boyut ölçeği üzerinde tipografi çalışması.
Azaltılmış hareket, azaltılmış şeffaflık ve artırılmış kontrastın sonradan eklenmek yerine bileşenlere gömülü olduğu erişilebilirlik geçişleri.
Bir karar üzerinde tartışırken Apple'ın tasarım ilkelerini açık, ortak bir kelime dağarcığı olarak isteyen ekipler.

Sınırları Bilin

Kullanıcı elemente dokunabildiği anda skill'in devre dışı bıraktığı, önceden senaryolanmış veya sabit süreli animasyon.
Geri bildirimin dayandığı sürekli takibi göz ardı ettiği için sadece nihai bir jest durumunu bildiren tanıyıcılar (recognizer).
İçeriğin yarı saydam bir katmanın altında kaymasına izin vermek yerine sabit bir şerit tüketen opak chrome.
Varsayılan bir alışkanlık olarak onay istemleri; dosya bunları yalnızca gerçekten yıkıcı, geri alınamaz işlemler için ayırır.

Ne Sağlamalısınız

Jest kodu ve işaretçi geçmişiPointer Events uygulamasını getirin, çünkü skill setPointerCapture ile sadece geçerli noktayı değil, kısa bir hız/konum geçmişini de bekler.
Hızı yeniden hedefleyebilen bir yay kütüphanesiWeb eşlemesi Motion / Framer Motion üzerinden çalışır ve kütüphanenin bir yeniden hedeflemede hızı taşıması gerekir; her yay uygulaması bunu yapmaz.
İncelenmesini istediğiniz yarı saydam chromeToolbar'lar, nav bar'lar ve sheet'ler, backdrop-filter blur ve yarı saydam bir arka planla yarı saydam katmanlar olarak inşa edilir; içerik bunların altında kayar.

03 Skill'in içinde

apple-design Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Varsayılan Olarak Kritik Sönümlenmiş Bir Yay (Spring) Kullanın
Çoğu UI'ı sönümleme (damping) 1.0 ile başlatın ki fazla salınım olmadan yerleşsin; sıçrama (bounce), yaklaşık 0.8 sönümlemede, ancak jestin kendisinin bir fiske veya sürükleme bırakması gibi momentum taşıdığı yerlerde ekleyin.
Sunum Değerinden Animasyon Uygulayın
Kesinti anında, öğenin ekrandaki canlı dönüşümünü okuyun ve yeni animasyonu buradan başlatın; mantıksal veya hedef değerden başlamak gözle görülür bir sıçrama yaratır.
Hareketleri CSS Geçişleriyle Yönlendirmeyin
CSS geçişleri ve @keyframes, hareket sırasında yumuşak şekilde yakalanıp tersine çevrilemez; bu nedenle jest kaynaklı hareket bir spring kitaplığıyla yönetilmelidir.
2D Hareketi İki Spring'e Ayırın
2D uzaklık üzerinde tek bir spring çalıştırmak yerine bağımsız X ve Y spring'leri çalıştırın; çünkü hızları farklılaştığında eksenler senkron dışına kayar.
Apple'ın Projeksiyonunu Kullanın, Ders Kitabındakini Değil
Fizik ders kitabındaki v²/(2·decel) formülü Apple'ın kullandığı değildir; normal kaydırma hissi için decelerationRate 0.998 ile üstel bozunma formunu, daha çabuk bir his için ise 0.99 kullanın.
Hızı Bir Ters Dönüş Boyunca Harmanlayın
Bir jest ters döndüğü anda bir animasyonu diğeriyle değiştirmek bir hız süreksizliği, bir duvar etkisi yaratır; bunun yerine geçerli hızdan yeniden hedefleme yapan bir spring kitaplığı seçin.
Hafif Yarı Şeffaf Yüzeyleri Asla Üst Üste Bindirmeyin
Malzeme ağırlığı hiyerarşinin nasıl okunduğunu belirler: daha ağır malzemeler yapısal bölgeleri ayırır, daha hafif olanlar ise etkileşimli öğeleri vurgular; bu nedenle hafif yarı şeffaf katmanları birbirinin üstüne koymayın.
Tüm Boyutlar İçin Tek Bir Tracking Değeri Kullanmayın
Harf aralığı boyuta özgüdür: büyük ekran metinleri negatif tracking isterken küçük metinler hafif pozitif tracking ister; bu yüzden sabit bir letter-spacing bir yerde yanlış olacaktır.

04 İşe koyun

Claude Code veya Codex'te apple-design kurulumu

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

apple-design'ı Claude Code, Codex veya Kendi Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/emilkowalski/skills --skill apple-design

skills/apple-design/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk UX Araştırma Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

I'm building a bottom sheet in [React] that users drag down to dismiss. It currently uses a CSS transition, so a flick snaps from wherever I released and the sheet can't be grabbed again while it's closing. Rework it with Pointer Events and a spring so it tracks the finger 1:1, hands off the release velocity, and projects momentum to pick the snap point.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Kapanan bir öğeyi hareket halindeyken tekrar yakalayın ve önce kapanışını tamamlamak yerine parmağı takip ettiğini doğrulayın.
Bir jesti tersine çevirin ve hız süreksizliğini gözlemleyin; bu, hızın yeniden hedefleme sırasında harmanlanmadığı anlamına gelir.
Gerçek insanlarla gerçek bağlamda test edin, çünkü hareket değerlendirmesi bir geliştiricinin makinesinde bozulur.
Hareketi ağır çekimde veya kare kare tekrar oynatın, çünkü ilginç kusurlar tam hızda görünmez.
İniş hedefinin bırakma noktasından değil, projeksiyonla hesaplanan bitiş noktasından geldiğini doğrulayın.
Azaltılmış şeffaflık varyantını kontrol edin: yarı şeffaf yüzeyler daha buzlu veya katı hale gelmeli, arka plan opaklığı artırılmalı ve blur düşürülmelidir.

OpenDesign'da apple-design'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Skill dosyası: skills/apple-design/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit d23d7f8
License: MIT LICENSE dosyasından.
Repository yıldızları: 37.516 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm emilkowalski/skills deposu için alındı; bu depoda bu katalogda yer alan 9 beceri bulunmaktadır. apple-design için bir derecelendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

1. Yanıt — gecikmeyi ortadan kaldırınPointer-down anında yanıt verin, her gecikmeyi denetleyin, etkileşim boyunca geri bildirimi sürekli tutun.
2. Doğrudan manipülasyon — 1:1 takipİçeriği işaretçiye yapıştırın, tutma ofsetine uyun, kısa bir hız geçmişi tutun.
3. Kesintiye açıklık — en önemli tek ilkeGirdiyi asla kilitlemeyin, sunum değerinden animasyon başlatın, ters çevirmede hızı harmanlayın, 2D yayları ayırın.
4. Animasyon değil davranış — spring kullanınSönümleme oranı ve tepki, fiziğin yerini alır; varsayılan sönümleme 1.0'dır, sıçrama yalnızca momentum için kullanılır.
5. Hız devri — sürükleme ile animasyon arasındaki dikişSerbest bırakma hızını spring'e aktarın, gerektiğinde kalan mesafeye göre normalize edin

Skill'in Kendi Açıklaması

"Apple'ın arayüz tasarımına ve akıcı, fiziksel harekete yaklaşımı, web için uyarlanmış haliyle. Hareketle yönlendirilen kullanıcı arayüzü, yay animasyonları, sürükleme/kaydırma/sayfa etkileşimleri, momentum ve kesilebilir geçişler, yarı saydam materyaller ve derinlik, tipografi (optik boyutlandırma, tracking, leading), azaltılmış hareket veya Apple tarzı arayüzlerin arkasındaki tasarım temelleri (geri bildirim, mekansal tutarlılık, kısıtlama) oluştururken veya incelerken kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 22.559 karakterdir. Dosyanın tamamını GitHub'da okuyun.

Apple Design

Gerçek bir UX araştırma görevinde apple-design çalıştırın.

OpenDesign'ı indirin, SKILL.md bağlantısından apple-design'ı içe aktarın, yukarıdaki yönlendirmeyi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın

Terminal

npx skills add https://github.com/emilkowalski/skills --skill apple-design

apple-design Skill'i Claude Code ve Codex'te Ne Yapar

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

apple-design Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

apple-design Skill'in Claude Code ve Codex'e Verdiği Kurallar

Varsayılan Olarak Kritik Sönümlenmiş Bir Yay (Spring) Kullanın

Sunum Değerinden Animasyon Uygulayın

Hareketleri CSS Geçişleriyle Yönlendirmeyin

2D Hareketi İki Spring'e Ayırın

Apple'ın Projeksiyonunu Kullanın, Ders Kitabındakini Değil

Hızı Bir Ters Dönüş Boyunca Harmanlayın

Hafif Yarı Şeffaf Yüzeyleri Asla Üst Üste Bindirmeyin

Tüm Boyutlar İçin Tek Bir Tracking Değeri Kullanmayın