mobile-ios-designyazan Seth Hobson

Mobile iOS Design Skill.

Claude Code ve Codex için mobil uygulama tasarımı skill'i: SwiftUI ile Apple'ın İnsan Arayüzü Kılavuzlarını takip eden yerel iOS UI.

Mobil Uygulamalar
UI kodu

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

wshobson/agents · plugins/ui-design/skills/mobile-ios-design/SKILL.mdSKILL.md

--- name: mobile-ios-design description: Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles. --- ## When to Use This Skill ## Core Concepts ## Quick Start Component ## Best Practices

Üst bilgi ve bölüm başlıkları 2026-09-14 tarihinde üst akış dosyasından okundu · tam halde 6.921 karakter

01 Ne yapar

mobile-ios-design Skill'inin Claude Code ve Codex'te Yaptığı

Ö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

Bu skill, Apple'ın tasarım ilkelerini izleyen yerel iOS uygulamaları oluşturmak için iOS İnsan Arayüzü Yönergelerini ve SwiftUI desenlerini öğretir. Temel HIG ilkeleri olarak açıklık, saygınlık ve derinliği; SwiftUI'nin yığın tabanlı ve ızgara düzeni sistemlerini; NavigationStack ve TabView dahil gezinme desenlerini; SF Symbols ve Dynamic Type ile sistem entegrasyonunu; ve anlamsal renkler ile materyaller kullanan görsel tasarımı kapsar.

Skill, dokunma odaklı arayüzlere, farklı ekran boyutları için uyarlanabilir düzenlere, erişilebilirliğe ve anlamsal stil aracılığıyla otomatik açık/koyu mod desteğine odaklanarak iOS, iPadOS ve visionOS platform gereksinimlerini ele alır.

Neler üretir

Yığın tabanlı düzenler, gezinme desenleri ve sistem entegrasyonu içeren SwiftUI görünüm kodu

Örnek istemi görün ↗

Nasıl Çalışır

01
HIG İlkelerini Uygulayın
Arayüzleri açıklık (okunaklı içerik, hassas simgeler), saygınlık (arayüz, içerikle rekabet etmeden kullanıcıların içeriği anlamasına yardımcı olur) ve derinlik (görsel katmanlar hiyerarşiyi ifade eder) ilkelerine göre oluşturun.
02
Stack ve Grid Düzenleriyle Bileşim Oluşturun
Görünümleri yapılandırmak için hizalama ve boşluk parametreleriyle VStack ve HStack kullanın veya adaptive ya da flexible GridItem sütunlarıyla LazyVGrid kullanın.
03
Gezinme Desenleri Uygulayın
Hiyerarşik gezinme için navigationDestination ile NavigationStack kullanın veya üst düzey uygulama bölümleri için Tab ile TabView kullanın.
04
Sistem Kaynaklarını Entegre Edin
Render modları ve efektleriyle SF Symbols kullanın; sabit boyutlar yerine Dynamic Type'a uyum sağlayan semantik fontları kullanın.
05
Semantik Stilleri Uygulayın
Açık ve karanlık moda otomatik olarak uyum sağlayan .primary ve .secondary gibi semantik renkleri, bulanıklık efektleri için sistem materyallerini kullanın.

02 Uyumunuzu bulun

mobile-ios-design Skill'i Ne Zaman Kullanılır

İş bu tür bir mobil uygulama tasarımı olduğunda Claude Code veya Codex'te mobile-ios-design skill'ini kullanın. Uygunluk ve sınırlar aşağıda skill'in kendi dosyasından alınmıştır.

İyi Uyum

Apple HIG'yi takip ederek iOS uygulama arayüzleri tasarlama
SwiftUI görünümleri ve düzenleri oluşturma
iOS gezinme desenlerini uygulama (NavigationStack, TabView, sheets)
iPhone ve iPad için uyarlanabilir düzenler oluşturma
Erişilebilir iOS arayüzleri oluşturma

Sınırları Bilin

Açık ve karanlık moda uyum sağlamayan sabit renkler kullanma
Bellek sızıntılarına neden olan güçlü referans döngüleriyle closure oluşturma

03 Skill'in içinde

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

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

Her Zaman Semantik Renkler Kullanın
Açık ve karanlık modu otomatik olarak desteklemek için sabit renkler yerine .primary, .secondary ve .background kullanın.
Dynamic Type İçin Semantik Fontlar Kullanın
Metnin kullanıcı tercihlerine göre ölçeklenmesi için sabit boyutlar yerine .body ve .headline gibi semantik fontlar uygulayın.
Güvenli Alanlara Uyun
İçeriğin gizlenmesini önlemek için safeAreaInset kullanın ve ekran kenarlarında sabit dolgu (padding) kullanmaktan kaçının.
Uzun Listeler İçin LazyVStack Kullanın
Performans sorunlarından kaçınmak için kaydırılan listelerde normal stack'ler yerine LazyVStack veya LazyHStack kullanın.

04 İşe koyun

mobile-ios-design'ı Claude Code veya Codex'e kurun

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

mobile-ios-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/wshobson/agents --skill mobile-ios-design

plugins/ui-design/skills/mobile-ios-design/SKILL.md için genel skills CLI biçimi; depo kendi yolunu farklı belgeleyebilir.

Skill'e İlk Mobil Uygulama Tasarım Görevini Verin

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

Starter prompt

Build a feature list screen for an iOS app using NavigationStack. Each feature should be displayed in a card with an SF Symbol icon, title, and description. The cards should use semantic colors for automatic dark mode support and include proper accessibility labels. Add a detail view that shows when tapping a feature card, and ensure the layout adapts properly for both iPhone and iPad in split view mode.

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:

Tam haptik ve performans deneyimini yakalamak için fiziksel bir cihazda test edin

OpenDesign içinde mobile-ios-design skill'ini SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta 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: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill dosyası: plugins/ui-design/skills/mobile-ios-design/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 4236bb9
License: MIT LICENSE dosyasından.
Repository yıldızları: 39.635 Bu katalogda 18 skill içeren wshobson/agents deposunun tamamı için 2026-09-14 tarihinde alınan GitHub görüntüsü. mobile-ios-design için bir değerlendirme 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

Bu Skill Ne Zaman KullanılıriOS arayüz tasarımı, SwiftUI görünümleri, gezinme desenleri, uyarlanabilir düzenler ve erişilebilirlik gibi senaryoları listeler
Temel KavramlarHIG ilkelerini, SwiftUI düzen sistemini, gezinme desenlerini, sistem entegrasyonunu ve görsel tasarımı kapsar
Human Interface Guidelines İlkeleriiOS, iPadOS ve visionOS için platform hususlarıyla birlikte açıklık, itaat ve derinlik ilkelerini tanımlar
SwiftUI Düzen SistemiVStack ve HStack ile yığın tabanlı düzenleri, LazyVGrid ile ızgara düzenlerini gösterir
Gezinme DesenleriiOS 16 ve 18 için navigationDestination ile NavigationStack ve Tab ile TabView'i gösterir
Sistem EntegrasyonuRender modları ve efektleriyle SF Symbols'u, semantik fontlarla Dynamic Type'ı açıklar
Görsel TasarımSemantik renkleri, bulanıklık efektleri için sistem materyallerini ve derinlik için gölgeleri kapsar
Hızlı Başlangıç BileşeniSimge, başlık, açıklama ve stillendirme içeren eksiksiz bir FeatureCard görünüm örneği sunar
En İyi UygulamalarSemantik renkler, SF Symbols, Dynamic Type, erişilebilirlik, güvenli alanlar ve test dahil sekiz kuralı listeler
Yaygın SorunlarDüzen bozulması, performans, gezinme, karanlık mod, erişilebilirlik ve bellek sızıntısı sorunlarını çözümleriyle birlikte belirler

Skill'in Kendi Açıklaması

"Yerel iOS uygulamaları geliştirmek için iOS Human Interface Guidelines ve SwiftUI desenlerinde uzmanlaşın. iOS arayüzleri tasarlarken, SwiftUI view'ları uygularken veya uygulamaların Apple'ın tasarım ilkelerine uymasını sağlarken kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 6.921 karakter uzunluğunda. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

mobile-ios-design Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

iOS 16 ve sonrası için hangi gezinme desenini kullanmalıyım?

Hiyerarşik gezinme için navigationDestination ile NavigationStack kullanın. NavigationStack bir path parametresi alır ve farklı değer türleri için hedef görünümleri tanımlamak amacıyla navigationDestination(for:) kullanır. Üst düzey gezinme için iOS 18+ üzerinde kullanılabilen Tab sözdizimiyle TabView kullanın.

Metnimin kullanıcı erişilebilirlik ayarlarına göre ölçeklendiğinden nasıl emin olabilirim?

Sabit boyutlar yerine .body ve .headline gibi semantik fontlar kullanın. Bu fontlar Dynamic Type'a uyar ve kullanıcı tercihlerine göre otomatik olarak ölçeklenir. Özel fontlar için fontu semantik bir metin stiline bağlamak amacıyla relativeTo parametresini kullanın.

Mobile iOS Design

mobile-ios-design'ı Gerçek Bir Mobil Uygulama Tasarım Görevinde Çalıştırın.

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

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