UI UX Pro Max：讓 AI 擁有設計師直覺的 Skill

原始來源與檔名：UI-UX-Pro-Max-让AI拥有设计师直觉.md

來源：sitin / X平台 — 2026-04-01 原始檔名：sitin on X_ _装了这个 Skill 之后，Claude Code 写出来的前端页面终于不像程序员审美了！_ _ X.pdf

NAPKIN | 餐巾纸

餐巾紙公式

完美的前端 AI = (代碼生成能力) + (結構化的設計規範推理庫) + (反模式排除)

AI 不是寫不出好看的 UI，而是缺乏設計領域的「結構化知識與經驗法則」。

一句話

這篇文章介紹了一個名為 UI UX Pro Max 的擴充技能包，將 161 個行業規則、67 種風格與反面設計模式 (Anti-Patterns) 注入 AI 程式助手中，讓 Claude Code 寫出來的網頁徹底擺脫「毫無美感的工程師風格」。

餐巾紙草圖

[UI UX Pro Max 的五路並行推理]
 使用者提示: "幫我做一個美容 SPA 的落地頁"
      │
      ▼
 1. 產品類型匹配 (找出行業屬性)
 2. 風格推薦 (推導出 Soft UI Evolution)
 3. 配色選擇 (提取 柔粉/鼠尾草綠)
 4. 佈局模式 (選定 Hero-Centric + Social Proof)
 5. 字體搭配 (選定 Cormorant Garamond + Montserrat)
      │
      ▼
 輸出設計系統提案 -> 嚴格遵守 Anti-Patterns -> AI 開始編寫代碼

ROUND 1: SKELETON | 骨架掃描

“這篇文章在說什麼”

• 核心問題: AI 生成的前端介面總是灰濛濛、或充斥著它最愛的紫粉漸變，字體永遠是預設值。
• 核心答案: 安裝 UI UX Pro Max Skill，為 AI 裝上設計引擎。
• 論證結構: 痛點分析 -> 外掛介紹 (161組行業規則) -> 操作示範 -> 支援框架 -> 反模式亮點 (最重要)。

章節骨架

1. 痛點: AI 缺乏專業的設計直覺。
2. 它到底做了什麼: 內建了龐大的推理引擎（161 條行業規則、67 種風格、161 套配色、57 組字體搭配、99 條 UX 規範、25 種圖表類型）。
3. 實際效果: 下指令後，AI 不會直接寫 code，而是先跑 5 路並行搜索給出設計系統提案。
4. 安裝與支援: 支援 Claude Code, Cursor, Windsurf, Copilot。支援 13 種技術棧 (React, Tailwind, SwiftUI, Flutter 等)。
5. 反模式檢查 (Anti-Patterns): 禁止踩雷。例如銀行產品不用紫粉色、不用 emoji 當圖示、遵守對比度等。

ROUND 2: DISSECTION | 血肉解剖

“憑什麼這麼說”

• 核心論證鏈: 把設計師尋找靈感的過程（Dribbble 找參考 -> Coolors 配色 -> Google Fonts 選字體）抽象化 -> 變成固定資料結構餵給 LLM -> 將抽象的美感降維打擊成「邏輯推理」-> AI 產出的美學自然符合人類預期。
• 深層細節: 它具備一份交付前檢查清單：不用 emoji 當圖示（用 SVG）、所有可點擊元素必須加上 cursor-pointer、hover 動畫控制在 150-300ms 等等，這些都是資深前端才知道的肌肉記憶。

ROUND 3: SOUL | 靈魂提取

“還能怎麼用”

• 深層洞見: 美學不是玄學，美學是可以被參數化的。 AI 的通病在於隨機性過高，而降低隨機性的最好方法就是賦予它「硬性的設計系統邊界 (Design System Constraints)」。
• 行動呼籲: 在開發 Web App 時，可以立刻導入這個工具或其思路。如果你自己寫 Prompt，記得要在 Prompt 裡加上 [Design Constraints: 嚴禁紫粉色、必須使用 4.5:1 的字體對比度、陰影必須柔和] 來約束 AI。