Aller au guide d’utilisation
mobile-ios-designpar Seth Hobson

Mobile iOS Design Skill.

Un skill Claude Code et Codex pour la conception d'applications mobiles : interface native iOS suivant les Human Interface Guidelines d'Apple avec SwiftUI.

  • Applications mobiles
  • Code 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
Métadonnées et titres de section lus depuis le fichier source le 14 septembre 2026 · 6 921 caractères au total

01 Ce qu'il fait

Ce que fait le skill mobile-ios-design dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill enseigne les Human Interface Guidelines d'iOS et les modèles SwiftUI pour créer des applications iOS natives conformes aux principes de conception d'Apple. Il couvre la clarté, la déférence et la profondeur comme principes fondamentaux du HIG, les systèmes de mise en page en pile et en grille de SwiftUI, les modèles de navigation incluant NavigationStack et TabView, l'intégration système avec SF Symbols et Dynamic Type, ainsi que le design visuel utilisant des couleurs et des matériaux sémantiques.

Le skill traite des considérations propres aux plateformes iOS, iPadOS et visionOS, en se concentrant sur les interfaces tactiles, les mises en page adaptatives pour différentes tailles d'écran, l'accessibilité et la prise en charge automatique des modes clair/sombre via le style sémantique.

Ce qu'il produit

  • Code de vue SwiftUI avec mises en page en pile, modèles de navigation et intégration système
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Apply HIG Principles

    Construisez des interfaces en respectant la clarté (contenu lisible, icônes précises), la déférence (l'UI aide les utilisateurs à comprendre le contenu sans le concurrencer) et la profondeur (les couches visuelles traduisent la hiérarchie).

  2. 02
    Composer avec des mises en page Stack et Grid

    Utilisez VStack et HStack avec des paramètres d'alignement et d'espacement, ou LazyVGrid avec des colonnes GridItem adaptatives ou flexibles pour structurer les vues.

  3. 03
    Implémenter des patterns de navigation

    Utilisez NavigationStack avec navigationDestination pour la navigation hiérarchique, ou TabView avec Tab pour les sections principales de l'application.

  4. 04
    Intégrer les ressources système

    Utilisez SF Symbols avec des modes de rendu et des effets, ainsi que des polices sémantiques qui respectent Dynamic Type plutôt que des tailles fixes.

  5. 05
    Appliquer un style sémantique

    Utilisez des couleurs sémantiques comme .primary et .secondary qui s'adaptent automatiquement au mode clair et sombre, ainsi que des matériaux système pour les effets de flou.

02 Trouvez celui qui vous convient

Quand utiliser le skill mobile-ios-design

Utilisez le skill mobile-ios-design dans Claude Code ou Codex lorsque le travail concerne la conception d'applications mobiles de ce type. La portée et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

  • Concevoir des interfaces d'applications iOS selon les Apple HIG
  • Créer des vues et des mises en page SwiftUI
  • Implémenter les patterns de navigation iOS (NavigationStack, TabView, sheets)
  • Création de mises en page adaptatives pour iPhone et iPad
  • Créer des interfaces iOS accessibles

Connaître les limites

  • Utiliser des couleurs codées en dur qui ne s'adaptent pas au mode clair et sombre
  • Créer des closures avec des cycles de référence forts provoquant des fuites de mémoire

03 Dans le skill

Règles que le skill mobile-ios-design donne à Claude Code et Codex

4 instructions concrètes, valeurs par défaut et limites que SKILL.md fixe à l'agent — la partie du fichier qui change le résultat.

  1. Toujours utiliser des couleurs sémantiques

    Utilisez .primary, .secondary et .background plutôt que des couleurs codées en dur pour prendre en charge automatiquement le mode clair et sombre.

  2. Utiliser des polices sémantiques pour Dynamic Type

    Appliquez des polices sémantiques comme .body et .headline plutôt que des tailles fixes afin que le texte s'adapte aux préférences de l'utilisateur.

  3. Respecter les zones sûres

    Utilisez safeAreaInset et évitez le padding codé en dur sur les bords de l'écran pour éviter que le contenu ne soit masqué.

  4. Utiliser LazyVStack pour les listes longues

    Utilisez LazyVStack ou LazyHStack plutôt que des stacks classiques pour les listes défilantes afin d'éviter les problèmes de performance.

04 Mettez-le en pratique

Installer mobile-ios-design dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter mobile-ios-design à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

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

Forme générique de la CLI skills pour plugins/ui-design/skills/mobile-ios-design/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de conception d'application mobile

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

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.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Testez sur un appareil physique pour capturer l'expérience complète des retours haptiques et des performances

Dans OpenDesign, importez mobile-ios-design depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Repository
github.com/wshobson/agents Branche main
Fichier du skill
plugins/ui-design/skills/mobile-ios-design/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 4236bb9
License
MIT D'après LICENSE.
Étoiles du dépôt
39 635 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt wshobson/agents, qui contient 18 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour mobile-ios-design.
Vérifié par OpenDesign
2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Quand utiliser ce skillRépertorie des scénarios incluant la conception d'interfaces iOS, les vues SwiftUI, les modèles de navigation, les mises en page adaptatives et l'accessibilité
  2. Concepts fondamentauxCouvre les principes des HIG, le système de mise en page SwiftUI, les modèles de navigation, l'intégration système et le design visuel
  3. Principes des Human Interface GuidelinesDéfinit les principes de clarté, de déférence et de profondeur avec des considérations spécifiques pour iOS, iPadOS et visionOS
  4. Système de mise en page SwiftUIPrésente les mises en page basées sur des piles avec VStack et HStack, ainsi que les mises en page en grille avec LazyVGrid
  5. Modèles de navigationDémontre NavigationStack avec navigationDestination et TabView avec Tab pour iOS 16 et 18
  6. Intégration systèmeExplique SF Symbols avec ses modes de rendu et effets, et Dynamic Type avec les polices sémantiques
  7. Design visuelCouvre les couleurs sémantiques, les matériaux système pour les effets de flou, et les ombres pour la profondeur
  8. Composant de démarrage rapideFournit un exemple complet de vue FeatureCard avec icône, titre, description et style
  9. Bonnes pratiquesRépertorie huit règles incluant les couleurs sémantiques, SF Symbols, Dynamic Type, l'accessibilité, les zones sûres et les tests
  10. Problèmes courantsIdentifie les problèmes de mise en page, de performance, de navigation, de mode sombre, d'accessibilité et de fuites de mémoire, avec leurs solutions
Description du skill lui-même
« Maîtrisez les directives iOS Human Interface Guidelines et les patterns SwiftUI pour construire des applications iOS natives. À utiliser lors de la conception d'interfaces iOS, de l'implémentation de vues SwiftUI ou pour garantir que les applications suivent les principes de conception d'Apple. »

Description du front-matter extraite de SKILL.md. Le fichier complet fait environ 6 921 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill mobile-ios-design

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Quel modèle de navigation dois-je utiliser pour iOS 16 et versions ultérieures ?

Utilisez NavigationStack avec navigationDestination pour une navigation hiérarchique. NavigationStack prend un paramètre path et utilise navigationDestination(for:) pour définir les vues de destination selon les types de valeurs. Pour la navigation de premier niveau, utilisez TabView avec la syntaxe Tab disponible à partir d'iOS 18+.

Comment m'assurer que mon texte s'adapte aux paramètres d'accessibilité de l'utilisateur ?

Utilisez des polices sémantiques comme .body et .headline plutôt que des tailles fixes. Ces polices respectent Dynamic Type et s'adaptent automatiquement aux préférences de l'utilisateur. Pour des polices personnalisées, utilisez le paramètre relativeTo pour lier la police à un style de texte sémantique.

Mobile iOS Design

Exécuter mobile-ios-design sur une vraie tâche de conception d'application mobile.

Téléchargez OpenDesign, importez mobile-ios-design depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

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

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows