ui-ux-pro-max

概觀

什麼是 ui-ux-pro-max？

ui-ux-pro-max 是一個 UI/UX 設計智慧技能，協助你為網頁與行動介面做出更好的設計決策。它不是憑感覺猜測版面、色彩、字體或互動模式，而是依據一組結構化資料集來提供建議，包括：

• 超過 50 種視覺風格
• 161 組色彩配置
• 57 組字體搭配
• 161 種具推理規則的產品型態
• 99 條 UX 指南
• 25 種圖表類型
• 支援 10 種技術棧：React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui 和 HTML/CSS

這個技能被設計成一個「設計決策層」：協助挑選設計模式、說明設計選擇的理由，並在你設計與開發過程中維持 UX 品質。

ui-ux-pro-max 適合誰？

ui-ux-pro-max 特別適合：

• 產品設計師與 UI/UX 設計師：希望在版面配置、色彩系統、字體排印與互動模式上有系統化指引。
• 前端工程師：使用 React、Next.js、Vue、Svelte、React Native 或 Tailwind 實作介面時，需要具設計意識的實作建議。
• 創辦人或個人開發者：沒有專職設計團隊，但仍希望產品具備現代感與一致的 UI/UX。
• 設計系統維護者：需要一個橫跨多種技術棧，用於樣式、圖表模式與 UX 指南的參考層。

它特別適用在你需要：

• 設計或審查 Landing page、dashboard、後台管理介面、SaaS 應用、電商網站，以及 行動 App 時。
• 在不同 風格 間做選擇（如 glassmorphism、minimalism、brutalism、neumorphism、bento grid、dark mode 等）。
• 讓 button、modal、navbar、sidebar、card、table、form、chart 等元件對齊最佳實務時。

ui-ux-pro-max 解決什麼問題？

ui-ux-pro-max 旨在透過以下方式，降低設計模糊空間與 UX 不一致的情況：

• 有根據的設計選擇：依據產品型態與情境，推薦合適的色彩、字體與版面模式。
• UX 品質控管：利用 99 條 UX 指南，在上線前揪出互動與可用性問題。
• 跨技術棧指引：將設計決策對應到 React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui 與 HTML/CSS 的具體實作考量。
• 更快的發想流程：快速組合已經過篩選、彼此相容的風格方向、色彩配置與字體搭配。

因此，當你需要釐清「要怎麼設計」以及「為什麼這種方向更適合你的產品型態與平台」時，ui-ux-pro-max 特別有價值。

什麼情境適合或不適合使用 ui-ux-pro-max？

適合使用 的情況：

• 你正在決定頁面版面、導覽架構或互動流程。
• 你要替新產品或既有產品選擇色彩配置、字體與間距系統。
• 你正在 React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind 或 shadcn/ui 中實作 UI，並希望有具設計觀點的建議。
• 你需要用系統化的方法，檢視 dashboard、landing page 或行動介面的 UI/UX 品質。

不那麼適合 的情況：

• 你只需要一般前端工程協助（如複雜 state 管理、後端整合或 devops），不牽涉設計決策。
• 你已經有非常嚴格而完整的設計系統，只需要程式碼層面的重構。
• 你處理的是幾乎只有文字、視覺與互動元素極少的介面。

如果你的主要需求是 視覺方向、互動模式或 UX 品質控管，ui-ux-pro-max 多半會是很好的補強工具。

如何使用

1. 安裝步驟

要在相容的 agent 環境中安裝 ui-ux-pro-max 作為技能，請執行：

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
``

安裝完成後，在上游 repository 結構中找到 `.claude/skills/ui-ux-pro-max` 目錄下的技能檔案。主要包含：

- `SKILL.md` – 技能主說明與使用意圖定義
- `data/` – 設計智慧資料集（風格、色彩配置、UX 指南、圖表類型等）
- `scripts/` – 用來搜尋或解析設計資料的輔助程式

你的環境可能會以不同方式掛載或鏡像這些路徑，但這些是技能運作所仰賴的核心元件。

### 2. 建議先檢視的檔案
安裝後，建議先從以下檔案著手，以了解 ui-ux-pro-max 的行為模式：

#### `SKILL.md`

- 說明技能的高層目的：為網頁與行動介面提供 UI/UX 設計智慧。
- 解釋涵蓋範圍：超過 50 種風格、161 組色彩配置、57 組字體搭配、161 種產品型態、99 條 UX 指南、25 種圖表類型。
- 釐清 **何時應使用** 與 **必須使用** 的情境，確保只有在需要做設計決策時才喚起這個技能。

這是你了解技能優先順序與觸發方式的主要參考文件。

#### `data/`

- 包含驅動 ui-ux-pro-max 的結構化資料集。
- 包括產品型態、色彩系統、字體選項、UX 指南與圖表類型等參照資料。
- 讓 agent 能依據脈絡（例如：SaaS dashboard vs. 電商結帳流程）搜尋並挑選合適建議。

安裝過程中通常不需要修改這些檔案，它們是技能用來推理的知識庫。

#### `scripts/`

- 提供讀取與解析資料的輔助 script。
- 支援依優先序的推薦流程與結構化查找（例如：先選色彩配置 → 再選字體搭配 → 再選版面模式）。

若你要擴充或把此技能整合進自訂工作流程，可以在這裡找到可沿用的 hook 或邏輯。

### 3. 典型使用流程

#### 設計新頁面或新畫面
在規劃下列內容時，可以啟用 ui-ux-pro-max：

- **Landing page** 與行銷網站
- **Dashboard 與後台管理介面**
- **SaaS 應用與電商流程**
- **行動 App 畫面**

常見流程如下：

1. 描述產品型態、目標使用者與平台（例如：「B2B SaaS analytics dashboard in React with Tailwind」）。
2. 請啟用 ui-ux-pro-max 的 agent 提出建議，包括：
   - 整體版面結構與導覽方式
   - 建議的風格（例如 minimalism、bento grid、dark mode）
   - 符合產品型態的色彩配置與字體搭配
   - 關鍵互動模式與應遵守的 UX 指南
3. 請技能針對 button、modal、form、table、chart 等元件提出設計模式建議。
4. 若你使用 React、Next.js、Vue、Svelte、React Native、Tailwind 或 shadcn/ui，可再要求它提供符合既定設計方向的實作指引。

#### 改善或審查既有 UI
當你已有介面並希望優化時：

1. 描述目前的設計、痛點與使用的技術棧。
2. 使用 ui-ux-pro-max 進行：
   - 依據 99 條 UX 指南逐項比對問題。
   - 對間距、階層關係、色彩使用與字體排印提出調整建議，以提升清晰度。
   - 從 25 種圖表模式中挑選更適合呈現你資料的圖表類型。
3. 要求提供「調整前／調整後」建議清單，並附上與產品型態及最佳實務相關的理由說明。

#### 與設計系統與元件庫對齊
若你正在使用設計系統（例如 Tailwind 設定或 shadcn/ui）：

- 可透過 ui-ux-pro-max 決定在特定產品型態下，應優先使用哪些 **設計模式** 及 **token 組合**（顏色、字體大小、間距）。
- 在整體環境中若有 shadcn/ui MCP 整合，你可以：
  - 請 ui-ux-pro-max 辨識適合的元件模式。
  - 再透過 MCP 查找對應的元件範例與程式碼。

如此能讓設計決策與元件選擇保持一致，而不必手動翻找大量文件。

### 4. 什麼時候要明確呼叫這個技能？
依照 `SKILL.md` 的上游指引，當任務涉及以下面向時，最適合喚起 ui-ux-pro-max：

- **UI 結構**：頁面版面、內容階層、導覽模式。
- **視覺設計決策**：風格、顏色、字體、間距、陰影、漸層等。
- **互動模式**：hover／focus 狀態、loading 狀態、錯誤處理、微互動。
- **UX 品質控管**：找出摩擦點並套用 UX 指南。

若是純粹程式碼層面的工作，且與設計無關，就不一定需要啟用這個技能，以免分散對工程細節的聚焦。


## 常見問題

### ui-ux-pro-max 內含哪些東西？
ui-ux-pro-max 內建一套精選設計知識庫：超過 50 種風格、161 組色彩配置、57 組字體搭配、161 種具推理規則的產品型態、99 條 UX 指南，以及 25 種圖表類型，並映射到 10 種技術棧（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui、HTML/CSS）。這些內容以資料與 script 形式存放，供 agent 查詢並產出具設計意識的建議。

### ui-ux-pro-max 和一般的程式輔助工具有什麼不同？
一般程式輔助工具主要關注語法、API 與實作細節；ui-ux-pro-max 則聚焦在 **設計決策與 UX 品質**：例如該採用哪種版面、哪組色彩較適合你的產品、表單如何結構化、應用哪種圖表類型，以及如何避免 UX 反模式。之後才會把這些設計決策對齊到你的前端技術棧上。

### ui-ux-pro-max 支援哪些技術棧？
這個技能主要覆蓋以下技術棧的設計指引：

- 網頁框架：**React、Next.js、Vue、Svelte**
- 行動與 App 框架：**SwiftUI、React Native、Flutter**
- 樣式與元件：**Tailwind、shadcn/ui 和 HTML/CSS**

你也可以在其他技術棧中概念性地使用它，但上述是它明確優化的生態系。

### 我可以搭配 Tailwind 或 shadcn/ui 使用 ui-ux-pro-max 嗎？
可以。ui-ux-pro-max 對 Tailwind 與 shadcn/ui 有特別的支援，它能協助你選擇合適的設計模式、色彩系統、間距與字體，並轉換成 Tailwind utility class 或 shadcn/ui 元件的實作。若環境中有 shadcn/ui MCP，可進一步利用元件搜尋與範例。

### ui-ux-pro-max 會直接產生完整 UI 程式碼嗎？
這個技能的核心是 **設計智慧優先**，實作指引為第二步。它可以協助你：

- 定義 UI 元件的結構與行為。
- 建議如何在 React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind 或 HTML/CSS 中實作這些元件。

但它最大的價值在於 **選擇並說明設計決策**，而不只是輸出程式碼片段。

### 什麼時候不該使用 ui-ux-pro-max？
當你的任務是：

- 純後端或基礎架構相關。
- 純粹低階重構，對 UI 或 UX 沒有實質影響。
- 嚴格侷限在演算法或效能調校。

在這些情況下，由於沒有設計決策要做，啟用 ui-ux-pro-max 幫助有限。

### 要如何有效開始使用 ui-ux-pro-max？
安裝技能後，建議：

1. 先閱讀 `SKILL.md`，了解技能範圍與建議用法。
2. 在建立或調整 UI 時，清楚描述產品型態、目標用戶、平台與技術棧給 agent。
3. 請求結構化輸出：如版面提案、風格方向、色彩與字體建議、UX 檢查項與圖表選擇。
4. 持續迭代：調整需求說明，並在接近實作階段時，請 ui-ux-pro-max 再次評估 UX 品質。

### 我要在哪裡查看底層資料與 script？
在技能的 Files 分頁中可以檢視：

- `SKILL.md`：高層定義與使用規則。
- `data/`：結構化設計資料集。
- `scripts/`：負責推薦邏輯的輔助程式。

透過這些資源，你可以了解 ui-ux-pro-max 如何推理 UI/UX，並更有信心地把它的建議調整套用到自己的專案中。