Apple-Hig-Designer MCP — Cas d'usage, Installer & Démo en direct

Name: Apple-Hig-Designer MCP Server
Author: axiaoge2

Pourquoi l'utiliser

Fonctionnalités clés

HIG principles and system-component inventory encoded as prompts
Platform-aware (iOS / iPadOS / macOS / watchOS) design recommendations
Uses Apple semantic colors and typography tokens by default
Provides SwiftUI snippets for the patterns it recommends
Critiques designs with specific HIG citations, not vague taste

Démo en direct

Aperçu en pratique

apple-hig-designer-skill.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/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
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.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 utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

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
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "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
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.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 utilise un tableau d'objets serveur plutôt qu'une map.

~/.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"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Apple-Hig-Designer

How to sketch an iOS screen that follows HIG

👤 iOS developers and designers on cross-functional teams ⏱ ~25 min intermediate

Quand l'utiliser : You need a first-pass layout for a new screen and don't want to re-learn HIG from scratch.

Prérequis

Skill cloned — git clone https://github.com/axiaoge2/Apple-Hig-Designer ~/.claude/skills/Apple-Hig-Designer

Déroulement

Describe the screen

Sketch a Settings > Notifications screen for iPhone — standard iOS 18 patterns.✓ Copié

→ Grouped List, right-detail rows, correct section headers — HIG citations inline
Produce the SwiftUI

Generate the SwiftUI code using Form/List and system colors.✓ Copié

→ Idiomatic SwiftUI with .listStyle(.insetGrouped), Toggle, NavigationLink
Check dark mode

Adapt for dark mode — confirm you're using .primary / .secondary, not hardcoded hex.✓ Copié

→ Semantic-color confirmation

Résultat : A screen that feels native on the first preview and won't get rejected in review.

Pièges

Custom styling that fights the system — Ask Claude 'what's the standard HIG way?' before any custom styling

Combiner avec : ios-simulator-skill

Audit an existing screen against HIG

👤 Design reviewers and tech leads ⏱ ~20 min beginner

Quand l'utiliser : Before shipping, you want a second opinion on HIG compliance.

Déroulement

Share a screenshot or code

Here's a screenshot of our Profile screen. Flag HIG deviations.✓ Copié

→ Specific callouts with HIG references
Prioritize

Rank the findings by impact — what would a reviewer actually care about?✓ Copié

→ Ranked list, not flat dump
Suggest fixes

For the top 3, show me concrete SwiftUI changes.✓ Copié

→ Code diffs

Résultat : A focused fix list that matters, not nits.

Pièges

Audit is too nitpicky — 1px spacing issues — Ask for impact-weighted findings only

Combiner avec : filesystem

Decide between iOS, iPadOS, and macOS patterns for a shared app

👤 Teams building a multi-platform SwiftUI app ⏱ ~30 min advanced

Quand l'utiliser : Same feature needs different treatment on phone vs iPad vs Mac.

Déroulement

State the feature

We have a Library feature. What's the right navigation shape per platform?✓ Copié

→ Tab bar / Sidebar / NavigationSplitView mapped to platforms with reasoning
Pick primitives

Which SwiftUI primitives should we use per platform to avoid hacks?✓ Copié

→ Platform-specific primitive choices

Résultat : A design split that matches HIG per platform and is cheap to implement.

Pièges

iPad as 'big iPhone' — misses pointer and multi-column patterns — Ask Claude to enumerate iPadOS-specific affordances before copying iPhone UX

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

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

Render the generated SwiftUI and inspect it in the simulator

Render this SwiftUI in the iPhone 16 simulator and confirm it matches the HIG brief.✓ Copié

apple-hig-designer-skill + filesystem

Apply the suggested patches across the app's codebase

Apply the audit fixes to Views/Profile/.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler
hig-layout-design	screen intent + platform	New screens or features
hig-audit	screenshot or SwiftUI code	Pre-ship review
swiftui-snippet	pattern name	Implementation step

Coût et limites

Coût d'exécution

Quota d'API: none
Tokens par appel: 3–8k tokens per screen
Monétaire: free
Astuce: Scope to one screen at a time; HIG is long — don't bait Claude into citing the whole thing

Sécurité

Permissions, secrets, portée

Stockage des identifiants : none

Sortie de données : none

HIG evolves with each iOS — re-verify for new OS releases

Dépannage

Erreurs courantes et correctifs

Suggestions feel dated

Tell Claude the iOS version you're targeting; HIG differs across releases.

SwiftUI uses deprecated modifiers

Specify the minimum iOS version explicitly.

Alternatives

Apple-Hig-Designer vs autres

Alternative	Quand l'utiliser	Compromis
the-unofficial-swift-programming-language-skill	You need language-level help, not HIG design	Language, not UX
cupertino	You want an MCP connected to live Apple docs	Live MCP vs cached skill

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills