Communitygithub.com

Horace-Maxwell/ui-master

UI 路由技能。當使用者要製作或修改網頁/App 介面、追求「好看/高級/有設計感」、需要某種動效或視覺風格、或尋找元件庫/圖示/字型/配色/靈感/UI 相關 MCP 時使用。根據需求從已驗證目錄中挑選元件庫、風格配方、動效術語與安裝指令，再動手實作。

ui-master 是什麼？

這項技能（Skill）是專為 AI 代理（如 Claude Code、Cursor、Codex 等）設計的 UI 開發輔助工具，旨在解決 AI 產生介面常見的兩大痛點：未善用現成元件庫與無法精準描述動效風格。技能提供完整的工作流程，從釐清平台技術棧、頁面類型、風格偏好與動效強度開始，再根據決策表選擇最適基底（例如 shadcn/ui、Magic UI、Aceternity 等），並引導代理正確安裝元件，特別針對 shadcn 命名空間的常見踩坑點（如條目名猜測、變體後綴、非官方索引庫）提供解法。此外，技能涵蓋安裝 Agent 工具（如 MCP）、建立設計系統（配色、字型、間距）、頁面結構規劃、元件優先複用與有目的的動效原則，最後要求自檢以避免「AI 味」（如紫藍漸層、Inter 字型、居中標題三件套）。支援 Web（React/Next.js、Vue、純 HTML）、React Native/Expo，以及產品類型如落地頁、儀表盤、AI 聊天產品等。完整的類別與清單分散於 `catalog/` 與 `prompts/` 目錄中，可供快速查閱。

相容平台✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Horace-Maxwell/ai-master-prompt/tree/HEAD/ui
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

UI Master：做出不像 AI 做的介面

路徑約定：本檔案在倉儲的 ui/ 目錄下，catalog/ 和 prompts/ 與它同層，隨 Skill 一起走。

  • 在完整倉儲裡（或透過 setup.sh --link-skills 軟連結安裝的）：先 realpath 找到倉儲根目錄，就能用 python3 <倉儲根>/scripts/find.py <關鍵詞> 搜尋全部模組。
  • 單獨安裝的（npx skills add Horace-Maxwell/ai-master-prompt，只有 ui/ 這一個資料夾）：沒有搜尋腳本，直接 grep catalog/*.md；腳手架、Skills、工具等其他模組見 https://github.com/Horace-Maxwell/ai-master-prompt。

AI 做的 UI 難看，通常不是因為能力不夠，而是因為 ① 沒用好像樣元件庫，② 說不出想要的效果叫什麼。本 Skill 解決這兩件事。

工作流程

1. 先弄清四件事

  • 平台與技術棧：Web（React/Next？Vue？純 HTML？）還是 React Native/Expo？已有專案還是新建？
  • 頁面類型：落地頁 / 儀表板 / SaaS 應用 / AI 聊天產品 / 行動 App / 作品集…
  • 風格：使用者有沒有指定風格或參考網站？
  • 動效強度：克制 / 適中 / 炫

什麼時候問、什麼時候直接做：平台和頁面類型不清楚才需要問（最多問一輪）。其餘用預設值並在回覆裡說明你選了什麼：

沒說的預設
技術棧已有專案跟隨專案；新建 Web 用 Next.js + Tailwind + shadcn/ui
風格給 2–3 個方向讓使用者選（見 prompts/style-recipes.md）；使用者說「你定」就按頁面類型選最貼的一個
動效強度產品介面克制；落地頁適中；作品集/活動頁可以炫

使用者也說不清效果時，用 prompts/effect-vocabulary.md 裡的名稱跟使用者確認（「你說的是不是 Text Scramble，字母亂跳後定格成正確文字？」）。

2. 按決策表選底座

使用者指定了風格時，風格行優先：手繪風的落地頁用手繪庫，不要再疊 Aceternity 這類暗色炫技元件。

情況底座加什麼
React/Next 新專案（預設）npx create-next-app@latest，然後 npx shadcn@latest init按需從命名空間 registry 加元件
風格化（手繪/復古/粗野/玻璃/終端）對應風格庫（見 style-recipes）多數是 shadcn registry，裝進來直接替換同名元件
落地頁 / Hero / 行銷頁（未指定風格）shadcn + Magic UI / Aceternity / React Bits平滑滾動 Lenis；滾動動畫 GSAP ScrollTrigger 或 Motion
儀表板 / 後台shadcn + Tremor 或 shadcn chartsKibo UI 補進階元件
AI 聊天 / Agent 產品shadcn + AI Elements 或 assistant-uiaffectUI 做 Agent 可觀測性面板；資料來自 Langfuse / Phoenix；Python 後端用 AG-UI 協定接前端
React Native / Exponpx create-expo-app@latest + React Native Reusables 或 ExpoKit液態玻璃用 expo-glass-effect，毛玻璃用 expo-blur；beUI 做動畫
Vue / NuxtNuxt UI 或 shadcn-vueInspira UI 做特效；goopUI（液體效果，pre-alpha）
純 HTML / 無框架daisyUI 或 Tailwind + 原生 CSSAnimate.css、Hover.css、GSAP

完整候選清單：

3. 安裝元件：shadcn 命名空間用法

官方索引收錄的命名空間（548 個）無需任何設定：

npx shadcn@latest add @magicui/marquee
npx shadcn@latest add @aceternity/spotlight
npx shadcn@latest search @aceternity --query "card"     # 不知道條目名：先搜
npx shadcn@latest list @magicui                    # 或列出該命名空間的全部條目
npx shadcn@latest view @magicui/border-beam        # 裝之前看程式碼

三個容易踩的坑：

  1. 條目名不能猜。 目錄裡的 <item> 是佔位符，各庫命名不一樣。先 search 或 list。
  2. React Bits 的條目名帶變體後綴：<元件名>-<TS|JS>-<TW|CSS>，例如 npx shadcn@latest add @react-bits/DecryptedText-TS-TW。不帶後綴會 404。
  3. 沒進官方索引的庫（Looseleaf、Rare UI 等）有兩種裝法：

    • 直接給完整 URL 或 GitHub 路徑，零設定：npx shadcn@latest add https://kevintngo.github.io/looseleaf/r/button.json、npx shadcn@latest add swamimalode07/rare-ui/fluid-orb

    • 或在 components.json 裡登記一次，之後就能用 @looseleaf/button：

      { "registries": { "@looseleaf": "https://kevintngo.github.io/looseleaf/r/{name}.json" } }

常用命名空間速查（均在官方索引內）：@magicui @aceternity @react-bits @animate-ui @motion-primitives @cult-ui @kokonutui @coss @shadcnblocks @tailark @kibo-ui @8bitcn @neobrutalism @retroui @glasscn @glassyui @ai-elements @assistant-ui @prompt-kit @affectui @beui @shaderscn @threecn @lucide-animated @svgl

4. 給 Agent 裝工具（徵得使用者同意後）

最小組合（以 Claude Code 為例；其他 Agent 把 -- 後面同樣的 npx … 寫進自己的 MCP 設定，對照表見倉儲根目錄 AGENTS.md）：

npx shadcn@latest mcp init --client claude                    # 瀏覽/安裝數百個 registry 的元件（也支援 --client cursor / vscode）
claude mcp add context7 -- npx -y @upstash/context7-mcp        # 任意庫的最新文件
npx skills add anthropics/skills --skill frontend-design       # 審美基線，去 AI 味

按需再加：Magic UI MCP、21st MCP、Figma MCP（有設計稿時）、Motion AI Kit（npx motion-ai）、GSAP skills、找參考截圖的 Mobbin / Refero / Lazyweb MCP（都要帳號）。完整列表見 catalog/12。

5. 先定設計系統，再寫頁面

  1. 定風格 token：配色（Realtime Colors / tweakcn 產生）、字型（別預設 Inter：Fontshare、Google Fonts 選一對有性格的）、圓角、陰影、間距。如果使用者給了參考品牌，去 awesome-design-md 找對應的 DESIGN.md 放進專案根目錄。
  2. 頁面結構：參考靈感站（catalog/10）裡同類頁面的區塊順序。
  3. 元件優先複用：能 npx shadcn@latest add 的不手寫。
  4. 動效有目的：入場一次、懸停回饋、滾動敘事。尊重 prefers-reduced-motion。

6. 自檢（不要跳過）

  • 用瀏覽器（Playwright / Chrome DevTools MCP / 內建瀏覽器）開啟頁面截圖，對照下面的「AI 味」清單檢查
  • 行動端寬度（375px）看一遍
  • 主控台無報錯；動畫不卡（只動 transform/opacity）

常見 AI 味（避免）：紫藍漸層 + Inter + 居中標題三件套；所有卡片同一圓角同一陰影；emoji 當圖示；滿螢幕 glassmorphism；沒有層次的灰色文字；每個區塊都「淡入上移」。

需要動效/風格詞彙時

相關技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community