LeeScot's Web
Skill

UI/UX Pro Max Skill

為 AI 編程助手提供專業 UI/UX 設計智能的技能包，支援多平台介面開發。

|
- 次瀏覽
Skills UI/UX
前往使用

為什麼推薦

UI/UX Pro Max 是一個專為 AI 編程助手設計的技能包（Skill），能夠為 Claude、Cursor、Windsurf、Antigravity 等 AI 工具注入專業的 UI/UX 設計能力。它不只是簡單的程式碼生成器，而是一個完整的設計智能系統，能夠根據你的專案需求自動產生符合產業標準的設計系統。

核心亮點

1. 智能設計系統生成器（v2.0 旗艦功能）

這是一個 AI 驅動的推理引擎，能夠分析你的專案需求並在幾秒鐘內生成完整的客製化設計系統：

  • 自動分析專案類型：根據你的產品（如 SaaS、電商、醫療、金融等）推薦最適合的設計模式
  • 完整設計規範：包含配色方案、字型配對、UI 風格、轉換策略等
  • 避免反模式：內建 98 條 UX 指南，自動避免常見的設計錯誤
  • 無障礙檢查：確保符合 WCAG AA 標準，包含對比度、鍵盤導航、動畫偏好等

範例輸出包含：

  • 頁面架構建議（Hero、服務、見證、預約等區塊）
  • UI 風格定義（如 Soft UI、Glassmorphism 等）
  • 完整配色方案（主色、次色、CTA、背景、文字）
  • 字型配對與 Google Fonts 連結
  • 關鍵視覺效果（陰影、過渡動畫、懸停狀態）
  • 交付前檢查清單

2. 豐富的設計資源庫

  • 57 種 UI 風格：Glassmorphism、Claymorphism、極簡主義、粗野主義、新擬物化、Bento Grid、深色模式、AI 原生 UI 等
  • 95 組配色方案：針對不同產業（SaaS、電商、醫療、金融、美容等）的專業配色
  • 56 組字型配對：精選的字型組合，附 Google Fonts 匯入連結
  • 24 種圖表類型：適用於儀表板和數據分析的圖表建議
  • 100 條推理規則：針對不同產業的設計系統生成規則（v2.0 新增）

3. 多技術棧支援

支援 11 種主流技術棧，提供針對性的實作指南：

  • Web：React、Next.js、Vue、Nuxt.js、Nuxt UI、Svelte、HTML + Tailwind、shadcn/ui
  • 行動端：SwiftUI、React Native、Flutter

使用情境

快速建立專業級 Landing Page

當你需要為 SaaS 產品建立登陸頁面時，只需告訴 AI：

Build a landing page for my SaaS product

AI 會自動：

  1. 分析產品類型
  2. 生成完整設計系統
  3. 選擇最適合的 UI 風格和配色
  4. 實作符合最佳實踐的程式碼
  5. 確保無障礙性和響應式設計

建立產業專屬的儀表板

針對醫療、金融等特定產業，AI 會：

  • 選擇符合產業特性的配色（如醫療用藍綠色系）
  • 推薦適合的圖表類型
  • 套用產業最佳實踐
  • 確保資料視覺化的清晰度

設計系統一致性維護

在大型專案中，確保所有元件使用一致的：

  • 間距系統
  • 顏色變數
  • 字型階層
  • 動畫時長
  • 互動狀態

支援的 AI 工具

UI/UX Pro Max 可以在以下 AI 編程助手中使用：

  • Claude Code：自動啟動，自然對話即可
  • Cursor / Windsurf / Antigravity：使用 /ui-ux-pro-max 指令
  • Kiro：輸入 / 選擇 ui-ux-pro-max
  • GitHub Copilot：在 VS Code 中輸入 / 選擇
  • Continue：安裝到 .continue/skills/ 後自動啟動
  • Codex CLI：使用 $ui-ux-pro-max 指令
  • Qoder / Roo Code / Gemini CLI / Trae：自動啟動

使用技巧

1. 明確描述專案類型

越具體的描述，AI 越能生成精準的設計系統：

Build a fintech banking app with dark theme
Create a dashboard for healthcare analytics
Design a portfolio website with dark mode
Make a mobile app UI for e-commerce

2. 指定技術棧

如果有偏好的技術棧，在提示中說明：

Build a landing page using Next.js and shadcn/ui
Create a SwiftUI app for iOS

如果不指定，預設使用 HTML + Tailwind。

3. 善用設計系統指令（進階）

對於複雜專案，可以使用設計系統指令來：

  • 持久化設計系統（Master + Overrides 模式）
  • 在多個頁面間保持一致性
  • 覆寫特定元件的樣式

4. 要求 AI 展示設計系統

在開始實作前，可以先要求：

Show me the design system for this project

這樣可以先確認配色、字型等是否符合預期，再進行調整。

5. 利用預交付檢查清單

AI 會自動檢查：

  • ✅ 使用 SVG 圖示（Heroicons/Lucide）而非 emoji
  • ✅ 所有可點擊元素有 cursor-pointer
  • ✅ 懸停狀態有平滑過渡（150-300ms）
  • ✅ 文字對比度至少 4.5:1
  • ✅ 鍵盤導航的焦點狀態可見
  • ✅ 尊重 prefers-reduced-motion 偏好
  • ✅ 響應式斷點：375px、768px、1024px、1440px

安裝方式

使用 CLI（推薦）

npx @nextlevelbuilder/cli add ui-ux-pro-max

手動安裝

  1. 前往 GitHub Repository
  2. 下載技能包檔案
  3. 根據你使用的 AI 工具，放置到對應的目錄

工作原理

  1. 你提出需求：描述任何 UI/UX 任務（建立、設計、實作、審查、修正、改進）
  2. 生成設計系統：AI 使用推理引擎自動生成完整設計系統
  3. 智能推薦：根據產品類型和需求，找出最匹配的風格、配色和字型
  4. 程式碼生成：實作具有正確顏色、字型、間距和最佳實踐的 UI
  5. 交付前檢查：驗證常見的 UI/UX 反模式

適合誰使用

  • 前端工程師：快速建立符合設計規範的 UI，減少與設計師的來回溝通
  • 全端工程師：在沒有專職設計師的情況下，也能產出專業級介面
  • 產品經理：快速建立原型來驗證想法
  • 設計師：加速從設計到程式碼的轉換過程
  • 獨立開發者：一個人也能做出精美的產品介面

重要提醒

  • 這是一個 AI Skill（技能包），需要搭配支援的 AI 編程助手使用
  • 生成的設計系統是建議性質，可以根據實際需求調整
  • 建議先審查生成的設計系統，確認符合品牌調性後再實作
  • 如果覺得有用，可以考慮支持專案
返回 Vault