القائمة
色彩、排版、間距、Accessibility 與 55+ 設計風格指南
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
完整的網站開發指南，涵蓋 UI/UX 設計、React/Vue/Next.js 前端框架、Laravel/Node.js 後端、Coding Style 與互動式選擇精靈
Web 動畫（Framer Motion、GSAP、View Transitions API、Lottie）。CSS 動畫見 ui/no-ai-feel.md
REST API 與 GraphQL 設計規範指南
認證授權（Auth.js、Clerk、JWT/Cookie 安全、RBAC/ABAC）。不含 OAuth provider 細節
Laravel、Node.js、Django、FastAPI 後端框架指南
JavaScript、TypeScript、PHP、Python、CSS 代碼規範
| id | ui_design |
| name | ui_design |
| description | 色彩、排版、間距、Accessibility 與 55+ 設計風格指南 |
此技能涵蓋所有 UI/UX 設計相關知識，幫助建立美觀、易用、一致的使用者介面。
在開始任何設計前，必須先閱讀 去 AI 感設計指南
確保你的設計：
| 主題 | 說明 |
|---|---|
| 色彩系統 | 調色板、對比度、色彩心理學 |
| 排版規範 | 字型選擇、階層、行高 |
| 間距系統 | 留白、網格、間距比例 |
| 無障礙設計 | WCAG 標準、色彩對比、鍵盤導航 |
| 自動化 a11y 驗證 | axe-core + WCAG 2.2 AA 規則表 |
| a11y 上線檢查 | 上線前無障礙清單 |
| 元件組合模式 | Compound、Slot/asChild、Headless |
| shadcn/ui + Radix | 現代元件系統 + design token |
| 類別 | 數量 |
|---|---|
| 風格索引 | 55 種風格總覽 |
| 基礎風格 | 10 種 |
| 產業風格 | 15 種 |
| 藝術風格 | 10 種 |
| 文化風格 | 7 種 |
| 科技風格 | 8 種 |
| 特殊風格 | 5 種 |
| 專案 | 推薦風格 |
|---|---|
| 企業官網 | 企業風、極簡、瑞士風 |
| 電商網站 | 電商風、質感設計、扁平化 |
| SaaS 產品 | SaaS 風、科技極簡、玻璃擬態 |
| 個人作品集 | 編輯風、極簡、創意風格 |
| 部落格 | 部落格風、編輯風、極簡 |
| 遊戲娛樂 | 遊戲風、賽博龐克、霓虹 |
| 醫療健康 | 醫療風、極簡、乾淨 |
| 環保公益 | 環保風、有機、自然 |
| 調性 | 推薦風格 |
|---|---|
| 專業穩重 | 企業風、瑞士風、法律風 |
| 年輕活潑 | 孟菲斯、波普、童趣 |
| 高端奢華 | 奢華、裝飾藝術、編輯風 |
| 科技創新 | 科技極簡、AI 風格、玻璃擬態 |
| 溫暖親切 | 北歐風、有機、插畫風 |
| 藝術個性 | 野獸派、抽象、線條藝術 |
1. 定義品牌
└── 品牌價值、人格、調性
2. 選擇風格
└── 使用風格精靈或直接選擇
3. 建立基礎
├── 色彩系統
├── 字型系統
└── 間距系統
4. 設計元件
├── 基礎元件（按鈕、輸入框）
├── 複合元件（卡片、表單）
└── 區塊元件（頁首、頁尾）
5. 組裝頁面
├── 頁面佈局
├── 響應式調整
└── 動態效果
6. 驗證測試
├── 無障礙檢測
├── 跨裝置測試
└── 使用者測試