mobile-ios-designvon Seth Hobson

Mobile iOS Design Skill.

Ein Claude Code und Codex skill für Mobile-App-Design: native iOS UI nach Apples Human Interface Guidelines mit SwiftUI.

Mobile Apps
UI-Code

OpenDesign herunterladen Anleitung ansehen

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

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 6.921 Zeichen insgesamt

01 Was es tut

Was der Skill mobile-ios-design in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill vermittelt die iOS Human Interface Guidelines und SwiftUI-Muster für die Entwicklung nativer iOS-Anwendungen nach Apples Designprinzipien. Er behandelt Klarheit, Zurückhaltung und Tiefe als zentrale HIG-Prinzipien, die stack- und grid-basierten Layout-Systeme von SwiftUI, Navigationsmuster einschließlich NavigationStack und TabView, Systemintegration mit SF Symbols und Dynamic Type sowie visuelles Design mit semantischen Farben und Materialien.

Der Skill behandelt plattformspezifische Aspekte von iOS, iPadOS und visionOS mit Fokus auf touch-first Oberflächen, adaptive Layouts für unterschiedliche Bildschirmgrößen, Barrierefreiheit und automatische Unterstützung des Light/Dark Mode durch semantisches Styling.

Was er erzeugt

SwiftUI-View-Code mit stack-basierten Layouts, Navigationsmustern und Systemintegration

Siehe Beispiel-Prompt ↗

So funktioniert es

01
HIG-Prinzipien anwenden
Erstellen Sie Interfaces nach den Prinzipien Klarheit (lesbare Inhalte, präzise Icons), Zurückhaltung (die UI hilft Nutzern, Inhalte zu verstehen, ohne mit ihnen zu konkurrieren) und Tiefe (visuelle Ebenen vermitteln Hierarchie).
02
Mit Stack- und Grid-Layouts komponieren
Verwenden Sie VStack und HStack mit Alignment- und Spacing-Parametern oder LazyVGrid mit adaptiven oder flexiblen GridItem-Spalten, um Views zu strukturieren.
03
Navigationsmuster implementieren
Verwenden Sie NavigationStack mit navigationDestination für hierarchische Navigation oder TabView mit Tab für App-Bereiche oberster Ebene.
04
Systemressourcen integrieren
Verwenden Sie SF Symbols mit Rendering-Modi und Effekten sowie semantische Schriften, die Dynamic Type berücksichtigen, statt fester Größen.
05
Semantisches Styling anwenden
Verwenden Sie semantische Farben wie .primary und .secondary, die sich automatisch an Light- und Dark-Mode anpassen, sowie System-Materialien für Blur-Effekte.

02 Finden Sie Ihren Favoriten

Wann Sie den mobile-ios-design-Skill verwenden

Verwenden Sie den mobile-ios-design-Skill in Claude Code oder Codex, wenn es um Mobile-App-Design dieser Art geht. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Gestalten von iOS-App-Oberflächen nach Apple HIG
Entwickeln von SwiftUI-Views und Layouts
Implementieren von iOS-Navigationsmustern (NavigationStack, TabView, Sheets)
Adaptive Layouts für iPhone und iPad erstellen
Barrierefreie iOS-Interfaces erstellen

Grenzen kennen

Verwendung fest codierter Farben, die sich nicht an Light- und Dark-Mode anpassen
Erstellen von Closures mit starken Referenzzyklen, die Speicherlecks verursachen

03 Innerhalb des Skills

Regeln, die der mobile-ios-design Skill Claude Code und Codex vorgibt

4 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt — der Teil der Datei, der das Ergebnis verändert.

Immer semantische Farben verwenden
Verwenden Sie .primary, .secondary und .background statt fest codierter Farben, um Light- und Dark-Mode automatisch zu unterstützen.
Semantische Schriften für Dynamic Type verwenden
Wenden Sie semantische Schriften wie .body und .headline statt fester Größen an, damit sich Text nach den Nutzereinstellungen skaliert.
Sichere Bereiche respektieren
Verwenden Sie safeAreaInset und vermeiden Sie fest codiertes Padding an Bildschirmrändern, damit Inhalte nicht verdeckt werden.
LazyVStack für lange Listen verwenden
Verwenden Sie für scrollende Listen LazyVStack oder LazyHStack statt regulärer Stacks, um Performance-Probleme zu vermeiden.

04 In Betrieb nehmen

mobile-ios-design in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

mobile-ios-design zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

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

Generische skills-CLI-Form für plugins/ui-design/skills/mobile-ios-design/SKILL.md; das Repository kann einen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Mobile-App-Design-Aufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Auf einem physischen Gerät testen, um das volle Haptik- und Performance-Erlebnis zu erfassen

Importieren Sie in OpenDesign mobile-ios-design über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill-Datei: plugins/ui-design/skills/mobile-ios-design/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit 4236bb9
License: MIT Aus LICENSE.
Repository-Sterne: 39.635 GitHub-Snapshot vom 14.09.2026 für das gesamte wshobson/agents-Repository, das 18 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für mobile-ios-design.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann Sie diesen Skill verwenden solltenListet Szenarien wie iOS-Interface-Design, SwiftUI-Views, Navigationsmuster, adaptive Layouts und Barrierefreiheit auf
GrundkonzepteBehandelt HIG-Prinzipien, das SwiftUI-Layoutsystem, Navigationsmuster, Systemintegration und visuelles Design
Prinzipien der Human Interface GuidelinesDefiniert die Prinzipien Klarheit, Zurückhaltung und Tiefe mit Plattformüberlegungen für iOS, iPadOS und visionOS
SwiftUI-LayoutsystemZeigt stackbasierte Layouts mit VStack und HStack sowie Grid-Layouts mit LazyVGrid
NavigationsmusterDemonstriert NavigationStack mit navigationDestination und TabView mit Tab für iOS 16 und 18
SystemintegrationErklärt SF Symbols mit Rendering-Modi und Effekten sowie Dynamic Type mit semantischen Schriftarten
Visuelles DesignBehandelt semantische Farben, System-Materialien für Unschärfeeffekte und Schatten für Tiefe
Schnellstart-KomponenteBietet ein vollständiges Beispiel einer FeatureCard-View mit Icon, Titel, Beschreibung und Styling
Best PracticesListet acht Regeln auf, darunter semantische Farben, SF Symbols, Dynamic Type, Barrierefreiheit, sichere Bereiche und Testing
Häufige ProblemeIdentifiziert Probleme mit Layout-Fehlern, Performance, Navigation, Dark Mode, Barrierefreiheit und Speicherlecks samt Lösungen

Die eigene Beschreibung des Skills

„Beherrschen Sie die iOS Human Interface Guidelines und SwiftUI-Muster für die Entwicklung nativer iOS-Apps. Verwenden Sie diesen Skill beim Entwerfen von iOS-Oberflächen, der Implementierung von SwiftUI-Views oder um sicherzustellen, dass Apps den Design-Prinzipien von Apple folgen."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 6.921 Zeichen. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum mobile-ios-design Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Welches Navigationsmuster sollte ich für iOS 16 und höher verwenden?

Verwenden Sie NavigationStack mit navigationDestination für hierarchische Navigation. NavigationStack erhält einen path-Parameter und nutzt navigationDestination(for:), um Zielansichten für verschiedene Werttypen zu definieren. Für die oberste Navigationsebene verwenden Sie TabView mit der ab iOS 18 verfügbaren Tab-Syntax.

Wie stelle ich sicher, dass mein Text mit den Barrierefreiheits-Einstellungen der Nutzer skaliert?

Verwenden Sie semantische Schriftarten wie .body und .headline statt fester Größen. Diese Schriftarten berücksichtigen Dynamic Type und skalieren automatisch entsprechend den Benutzereinstellungen. Für benutzerdefinierte Schriftarten verwenden Sie den Parameter relativeTo, um die Schriftart an einen semantischen Textstil zu binden.

Mobile iOS Design

mobile-ios-design an einer echten Mobile-App-Design-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie mobile-ios-design über den SKILL.md-Link, fügen Sie die obige Eingabeaufforderung ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen