UI UX Pro Max、frontend-design、Taste Skill 實測：AI 做手機 App 介面，哪個設計 Skill 最接近能上線

想讓 AI 做出好看、接近能上線的手機 App 畫面，目前 GitHub 上最多人用的三個設計 Skill 是 Anthropic 官方的 frontend-design、UI UX Pro Max、Taste Skill。我們用同一份需求、同一個模型實測四次後的結論是：三個都能明顯擺脫「AI 罐頭臉」，其中 UI UX Pro Max 最懂手機 App 的規矩，frontend-design 最能做出品牌個性，Taste Skill 質感最強，但它的主力版本明說不做 App 畫面。

上圖是這次實測的第一屏截圖。事情的起點很單純：最近我們團隊在用 Claude Code 幫客戶做 App 原型，畫面功能都對，但一打開就是熟悉的綠色圓角卡片、灰色小字、一排一模一樣的列表，客戶看了會說「好像哪裡看過」。網路上都在推「裝個設計 Skill 就好」，所以這次我們把最熱門的三個專案 clone 下來，把程式碼一個檔案一個檔案讀完，再在本機用同一份「瑜珈教室會員 App 首頁」需求，讓四個獨立的 AI 代理分別做一次，最後用程式量測觸控尺寸、字級與無障礙設定。

先補一個名詞。Skill（技能包） 可以想成一份交給 AI 的「工作手冊資料夾」：裡面一份 SKILL.md 寫做事規則，旁邊可以附腳本和資料，AI 遇到相關任務才打開來看。這個格式由 Anthropic 在 2025 年 10 月推出，同年 12 月公開成 Agent Skills 開放標準，現在 Claude Code、Codex、Cursor、Gemini CLI 等工具都讀得懂。Skill 本身怎麼運作，可以先看 Claude Skills 完整指南。

三個熱門手機 App 設計 Skill：先看這張速覽表

先講結論：三個 Skill 用三種完全不同的方法讓 AI 變有品味。frontend-design 是一份規則文件，UI UX Pro Max 是一個附搜尋引擎的設計資料庫，Taste Skill 是一套會抽方向、開瀏覽器量測的工具組。星數與版本是 2026 年 10 月 17 日用 GitHub API 查的。

這三個專案都能裝進 Claude Code，也能裝進 Cursor、Codex 這類支援 Agent Skills 的工具。它們跟我們之前寫過的 Claude Code 畫面變好看的 7 個方法是同一個問題的延伸：那篇談的是網頁與通用技巧，這篇只看手機 App，而且每個結論都對應本機實測。

同一份需求做四次：手機 App 畫面實測結果

一句話結論：有裝 Skill 的三組都比不裝的那組多做了半套 App 該有的東西（預約按鈕、狀態列、減少動態設定、鍵盤焦點），差距主要在「細節是否符合手機規範」，配色好不好看反而是其次。

測試設計很簡單。需求寫成一份 BRIEF：台中一家小型瑜珈教室「山嵐瑜珈」的會員 App 首頁，要有會員問候、明天已預約的課（可取消）、10 堂課卡剩 4 堂、今天 5 堂可預約課程（含額滿可候補）、底部四個分頁，全部繁體中文，做成在 390×844 手機視窗看起來像原生 App 的單一 HTML。四組都用 Claude Sonnet 5.5，每組是獨立、看不到其他組結果的 AI 代理：

做完之後，我們用 Chrome 以 iPhone 尺寸開啟四個畫面截圖，再用程式量測每個可點元素的尺寸、頁面用了幾種字級、最小字多大，以及有沒有處理安全區域與減少動態。下表是量測結果：

44×44 這個門檻來自 Apple 人機介面指南的建議最小觸控尺寸，Android 官方無障礙文件的建議是 48dp。手指比滑鼠粗，按鈕太小就會一直按錯，這是手機畫面「看起來像網站」最常見的原因之一。

下圖是捲到底的課程清單。基準組的畫面其實乾淨好讀，問題在功能：課程列只有「剩 3 位」這種標籤，沒有預約按鈕，會員要點進課表才能報名；底部分頁列是一般區塊，用螢幕閱讀器的人點不到。三個 Skill 組都自動補上了「預約」「候補」按鈕，差別在按鈕做得夠不夠大。

Anthropic frontend-design：逼 AI 先承認自己的預設值

一句話：frontend-design 最大的價值是讓 AI 在動手前，先發現自己正要做出一個「AI 臉」。它沒有任何程式碼，整個 Skill 就是一份約 70 行的文字守則，收錄在 Anthropic 官方 skills 倉庫。

讀完原始檔，它做的事可以歸成三件。第一，它直接點名現在 AI 設計最常見的 5 種長相，包含米白底配陶土橘、黑底配螢光綠、報紙風細線排版、一堆同圓角同陰影的卡片，以及每個標題上面都有全大寫小標的「模板配件」。第二，它要求 AI 先寫一份設計計畫（4 到 6 個具名色碼、字型角色、ASCII 線框圖），再回頭對照需求檢討哪裡是預設值，改完才准寫程式。第三，它要求邊做邊截圖自評，交付前「照鏡子拿掉一件配件」。

實測中最有意思的一幕出現在設計計畫的初稿。AI 第一直覺提出的配色是奶油米白 #F4F1EA 加陶土橘 #D97757，幾乎就是 Skill 文件裡點名的第一種 AI 預設值（文件還特別說明 #D97757 是 Claude 自己介面的強調色）。照規則檢討後，它改從「山嵐」這個店名找靈感，換成霧白、石青、松墨的冷色系，頁首畫了三層遠山，方案狀態做成 10 格打孔課卡，用掉 6 格、剩 4 格亮著。這是四組裡唯一一個「看得出是這家店」的畫面。

所以 frontend-design 適合「品牌還沒定、想要一個有記憶點的方向」的階段。拿它做 App，記得自己補上觸控尺寸與資訊密度這兩條，否則畫面漂亮但不好用。

UI UX Pro Max：會查資料庫的設計顧問，最懂手機 App 規範

先講結論：這次實測中，UI UX Pro Max 是唯一所有按鈕都達到 44×44、而且有完整 App 交付檢查表的 Skill。它在台灣的搜尋量也最高，Ubersuggest 顯示「ui ux pro max」月搜尋約 1,600 次，是三者裡最多人在找的一個。

打開 原始碼會發現它的核心是一個 Python 寫的 BM25 搜尋引擎（跟早期搜尋引擎排序網頁的方法同一類），底下接一批 CSV 設計資料：79 種介面風格、192 組產品配色、74 組字型搭配、119 條 UX 規則，以及 22 種技術棧的實作規則，其中 React Native、SwiftUI、Flutter 各有約 50 條。AI 照 Skill 指示，先用「產業加關鍵字」跑 `--design-system` 拿整套設計系統，再針對單一問題查 `--domain` 或 `--stack`，交付前讀 references/pro-rules.md 跑檢查表。那份檢查表開頭就寫明是給 iOS、Android、React Native、Flutter 的 App 介面用，涵蓋觸控尺寸、按壓回饋、深淺色對比、安全區域與螢幕閱讀器。

# 產生整套設計系統（新頁面必跑）
python3 scripts/search.py "yoga studio wellness calm" --design-system -p "山嵐瑜珈"

# 查單一問題：App 的觸控、安全區域、底部分頁
python3 scripts/search.py "touch target safe area bottom nav" --domain web -n 3

# 查技術棧規則：React Native
python3 scripts/search.py "bottom tab safe area touch target" --stack react-native

但它有一個實測一定會遇到的坑：查詢用字會大幅改變結果。我們先手動用「yoga pilates studio class booking mobile app」查，它推薦的是純黑底、動態很重的「捲動敘事」風格，段落結構是 landing page 的開場、問題、解法、結尾行動呼籲，跟瑜珈教室的會員 App 完全對不上；實測的 AI 代理第一次換用「yoga pilates studio member app wellness booking」，拿到的也是同一組純黑結果。我們另外用「fitness booking app」查，又變成橘色加深灰的健身房風格。下圖是第一次查詢的實際輸出。

Skill 自己有寫對策：結果不對就換更精準的字重查一次，重查還是不對就要明講「找不到合適結果」，不准硬套。AI 照做，改用「yoga studio wellness calm」重查，這次查到「Organic Biophilic」風格、鼠尾草加湖水藍的配色、Lora 加 Raleway 字型，這次就合理了。最後交付時它還自己抓到兩個問題：建議的湖水藍配白字對比只有約 3.7 比 1，低於 WCAG 對一般文字要求的 4.5 比 1，所以把按鈕色加深；Lora 和 Raleway 都沒有中文字，所以補上 Noto Sans TC。

Taste Skill：視覺最精緻，但主力版本明說不做 App

一句話：Taste Skill 最會做出「設計師作品集等級」的畫面，可是它的主力版本是為對外網頁打造的，用在 App 要挑對子 Skill。這一點寫在它 README 的常見問題裡：預設的 taste-skill 是給公開網頁用的，儀表板和 App 畫面請改用 minimalist-skill 或 soft-skill。

主力版的設計很有野心。它宣稱從 One Page Love、Awwwards 精選的 247 個網站整理出設計方向庫，`draw.mjs` 每次從 20 種方向抽 3 種讓 AI 選，再發一整張配色、字型、版面的設計單；`inspect.mjs` 會開真的 Chrome，在 1440、768、390 三種寬度量測標題行數、字級、陰影、漸層、對比，違規就判 FAIL；`lint.mjs` 則掃原始碼裡的禁用寫法。它的規則非常硬：不准漸層、不准靜止時有陰影、不准毛玻璃、不准標題上方小標、最多五種字級。

實測用的是 README 指定給產品介面的 soft-skill（高級感視覺）。做出來的畫面確實最像 Dribbble 上的作品：深綠色大卡片、10/18 超大日期、兩層巢狀圓角、浮起來的膠囊型分頁列。問題也很明顯：整頁用了 16 種字級，最小字只有 10px；6 個可點元素小於 44×44，其中「看完整課表」只有 65×19；第一屏被兩張大卡吃掉，完全看不到今天能預約的課。

更有趣的是，我們用同一個倉庫裡主力版的 `lint.mjs` 檢查 soft-skill 的成品，結果是 10 個 FAIL、3 個 WARN：FAIL 來自標題上方小標、靜止卡片的陰影和裝飾漸層，WARN 則是毛玻璃效果與 Plus Jakarta Sans 被列為「預設字型」。同一個專案的兩個 Skill 對「好設計」的定義互相打架。這不代表誰錯，代表它是一組風格包，你要先決定要哪一種風格，再挑對應的子 Skill。

值得一提的是 imagegen-frontend-mobile 這個子 Skill。它是給 ChatGPT 圖片、Codex 圖片模式這類生圖工具用的，規則裡列了一整段「手機 App 的 AI 痕跡」：到處都是紫藍漸層、隨便加的毛玻璃卡片、塞滿假圖表的首頁、一堆膠囊標籤、Acme 或 NovaCore 這種假品牌名。就算不用它出圖，這份清單也很適合拿來當設計審查的對照表。

裝了設計 Skill，AI 做的 App 畫面離上線還差多少

先講結論：設計 Skill 解決的是「長得像 AI 做的」，解決不了「能不能真的用」。四組畫面都只是一個寫死資料的 HTML 首頁，離一支能上架的 App 還隔著好幾層。

Stack Overflow 2025 開發者調查有一個數字很貼切：66% 的開發者最常遇到的困擾，是 AI 的答案「幾乎對，但差一點」。手機畫面也一樣，差的那一點通常藏在畫面沒畫出來的地方。我們把實測時看到、但四個 Skill 都沒處理的部分整理成下表：

表中「預約與名額」這一項最容易被低估。畫面上一個「剩 1 位」的標籤，背後要有一套即時計算可用量、處理同時搶位的系統。這件事我們做過：影視器材租賃與檔期系統要每天重算同一批器材何時被借、維修、外調，做了檔期大表加即時可用量引擎，千筆預訂幾秒內載入、撞期會自動偵測。課程名額的道理一樣，技術細節可以看高併發搶位防超賣那篇。

如果你要做的是原生 App，可以再加一個專用 Skill。Expo 官方的 expo/skills 收錄了二十多個 Skill，其中 expo-design-system 列出 20 種「AI 做的 App 很不原生」的典型錯誤，例如用網頁式的置中彈窗取代原生底部面板、每一列都包成一張白色陰影卡片、用表情符號當分頁圖示、為了裝飾放一大塊紫色漸層把正事擠到下面。搭配 Expo 官方 Skill 說明，它補的正是三個通用設計 Skill 最缺的那一塊。框架怎麼選，可以參考 Flutter、React Native 與原生 App 選型；Expo 專案進階到正式開發的關卡，在 Expo Go 轉 Development Build 有整理。

手機 App 設計 Skill 怎麼選、怎麼裝

一句話建議：做 App 先裝 UI UX Pro Max 當底，想要品牌個性再疊 frontend-design，原生 App 加 Expo 官方 Skill。Taste Skill 留給官網和活動頁，或用它的 soft-skill 做視覺提案。

安裝方式以各專案 README 為準，Claude Code 用外掛市集最省事，其他工具可以用 skills 指令列工具：

# Anthropic frontend-design（收在 example-skills 外掛裡）
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

# UI UX Pro Max
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

# Taste Skill 的 soft-skill（其他工具也適用）
npx skills add https://github.com/Leonxlnx/taste-skill --skill "high-end-visual-design"

# Expo 官方 Skill
npx skills@latest add expo/skills --skill '*'

裝之前有一件事一定要做：把 SKILL.md 和附帶的腳本打開讀一遍。Skill 會被 AI 當成工作指示，附帶的腳本也會在你電腦上執行。資安公司 Snyk 在 2026 年 2 月掃描了 3,984 個公開 Skill，其中 13.4% 有嚴重等級的問題，包括惡意程式、提示注入和外洩的金鑰。這次三個專案我們都讀過：frontend-design 純文字，UI UX Pro Max 的 Python 只用標準函式庫、不連網，Taste Skill 的量測腳本只操作本機瀏覽器，找圖片的腳本才會連網。想更了解 Skill 的資安面，可以看 reverse-skill 那篇；Skill 的寫法與自訂，Claude Code Skill 教學有 10 個範例，官方說明在 Claude Code 文件。

裝好之後，提示詞也要跟著調整。實測發現，需求寫得越具體，Skill 發揮得越好：寫清楚店名與地點、真實的課程資料、裝置尺寸，並且直接要求「觸控元件至少 44×44、第一屏要看得到主要任務」。Skill 給的是品味與規則，具體內容還是要你提供。

看到這裡，如果你手上已經有一支 AI 做出來的 App 原型，想知道離上線還差多少，我們很樂意幫你做一次 Vibe Coding 健檢，把畫面、資料、安全與上架要補的事一次列清楚；需要從預約、會員到後台整套做起來，也可以聽你聊聊需求，一起看看哪些做得起來。上線前常見的落差，也可以先看 Vibe Coding 做的 App 能直接上線嗎與原型到正式產品差的 7 件事。

回到一開始的問題：市面上確實有現成又熱門的 Skill，可以讓 AI 做的手機畫面變好看。挑一個符合你階段的裝起來，用一份寫得夠具體的需求跑一次，再拿著觸控尺寸、字級、第一屏資訊量這三把尺檢查成品，就能少走很多冤枉路。想看 UI/UX 設計本身的完整流程，可以接著讀 UI/UX 設計流程全拆解；評估整支 App 的預算，可以參考 App 開發費用比較，而 AI 設計工具的極限，在 Claude Design 誠實評測也有整理。