NextLevelBuilder 的 UI UX Pro Max 是一個 AI Skill,把 161 條產業推理規則、67 種 UI 風格、161 套配色、57 對字體配對、99 條 UX 指南 全部包進一份 SKILL.md。你給 Claude / Cursor / Windsurf 一句「做個 SaaS landing page」，它先設計系統,再寫程式。
AI 寫 UI 程式碼的能力已足夠成熟，但默認的成品多半是「能跑、但醜」。問題不在 AI 不會寫 CSS，問題在它缺乏產業特定的設計判斷：不知道 fintech 該用 Bento Grid、不知道 SaaS 該配 Hero-Centric、不知道 Wellness 領域配什麼字體比較不像演算法。UI UX Pro Max Skill 把這份判斷打包成 161 條規則提供給 agent。
實際運作分兩階段：先設計系統，再寫程式。你下達「做一個 SaaS 產品的 landing page」，agent 先做設計判斷，選 layout pattern（Hero-Centric + Social Proof）、選 visual style（Soft UI Evolution）、選配色（Warm Neutral）、選字體配對（Inter + Fraunces）、選圖表類型，然後才開始寫 Tailwind 與元件。先 design system、再 code。
這個 repo 達到 78.7K 顆星，因為它解了 AI 寫前端的核心問題：「為什麼 AI 做的東西看起來都一樣？」 原因是各 agent 共用同一份通用設計 prior。UI UX Pro Max 用 BM25 ranking 加 hierarchical reasoning 把 161 條規則精準匹配到你的場景，使每個專案的設計選擇不再千篇一律。
環境只要 npm 與一個你常用的 AI agent。整套 skill 是 Python 寫的推理引擎加 SKILL.md。透過 uipro-cli 全域安裝後，再用 uipro init --ai <agent> 把它接進 Claude Code、Cursor、Windsurf 等 agent 的目錄。
uipro init --ai <name> 把 skill 結構寫進該 agent 的設定目錄。同一台機器多 agent 並用?各跑一次 init,各自有完整的 design intelligence。官方支援 17 種以上的主流 AI 開發環境。
裝完之後不用做任何別的動作。對話框直接下達「Build a landing page for my SaaS product」，agent 會自動讀入 SKILL.md、跑 161 條規則的 ranking、選最匹配的 layout / 配色 / 字體，然後再寫 React + Tailwind 程式碼。
UI UX Pro Max 是一個可 ranking 的設計知識庫，非固定模板。下面 12 張卡片列出 7 個主資料表及幾個關鍵系統。所有數字均對應 README，無任何推測內容。
| 場景 | 常見 layout pattern | 常見 visual style |
|---|---|---|
| SaaS landing page | Hero-Centric + Social Proof | Soft UI Evolution |
| Fintech dashboard | Bento Grid + 數據卡片 | Glassmorphism / Flat 精緻版 |
| Wellness / spa app | Vertical Storytelling | Claymorphism / 暖中性 |
| B2B enterprise console | Sidebar + 數據區塊 | Neutral functional + 高密度 |
| 電商產品頁 | Visual-first + CTA stacking | Editorial / 高對比 |
| 內容平台 | Editorial Grid | Magazine / Serif emphasis |
| 新創 pitch site | Single-fold Hero + Manifesto | Bold typographic |
以下六條操作建議從 README 與 SKILL.md 推理結構推導出來。安裝後容易被忽略，但能明顯提升 prompt 的規則匹配率。所有指令路徑均對應 README，無任何推測內容。
BM25 ranking 依據 prompt 裡的關鍵字進行匹配。「為一間做 SMB 會計的 fintech 寫 landing page」與「寫個漂亮 landing page」會抓到完全不同的規則組。產業關鍵字越具體，設計判斷越貼合。
來源 · README · 161 reasoning rules你可以明確指定「我要 Bento Grid + Glassmorphism」。不過只提供場景讓 agent 自選，多數情況下匹配結果更貼合需求，因為背後有 161 條規則支撐判斷。
來源 · README · 67 UI styles請 agent「先給我 design system 文件（colors / type / spacing），確認後再生程式碼」。在 token 消耗較少的設計階段修改配色字體，比生成元件後再回頭重生省時省 token。
來源 · README · Design system generation明確告訴 agent「用 Next.js App Router + Tailwind + shadcn」。SKILL.md 裡有 15 個 tech stack 的程式碼模板，指定後 agent 使用對應框架的慣用法與元件，不會混到 Vue 的寫法或舊版 React。
來源 · README · 15 tech stacks生完成品後請 agent「跑一遍 anti-pattern check」。它會對照 99 條 UX 守則與反模式清單，自動找出 CTA 對比不足、低對比文字、icon 尺寸問題等，覆蓋範圍比人工 review 完整。
來源 · README · 99 UX guidelines請 agent 做 dashboard 時，加一句「figure out what charts make sense」。它會從 25 種圖表類型中選擇，並考慮資料密度與互動需求，而非使用預設圖表類型。
來源 · README · 25 chart types
以下範例示範 wellness 客戶 Serenity Spa 品牌官網的完整流程，在已執行 uipro init --ai claude 的機器上進行。你提供場景描述，agent 自行完成 ranking、選風格、做 design system 並生成程式碼。
產業關鍵字是 ranking 的輸入。「wellness premium 30–45 女性」這幾個詞讓 BM25 抓到特定的 8 條規則。只說「漂亮的網頁」，抓到的是通用規則，結果就普通。關鍵字越具體，設計越貼合。
先做 design system，再寫程式碼。tokens（colors / type / spacing）先定下來，再生整個元件。要改配色只動 design-tokens.json，Tailwind config 自動跟著更新，所有元件同步。比在元件裡寫死樣式更易於維護。
Anti-pattern filter 在生成前自動執行。對比、字級、可達性等項目由 agent 在輸出程式碼前自動過一遍，不需要人工 review。對無設計背景的工程師而言，這相當於一個內建的設計審查流程。
python --version 確認。
npm i -g uipro-cli 然後再執行 uipro init。建議寫入團隊 onboarding 與季度更新流程。
UI UX Pro Max 的規則庫支援疊加使用。公司既有的 brand guide、design tokens 與設計系統，均可寫入 CLAUDE.md 或 SKILL.md 疊在其上，形成「通用設計推理 + 品牌專屬規則」的組合。
1. 把公司 brand 寫成 SKILL.md 疊上去。把你公司的 primary colors、字體、tone of voice、禁忌、合規要求寫成另一個 SKILL.md。agent 兩份都拉,通用直覺加公司規範,變成「你公司的 AI 設計助理」。
2. 給 design system 當 token source。把 design-tokens.json 維護在 repo 根目錄。agent 會優先讀取本機 tokens，確保所有 AI 生成的元件使用同一份顏色與間距變數，從第一天起就鎖定一致性。
3. 多 agent 共用同一個 brand SKILL.md。同事用 Cursor、設計師用 Windsurf、PM 用 Claude，各自 init 同一份 skill 加同一份 brand guide，所有 AI 產出的設計使用相同規則。減少跨工具的設計風格差異。
4. 把 anti-pattern check 接進 CI。在 PR review 時由 agent 執行 99 條 UX 守則的檢查。CI 工作流呼叫 agent 對前端 diff 跑 anti-pattern，自動留下 review comment。
5. 用它生 Figma 不行,但用它生 V0 / Lovable 可以。SKILL.md 是純文字 prompt 層,適合接 V0、Lovable、Bolt 這些 web-first AI 開發工具。先讓它出 design system,再貼進那些工具的 prompt,效果遠勝直接讓那些工具自己想。
① github.com/nextlevelbuilder/ui-ux-pro-max-skill。README 是主要入口，包含完整支援 agent 清單。
② npmjs.com/package/uipro-cli。CLI 本身，可查版本與升級頻率。
③ nextlevelbuilder.io。維護者官網，可查其他相關 AI 開發工具。