Apple-Hig-Designer MCP — Сценарии использования, Установка & Живое демо

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

Зачем использовать

Ключевые функции

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

Живое демо

Как выглядит на практике

apple-hig-designer-skill.replay ▶ готово

0/0

Установка

Выберите клиент

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

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.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 использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

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

Щёлкните значок MCP Servers на боковой панели Cline, затем "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
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.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 использует массив объектов серверов, а не 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"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

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

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: Apple-Hig-Designer

How to sketch an iOS screen that follows HIG

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

Когда использовать: You need a first-pass layout for a new screen and don't want to re-learn HIG from scratch.

Предварительные требования

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

Поток

Describe the screen

Sketch a Settings > Notifications screen for iPhone — standard iOS 18 patterns.✓ Скопировано

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

Generate the SwiftUI code using Form/List and system colors.✓ Скопировано

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

Adapt for dark mode — confirm you're using .primary / .secondary, not hardcoded hex.✓ Скопировано

→ Semantic-color confirmation

Итог: A screen that feels native on the first preview and won't get rejected in review.

Подводные камни

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

Сочетать с: ios-simulator-skill

Audit an existing screen against HIG

👤 Design reviewers and tech leads ⏱ ~20 min beginner

Когда использовать: Before shipping, you want a second opinion on HIG compliance.

Поток

Share a screenshot or code

Here's a screenshot of our Profile screen. Flag HIG deviations.✓ Скопировано

→ Specific callouts with HIG references
Prioritize

Rank the findings by impact — what would a reviewer actually care about?✓ Скопировано

→ Ranked list, not flat dump
Suggest fixes

For the top 3, show me concrete SwiftUI changes.✓ Скопировано

→ Code diffs

Итог: A focused fix list that matters, not nits.

Подводные камни

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

Сочетать с: filesystem

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

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

Когда использовать: Same feature needs different treatment on phone vs iPad vs Mac.

Поток

State the feature

We have a Library feature. What's the right navigation shape per platform?✓ Скопировано

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

Which SwiftUI primitives should we use per platform to avoid hacks?✓ Скопировано

→ Platform-specific primitive choices

Итог: A design split that matches HIG per platform and is cheap to implement.

Подводные камни

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

Комбинации

Сочетайте с другими MCP — эффект 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.✓ Скопировано

apple-hig-designer-skill + filesystem

Apply the suggested patches across the app's codebase

Apply the audit fixes to Views/Profile/.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать
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

Стоимость и лимиты

Во что обходится

Квота API: none
Токенов на вызов: 3–8k tokens per screen
Деньги: free
Совет: Scope to one screen at a time; HIG is long — don't bait Claude into citing the whole thing

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: none

Исходящий трафик: none

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

Устранение неполадок

Частые ошибки и исправления

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.

Альтернативы

Apple-Hig-Designer в сравнении

Альтернатива	Когда использовать	Компромисс
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

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills