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는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

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

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "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는 맵이 아닌 서버 오브젝트 배열 사용.

~/.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와 조합해 10배 효율

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

Apple-Hig-Designer