# Mobile Ios Design > Domina las Human Interface Guidelines de iOS y los patrones de SwiftUI para construir apps nativas. Úsalo al diseñar interfaces iOS, implementar vistas SwiftUI o seguir los principios de diseño de Apple. Fuente: https://skillsagentes.com/skills/wshobson/agents/mobile-ios-design Markdown: https://skillsagentes.com/skills/wshobson/agents/mobile-ios-design.md Repositorio: https://github.com/wshobson/agents Autor: wshobson Licencia: MIT Actualizado: hace 6 meses Coste de contexto: 51 tok instalada, 1.7k tok al activarse, 12.3k tok con todos los archivos del bundle Bundle: 4 archivos, 48 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add wshobson/agents --skill mobile-ios-design --agent claude-code # Cursor npx -y skills add wshobson/agents --skill mobile-ios-design --agent cursor # Codex npx -y skills add wshobson/agents --skill mobile-ios-design --agent codex # Gemini CLI npx -y skills add wshobson/agents --skill mobile-ios-design --agent gemini # Windsurf npx -y skills add wshobson/agents --skill mobile-ios-design --agent windsurf # Cline npx -y skills add wshobson/agents --skill mobile-ios-design --agent cline ``` ## Qué hace - Aplica las Human Interface Guidelines de Apple y patrones SwiftUI para construir interfaces iOS nativas - Provee código SwiftUI para stacks, grids, NavigationStack, TabView, SF Symbols y materiales - Da buenas prácticas de accesibilidad, Dynamic Type, Dark Mode y layouts adaptativos para iPhone/iPad ## Cuándo usarla - Diseñar interfaces de apps iOS siguiendo el HIG de Apple - Construir vistas y layouts en SwiftUI - Implementar patrones de navegación iOS (NavigationStack, TabView, sheets) - Diseñar para Dynamic Type, Dark Mode o interfaces accesibles ## Qué la activa - "Diseña una pantalla de detalle siguiendo el HIG de Apple en SwiftUI" - "Crea un TabView con NavigationStack para mi app iOS" - "Ayúdame a que mi interfaz soporte Dynamic Type y Dark Mode" ## Archivos - SKILL.md — 7 KB - references/hig-patterns.md — 13 KB - references/ios-navigation.md — 14 KB - references/swiftui-components.md — 14 KB ## SKILL.md Reproducido tal cual desde wshobson/agents bajo MIT. Esta sección es el documento original y está en inglés. # iOS Mobile Design Master iOS Human Interface Guidelines (HIG) and SwiftUI patterns to build polished, native iOS applications that feel at home on Apple platforms. ## When to Use This Skill - Designing iOS app interfaces following Apple HIG - Building SwiftUI views and layouts - Implementing iOS navigation patterns (NavigationStack, TabView, sheets) - Creating adaptive layouts for iPhone and iPad - Using SF Symbols and system typography - Building accessible iOS interfaces - Implementing iOS-specific gestures and interactions - Designing for Dynamic Type and Dark Mode ## Core Concepts ### 1. Human Interface Guidelines Principles **Clarity**: Content is legible, icons are precise, adornments are subtle **Deference**: UI helps users understand content without competing with it **Depth**: Visual layers and motion convey hierarchy and enable navigation **Platform Considerations:** - **iOS**: Touch-first, compact displays, portrait orientation - **iPadOS**: Larger canvas, multitasking, pointer support - **visionOS**: Spatial computing, eye/hand input ### 2. SwiftUI Layout System **Stack-Based Layouts:** ```swift // Vertical stack with alignment VStack(alignment: .leading, spacing: 12) { Text("Title") .font(.headline) Text("Subtitle") .font(.subheadline) .foregroundStyle(.secondary) } // Horizontal stack with flexible spacing HStack { Image(systemName: "star.fill") Text("Featured") Spacer() Text("View All") .foregroundStyle(.blue) } ``` **Grid Layouts:** ```swift // Adaptive grid that fills available width LazyVGrid(columns: [ GridItem(.adaptive(minimum: 150, maximum: 200)) ], spacing: 16) { ForEach(items) { item in ItemCard(item: item) } } // Fixed column grid LazyVGrid(columns: [ GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()) ], spacing: 12) { ForEach(items) { item in ItemThumbnail(item: item) } } ``` ### 3. Navigation Patterns **NavigationStack (iOS 16+):** ```swift struct ContentView: View { @State private var path = NavigationPath() var body: some View { NavigationStack(path: $path) { List(items) { item in NavigationLink(value: item) { ItemRow(item: item) } } .navigationTitle("Items") .navigationDestination(for: Item.self) { item in ItemDetailView(item: item) } } } } ``` **TabView (iOS 18+):** ```swift struct MainTabView: View { @State private var selectedTab = 0 var body: some View { TabView(selection: $selectedTab) { Tab("Home", systemImage: "house", value: 0) { HomeView() } Tab("Search", systemImage: "magnifyingglass", value: 1) { SearchView() } Tab("Profile", systemImage: "person", value: 2) { ProfileView() } } } } ``` ### 4. System Integration **SF Symbols:** ```swift // Basic symbol Image(systemName: "heart.fill") .foregroundStyle(.red) // Symbol with rendering mode Image(systemName: "cloud.sun.fill") .symbolRenderingMode(.multicolor) // Variable symbol (iOS 16+) Image(systemName: "speaker.wave.3.fill", variableValue: volume) // Symbol effect (iOS 17+) Image(systemName: "bell.fill") .symbolEffect(.bounce, value: notificationCount) ``` **Dynamic Type:** ```swift // Use semantic fonts Text("Headline") .font(.headline) Text("Body text that scales with user preferences") .font(.body) // Custom font that respects Dynamic Type Text("Custom") .font(.custom("Avenir", size: 17, relativeTo: .body)) ``` ### 5. Visual Design **Colors and Materials:** ```swift // Semantic colors that adapt to light/dark mode Text("Primary") .foregroundStyle(.primary) Text("Secondary") .foregroundStyle(.secondary) // System materials for blur effects Rectangle() .fill(.ultraThinMaterial) .frame(height: 100) // Vibrant materials for overlays Text("Overlay") .padding() .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12)) ``` **Shadows and Depth:** ```swift // Standard card shadow RoundedRectangle(cornerRadius: 16) .fill(.background) .shadow(color: .black.opacity(0.1), radius: 8, y: 4) // Elevated appearance .shadow(radius: 2, y: 1) .shadow(radius: 8, y: 4) ``` ## Quick Start Component ```swift import SwiftUI struct FeatureCard: View { let title: String let description: String let systemImage: String var body: some View { HStack(spacing: 16) { Image(systemName: systemImage) .font(.title) .foregroundStyle(.blue) .frame(width: 44, height: 44) .background(.blue.opacity(0.1), in: Circle()) VStack(alignment: .leading, spacing: 4) { Text(title) .font(.headline) Text(description) .font(.subheadline) .foregroundStyle(.secondary) .lineLimit(2) } Spacer() Image(systemName: "chevron.right") .foregroundStyle(.tertiary) } .padding() .background(.background, in: RoundedRectangle(cornerRadius: 12)) .shadow(color: .black.opacity(0.05), radius: 4, y: 2) } } ``` ## Best Practices 1. **Use Semantic Colors**: Always use `.primary`, `.secondary`, `.background` for automatic light/dark mode support 2. **Embrace SF Symbols**: Use system symbols for consistency and automatic accessibility 3. **Support Dynamic Type**: Use semantic fonts (`.body`, `.headline`) instead of fixed sizes 4. **Add Accessibility**: Include `.accessibilityLabel()` and `.accessibilityHint()` modifiers 5. **Use Safe Areas**: Respect `safeAreaInset` and avoid hardcoded padding at screen edges 6. **Implement State Restoration**: Use `@SceneStorage` for preserving user state 7. **Support iPad Multitasking**: Design for split view and slide over 8. **Test on Device**: Simulator doesn't capture full haptic and performance experience ## Common Issues - **Layout Breaking**: Use `.fixedSize()` sparingly; prefer flexible layouts - **Performance Issues**: Use `LazyVStack`/`LazyHStack` for long scrolling lists - **Navigation Bugs**: Ensure `NavigationLink` values are `Hashable` - **Dark Mode Problems**: Avoid hardcoded colors; use semantic or asset catalog colors - **Accessibility Failures**: Test with VoiceOver enabled - **Memory Leaks**: Watch for strong reference cycles in closures ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [wshobson](https://skillsagentes.com/creators/wshobson.md) — 183 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Skills relacionadas - [Brand Landingpage](https://skillsagentes.com/skills/wshobson/agents/brand-landingpage.md): Diseñador de landing pages centrado en marca: hace una entrevista de identidad visual y luego genera e itera la página con Stitch, entregando HTML listo para desplegar. - [Web Component Design](https://skillsagentes.com/skills/wshobson/agents/web-component-design.md): Domina patrones de componentes en React, Vue y Svelte: CSS-in-JS, estrategias de composición y arquitectura de componentes reutilizables para design systems. - [Visual Design Foundations](https://skillsagentes.com/skills/wshobson/agents/visual-design-foundations.md): Aplica principios de tipografía, teoría del color, sistemas de espaciado e iconografía para crear diseños visuales coherentes, útil al definir design tokens, guías de estilo o mejorar la jerarquía visual. - [Responsive Design](https://skillsagentes.com/skills/wshobson/agents/responsive-design.md): Implementa layouts responsivos modernos usando container queries, tipografía fluida, CSS Grid y estrategias de breakpoints mobile-first. - [Mobile Android Design](https://skillsagentes.com/skills/wshobson/agents/mobile-android-design.md): Domina Material Design 3 (Material You) y Jetpack Compose para construir apps Android nativas, modernas y adaptativas, integradas con el ecosistema Android. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)