/ Directorio / Playground / Apple-Hig-Designer
← Todos los servidores ↗ GitHub
● Comunidad axiaoge2 ⚡ Instantáneo

Apple-Hig-Designer

por axiaoge2 · axiaoge2/Apple-Hig-Designer

Diseña pantallas que realmente sigan las Directrices de Interfaz Humana de Apple — Claude verifica tu layout, tipografía e interacciones contra HIG.

Apple-Hig-Designer es una Agent Skill que carga las HIG de Apple en la memoria de trabajo de Claude para tareas de diseño: producir mockups de SwiftUI/UIKit, criticar layouts existentes, elegir los componentes del sistema correctos y seguir los tokens de tipografía, espaciado y color de la plataforma. Funciona tanto si estás esbozando una nueva app para iPhone como si estás auditando una existente.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

apple-hig-designer-skill.replay ▶ listo
0/0

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "apple-hig-designer-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axiaoge2/Apple-Hig-Designer",
        "~/.claude/skills/Apple-Hig-Designer"
      ],
      "_inferred": true
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "apple-hig-designer-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axiaoge2/Apple-Hig-Designer",
        "~/.claude/skills/Apple-Hig-Designer"
      ],
      "_inferred": true
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "apple-hig-designer-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axiaoge2/Apple-Hig-Designer",
        "~/.claude/skills/Apple-Hig-Designer"
      ],
      "_inferred": true
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "apple-hig-designer-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axiaoge2/Apple-Hig-Designer",
        "~/.claude/skills/Apple-Hig-Designer"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "apple-hig-designer-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axiaoge2/Apple-Hig-Designer",
        "~/.claude/skills/Apple-Hig-Designer"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json
{
  "context_servers": {
    "apple-hig-designer-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/axiaoge2/Apple-Hig-Designer",
          "~/.claude/skills/Apple-Hig-Designer"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add apple-hig-designer-skill -- git clone https://github.com/axiaoge2/Apple-Hig-Designer ~/.claude/skills/Apple-Hig-Designer

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Apple-Hig-Designer

Cómo esbozar una pantalla de iOS que siga HIG

👤 Desarrolladores e diseñadores de iOS en equipos multidisciplinarios ⏱ ~25 min intermediate

Cuándo usarlo: Necesitas un diseño inicial para una pantalla nueva y no quieres aprender HIG desde cero.

Requisitos previos
  • Skill clonada — git clone https://github.com/axiaoge2/Apple-Hig-Designer ~/.claude/skills/Apple-Hig-Designer
Flujo
  1. Describe la pantalla
    Esboza una pantalla Settings > Notifications para iPhone — patrones estándar de iOS 18.✓ Copiado
    → Lista agrupada, filas con detalle derecho, encabezados de sección correctos — citas de HIG incluidas
  2. Produce el SwiftUI
    Genera el código SwiftUI usando Form/List y colores del sistema.✓ Copiado
    → SwiftUI idiomático con .listStyle(.insetGrouped), Toggle, NavigationLink
  3. Verifica el modo oscuro
    Adapta para modo oscuro — confirma que usas .primary / .secondary, no hex codificado.✓ Copiado
    → Confirmación de colores semánticos

Resultado: Una pantalla que se sienta nativa en la primera vista previa y no será rechazada en revisión.

Errores comunes
  • Estilos personalizados que luchan contra el sistema — Pregunta a Claude 'cuál es la forma estándar de HIG?' antes de cualquier estilo personalizado
Combinar con: ios-simulator-skill

Audita una pantalla existente contra HIG

👤 Revisores de diseño y tech leads ⏱ ~20 min beginner

Cuándo usarlo: Antes de enviar, quieres una segunda opinión sobre conformidad con HIG.

Flujo
  1. Comparte una captura de pantalla o código
    Aquí hay una captura de pantalla de nuestra pantalla de Perfil. Señala desviaciones de HIG.✓ Copiado
    → Llamadas específicas con referencias a HIG
  2. Prioriza
    Ordena los hallazgos por impacto — ¿qué le importaría realmente a un revisor?✓ Copiado
    → Lista ordenada, no un volcado plano
  3. Sugiere correcciones
    Para los 3 principales, muéstrame cambios concretos de SwiftUI.✓ Copiado
    → Diffs de código

Resultado: Una lista de correcciones enfocada que importa, no detalles nimios.

Errores comunes
  • La auditoría es demasiado exigente — problemas de espaciado de 1px — Pide solo hallazgos ponderados por impacto
Combinar con: filesystem

Decide entre patrones de iOS, iPadOS y macOS para una app compartida

👤 Equipos que construyen una app SwiftUI multiplataforma ⏱ ~30 min advanced

Cuándo usarlo: La misma característica necesita tratamiento diferente en teléfono vs iPad vs Mac.

Flujo
  1. Establece la característica
    Tenemos una característica de Biblioteca. ¿Cuál es la forma de navegación correcta por plataforma?✓ Copiado
    → Tab bar / Sidebar / NavigationSplitView mapeados a plataformas con razonamiento
  2. Elige primitivas
    ¿Qué primitivas de SwiftUI deberíamos usar por plataforma para evitar hacks?✓ Copiado
    → Elecciones de primitivas específicas de la plataforma

Resultado: Un diseño dividido que coincida con HIG por plataforma y sea barato de implementar.

Errores comunes
  • iPad como 'iPhone grande' — se pierden patrones de pointer y multi-columna — Pide a Claude que enumere capacidades específicas de iPadOS antes de copiar UX de iPhone

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

apple-hig-designer-skill + ios-simulator-skill

Renderiza el SwiftUI generado e inspecciónalo en el simulador

Renderiza este SwiftUI en el simulador de iPhone 16 y confirma que coincide con el resumen de HIG.✓ Copiado
apple-hig-designer-skill + filesystem

Aplica los parches sugeridos en todo el código de la app

Aplica las correcciones de auditoría a Views/Profile/.✓ Copiado

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
hig-layout-design intención de pantalla + plataforma Nuevas pantallas o características 0
hig-audit captura de pantalla o código SwiftUI Revisión previa al envío 0
swiftui-snippet nombre del patrón Paso de implementación 0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
ninguno
Tokens por llamada
3–8k tokens por pantalla
Monetario
gratuito
Consejo
Limita el alcance a una pantalla a la vez; HIG es largo — no cebues a Claude para que cite todo

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: ninguno
Salida de datos: ninguno

Resolución de problemas

Errores comunes y soluciones

Las sugerencias parecen anticuadas

Dile a Claude la versión de iOS que estás enfocando; HIG difiere entre versiones.

SwiftUI usa modificadores deprecados

Especifica explícitamente la versión mínima de iOS.

Alternativas

Apple-Hig-Designer vs otros

AlternativaCuándo usarlaContrapartida
the-unofficial-swift-programming-language-skillNecesitas ayuda a nivel de lenguaje, no diseño HIGLenguaje, no UX
cupertinoQuieres un MCP conectado a documentos de Apple en vivoMCP en vivo vs skill en caché

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills