裝了這個 Skill 之後，Claude Code 寫出來的前端頁面終於不像程序員審美了！
整理版優先睇
UI UX Pro Max：一個 Skill 令 Claude Code 寫嘅前端頁面唔再係程序員審美
呢篇文章出自一個 AI 出海社區，作者分享咗自己用 AI 寫前端嘅親身經驗：功能做到，但界面永遠係灰濛濛、紫粉漸變、排版亂嚟。佢認為問題唔係 AI 寫唔到代碼，而係 AI 缺少一套專業嘅設計直覺。為咗解決呢個問題，佢介紹咗一個叫 UI UX Pro Max 嘅項目，呢個項目本質上係一個設計系統嘅「知識庫」，可以安裝喺 Claude Code 呢類 AI 編程工具度。
安裝之後，你只要話「幫我做個 SaaS 落地頁」，佢會先自動推理產品類型、推薦風格、配色、字體，再寫代碼。背後係 161 條行業推理規則、67 種 UI 風格、161 套配色同 57 組字體搭配。運行嗰陣會做 5 路並行搜索，輸出一份完整嘅設計系統方案，然後先開始寫 code。作者仲提到反模式檢查係一個亮點，例如銀行類產品唔可以用 AI 紫粉漸變，兒童教育類唔可以用深色模式，呢啲規則可以避免 AI 最常見嘅審美踩雷。
整體結論係：AI 寫代碼已經好叻，但「靚」呢方面仲係短板，UI UX Pro Max 嘅做法係將設計師嘅經驗結構化，塞入 AI 嘅上下文，令到生成嘅頁面唔再係敷衍嘅樣板。作者建議下次用 AI 寫前端嘅時候先裝呢個 Skill，至少配色唔會再係 AI 最愛嘅紫粉漸變。
- UI UX Pro Max 將設計系統知識結構化，解決 AI 寫前端缺乏設計直覺嘅問題
- 內置 161 條行業規則、67 種風格、161 套配色、57 組字體，根據產品類型自動匹配
- 實際流程係先 5 路並行搜索生成設計方案，再寫代碼，由風格到配色一手包辦
- 反模式檢查係亮點，針對每個行業列出唔應該用嘅設計，避免審美踩雷
- 安裝簡單，支援 Claude Code、Cursor、Windsurf 等主流 AI 編程工具，亦可以獨立當設計系統生成器用
UI UX Pro Max 項目（GitHub）
安裝指令：/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill；其他工具用 CLI：npm install -g uipro-cli 然後 uipro init --ai cursor 等
點解 AI 寫前端永遠係「程序員審美」？
用 AI 寫前端，功能冇問題，但界面真係一言難盡。配色要不就灰濛濛，要不就係 AI 最鍾意嘅 紫粉漸變；排版似將組件隨手擺；字體永遠係默認 sans-serif。作者話，唔係 AI 寫唔到前端，係佢缺一套專業嘅 設計直覺。
UI UX Pro Max 係點樣運作嘅？
呢個 Skill 嘅核心係一套 推理引擎，數據量好大：161 條行業推理規則、67 種 UI 風格、161 套配色方案、57 組字體搭配、99 條 UX 規範、25 種圖表類型推薦。當你同 Claude Code 講「幫我做個美容 SPA 落地頁」，佢唔會即刻寫 code，而係先做 5 路並行搜索：產品類型匹配 → 風格推薦 → 配色選擇 → 落地頁模式 → 字體搭配。
- 1 輸出設計系統方案：頁面模式、UI 風格、配色、字體，例如「Hero-Centric + Social Proof」「Soft UI Evolution」「柔粉 #E8B4B8 + 鼠尾草綠 + 金色 CTA」「Cormorant Garamond 標題 + Montserrat 正文」
- 2 然後先寫 code，而且 code 已經帶上正確嘅顏色、字體、間距同交互效果。
呢個流程模擬咗設計師平時嘅工作：去 Dribbble 揾參考、去 Coolors 配色、去 Google Fonts 選字體，然後話畀 AI「按呢個嚟」。而家全部自動化，仲要識得 避開 AI 最愛嘅紫粉漸變。
反模式檢查：AI 審美踩雷嘅救星
每個行業嘅推理規則裏面都有一項 Anti-Patterns，專門列明唔應該做嘅設計。例如銀行類產品唔可以用「AI 紫粉漸變」，兒童教育類唔可以用深色模式，企業級 SaaS 唔可以用誇張動畫。呢個好實用，因為 AI 寫前端最易犯嘅錯就係 審美踩雷。
點樣安裝同使用？
UI UX Pro Max 支援主流 AI 編程工具，裝法各有唔同。Claude Code 最完整，用呢個指令就可以安裝：
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill其他工具就用 CLI 裝，先裝 uipro-cli，然後初始化：
npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurfuipro init --ai codex # Codex CLI
uipro init --ai copilot # GitHub Copilot
uipro init --ai gemini # Gemini CLI
uipro init --ai all # 全部安裝支援 13 種技術棧，包括 Web（HTML + Tailwind、React、Next.js、Vue、Svelte 等）、iOS SwiftUI、Android Jetpack Compose、跨平台 React Native 同 Flutter。唔提技術棧會預設用 HTML + Tailwind。
可以獨立當設計系統生成器用
就算唔用 AI 編程工具，都可以直接喺命令行搜尋設計方案。例如：
# 生成完整設計系統
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
# 只搜風格
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
# 只搜字體
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography呢個功能好啱設計師自己用，快速生成設計方案，唔一定要綁死喺 AI 編程工具。作者最後話，下次用 AI 寫前端嘅時候，先裝上呢個試試，至少配色唔會再係 AI 最愛嘅紫粉漸變 啦。
撳上面張卡片關注我
用 AI 寫前端代碼，功能係做到，但出嚟嘅界面……唔知點形容好。
配色一係灰濛濛一片，一係 AI 最鍾意嘅紫粉漸變；排版似係將啲組件隨手擺上頁面；字體永遠係預設嘅 sans-serif。
唔係 AI 寫唔到前端，係佢欠一套專業嘅設計直覺。
最近用到有個叫 UI UX Pro Max 嘅項目，做法好直接：幫 AI 編程助手裝一套設計系統嘅「知識庫」。
裝完之後講句「幫我做個 SaaS 嘅落地頁」，佢會先根據你嘅產品類型自動推理出應該用咩設計風格、配咩顏色、揀咩字體、頁面點樣排，然後先動手寫代碼。
佢到底做咗啲咩
傳統做法係自己去 Dribbble 揾參考、去 Coolors 配色、去 Google Fonts 揀字體，然後話俾 AI 知「跟呢個嚟」。
UI UX Pro Max 將呢啲設計決策全部自動化咗，佢內置咗一套推理引擎，核心數據量好大：
161 條行業推理規則 — 由 SaaS、金融科技、醫療健康到電商、餐飲、遊戲，每個行業應該用咩設計模式、應該避開咩坑，全部寫成規則 67 種 UI 風格 — Glassmorphism、Brutalism、Neumorphism、Bento Grid、Cyberpunk、AI-Native UI……唔係俾你揀，係佢根據你嘅產品類型自動匹配 161 套配色方案 — 跟 161 個行業分類一一對應 57 組字體搭配 — 標題字體 + 正文字體嘅組合，連 Google Fonts 連結 99 條 UX 規範 — 無障礙設計、反模式檢查、響應式斷點 25 種圖表類型建議 — 整 Dashboard 嗰陣用
實際跑起嚟係咩效果
喺 Claude Code 裏面講：
幫我做一個美容 SPA 的落地頁
佢唔會即刻開始寫代碼，而係先跑 5 路並行搜索：產品類型匹配 → 風格推薦 → 配色選擇 → 落地頁模式 → 字體搭配。
輸出完整嘅設計系統方案：
頁面模式： Hero-Centric + Social Proof（情感驅動 + 信任元素） UI 風格： Soft UI Evolution（柔和陰影、有機形狀、高級感） 配色： 柔粉 #E8B4B8 + 鼠尾草綠 #A8D5BA + 金色 CTA #D4AF37 字體： Cormorant Garamond（標題）+ Montserrat（正文） 要避免嘅： 霓虹色、生硬動畫、深色模式、AI 紫粉漸變
然後先開始寫代碼，而且寫出嚟嘅代碼已經帶咗正確嘅顏色、字體、間距同交互效果。
安裝方式
支援主流 AI 編程工具，安裝方法各有唔同：
Claude Code（推薦，支援最完整）：
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
其他工具用 CLI：
npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurf
uipro init --ai codex # Codex CLI
uipro init --ai copilot # GitHub Copilot
uipro init --ai gemini # Gemini CLI
uipro init --ai all # 全部安裝
需要 Python 3.x 嚟行搜索腳本。
支援 13 種技術棧
唔止 Web，流動端都有覆蓋：
Web： HTML + Tailwind（預設）、React、Next.js、Vue、Nuxt.js、Svelte、Astro、shadcn/ui iOS： SwiftUI Android： Jetpack Compose 跨平台： React Native、Flutter
喺 prompt 入面提一句用咩技術棧就得，佢會俾返相應嘅代碼規範，唔提嘅話預設用 HTML + Tailwind。
亦可以單獨當設計系統生成器用
唔經 AI 編程工具都可以行。直接命令行叫搜索腳本：
# 生成完整設計系統
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
# 只搜風格
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
# 只搜字體
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
適合設計師自己用嚟快速生成設計方案，唔一定要綁 AI 編程工具。
反模式檢查係一個亮點
每個行業嘅推理規則入面都有一項「Anti-Patterns」，專門列出該行業唔應該做啲咩。
例如銀行類產品唔應該用「AI 紫粉漸變」，兒童教育類唔應該用深色模式，企業級 SaaS 唔應該用誇張嘅動畫。
呢個好實用，AI 寫前端最易犯嘅錯誤唔係功能寫唔出，而係審美踩雷。
配色太花、動畫太浮誇、風格同產品調性唔夾，呢啲問題有咗反模式規則之後可以避免大半。
仲有一份交付前檢查清單：唔好用 emoji 做圖標（用 SVG）、所有可點擊元素加 cursor-pointer、hover 動畫 150-300ms、文字對比度唔低得過 4.5:1、尊重 prefers-reduced-motion，都係容易忽略但影響體驗嘅細節。
寫喺最後
AI 寫代碼嘅能力已經好強，但「靚」呢樣嘢一直都係短板。
根本原因係 AI 缺少設計領域嘅結構化知識，佢識得點寫 CSS，但唔知咩場合應該用咩風格。
UI UX Pro Max 嘅做法係將設計師腦入面嘅經驗變成規則，塞入 AI 嘅上下文。161 個行業、67 種風格、161 套配色，聽落係堆數據，但呢啲數據組合埋就係一個可以自動出方案嘅設計系統。
下次用 AI 寫前端嘅時候，先裝上呢個試試。至少配色唔會再係 AI 最鍾意嘅紫粉漸變。
歡迎關注，呢個賬號仲會繼續分享更多 AI 編程、出海工具、實戰經驗、踩坑記錄。
出海賺錢案例：一個人做咗個開源UI庫，唔融資唔投廣告，45日30萬美元
出海賺錢案例：一個人用 PHP 做到月入 17 萬美金，利潤率 99%！
（2026年最新）Codex CLI 國內使用全攻略：終端 + VSCode + Cursor + Opencode 四種姿勢全部搞掂
點擊上方卡片關注我
用 AI 寫前端代碼，功能實現沒問題，但出來的界面……一言難盡。
配色要麼灰濛濛一片，要麼 AI 最愛的紫粉漸變；排版像是把組件往頁面上隨手一擺；字體永遠是默認的 sans-serif。
不是 AI 寫不了前端，是它缺一套專業的設計直覺。
最近用到有個叫 UI UX Pro Max 的項目，做的事情很直接：給 AI 編程助手裝一套設計系統的"知識庫"。
裝完之後說一句"幫我做個 SaaS 的落地頁"，它會先根據你的產品類型自動推理出應該用什麼設計風格、配什麼顏色、選什麼字體、頁面怎麼排，然後再動手寫代碼。
它到底做了什麼
傳統流程是自己去 Dribbble 找參考、去 Coolors 配色、去 Google Fonts 選字體，然後告訴 AI"按這個來"。
UI UX Pro Max 把這些設計決策全自動化了，它內置了一套推理引擎，核心數據量很大：
161 條行業推理規則 — 從 SaaS、金融科技、醫療健康到電商、餐飲、遊戲，每個行業該用什麼設計模式、該避免什麼坑，全部寫成了規則 67 種 UI 風格 — Glassmorphism、Brutalism、Neumorphism、Bento Grid、Cyberpunk、AI-Native UI……不是讓你自己選，是它根據你的產品類型自動匹配 161 套配色方案 — 跟 161 個行業分類一一對應 57 組字體搭配 — 標題字體 + 正文字體的組合，帶 Google Fonts 連結 99 條 UX 規範 — 可訪問性、反模式檢查、響應式斷點 25 種圖表類型推薦 — 做 Dashboard 的時候用
實際跑起來是什麼效果
在 Claude Code 裏說：
幫我做一個美容 SPA 的落地頁
它不會直接開始寫代碼，而是先跑 5 路並行搜索：產品類型匹配 → 風格推薦 → 配色選擇 → 落地頁模式 → 字體搭配。
輸出一份完整的設計系統方案：
頁面模式： Hero-Centric + Social Proof（情感驅動 + 信任元素） UI 風格： Soft UI Evolution（柔和陰影、有機形狀、高級感） 配色： 柔粉 #E8B4B8 + 鼠尾草綠 #A8D5BA + 金色 CTA #D4AF37 字體： Cormorant Garamond（標題）+ Montserrat（正文） 要避免的： 霓虹色、生硬動畫、深色模式、AI 紫粉漸變
然後才開始寫代碼，而且寫出來的代碼已經帶上了正確的顏色、字體、間距和交互效果。
安裝方式
支持主流 AI 編程工具，裝法各不同：
Claude Code（推薦，支持最完整）：
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
其他工具用 CLI：
npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurf
uipro init --ai codex # Codex CLI
uipro init --ai copilot # GitHub Copilot
uipro init --ai gemini # Gemini CLI
uipro init --ai all # 全部安裝
需要 Python 3.x 跑搜索腳本。
支持 13 種技術棧
不只是 Web，移動端也覆蓋了：
Web： HTML + Tailwind（默認）、React、Next.js、Vue、Nuxt.js、Svelte、Astro、shadcn/ui iOS： SwiftUI Android： Jetpack Compose 跨平台： React Native、Flutter
在 prompt 裏提一句用什麼技術棧就行，它會給出對應的代碼規範，不提的話默認用 HTML + Tailwind。
也能單獨當設計系統生成器用
不通過 AI 編程工具也能跑。直接命令行調用搜索腳本：
# 生成完整設計系統
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
# 只搜風格
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
# 只搜字體
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
適合設計師自己用來快速生成設計方案，不一定要跟 AI 編程工具綁定。
反模式檢查是個亮點
每個行業的推理規則裏都有一項"Anti-Patterns"，專門列了該行業不該做什麼。
比如銀行類產品不該用"AI 紫粉漸變"，兒童教育類不該用深色模式，企業級 SaaS 不該用誇張的動畫。
這個很實用，AI 寫前端最容易犯的錯誤不是功能寫不出來，而是審美踩雷。
配色太花、動畫太浮誇、風格跟產品調性不搭，這些問題有了反模式規則之後能避免大半。
還有一份交付前檢查清單：不用 emoji 當圖標（用 SVG）、所有可點擊元素加 cursor-pointer、hover 動畫 150-300ms、文字對比度不低於 4.5:1、尊重 prefers-reduced-motion，都是容易忽略但影響體驗的細節。
寫在最後
AI 寫代碼的能力已經很強了，但"好看"這件事一直是短板。
根本原因是 AI 缺少設計領域的結構化知識，它知道怎麼寫 CSS，但不知道什麼場景該用什麼風格。
UI UX Pro Max 的做法是把設計師腦子裏的經驗變成規則，塞進 AI 的上下文裏。161 個行業、67 種風格、161 套配色，聽起來是堆數據，但這些數據組合起來就是一個能自動出方案的設計系統。
下次用 AI 寫前端的時候，先裝上這個試試。至少配色不會再是 AI 最愛的紫粉漸變了。
歡迎關注，這個賬號還會持續分享更多AI編程、出海工具、實戰經驗、踩坑記錄。
出海賺錢案例：一個人做了個開源UI庫，不融資不投廣告，45天30萬美元
出海賺錢案例：一個人用 PHP 做到月入 17 萬美金，利潤率 99%！
（2026年最新）Codex CLI 國內使用全攻略：終端 + VSCode + Cursor + Opencode 四種姿勢全搞定