/ 目錄 / 演練場 / Apple-Hig-Designer
● 社群 axiaoge2 ⚡ 即開即用

Apple-Hig-Designer

作者 axiaoge2 · axiaoge2/Apple-Hig-Designer

設計真正符合 Apple Human Interface Guidelines 的畫面 — Claude 依據 HIG 檢查你的版面、字體排版與互動設計。

Apple-Hig-Designer 是一個 Agent Skill,能將 Apple HIG 載入 Claude 的工作記憶中,協助設計任務:產生 SwiftUI/UIKit 模擬稿、審查現有版面、選擇正確的系統元件,以及遵循平台的字體排版、間距與顏色 token。無論你是在規劃新的 iPhone 應用程式,還是稽核既有畫面,都能適用。

為什麼要用

核心特性

即時演示

實際使用效果

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

如何規劃符合 HIG 的 iOS 畫面草圖

👤 跨職能團隊中的 iOS 開發者與設計師 ⏱ ~25 min intermediate

何時使用: 你需要為新畫面快速產出初版版面配置,又不想從頭重新研讀 HIG。

前置條件
  • Skill cloned — git clone https://github.com/axiaoge2/Apple-Hig-Designer ~/.claude/skills/Apple-Hig-Designer
步驟
  1. 描述畫面內容
    Sketch a Settings > Notifications screen for iPhone — standard iOS 18 patterns.✓ 已複製
    → Grouped List、right-detail 列、正確的 section 標題 — 並附上 HIG 引用
  2. 產生 SwiftUI 程式碼
    Generate the SwiftUI code using Form/List and system colors.✓ 已複製
    → 慣用的 SwiftUI,包含 .listStyle(.insetGrouped)、Toggle、NavigationLink
  3. 確認深色模式
    Adapt for dark mode — confirm you're using .primary / .secondary, not hardcoded hex.✓ 已複製
    → 確認使用語意色彩

結果: 第一次預覽就有原生質感的畫面,且不會在審查時被拒絕。

注意事項
  • 自訂樣式與系統風格相互衝突 — 在任何自訂樣式之前,先問 Claude「HIG 標準做法是什麼?」
搭配使用: ios-simulator-skill

依據 HIG 稽核現有畫面

👤 設計審查人員與技術負責人 ⏱ ~20 min beginner

何時使用: 上線前,你想對 HIG 合規性取得第二意見。

步驟
  1. 提供截圖或程式碼
    Here's a screenshot of our Profile screen. Flag HIG deviations.✓ 已複製
    → 附有 HIG 引用的具體問題列表
  2. 排定優先順序
    Rank the findings by impact — what would a reviewer actually care about?✓ 已複製
    → 按影響程度排序的清單,而非平鋪直敘的羅列
  3. 建議修正方式
    For the top 3, show me concrete SwiftUI changes.✓ 已複製
    → 程式碼差異對照

結果: 一份聚焦且真正重要的修正清單,而非雞毛蒜皮的小問題。

注意事項
  • 稽核過於吹毛求疵 — 計較 1px 的間距差異 — 只要求提供以影響程度加權的問題
搭配使用: filesystem

在共用應用程式中決定 iOS、iPadOS 與 macOS 的設計模式

👤 開發多平台 SwiftUI 應用程式的團隊 ⏱ ~30 min advanced

何時使用: 同一功能在手機、iPad 與 Mac 上需要不同的處理方式。

步驟
  1. 說明功能需求
    We have a Library feature. What's the right navigation shape per platform?✓ 已複製
    → Tab bar / Sidebar / NavigationSplitView 對應各平台的建議,並附上理由
  2. 選擇基本元件
    Which SwiftUI primitives should we use per platform to avoid hacks?✓ 已複製
    → 各平台專屬的基本元件選擇建議

結果: 符合各平台 HIG 且實作成本低的設計分流方案。

注意事項
  • 把 iPad 當「大號 iPhone」 — 忽略指標操作與多欄版面模式 — 在複製 iPhone UX 之前,先請 Claude 列舉 iPadOS 特有的互動能力

組合

與其他 MCP 搭配,撬動十倍槓桿

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

在模擬器中渲染產生的 SwiftUI 並確認符合 HIG 規格

Render this SwiftUI in the iPhone 16 simulator and confirm it matches the HIG brief.✓ 已複製
apple-hig-designer-skill + filesystem

將建議的修正套用至應用程式整個程式碼庫

Apply the audit fixes to Views/Profile/.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
hig-layout-design screen intent + platform 設計新畫面或新功能時 0
hig-audit screenshot or SwiftUI code 上線前審查時 0
swiftui-snippet pattern name 實作階段時 0

成本與限制

運行它的成本

API 配額
none
每次呼叫 Token 數
每個畫面約 3–8k tokens
費用
free
提示
每次只處理一個畫面;HIG 內容很長 — 不要誘導 Claude 引用整份文件

安全

權限、密鑰、影響範圍

憑證儲存: 不需儲存任何憑證
資料出站: 無資料外傳

故障排查

常見錯誤與修復

Suggestions feel dated

告知 Claude 你的目標 iOS 版本;HIG 在不同版本間有所差異。

SwiftUI uses deprecated modifiers

明確指定最低支援的 iOS 版本。

替代方案

Apple-Hig-Designer 對比其他方案

替代方案何時用它替代權衡
the-unofficial-swift-programming-language-skill你需要的是語言層面的協助,而非 HIG 設計著重程式語言,而非使用者體驗設計
cupertino你想要連線至 Apple 即時文件的 MCP即時 MCP 與快取 skill 的取捨

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills