新手指南：UI/UX Pro Max 功能導覽與快速上手
UI/UX Pro Max 不是一個會直接吐出「漂亮 UI」的生成器。它是一組圍繞產品情境、Design Token、元件規則與 UX 審查的 skill,目的是讓 AI 生成的介面能被工程團隊執行,也能被設計與 PM 檢查。
如果你剛裝好 CLI,還不知道先呼叫哪個 skill,這一頁就是給你的。
功能導覽
每一條能力對應一個 skill,解決一個具體痛點。先看懂這張表,再決定要走哪條路徑。
| 能力 | 對應 skill | 解決的痛點 |
|---|---|---|
| 從產品情境建立語意色彩角色 | palette-picker |
「給我藍色科技感」這類形容詞讓 AI 腦補十個顏色,沒有對比度依據 |
| 依照語言與內容挑選可讀字體配對 | font-pairer |
字體選了好看但字符不覆蓋繁中、字重過多拖慢首屏 |
| 從問題與資料型態選擇圖表 | chart-builder |
套件有什麼圖就硬用,圖表無法回答使用者的問題 |
| 把視覺方向轉成元件規則 | style-generator |
風格只停在 moodboard,工程師不知道圓角、陰影、行距該用多少 |
| 安全交付設計 Token 到 CSS 或 Tailwind | theme-exporter |
Token 直接覆蓋既有設定,元件偷接 raw 色票,換膚時爆炸 |
| 以證據重跑的 UX 與無障礙審查 | ux-audit |
審查結果是個人偏好,無法重現,工程團隊無法轉成修正項目 |
先安裝與初始化
UI/UX Pro Max 透過 CLI 安裝,並在你選的 AI 平台上掛載 skill。
npm install -g ui-ux-pro-max-cli
uipro init --ai universaluniversal 會在所有支援的助理上掛載 skill,其他平台識別碼請對照主題首頁的支援平台清單。
快速上手:一條從需求到交付的路徑
第一次使用建議走這條最小路徑,它會把六個 skill 中的四個串起來,不會讓你一次面對全部。
- 寫產品情境:不要寫風格形容詞,寫使用者、任務、內容密度、不可妥協的無障礙條件。
- 呼叫
palette-picker:輸入情境與品牌色,取得語意色彩角色與對比度報告。 - 呼叫
font-pairer:輸入語言與內容型態,取得字體家族、字重用途與 fallback 規則。 - 呼叫
style-generator:把色彩、字體與視覺方向合成元件規則(圓角、陰影、間距、行距)。 - 呼叫
theme-exporter:把通過驗證的角色交付成 CSS 變數或 Tailwind 設定,確認元件沒有偷接 raw 色。 - 上線前呼叫
ux-audit:以一條真實任務走一次審查,把問題分級並附上可重跑步驟。
chart-builder 是資料視覺化場景才需要,可以晚一點再學。
接下來讀什麼
功能導覽只是地圖。實際的設計判斷在後續 lessons 裡:
- 想學會把需求轉成視覺方向,讀《現代 UI 風格:從需求到第一個畫面》。
- 想理解 Design Token 為什麼要分 raw 與語意層,讀《視覺層級與 Design Tokens》。
- 想做出不打擾使用者的動態,讀《微互動與動畫過渡》。
- 想把無障礙落進元件契約,讀《無障礙設計與可操作的元件契約》。
常見誤解
- 「它能直接給我完整 UI」:它給的是可執行的 token 與規則,還是要你自己組元件。
- 「風格形容詞輸入越華麗越好」:相反,輸入越精確(情境、限制、不可妥協項),輸出越能落地。
- 「交給 theme-exporter 就不用審查」:Token 交付後仍要做元件層的對比度與主題切換驗證,工具不能取代 review。