name: ui-design-system description: 專業UI生成與現有介面最佳化技能。當用戶請求生成UI介面、設計頁面、最佳化現有介面、建立元件庫、設計系統、App介面、Web介面、Dashboard、Landing Page、或任何涉及視覺互動設計時必須觸發此技能。參考Google Material Design、Apple HIG、以及Pinterest級別審美標準，輸出大氣簡約、高階美學的UI程式碼。即使使用者只是說"幫我做個介面"、"最佳化一下UI"、"設計一個頁面"也必須觸發。

UI Design System Skill

📋 背景與設計哲學

核心定位

本 Skill 專注於生成大廠級別、Pinterest 審美、高階簡約的 UI 介面。參考標準： - Google Material Design 3 — 色彩系統、動效原則、元件規範 - Apple Human Interface Guidelines — 空間設計、排版節奏、細膩質感 - Fluent Design (Microsoft) — Acrylic 材質、深度層次 - Pinterest / Dribbble 高贊設計 — 視覺張力、留白美學、色彩大膽

設計價值觀

"少即是多，但每一處都要有意圖" - 剋制的奢華：不是堆砌，而是精準取捨 - 系統性思維：每個元件都來自同一設計語言 - 情緒傳達：介面有溫度，有性格，不是功能機器 - 細節決定品質：陰影、圓角、間距都是設計語言

🎯 觸發後的工作流程

Step 1: 需求分析（必須先做）

分析以下維度，在回覆前先梳理清楚：

用途分類:
├── 生成新UI    → 執行「UI Generation Protocol」
├── 最佳化現有UI  → 執行「UI Audit & Optimization Protocol」
└── 元件設計    → 執行「Component Design Protocol」

產品型別:
├── Mobile App (iOS/Android 風格)
├── Web App / Dashboard
├── Landing Page / Marketing
├── Admin / B端系統
└── 創意/作品集頁面

必須明確的資訊（缺失時主動詢問或合理假設並說明）： - 產品定位（面向誰？解決什麼問題？） - 品牌調性（科技感/溫暖/奢華/年輕/專業？） - 主色傾向（有偏好色系，或給我自由發揮） - 交付格式（HTML/CSS、React/JSX、SVG 原型圖）

🎨 色彩系統參考體系

參考「谷歌 Material You」調色盤生成規則

Tonal Palette 結構：

Primary   → 品牌主色，用於關鍵操作和焦點元素
Secondary → 輔助色，用於標籤、圖示、次要按鈕
Tertiary  → 對比色，用於強調差異化內容
Neutral   → 灰階體系，背景/表面/文字層級
Error     → 錯誤/警告狀態色

推薦高階色板（可直接使用）：

Apple HIG 間距系統

/* 參考 Apple 8pt 網格系統 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;   /* 標準間距 */
--space-5: 20px;
--space-6: 24px;   /* 元件內間距 */
--space-8: 32px;   /* 區塊間距 */
--space-10: 40px;
--space-12: 48px;  /* 大區塊間距 */
--space-16: 64px;  /* 頁面級間距 */
--space-24: 96px;

📐 排版系統

字型層級（參考 Apple SF / Google 字型）

/* 優先使用有個性的字型組合 */

/* 選項 A: 科技感 */
--font-display: 'Space Grotesk', 'DM Sans';
--font-body: 'Inter', system-ui;

/* 選項 B: 人文優雅 */
--font-display: 'Playfair Display', 'Cormorant';
--font-body: 'Source Serif 4', Georgia;

/* 選項 C: 現代極簡 */
--font-display: 'Syne', 'Outfit';
--font-body: 'Manrope', sans-serif;

/* 選項 D: 中文友好 */
--font-display: 'Noto Serif SC', serif;
--font-body: 'Noto Sans SC', sans-serif;

/* Type Scale (參考 Material 3) */
--type-display-large: clamp(40px, 5vw, 57px) / 1.12;
--type-display-medium: clamp(32px, 4vw, 45px) / 1.16;
--type-headline-large: clamp(24px, 3vw, 32px) / 1.25;
--type-headline-medium: clamp(20px, 2.5vw, 28px) / 1.29;
--type-title-large: 22px / 1.27;
--type-title-medium: 16px / 1.5;
--type-body-large: 16px / 1.5;
--type-body-medium: 14px / 1.43;
--type-label-large: 14px / 1.43;
--type-label-small: 11px / 1.45;

🧩 元件設計規範

卡片元件（Card）

/* 參考 Material 3 Card Variants */
.card-elevated {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0px 1px 2px rgba(0,0,0,.06), 
              0px 4px 16px rgba(0,0,0,.08);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.card-elevated:hover {
  box-shadow: 0px 4px 8px rgba(0,0,0,.08),
              0px 12px 32px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.card-filled {
  background: var(--surface-variant);
  border-radius: 12px;
  border: none;
}

.card-outlined {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--outline-variant);
}

按鈕系統（Button）

/* Apple + Material 融合規範 */
.btn-primary {
  height: 44px;              /* Apple HIG 最小觸控尺寸 */
  padding: 0 24px;
  border-radius: 10px;       /* Apple 風格圓角 */
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: all 150ms ease;
}

/* 按鈕層級: Filled > Filled Tonal > Outlined > Text > Icon */

.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.95); }

輸入框（Input）

/* Material 3 風格輸入框 */
.input-outlined {
  height: 56px;
  border: 1.5px solid var(--outline);
  border-radius: 4px;
  padding: 16px;
  transition: border-color 200ms;
}
.input-outlined:focus {
  border-color: var(--primary);
  border-width: 2px;
}

/* Apple 風格輸入框 */
.input-apple {
  height: 44px;
  background: rgba(120,120,128,0.12);
  border: none;
  border-radius: 10px;
  padding: 0 16px;
}

✨ 動效與互動規範

動效曲線（參考 Apple Spring 和 Material Motion）

/* Apple 彈性曲線 */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Material 標準曲線 */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* 強調曲線 */
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
/* 快入慢出 */  
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
/* 慢入快出 */
--ease-accelerate: cubic-bezier(0.3, 0, 1, 1);

/* 時長規範 */
--duration-short1: 50ms;
--duration-short2: 100ms;
--duration-short3: 150ms;
--duration-short4: 200ms;   /* 微互動 */
--duration-medium1: 250ms;
--duration-medium2: 300ms;  /* 標準轉場 */
--duration-long1: 350ms;
--duration-long2: 400ms;    /* 複雜動畫 */
--duration-extra-long: 600ms+; /* 頁面級切換 */

必須實現的微互動

• Hover 狀態：背景色變化 + 輕微位移
• Active 狀態：輕壓效果 (scale 0.97)
• Focus 狀態：清晰的焦點環（無障礙必須）
• Loading 狀態：骨架屏或脈衝動畫
• 頁面載入：元素交錯淡入 (stagger delay)

🏗️ UI Generation Protocol（生成新 UI）

執行順序

1. 定義設計 DNA — 確定調性、主色、字型組合
2. 建立 CSS 變數體系 — 完整的 token 系統
3. 搭建佈局骨架 — Grid/Flex 響應式結構
4. 實現核心元件 — 從最重要的互動元素開始
5. 新增視覺質感 — 漸變、陰影、紋理、背景
6. 注入微互動 — 動效、過渡、Hover 狀態
7. 精調細節 — 間距、對齊、字重、行高

   7w4.net提供免費和付費技能下載。

8. 響應式適配 — Mobile First

程式碼規範

<!-- 必須包含的 meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- 結構原則 -->
<!-- 1. CSS Variables 在 :root 統一定義 -->
<!-- 2. 元件用 BEM 或語義化命名 -->
<!-- 3. 響應式用 clamp() 而非 media query 斷點堆疊 -->
<!-- 4. 動畫效能優先用 transform/opacity -->

🔍 UI Audit & Optimization Protocol（最佳化現有 UI）

分析維度（拿到現有 UI 後，必須從這 6 個維度審查）

1. 視覺層級 - [ ] 是否有清晰的資訊優先順序？ - [ ] 使用者視線路徑是否順暢？ - [ ] 重要資訊是否足夠突出？

2. 色彩系統 - [ ] 色彩對比度是否達標（WCAG AA: 4.5:1 文字）？ - [ ] 顏色使用是否一致、有系統性？ - [ ] 是否存在色彩混亂或過多顏色？

3. 排版質量 - [ ] 字型層級是否清晰（最多 3 個層級）？ - [ ] 行高/字間距是否舒適？ - [ ] 字型選擇是否與品牌調性匹配？

4. 間距與對齊 - [ ] 是否遵循基準網格（4pt 或 8pt）？ - [ ] 元件內外間距是否統一？ - [ ] 元素對齊是否精準？

5. 元件一致性 - [ ] 相同功能的元件樣式是否統一？ - [ ] 互動狀態是否完整（預設/Hover/Active/Disabled）？ - [ ] 圓角、陰影是否系統化？

6. 現代感與審美 - [ ] 是否有過時的 UI 模式（陰影過重、漸變廉價）？ - [ ] 是否有 Pinterest 級別的視覺吸引力？ - [ ] 留白是否足夠、有設計感？

最佳化輸出格式

## UI 審查報告

### 🎯 核心問題（3-5個最重要的）
1. [問題描述] → [具體改進建議]

### 🎨 設計升級方案
[輸出改進後的完整程式碼]

### 📊 改進對比
Before: [原方案問題]
After: [改進後效果]

🎪 Component Design Protocol（單元件設計）

適用於：按鈕、卡片、導航欄、表單、Modal、Toast、Tab、Chip 等單一元件。

輸出標準： - 包含所有狀態（Default / Hover / Active / Focus / Disabled / Loading） - 提供 Dark Mode 變體 - 包含使用示例 - 程式碼直接可用，不需要額外依賴（除非使用者指定框架）

🌟 高質量 UI 的標誌性特徵

參考 Pinterest 高贊、Dribbble 精選的共同特徵：

必須具備

1. 清晰的焦點 — 每個頁面只有一個最重要的視覺中心
2. 呼吸感 — 足夠的留白，不擁擠
3. 色彩自信 — 不是"安全"的配色，而是有個性的
4. 字型有品位 — 不用預設字型，字重搭配有對比
5. 圓角有度 — 統一的圓角半徑，不亂用
6. 陰影剋制 — 一兩層精準的陰影，不堆疊
7. 動效有意義 — 每個動畫都在傳達資訊

絕對避免

• 彩虹色漸變按鈕
• 廉價 box-shadow（0 4px 8px rgba(0,0,0,0.5) 這種）
• 全大寫 + 粗體 + 紅色 的"重要提示"
• 16 種以上顏色同時出現
• 響應式斷點堆疊（用 clamp 代替）
• 圖示和文字對不齊
• 移動端點選區域小於 44px

📦 參考檔案

需要深度參考時，讀取以下檔案： - references/color-systems.md — 完整色彩系統參考（Material 3, Apple, 自定義） - references/component-patterns.md — 高質量元件程式碼片段庫 - references/layout-templates.md — 常見頁面佈局模板（Dashboard, Landing, App） - references/animation-library.md — 精選動效程式碼庫

⚡ 快速決策樹

使用者給了設計稿/截圖要最佳化？
  → 執行 UI Audit Protocol，先分析問題，再輸出改進版本

使用者要從零生成介面？
  → 問清楚用途和調性，選擇色板，執行 Generation Protocol

使用者只需要某個元件？
  → 執行 Component Protocol，輸出所有狀態變體

使用者沒說清楚要什麼？
  → 詢問：① 是什麼產品 ② 大概什麼風格 ③ 要 HTML 還是 React

這個技能文件質量較好，內容專業且體系完整。它能幫助你生成高階美感的UI介面，配色方案豐富多樣，元件設計規範詳細，動效指導也很到位。不過實際操作時可能會覺得缺少完整的示例程式碼，某些細節規範還有完善空間。總體來說，是一個實用且有深度的UI設計參考工具。