UI UX Pro Max：告訴 Claude 你是哪一行，它就知道網站該怎麼設計

這是什麼

用 Claude 做網站，做出來常常每個都長得差不多，因為它不知道你是哪一行。UI UX Pro Max 是一個裝給 Claude 的設計 skill（給 Claude 看的做事規則），裡面有一整套設計資料庫，Claude 做網站之前會先查過，再照你那一行的習慣動手。

資料庫裡整理了 192 種行業和產品，每一種都配好版型、風格、配色、字體，還有「不要做的事」。另外還有 192 組配色（主色、背景、按鈕、文字的色碼都給好）、74 組字體搭配（附 Google Fonts 連結）、79 種介面風格，和 119 條 UX 準則，像字夠不夠清楚、按鈕夠不夠大、手機版會不會跑版。

它是 nextlevelbuilder 公開在 GitHub 的開源專案，MIT 授權，約 13.5 萬顆星，最近一次更新是 2026-10-11（2026-10-12 查證）。

同樣是做網站，換一行，給的設計就完全不一樣。我們實際跑出來長這樣（2026-10-07 實測，2026-10-12 再跑一次結果相同）：

• 咖啡廳：暖棕 #92400E 配奶油色背景 #FEF3C7，字體用 Playfair Display SC 和 Karla，有菜單、餐飲的感覺；不要做的事寫的是食物照片拍不好、營業時間藏起來
• 診所：青色 #0891B2 配淡青背景 #ECFEFF，字體用 Figtree 和 Noto Sans，乾淨、讓人放心；不要做的事寫的是螢光色、動畫太多、AI 紫粉漸層
• 銀行：深藍 #0F172A 配金色 #A16207，字體用 IBM Plex Sans，專業、穩重；不要做的事寫的是太活潑的設計、讓人沒安全感的介面、AI 紫粉漸層

跟 Claude 說你做哪一行，它會先查那一行該用的配色、字體和不要做的事，再開始做網站。

誰需要

• 用 Claude 做過網站，結果一看就知道是 AI 做的人
• 想幫自己的店、診所、工作室做網站，卻不知道該配什麼顏色、用什麼字體的人
• 已經在用 Claude Code 做網頁，想讓每一頁都照同一套風格的人
• 看不懂設計術語，但說得出自己是哪一行的人

要不要錢

UI UX Pro Max 本身免費開源，MIT 授權（2026-10-12 查證）。GitHub 上的是免費版；作者另外有付費進階版，這篇只講免費版。

它是裝在 Claude Code 裡用的，Claude Code 要有 Claude 付費方案才能用：官方價目頁寫 Claude Code 包含在所有付費方案裡，免費方案沒有。Pro 是每月 20 美元，年繳算下來每月 17 美元（2026-10-12 查證，以 claude.com/pricing 為準）。

電腦還要有 Python 3，它查資料庫要用。只用 Python 內建的功能，不連網，也不會幫你裝其他東西。

怎麼開始

1. 確認電腦有 Python：Windows 打開 PowerShell 輸入 python --version，Mac 打開「終端機」輸入 python3 --version，跳出「Python 3.」開頭的版本號就可以。沒有的話到 python.org 下載安裝，Windows 安裝的第一個畫面記得勾「Add python.exe to PATH」
2. 打開 Claude Code，輸入 /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill，把它的外掛市集加進來
3. 再輸入 /plugin install ui-ux-pro-max@ui-ux-pro-max-skill 安裝。如果跳出選項問你要裝在哪，選裝給自己用（user），之後每個專案都能用
4. 關掉 Claude Code 再重開，輸入 /plugin 看清單，看到 ui-ux-pro-max、狀態是 enabled，就裝好了
5. 先叫它給你一份設計規格，看過再開始做，用中文講就好，指令在下面

複製這段，把〔〕裡換成你的：

用 ui-ux-pro-max 幫我產生一份設計規格。這是一間〔行業〕，名字叫〔名稱〕，主要客人是〔誰〕。先給我看規格，我確認之後再開始做網站。

規格裡會有版型（頁面分哪幾段）、風格、配色（每個顏色的色碼）、字體（附 Google Fonts）、動態效果、不要做的事，最後還有一份交付前的檢查清單。顏色、字體不喜歡，在這一步改最省事。

完整的安裝＋使用教學 PDF 裡還有一頁指令速查（索取方式在文章最下面）：版面大膽一點或保守一點、動畫多一點或少一點、只查配色或字體、檢查做好的頁面，都整理成可以直接講的句子。

小提醒

一定要看規格裡「不要做的事」那一欄，網站做好之後拿來對一次。像診所和銀行的規格，都直接寫了不要用 AI 紫粉漸層。

行業講具體一點，連主要客人是誰一起講，會比只講一個行業名稱準。同一個行業，講法不同，結果也會有點不一樣；結果怪怪的，就換個說法再跑一次，或直接講你要的感覺，例如「極簡」「溫暖」。

資料庫是英文的，但你用中文講就好，Claude 會自己換成英文去查。

想讓整個網站每一頁都照同一套，跟它說「把這份設計規格存進專案」，它會建一個 design-system 資料夾，之後做新頁面會先讀它。

習慣用終端機的話，把指令開頭的「/plugin」換成「claude plugin」，效果一樣。作者更新很勤，偶爾在終端機打下面兩行，就會更新到最新版：

claude plugin marketplace update ui-ux-pro-max-skill
claude plugin update ui-ux-pro-max@ui-ux-pro-max-skill

本文發表於 2026-10-12。步驟依實測整理，工具介面日後可能調整，以官方為準。