快速推薦
- React Native 和 Expo:用 Expo 官方 skill 來建構和上架,用 Vercel 的 react-native-skills 或 Callstack 的 skill 調校效能,用 Mobile Taste Skill 做出不像 AI 做的畫面。
- SwiftUI 和 iOS:想寫現代、具無障礙設計的 SwiftUI,用 Paul Hudson 的 SwiftUI Pro;處理狀態和效能,用 Antoine van der Lee 的 SwiftUI Expert;從構想一路做到上架 App Store,用 Claude Code Apple Skills。
- Flutter:Flutter 團隊自己的 skill,涵蓋架構、版面配置、路由和測試。
- 適用於任何框架的設計:Apple Design Skill 對照 Apple 的人機介面指南(HIG)審查設計,支援 SwiftUI、Flutter、React Native 等;UI UX Pro Max 負責挑選風格、配色和字型。
- 送審之前:App Store Review 會對照 App Store 和 Google Play 的規則檢查專案。
- 想讓網頁應用程式用起來像 App:Emil Kowalski 的 mobile-native 會修好那些在手機上露出破綻的 CSS 和 meta 標籤。
行動 App skill 比較
Star 數和授權來自 2026 年 11 月 8 日的 GitHub API,已取整數。包含多個 skill 的儲存庫,Star 數以整個儲存庫計算。
| Skill | 平台 | 最適合 | Star | 授權 |
|---|---|---|---|---|
| UI UX Pro Max | 網頁、行動裝置、桌面 | 風格、配色、字型搭配和 UX 規則 | ~147k | MIT |
| mobile-native(Emil Kowalski) | 行動網頁、PWA | 讓網頁應用程式在手機上用起來像原生 App | ~54k(整個儲存庫) | MIT |
| react-native-skills(Vercel) | React Native、Expo | 清單、動畫、導覽和 UI 的效能規則 | ~34k(整個儲存庫) | MIT(依 README) |
| SwiftUI Pro(Paul Hudson) | SwiftUI、iOS 26+ | 修正 LLM 在 SwiftUI 裡常犯的錯誤;無障礙設計 | ~6.5k | MIT |
| Expo skills(Expo) | React Native、Expo | 建構、設計和上架 Expo App:路由、原生 UI、動畫、EAS | ~4.1k | MIT |
| SwiftUI Expert(Antoine van der Lee) | SwiftUI、iOS、macOS | 狀態、效能、導覽和 Liquid Glass;Instruments trace 工具 | ~3.9k | MIT |
| Flutter agent plugins(Flutter 團隊) | Flutter | 架構、響應式版面、版面修正、路由、測試、在地化 | ~3.2k | BSD 3-Clause |
| Apple Design Skill | SwiftUI、UIKit、Flutter、React Native、Tauri、Electron | 對照 123 頁 Apple 設計指南審查設計 | ~3k | 未註明 |
| agent-skills(Callstack) | React Native | 效能、導覽、升級、遷移和在裝置上測試 | ~1.7k | MIT |
| Claude Code Apple Skills | iOS、macOS、watchOS、visionOS | 從構想到 App Store 的 165 個 skill,其中 8 個與設計相關 | ~870 | MIT |
| Sleek | React Native、HTML | 先由 Sleek 的 AI 服務設計畫面,再用程式碼實作 | ~600 | MIT |
| Mobile App UI Design | 任何平台(用 React 和 Tailwind 做線框圖) | 來自知名 App 的設計規則:顏色、8 點網格、拇指操作區 | ~500 | 未註明 |
| Apple Skills(Prisma Labs) | iOS 26+ | 最新的 Apple API:SwiftUI、UIKit、HIG、Liquid Glass、StoreKit | ~360 | MIT |
| App Store Review | 任何平台 | 送審前對照 App Store 和 Google Play 的規則檢查 App | ~100 | MIT |
| Mobile Taste Skill(Draftbit) | React Native、Expo | 不像 AI 產生的畫面、導覽和設計系統 | ~10 | 見儲存庫 |
安裝次數最多的行動 skill
以下是透過 skills CLI 的安裝次數,資料來自 2026 年 11 月 8 日的 skills.sh 登錄表。用 /plugin install 安裝的外掛大多不會算進這裡,所以這些數字只是下限。
- ui-ux-pro-max(網頁和行動裝置):約 44 萬
- vercel-react-native-skills:約 27 萬
- mobile-native(Emil Kowalski):約 11.6 萬
- expo-dev-client(Expo 的 skill 中安裝次數最多的):約 7.4 萬
- flutter-apply-architecture-best-practices(Flutter 團隊的 skill 中安裝次數最多的):約 4.5 萬
- swiftui-pro(Paul Hudson):約 3.7 萬
- swiftui-expert-skill(Antoine van der Lee):約 3.6 萬
如何設定 Claude Code 來開發行動 App
依平台挑選:一個負責建構,一個負責設計
Expo 用 Expo 的 skill 加 Mobile Taste Skill;SwiftUI 用 SwiftUI Pro 或 SwiftUI Expert,加 Apple Design Skill;Flutter 用 Flutter 團隊的 skill,加 Apple Design Skill 或 UI UX Pro Max。兩個都想決定風格的 skill 會互相打架。
# Expo 官方 skill(Claude Code 外掛) /plugin install expo@claude-plugins-official # Vercel 的 React Native 規則 npx skills add vercel-labs/agent-skills --skill vercel-react-native-skills # SwiftUI Pro(Paul Hudson) npx skills add https://github.com/twostraws/swiftui-agent-skill --skill swiftui-pro # SwiftUI Expert(Antoine van der Lee) /plugin marketplace add AvdLee/SwiftUI-Agent-Skill /plugin install swiftui-expert@swiftui-expert-skill # Flutter 團隊的 skill npx skills add flutter/agent-plugins # 適用於任何框架的 Apple 設計審查 npx skills add dickwu/apple-design-skill # 適用於 React Native 和 Expo 的 Mobile Taste Skill /plugin marketplace add draftbit/mobile-taste-skill /plugin install mobile-taste-skill提供需求和一個參考 App
說明 App 給誰用、最重要的三四個畫面,再舉一個你喜歡它那種感覺的 App。Mobile Taste Skill 會讓 agent 先確立對這個 App 的判斷(類型、使用者、感覺),規劃好導覽,然後才寫程式碼。
在模擬器上檢查,而不是看程式碼
在 iOS Simulator、Android 模擬器或 Expo Go 裡執行 App,用不只一種螢幕尺寸查看真實畫面。Callstack 的 agent-device skill 能讓 agent 操作裝置,自己檢查自己的成果。
把設計系統存進儲存庫
Mobile Taste Skill 會寫一份 MOBILE-DESIGN.md,Expo 也有一個 expo-design-system skill。把成果留在儲存庫裡,之後的工作階段和其他 agent 就會沿用同樣的顏色、字型和間距。參見 CLAUDE.md 指南。
安裝前需要知道的事
- Sleek 真正用起來需要付費帳號:根據它的 skill 說明,免費帳號的試用點數大約只夠跑一次設計,Pro 方案每月 69 美元。每一份需求都會送到 sleek.design。
- Expo 的 EAS skill 會用到 Expo 託管的建構和更新服務,而且每個 Expo skill 都會讓 agent 透過 Expo 的 agent CLI 送出意見回饋。
- SwiftUI Expert 的 trace 工具需要 Xcode 的 xctrace 和 Python 3;它們在你的電腦上錄製和分析 Instruments trace。
- Claude Code Apple Skills 跟著 main 分支更新,沒有固定版本;它自己的免責聲明也說,這些 skill 是在 Claude Code 協助下寫成的,可能有不準確之處。
- Emil Kowalski 的 mobile-native 針對的是手機上的網頁應用程式和 PWA,不適用於原生 App。
- 這些 skill 都不是 Apple 或 Google 出品的,App Store Review 也無法保證通過審核。登錄表裡還列出 Sleek 的 design-mobile-apps,約 130 萬次安裝,但所在儲存庫 Star 很少;我們無法核實這個數字,所以沒有放進上面的列表。
幫這些 skill 配一位每天上班的 App 設計師
一個 skill 能讓一個工作階段更擅長行動開發。Crewmark 把 Claude Code 或 Codex 變成一位 AI App 設計師:有目標(例如每週打磨好三個畫面)、有工作時間,還有一塊待修畫面的看板;它依心跳醒來,提交附上模擬器截圖的 Pull Request。
聘用 App 設計師職位
職位說明、目標和日常流程都已設定好;參見 AI App 設計師 和 AI 軟體工程師。
把行動 skill 裝進儲存庫
員工會像任何工作階段一樣,使用
.claude/skills裡的 skill。網頁和 UI 方面的工作,參見最好用的網站設計 Claude skill。審查 Pull Request,而不是寫提示詞
核准你喜歡的畫面;要修改的地方在看板上提出。閱讀什麼是 AI 員工。
Claude 行動 App skill 常見問題
做行動 App 設計,最好用的 Claude skill 是哪一個?
看平台。React Native 和 Expo 用 Mobile Taste Skill 加 Expo 自己的 skill;SwiftUI 用 SwiftUI Pro 或 SwiftUI Expert 加 Apple Design Skill;任何框架的視覺部分,都可以用 Apple Design Skill 或 UI UX Pro Max。
有官方的 React Native 或 Expo Claude skill 嗎?
Expo 發布了 expo/skills,也在 claude-plugins-official 裡以外掛形式提供;Vercel 和 Callstack 也發布了 React Native skill。它們都不是 Anthropic 出品的。
SwiftUI 和 iOS 開發,最好用的 Claude Code skill 是哪一個?
Paul Hudson 的 SwiftUI Pro 針對 iOS 26 和 Swift 6.4,專門修正 LLM 在 SwiftUI 裡常犯的錯誤;Antoine van der Lee 的 SwiftUI Expert 涵蓋狀態、效能和 Liquid Glass。兩者都可以作為外掛安裝,也可以用 skills CLI 安裝。
有適用於 Claude Code 的 Flutter skill 嗎?
有。Flutter 團隊發布了 flutter/agent-plugins,包含架構、響應式版面、版面修正、路由、在地化和測試方面的 skill,還附帶 Dart 和 Flutter 的 MCP 工具。
Claude Code 能設計行動 App 的 UI 嗎?
裝上設計 skill 後,效果比不裝好得多:skill 帶來平台的規範和設計方向。畫面要在模擬器或手機上檢查,因為光看程式碼發現不了間距和觸控區域的問題。
這些行動 skill 能在 Codex 和 Cursor 裡使用嗎?
大多數可以。Expo、SwiftUI Pro、SwiftUI Expert、Apple Design Skill 和 Callstack 的 skill 都寫明了 Codex 或 Cursor 的用法,skills CLI 也能把 SKILL.md 格式的 skill 裝進幾十種 agent。
已於 2026 年 11 月 8 日對照各 skill 的 GitHub 儲存庫、GitHub API 和 skills.sh 登錄表查核。