UI UX Pro Max 是什麼：裝進 Claude Code 與 Cursor 的 AI 介面設計技能

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

當你讓 Claude Code 或 Cursor 生出一個登入頁或儀表板時，它們寫得出可運作的程式碼，卻常常端出千篇一律的紫色漸層與擠在一起的卡片。UI UX Pro Max 解的就是這個缺口：它是一份可以裝進你現有 AI 程式助手裡的設計知識庫，讓助手在你寫介面時，有風格、配色、字體與 UX 規則可以參考，免去每次都從空白推導的窘境。

這份技能在 GitHub 上以 nextlevelbuilder/ui-ux-pro-max-skill 開源，採 MIT 授權，不收費，作者只放了一個 PayPal 隨喜贊助連結。它的查詢引擎是一支只靠 Python 標準庫的腳本，不對外連網，設計資料全部留在你本機。

Pin

它幫你的 AI 助手長出設計判斷力

先把定位講清楚，這也是最容易誤解的地方：UI UX Pro Max 本身不會幫你產出介面畫面。它是一個裝在 AI 助手的 skills 目錄裡的知識層，當你的助手需要設計判斷時，它用一支 BM25 語意搜尋腳本，從內建的 CSV 設計資料庫裡挑出對應的風格、配色、字體與規則，再交給你的助手去生成程式碼。

BM25 是資訊檢索領域常用的排序演算法，概念接近進階版的關鍵字加權比對，好處是完全不需要 GPU 或模型推理，在本機用純 Python 就能跑。UI UX Pro Max 選這條路有其道理：設計建議本質上是結構化的規則知識（哪種行業適合什麼配色、哪種頁面結構轉換率高），用可排序、可審計的資料庫查詢，比丟給神經網路用猜的更穩定，結果也能被開發者逐筆檢視與修正。腳本原始碼的 docstring 寫得很明白，查詢時可以指定網域（domain）和技術棧（stack），也能讓它自動偵測你的查詢屬於哪一類，並回報第二名候選網域供你參考，等於在搜尋階段就給了你除錯與微調的透明度。

這個分際很重要。v0.dev、UIzard、Galileo 這類工具是你給一段描述，它們直接吐出成品介面；UI UX Pro Max 走的是另一個方向，它把你信賴的 AI 助手變得有設計素養，補強的正是你已經在用的那條開發流程。正因如此，它幾乎綁定所有主流 AI 程式助手，官方 README 列出的安裝目標就涵蓋 Claude Code、Cursor、Windsurf、GitHub Copilot、Codex CLI、Kiro、Gemini CLI、Trae、Qoder 等 18 種以上，另外還有一個 universal 模式裝進通用的 .agents/skills/ 目錄。

對已經在用 倉頡輸入法這類 Claude Code 技能的開發者來說，UI UX Pro Max 是同一個生態裡補設計那一塊的拼圖。如果你還沒接觸過這種技能目錄的運作方式，可以先把 Claude Skills 總覽清單當成地圖，理解這類技能怎麼掛進助手裡。

從一句需求到一套設計系統

v2.0 版的核心功能叫 Design System Generator，運作邏輯可以從搜尋腳本的 docstring 與 README 範例看出來。你給一句產品描述，例如「幫一個美容預約服務做落地頁」，引擎會同時跑五個平行的網域搜尋：產品類型比對、風格推薦、配色挑選、落地頁結構、字體配對，再用 BM25 排序結合 JSON 條件規則，過濾掉不適合該行業的反模式，組出一套設計系統。

README 裡用一個 Serenity Spa 的範例展示完整輸出，結構固定為幾個區塊：推薦的頁面結構（Hero、Services、Testimonials、Booking、Contact 等區塊）、視覺風格與關鍵字、一組標到色碼的配色（例如主色 Soft Pink #E8B4B8、CTA Gold #D4AF37）、字體配對（Cormorant Garamond 配 Montserrat）、該避開的反模式（例如金融業不要用紫色粉色漸層），以及一份出貨前檢查清單，像是「圖示用 SVG 不要用 emoji、可點元素要有 cursor:pointer、亮色模式文字對比至少 4.5 比 1」。

這份輸出從資料庫規則推導而來，屬於結構化建議，性質上不同於模型自由生成的文字，所以每次面對同類型需求會給出穩定一致的判斷。腳本還提供三個設計旋鈕讓你微調：variance 控制版面是大膽不對稱還是保守置中（1 到 10，數字越大越偏向前者）、motion 控制動態複雜度、density 控制資訊密度。舉例來說，一個資料儀表板你會想把 density 拉高讓資訊緊湊，一個品牌落地頁則適合把 density 壓低讓留白帶出高級感。

加上 --persist 參數後，腳本會把這份設計系統存成 MASTER.md 進你的專案目錄，後續每個頁面可以再加頁面層級的覆蓋檔。這套「主檔加覆蓋」的設計有個實際好處：當你中途改了某個頁面的配色，不會連帶覆蓋掉整個專案先前的設計決策，修改的影響範圍是可控的。

風格、配色、字體到技術棧的能力範圍

根據 skill.json 這份機器可讀清單，v2 版的資料庫涵蓋 84 種 UI 風格、192 組配色、74 組字體配對、25 種圖表類型、22 種技術棧，以及 98 條 UX 準則。搜尋腳本把這些拆成幾個可查詢的網域，包括 style、color、chart、landing、product、ux、typography、google-fonts、icons、gsap、react 與 web 等十多個，你可以針對單一網域查（例如只查 glassmorphism 風格），也可以讓它自動偵測。

產品類型比對是設計系統產生器的起點，資料庫把它分成 192 個分類，橫跨醫療、電商、服務、創意、生活與新興科技幾大類。每個分類都帶著一組設計傾向：醫療診所適合可信賴的冷色系、奢侈品電商適合高對比與大量留白、加密貨幣儀表板常見 OLED 暗黑風配高彩度資料視覺化。這些傾向會在搜尋階段就先過濾掉不適合的配色與風格，例如銀行業會直接排除掉 AI 感很重的紫色粉色漸層，因為那會削弱金融服務需要的信任感。

98 條 UX 準則涵蓋的則是互動層面的細節，從動畫時長建議（hover 過場抓在 150 到 300 毫秒之間最自然）、無障礙規範（鍵盤焦點狀態要清楚可見、尊重使用者的 prefers-reduced-motion 偏好）、到載入體驗與 z-index 層級管理。這些準則會跟著設計系統輸出一起遞給你的助手，讓它在寫元件時不會漏掉鍵盤可操作性或對比不足這類常見疏失。對獨立開發者或沒有專職設計師的小團隊來說，等於在生成的環節就內建了一層設計審查，雖然不能完全取代人類設計師的判斷，但起碼能把最常見的無障礙與互動陷阱擋在前面。圖表類型網域涵蓋長條圖、圓餅圖、熱力圖等 25 種主流視覺化形式，每種都附帶 Chart.js 或 D3.js 等推薦函式庫與無障礙使用建議，做資料分析介面時特別實用。icons 網域則提供圖示選用指引，例如優先用 Heroicons 或 Lucide 這類 SVG 圖示集，避免用 emoji 充數，也能讓互動回饋更一致。另外還有 gsap 動態網域，提供捲動動畫與轉場效果的速度曲線建議，適合需要豐富微互動的產品。

技術棧支援是另一個值得一提的廣度。stack 網域涵蓋 React、Next.js、Vue、Svelte、Astro、SwiftUI、React Native、Flutter、Nuxt、shadcn、Jetpack Compose、Three.js、Angular、Laravel、HTML 加 Tailwind 等，每種都附專屬的設計建議與程式碼慣例。這代表不管你做的是網頁還是手機 App，助手拿到的是同一套設計語彙，換框架時不必重新餵一次設計偏好。

值得注意的是，早期部分二手介紹引用的數字明顯偏舊，規模比現在小上一截。專案後來升到 v2，skill.json 記載的 84 種風格、192 組配色與 74 組字體，都比多數二手文章描述的大得多。要判斷這工具現在到底會什麼，直接看 repo 根目錄的 skill.json 會比看轉載文章準確。

它跟獨立 UI 產生器的定位差在哪

既然 v0.dev 跟 UIzard 已經能直接生出介面，為什麼還要裝一個只給設計建議的技能層？答案在於你對生成結果的控制權。

用獨立產生器時，你最後拿到的通常是它那個平台輸出的成品，要再搬進自己的程式碼得經過一道轉換。UI UX Pro Max 走的是反方向：它把你既有的 AI 助手當成生成引擎，自己只負責餵設計判斷，產出的程式碼是用你習慣的框架、你的技術棧、你的元件庫寫出來的。對已經有明確技術選型、不想再把設計稿從一個平台搬來搬去的開發者，這條路順很多。這個專案也提供了中文版的 README.zh.md，不過內容是簡體中文，讀者閱讀時要注意用語差異，例如文中把「資料」寫成「数据」、「影片」寫成「视频」，碰到這類詞在腦裡轉換一下即可，不影響對指令與技術細節的理解。

這也代表它的效果綁定你用的助手。同一份設計建議餵給 Claude Code 跟餵給一個較弱的助手，產出的介面品質會有差距。技能本身保證的是設計判斷的品質與一致性，至於最終成品的視覺完成度，那一塊仍是你的助手與你的提示詞要扛的。如果你正在比較不同的 AI 程式助手，可以參考 AI 程式代理的運作模式，理解這類助手拿到技能後能做到什麼程度。

裝之前要先接受的幾件事

最關鍵的前提是你得自備一個支援技能目錄的 AI 程式助手。UI UX Pro Max 是技能，沒有助手它就沒有著力點，這跟裝一套獨立應用程式就能用的工具完全不同。搜尋腳本還需要 Python 3.x，雖然只用標準庫、不必另外裝套件，但對完全沒裝 Python 的純前端工程師來說仍是一道前置作業。另一個得調整的心理預期是，它給的是設計方向，不是成品程式碼，如果你期待的是輸入一句話就拿到可以直接上線的介面，這工具的定位並不是那樣。

也得誠實面對的是數字背後的意義。這個專案在 GitHub 上累積了超過 11 萬個 star，關注度相當高。但星數反映的是社群注意力的規模，不等於它的設計建議在你的具體專案裡一定適用。設計判斷仍需要你根據自己的品牌、使用者與情境去篩選，資料庫給的是起點與慣例，不是放諸四海皆準的鐵律。作者同時維護 GoClaw.sh、ClaudeKit.cc 等多個專案，這是一個持續迭代的個人開源作品，沒有正式的商業支援，遇到問題的主要管道是 GitHub Issues 與 PayPal 贊助，沒有客服合約。

一步裝好它

如果你評估過上述前提決定試試，安裝就兩條指令。先用 npm 全域裝 CLI：

npm install -g ui-ux-pro-max-cli

接著切到你的專案目錄，指定你用的助手執行初始化，例如 Claude Code 就是：

uipro init --ai claude

這會把技能檔案裝進該專案的 .claude/skills/ 目錄。如果你想讓所有專案都能用，加上 --global 參數裝到 ~/.claude/skills/。裝完之後，下次你請助手做介面時，它就能查詢這份設計資料庫。想直接試設計系統產生器，也可以在終端用 python3 .claude/skills/ui-ux-pro-max/scripts/search.py 搭配 --design-system 參數跑看看，作者在 demo 站 uupm.cc 也放了幾個互動範例可以實際試試設計系統產生器的輸出。

Pin

這個專案更新頻率很高，npm 上的 CLI 套件持續迭代。日後要更新技能檔案只要跑 uipro update，它會從你本機已裝的 CLI 套件重新拉取最新的範本與資料；要移除則用 uipro uninstall，它會自動偵測你當初裝在哪個助手平台並清理乾淨。完整指令清單都在 repo 的 README，想看更多設計靈感可以搭配 UI 風格圖庫一起用。