讓 Claude 學會網站 UI 設計：10 萬星免費 skill 安裝教學＋裝之前的資安檢查清單
如果你是在我的貼文下面留言「UI」被傳過來的——歡迎，安裝步驟跟資安檢查清單都在這篇，直接往下看。
先講為什麼有這篇：一人公司什麼都要會，但設計這關很多人（包括我）真的沒學過。AI 生出來的網站又常常張張同一張臉，想改也說不出要怎麼改，只能一直跟它說「再調一下」，越調越怪。
後來我發現，缺的不是品味，是設計師腦中那套規則——醫療網站別用螢光色、金融要走信任感、字型要怎麼配對。而這套規則，有人已經整理成免費的 skill 了。
這顆 skill 是什麼
UI UX Pro Max（GitHub：nextlevelbuilder/ui-ux-pro-max-skill），寫這篇時約 10.6 萬星、MIT 授權、免費。
它的本體是一座離線設計資料庫：84 種風格、161 條產業規則、192 組配色、74 組字型配對。裝進 Claude 之後，你說「我要做一個攝影工作室的網站，想要雜誌感」，它會回你一整套規格——版型結構、色票、字型、動效，連「這個產業別用什麼」都寫好。
像請了一位資深設計師，你說產業＋風格，它直接套回。
我自己實測：同一顆 skill，跟它說「溫暖平靜」出療癒粉彩版，說「雜誌感＋科技感」出黑白藍編輯部版——它給規則，品味還是你點的。老實說它不會自己變出美感，但它把「不知道怎麼改」變成「照規格改」，這就值了。
會用到的東西（要不要錢先講清楚）
| 工具 | 做什麼 | 費用 |
|---|---|---|
| Claude（Claude Code） | 查資料庫、照規格做網頁，全程你只跟它講話 | 我用付費方案（Pro 以上就含 Claude Code） |
| Python 3 | skill 查自家資料庫用的小工具 | 免費，Mac 幾乎都內建，缺了 Claude 會教你裝 |
| UI UX Pro Max | 設計資料庫本體 | 免費開源（MIT） |
前提只有一個：要用 Claude Code（終端機或桌面 App 都行），因為它要能讀檔案、跑查詢，網頁版聊天視窗做不到。
裝之前：三題資安檢查（任何 skill 都適用）
先講一個很多人想錯的：星數高≠安全。星數可以買、高人氣專案反而是供應鏈攻擊的頭號目標、而且你今天看的星星是今天的，之後每次更新都是新的程式碼。星星是人氣，不是保證。
所以裝任何 skill 之前，先問三件事：
- 它跟你要什麼權限？——能讀哪些檔案、能執行什麼
- 會不會偷連網？——有沒有把你的資料悄悄傳出去
- 說明檔裡有沒有藏奇怪指令？——skill 的說明文字，就是它對 AI 下的指令，這裡藏東西最防不勝防
不會看程式碼沒關係，把下面這段貼給 Claude，讓它幫你掃：
我下載了一個 skill，在〔資料夾路徑〕。安裝前幫我做資安檢查：
- 掃描裡面所有程式檔，有沒有任何網路連線（requests、urllib、curl、fetch、socket 之類）、執行外部指令、或讀寫這個資料夾以外路徑的行為
- 讀 SKILL.md 和所有說明文字，找出有沒有指示 AI 上傳資料、讀取密碼金鑰、或執行奇怪動作的句子
- 總結：它實際會動到什麼，跟它宣稱的用途一不一致？ 用白話講給我聽，最後只要告訴我「有沒有發現可疑行為」，決定我自己下。
這顆 UI UX Pro Max 我發文前有請 Claude 掃過：沒掃出外連指令、資料庫都在本機跑。但兩個誠實提醒：我掃的是 2026-07-16 這一版，之後的更新要重新看；掃過也不等於保證——用不用，最後還是你自己評估。
檢查過、決定要裝了？往下。
安裝（兩條路，挑一條）
路線 A：兩行指令（最快）
打開 Claude Code，輸入：
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill裝完重啟一次就能用。
路線 B：整段丟給 Claude（不想記指令）
把下面這段直接貼給 Claude Code：
幫我安裝 GitHub 上的 nextlevelbuilder/ui-ux-pro-max-skill 這個 skill。先檢查我有沒有裝 Python 3，沒有的話先告訴我怎麼裝、等我確認再繼續。裝好之後，用一個例子教我怎麼使用它。
它會自己帶你走完（背後跑的是官方的 npx ui-ux-pro-max-cli init --ai claude）。
防雷兩句：①整包約 20MB，抓一下很正常；②如果它說找不到 python，跟它講「試試 python3」就好。
怎麼用（一句話就開工）
裝好後直接說人話：
幫我的〔你的產業〕網站生一套設計系統，我想要〔風格關鍵字〕的感覺。
例如「幫我的家教工作室做 landing page，親切、專業、不要太可愛」。它會回你完整規格，接著說「照這套規格做出來」就好。
三個實用招：
- 先套風格看順不順眼——它有 84 種風格模板，直接請它「列出適合我這行的 3 種風格」再挑
- 請它一次出 2-3 版讓你選，選中喜歡的再調細節，比空想快很多
- 做中文網站要多講一句：它的字型資料庫是英文字型，請 Claude「幫我對應成 Noto 系列的中文字型」（這是我實測踩到的，不講會給你英文字型）
最後老實說
不太複雜的網站，Claude 其實都能很快做出來，它要的只是清楚的指示。自己說不出來，就借 skill 的判斷——先堪用、先上線，等手頭寬了再慢慢改版，也不遲。
有問題歡迎到 IG 或 Threads 留言問我～
關於作者
我是 Rand，一位 1500+ 小時經驗的 Life Coach，也是 AI 工具的打造者。助人者要接個案、做內容、還要跑一堆行政，所以我乾脆自己做工具把這些事變輕鬆——而且做這些真的很好玩！
想看用 AI 讓生活過得更輕省，追蹤 AI 生活實驗室 👉 @life.coach.mtcity，我們一起玩 AI！