mobile-ios-designpor Seth Hobson

Mobile iOS Design Skill.

Un skill de Claude Code y Codex para diseño de aplicaciones móviles: UI nativa de iOS siguiendo las Human Interface Guidelines de Apple con SwiftUI.

Mobile Apps
Código UI

Descargar OpenDesign Ver guía de uso

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

Encabezados y materia preliminar leídos del archivo original el 14-09-2026 · 6.921 caracteres en total

01 Qué hace

Lo que hace la skill mobile-ios-design en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Esta skill enseña las Human Interface Guidelines de iOS y los patrones de SwiftUI para construir aplicaciones iOS nativas que siguen los principios de diseño de Apple. Cubre claridad, deferencia y profundidad como principios básicos de HIG, los sistemas de layout basados en stacks y grids de SwiftUI, patrones de navegación incluyendo NavigationStack y TabView, integración con el sistema mediante SF Symbols y Dynamic Type, y diseño visual usando colores semánticos y materiales.

La skill aborda consideraciones de plataforma para iOS, iPadOS y visionOS, centrándose en interfaces táctiles en primer lugar, layouts adaptables para distintos tamaños de pantalla, accesibilidad y soporte automático de modo claro/oscuro mediante estilos semánticos.

Qué produce

Código de vistas SwiftUI con layouts basados en stacks, patrones de navegación e integración con el sistema

Ver el ejemplo de prompt ↗

Cómo funciona

01
Aplicar los principios de HIG
Construya interfaces siguiendo la claridad (contenido legible, iconos precisos), la deferencia (la UI ayuda a los usuarios a entender el contenido sin competir con él) y la profundidad (las capas visuales transmiten jerarquía).
02
Componer con diseños de Stack y Grid
Utilice VStack y HStack con parámetros de alineación y espaciado, o LazyVGrid con columnas GridItem adaptativas o flexibles para estructurar las vistas.
03
Implementar patrones de navegación
Utilice NavigationStack con navigationDestination para la navegación jerárquica, o TabView con Tab para las secciones de nivel superior de la app.
04
Integrar recursos del sistema
Utilice SF Symbols con modos y efectos de renderizado, y fuentes semánticas que respeten Dynamic Type en lugar de tamaños fijos.
05
Aplicar estilos semánticos
Utilice colores semánticos como .primary y .secondary que se adaptan automáticamente al modo claro y oscuro, y materiales del sistema para efectos de desenfoque.

02 Encuentra tu caso de uso

Cuándo usar el skill mobile-ios-design

Usa el skill mobile-ios-design en Claude Code o Codex cuando el trabajo sea diseño de aplicaciones móviles de este tipo. El ajuste y límites a continuación se toman del propio archivo del skill.

Buen caso de uso

Diseñar interfaces de aplicaciones iOS siguiendo Apple HIG
Crear vistas y layouts en SwiftUI
Implementar patrones de navegación iOS (NavigationStack, TabView, sheets)
Creación de diseños adaptativos para iPhone y iPad
Construir interfaces de iOS accesibles

Conozca los límites

Usar colores fijos que no se adaptan al modo claro y oscuro
Crear closures con ciclos de referencia fuertes que causan fugas de memoria

03 Dentro del skill

Reglas que el skill mobile-ios-design ofrece a Claude Code y Codex

4 instrucciones concretas, valores por defecto y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Usar siempre colores semánticos
Utilice .primary, .secondary y .background en lugar de colores fijos para admitir automáticamente el modo claro y oscuro.
Usar fuentes semánticas para Dynamic Type
Aplique fuentes semánticas como .body y .headline en lugar de tamaños fijos, de modo que el texto se escale según las preferencias del usuario.
Respetar las áreas seguras
Utilice safeAreaInset y evite el padding fijo en los bordes de la pantalla para impedir que el contenido quede oculto.
Usar LazyVStack para listas largas
Utilice LazyVStack o LazyHStack en lugar de stacks normales para listas con scroll, a fin de evitar problemas de rendimiento.

04 Ponlo a trabajar

Instalar mobile-ios-design en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar mobile-ios-design a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Forma genérica de la CLI de skills para plugins/ui-design/skills/mobile-ios-design/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de aplicación móvil

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su 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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Pruebe en un dispositivo físico para capturar la experiencia háptica y de rendimiento completa

En OpenDesign importe mobile-ios-design desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Rama main
Archivo de skill: plugins/ui-design/skills/mobile-ios-design/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 4236bb9
License: MIT De LICENSE.
Estrellas del repositorio: 39.635 Instantánea de GitHub tomada el 2026-09-14 para todo el repositorio wshobson/agents, que contiene 18 skills en este catálogo. No es una valoración ni un recuento de uso de mobile-ios-design.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo Usar Este SkillEnumera escenarios que incluyen diseño de interfaces iOS, vistas SwiftUI, patrones de navegación, layouts adaptables y accesibilidad
Conceptos FundamentalesCubre los principios de HIG, el sistema de layout de SwiftUI, patrones de navegación, integración con el sistema y diseño visual
Principios de las Human Interface GuidelinesDefine los principios de claridad, deferencia y profundidad con consideraciones de plataforma para iOS, iPadOS y visionOS
Sistema de Layout de SwiftUIMuestra layouts basados en stacks con VStack y HStack, y layouts de cuadrícula con LazyVGrid
Patrones de NavegaciónDemuestra NavigationStack con navigationDestination y TabView con Tab para iOS 16 y 18
Integración con el SistemaExplica SF Symbols con modos de renderizado y efectos, y Dynamic Type con fuentes semánticas
Diseño VisualCubre colores semánticos, materiales del sistema para efectos de desenfoque, y sombras para dar profundidad
Componente de Inicio RápidoProporciona un ejemplo completo de la vista FeatureCard con icono, título, descripción y estilos
Buenas PrácticasEnumera ocho reglas que incluyen colores semánticos, SF Symbols, Dynamic Type, accesibilidad, áreas seguras y pruebas
Problemas ComunesIdentifica problemas de rotura de layout, rendimiento, navegación, modo oscuro, accesibilidad y fugas de memoria, junto con sus soluciones

La descripción propia del Skill

Domina las iOS Human Interface Guidelines y los patrones de SwiftUI para construir apps nativas de iOS. Usa cuando diseñes interfaces iOS, implementes vistas SwiftUI o te asegures de que las apps sigan los principios de diseño de Apple.

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 6.921 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill mobile-ios-design

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué patrón de navegación debo usar para iOS 16 y versiones posteriores?

Use NavigationStack con navigationDestination para la navegación jerárquica. NavigationStack toma un parámetro path y usa navigationDestination(for:) para definir vistas de destino según distintos tipos de valor. Para la navegación de nivel superior, use TabView con la sintaxis Tab disponible en iOS 18+.

¿Cómo puedo asegurarme de que mi texto escale con la configuración de accesibilidad del usuario?

Use fuentes semánticas como .body y .headline en lugar de tamaños fijos. Estas fuentes respetan Dynamic Type y se escalan automáticamente según las preferencias del usuario. Para fuentes personalizadas, use el parámetro relativeTo para vincular la fuente a un estilo de texto semántico.

Mobile iOS Design

Ejecuta mobile-ios-design en una tarea real de diseño de aplicación móvil.

Descarga OpenDesign, importa mobile-ios-design desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills