內建 161 條設計規則的 AI agent 設計知識庫。
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 條規則精準匹配到你的場景，使每個專案的設計選擇不再千篇一律。
uipro init
你下達需求
選 layout 規則
配色 / 字體 / 風格
過濾反模式
寫程式
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.
uipro-cli 安裝與 agent 接入流程。
環境只要 npm 與一個你常用的 AI agent。整套 skill 是 Python 寫的推理引擎加 SKILL.md。透過 uipro-cli 全域安裝後，再用 uipro init --ai <agent> 把它接進 Claude Code、Cursor、Windsurf 等 agent 的目錄。
# 全域裝 uipro-cli
npm install -g uipro-cli
# 確認 CLI 可以跑
uipro --version選你的 agent
uipro init --ai <name> 把 skill 結構寫進該 agent 的設定目錄。同一台機器多 agent 並用?各跑一次 init,各自有完整的 design intelligence。官方支援 17 種以上的主流 AI 開發環境。
# Claude Code(也適用 Claude Desktop)
uipro init --ai claude
# Cursor
uipro init --ai cursor
# Windsurf / GitHub Copilot / Codex / Continue / Roo
uipro init --ai windsurf
uipro init --ai copilot
uipro init --ai codex下一句 prompt 就生效
裝完之後不用做任何別的動作。對話框直接下達「Build a landing page for my SaaS product」，agent 會自動讀入 SKILL.md、跑 161 條規則的 ranking、選最匹配的 layout / 配色 / 字體，然後再寫 React + Tailwind 程式碼。
# 在 Claude Code 對話裡輸入
Build a landing page for my SaaS product
Design a fintech dashboard for a small business
Create a wellness app onboarding flow七個設計知識表與三個推理系統。
UI UX Pro Max 是一個可 ranking 的設計知識庫，非固定模板。下面 12 張卡片列出 7 個主資料表及幾個關鍵系統。所有數字均對應 README，無任何推測內容。
Knowledge · 01
161 reasoning rules
產業推理規則
針對 fintech、SaaS、wellness、e-commerce、enterprise 等產業的設計判斷規則。BM25 ranking 自動挑最匹配的幾條餵 agent。
Knowledge · 02
67 UI styles
UI 視覺風格
Glassmorphism、Claymorphism、Bento Grid、Neumorphism、Soft UI Evolution 等 67 種風格。agent 依場景選一種,而不是預設 Material。
Knowledge · 03
161 color palettes
配色系統
161 套產業驗證過的配色組合。從金融專業冷色到 wellness 暖色都有,agent 自動配對品牌定位,不再都長得像 Tailwind default。
Knowledge · 04
57 font pairings
字體配對
57 對驗證過的字體組合。Inter + Fraunces、Manrope + Instrument Serif 之類,每對都有清楚的場景定位。
Knowledge · 05
25 chart types
圖表選型
25 種圖表類型加使用情境。Dashboard、分析報表、行動 app 各有對應的圖表建議，agent 自動匹配。
Knowledge · 06
15 tech stacks
技術棧適配
React、Vue、Svelte、Next.js、Tailwind、shadcn 等 15 種技術棧的程式碼模板。寫出來的程式碼是針對你框架的慣用法。
Knowledge · 07
99 UX guidelines
UX 守則
可讀性、可達性、轉換率、行動裝置適配的 99 條規則。agent 不只生 UI,還會在生成前先過這 99 條的 checklist。
System · 08
BM25 ranking
語義檢索
用 BM25 演算法把你的需求轉成 query,跟 161 條規則做匹配。比 keyword 比對精準、比 embedding 便宜,recall 與 precision 都壓得住。
System · 09
Hierarchical reasoning
分層推理
先決定產業 / 目標，再決定 layout，再決定風格，再決定配色。每層使用上一層的結果。決策過程可解釋、可 debug。
System · 10
Anti-pattern filter
反模式過濾
在 output 前執行反模式檢查：icon 配色對比不足、CTA 動詞太弱、CTA 與背景同色、分隔線太粗等問題，在輸出前自動過濾。
System · 11
Design system gen
先做系統
寫程式前先生整套 design system(colors、spacing、type scale、components),再依系統生程式碼。一致性從一開始就鎖。
CLI · 12
uipro init --ai
17+ agent 接入
Claude / Cursor / Windsurf / Antigravity / Copilot / Kiro / Codex / Qoder / CodeBuddy / Droid / KiloCode / Warp / Augment / Continue / Roo / Trae / OpenCode 全部支援。
不同場景,自動匹配的設計組合
| 場景 | 常見 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 |
提升 BM25 匹配準確度的六條操作建議。
以下六條操作建議從 README 與 SKILL.md 推理結構推導出來。安裝後容易被忽略，但能明顯提升 prompt 的規則匹配率。所有指令路徑均對應 README，無任何推測內容。
給產業與目標,不要只給「漂亮的網頁」
BM25 ranking 依據 prompt 裡的關鍵字進行匹配。「為一間做 SMB 會計的 fintech 寫 landing page」與「寫個漂亮 landing page」會抓到完全不同的規則組。產業關鍵字越具體，設計判斷越貼合。
來源 · README · 161 reasoning rules
指定 style 也可以,但通常不必
你可以明確指定「我要 Bento Grid + Glassmorphism」。不過只提供場景讓 agent 自選，多數情況下匹配結果更貼合需求，因為背後有 161 條規則支撐判斷。
來源 · README · 67 UI styles
先要 design system,再要程式碼
請 agent「先給我 design system 文件（colors / type / spacing），確認後再生程式碼」。在 token 消耗較少的設計階段修改配色字體，比生成元件後再回頭重生省時省 token。
來源 · README · Design system generation
用 tech stack 鎖框架
明確告訴 agent「用 Next.js App Router + Tailwind + shadcn」。SKILL.md 裡有 15 個 tech stack 的程式碼模板，指定後 agent 使用對應框架的慣用法與元件，不會混到 Vue 的寫法或舊版 React。
來源 · README · 15 tech stacks
讓它跑 anti-pattern check
生完成品後請 agent「跑一遍 anti-pattern check」。它會對照 99 條 UX 守則與反模式清單，自動找出 CTA 對比不足、低對比文字、icon 尺寸問題等，覆蓋範圍比人工 review 完整。
來源 · README · 99 UX guidelines
需要圖表時點名 chart family
請 agent 做 dashboard 時，加一句「figure out what charts make sense」。它會從 25 種圖表類型中選擇，並考慮資料密度與互動需求，而非使用預設圖表類型。
來源 · README · 25 chart types
以「Serenity Spa」為例, 從需求描述到 design system 與程式碼。
以下範例示範 wellness 客戶 Serenity Spa 品牌官網的完整流程，在已執行 uipro init --ai claude 的機器上進行。你提供場景描述，agent 自行完成 ranking、選風格、做 design system 並生成程式碼。
$ You ›
Design a landing page for Serenity Spa
(wellness, premium, target 30–45 women)
> [1/4 · 推理層 · layout]
產業 → wellness · 目標 → trust + sensory
> [2/4 · 推理層 · visual style]
候選風格 → Claymorphism / Soft UI / Editorial
ok: → Soft UI Evolution(warm neutral, low-contrast soft shadow)
> [3/4 · 設計系統]
Palette: warm sand / sage / off-white / muted clay
Type: Fraunces (display) + Inter (body)
Spacing scale: 4 · 8 · 16 · 24 · 48 · 96
Components: Hero · Service Cards · Testimonials · CTA
> [4/4 · Anti-pattern filter]
> [code]
Next.js App Router + Tailwind + shadcn
ok: → page.tsx · 6 sections · 168 行
ok: → design-tokens.json · 套到 tailwind.config.js
ok: 完成 · 1 句 prompt · 1 個完整 landing page
描述場景後,agent 先完成設計推理,再輸出程式碼。設計判斷與實作程式碼是分開的兩個階段。
這條流程值得拆解的點
產業關鍵字是 ranking 的輸入。「wellness premium 30–45 女性」這幾個詞讓 BM25 抓到特定的 8 條規則。只說「漂亮的網頁」，抓到的是通用規則，結果就普通。關鍵字越具體，設計越貼合。
**先做 design system，再寫程式碼。**tokens（colors / type / spacing）先定下來，再生整個元件。要改配色只動 design-tokens.json，Tailwind config 自動跟著更新，所有元件同步。比在元件裡寫死樣式更易於維護。
**Anti-pattern filter 在生成前自動執行。**對比、字級、可達性等項目由 agent 在輸出程式碼前自動過一遍，不需要人工 review。對無設計背景的工程師而言，這相當於一個內建的設計審查流程。
使用前應了解的八項限制。
將通用規則庫與品牌規範疊加使用。
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 開發工具。
UI UX Pro Max 透過 161 條產業推理規則，讓 agent 的設計判斷從通用 prior 轉為場景特定的匹配結果。