Vai alla guida all’uso
mobile-ios-designdi Seth Hobson

Mobile iOS Design Skill.

Uno skill per Claude Code e Codex per il design di app mobile: UI iOS nativa seguendo le Human Interface Guidelines di Apple con SwiftUI.

  • Mobile Apps
  • Codice UI
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
Frontespizio e intestazioni di sezione letti dal file upstream il 14/09/2026 · 6.921 caratteri in totale

01 Cosa fa

Cosa fa la Skill mobile-ios-design in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questa skill insegna le Human Interface Guidelines di iOS e i pattern SwiftUI per costruire applicazioni iOS native che seguono i principi di design di Apple. Copre chiarezza, deferenza e profondità come principi fondamentali della HIG, i sistemi di layout a stack e a griglia di SwiftUI, i pattern di navigazione tra cui NavigationStack e TabView, l'integrazione di sistema con SF Symbols e Dynamic Type, e il design visivo tramite colori semantici e materiali.

La skill affronta le considerazioni specifiche delle piattaforme iOS, iPadOS e visionOS, concentrandosi su interfacce touch-first, layout adattivi per diverse dimensioni di schermo, accessibilità e supporto automatico alla modalità chiara/scura tramite stili semantici.

Che cosa produce

  • Codice delle view SwiftUI con layout a stack, pattern di navigazione e integrazione di sistema
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Applicare i principi HIG

    Costruire interfacce seguendo chiarezza (contenuti leggibili, icone precise), deferenza (l'UI aiuta gli utenti a comprendere i contenuti senza competere con essi) e profondità (i livelli visivi comunicano la gerarchia).

  2. 02
    Comporre con layout Stack e Grid

    Utilizzare VStack e HStack con parametri di allineamento e spaziatura, oppure LazyVGrid con colonne GridItem adattive o flessibili per strutturare le view.

  3. 03
    Implementare pattern di navigazione

    Utilizzare NavigationStack con navigationDestination per la navigazione gerarchica, oppure TabView con Tab per le sezioni principali dell'app.

  4. 04
    Integrare le risorse di sistema

    Utilizzare SF Symbols con modalità di rendering ed effetti, e font semantici che rispettano Dynamic Type invece di dimensioni fisse.

  5. 05
    Applicare uno stile semantico

    Utilizzare colori semantici come .primary e .secondary che si adattano automaticamente alla modalità chiara e scura, e i materiali di sistema per gli effetti di sfocatura.

02 Trova la tua applicazione

Quando usare la skill mobile-ios-design

Usa la skill mobile-ios-design in Claude Code o Codex quando il lavoro è design di app mobile di questo tipo. Ambito e limiti qui sotto sono presi dal file della skill.

Buona applicazione

  • Progettare interfacce per app iOS seguendo le Apple HIG
  • Costruire viste e layout in SwiftUI
  • Implementare pattern di navigazione iOS (NavigationStack, TabView, sheet)
  • Creazione di layout adattivi per iPhone e iPad
  • Costruire interfacce iOS accessibili

Conosci i limiti

  • Utilizzare colori hardcoded che non si adattano alla modalità chiara e scura
  • Creare closure con cicli di riferimento forti che causano memory leak

03 Dentro la skill

Regole che la skill mobile-ios-design fornisce a Claude Code e Codex

4 istruzioni concrete, valori predefiniti e limiti che il file SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Usare sempre colori semantici

    Utilizzare .primary, .secondary e .background invece di colori hardcoded per supportare automaticamente la modalità chiara e scura.

  2. Usare font semantici per Dynamic Type

    Applicare font semantici come .body e .headline invece di dimensioni fisse, in modo che il testo si adatti alle preferenze dell'utente.

  3. Rispettare le safe area

    Utilizzare safeAreaInset ed evitare padding hardcoded ai margini dello schermo per impedire che i contenuti vengano oscurati.

  4. Usare LazyVStack per liste lunghe

    Utilizzare LazyVStack o LazyHStack invece degli stack normali per le liste scorrevoli, per evitare problemi di performance.

04 Mettila al lavoro

Installa mobile-ios-design in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi mobile-ios-design a Claude Code, Codex o al tuo Agent

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal
npx skills add https://github.com/wshobson/agents --skill mobile-ios-design

Forma generica per la CLI skills per plugins/ui-design/skills/mobile-ios-design/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai Allo Skill Un Primo Task Di Design Di App Mobile

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Testare su un dispositivo fisico per cogliere l'esperienza completa di feedback aptico e performance

In OpenDesign importa mobile-ios-design dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra superiore.

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Repository
github.com/wshobson/agents Branch main
File della skill
plugins/ui-design/skills/mobile-ios-design/SKILL.md Checksum del contenuto registrato alla verifica; commit 4236bb9
License
MIT Da LICENSE.
Stelle del repository
39.635 Snapshot GitHub acquisito il 14-09-2026 per l'intero repository wshobson/agents, che contiene 18 skill in questo catalogo. Non è una valutazione o conteggio di utilizzo per mobile-ios-design.
Verificato da OpenDesign
14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

  1. Quando Usare Questa SkillElenca scenari tra cui la progettazione di interfacce iOS, viste SwiftUI, pattern di navigazione, layout adattivi e accessibilità
  2. Concetti FondamentaliCopre i principi HIG, il sistema di layout SwiftUI, i pattern di navigazione, l'integrazione di sistema e il design visivo
  3. Principi delle Human Interface GuidelinesDefinisce i principi di chiarezza, deferenza e profondità con considerazioni specifiche per iOS, iPadOS e visionOS
  4. Sistema di Layout SwiftUIMostra layout basati su stack con VStack e HStack, e layout a griglia con LazyVGrid
  5. Pattern di NavigazioneIllustra NavigationStack con navigationDestination e TabView con Tab per iOS 16 e 18
  6. Integrazione di SistemaSpiega SF Symbols con modalità di rendering ed effetti, e Dynamic Type con font semantici
  7. Design VisivoCopre i colori semantici, i materiali di sistema per gli effetti di blur e le ombre per la profondità
  8. Componente di Avvio RapidoFornisce un esempio completo di vista FeatureCard con icona, titolo, descrizione e styling
  9. Best PracticeElenca otto regole tra cui colori semantici, SF Symbols, Dynamic Type, accessibilità, safe area e testing
  10. Problemi ComuniIdentifica problemi di rottura del layout, prestazioni, navigazione, dark mode, accessibilità e memory leak con relative soluzioni
Descrizione della skill
"Padroneggia le iOS Human Interface Guidelines e i pattern SwiftUI per costruire app iOS native. Da usare quando progetti interfacce iOS, implementi viste SwiftUI o assicuri che le app seguano i principi di design di Apple."

Descrizione front-matter da SKILL.md. Il file completo è di circa 6.921 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande Sulla Skill mobile-ios-design

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Quale pattern di navigazione dovrei usare per iOS 16 e versioni successive?

Usa NavigationStack con navigationDestination per la navigazione gerarchica. NavigationStack accetta un parametro path e usa navigationDestination(for:) per definire le viste di destinazione per diversi tipi di valore. Per la navigazione di primo livello, usa TabView con la sintassi Tab disponibile da iOS 18+.

Come posso assicurarmi che il mio testo si adatti alle impostazioni di accessibilità dell'utente?

Usa font semantici come .body e .headline invece di dimensioni fisse. Questi font rispettano il Dynamic Type e si adattano automaticamente in base alle preferenze dell'utente. Per font personalizzati, usa il parametro relativeTo per collegare il font a uno stile di testo semantico.

Mobile iOS Design

Esegui mobile-ios-design su un compito reale di design di app mobile.

Scarica OpenDesign, importa mobile-ios-design dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Terminale
npx skills add https://github.com/wshobson/agents --skill mobile-ios-design

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows