ui-design-system

使用 TailwindCSS + Radix + shadcn/ui 的 React UI 元件系統。技術棧：TailwindCSS（樣式）、Radix UI（基礎元件）、shadcn/ui（元件）、React/Next.js。能力：設計系統架構、無障礙元件、響應式佈局、主題切換、深色模式、元件組合。操作：審查、設計、建構、改善、重構 UI 元件。關鍵字：TailwindCSS、Radix UI、shadcn/ui、設計系統、元件庫、無障礙、ARIA、響應式、深色模式、主題、CSS 變數、元件架構、原子設計、設計代碼、變體、插槽、組合。使用時機：建構元件庫、實作 shadcn/ui、建立無障礙 UI、設定設計系統、加入深色模式/主題、審查 UI 元件架構。

10星標

0分支

更新於 2025/12/9

獲取技能源代碼

UI/UX 設計與開發專家

為現代網頁應用程式提供全面的 UI/UX 設計、審查與改善。

使用 TailwindCSS + Radix UI + shadcn/ui 及現代 React 模式，提供可直接上線的實作。

技術棧架構

三大支柱

第一層：TailwindCSS（樣式基礎）

工具優先的 CSS 框架，建置時產生樣式
零執行時期開銷，最小化生產環境套件
設計代碼：顏色、間距、字體排版、斷點
響應式工具與深色模式支援

第二層：Radix UI（行為與無障礙）

無樣式、可存取的元件基礎
符合 WAI-ARIA 標準，支援鍵盤導航
焦點管理與螢幕閱讀器支援
不預設樣式，完全控制樣式

第三層：shadcn/ui（美觀元件）

預先建置的元件 = Radix 基礎 + Tailwind 樣式
複製貼上即可使用（你擁有程式碼）
內建 React Hook Form + Zod 驗證
可自訂的變體，具型別安全

架構層級

應用程式層
    ↓
shadcn/ui 元件（美觀預設，可直接使用）
    ↓
Radix UI 基礎元件（無障礙行為，無樣式）
    ↓
TailwindCSS 工具（設計系統，樣式）

關鍵原則： 每一層都強化下一層。從 Tailwind 開始處理樣式，加入 Radix 處理無障礙行為，使用 shadcn/ui 取得完整元件。

核心能力

UI/UX 審查與稽核

系統性評估現有介面：

元件架構審查： 分析元件組合、可重用性與單一職責
無障礙稽核： WCAG 2.1/2.2 AA/AAA 合規、鍵盤導航、螢幕閱讀器支援
效能分析： Core Web Vitals（LCP、FID、CLS）、套件大小、渲染效能
響應式設計審查： 行動優先實作、斷點使用、容器查詢
設計系統一致性： 代碼使用、間距尺度遵循、色板合規
程式碼品質： React 最佳實務、hooks 使用、狀態管理模式
視覺層級： 字體排版尺度、間距節奏、色彩對比、焦點指示器

UI/UX 設計

建立可直接上線的介面設計：

元件設計： 原子設計原則、組合模式、變體系統
佈局架構： 網格系統、flexbox 模式、響應式容器
互動設計： 懸停狀態、焦點狀態、載入狀態、錯誤狀態
設計代碼： 三層代碼系統（原始 → 語意 → 元件）
色彩系統： OKLCH 色彩空間、可存取的色板、深色模式支援
字體排版系統： 尺度設計、層級、可讀性最佳化
動畫與轉場： 微互動、載入回饋、狀態變更

UI/UX 改善

強化現有實作：

無障礙強化： ARIA 模式、語意 HTML、鍵盤導航
效能最佳化： 程式碼分割、延遲載入、虛擬化、圖片最佳化
響應式精煉： 斷點最佳化、行動優先改善
元件重構： 提取共用模式、降低複雜度、提升可重用性
視覺打磨： 間距一致性、字體排版精煉、色彩和諧
狀態管理： 樂觀更新、錯誤處理、載入狀態
開發者體驗： 元件文件、Storybook 故事、型別安全

樣式整合

框架無關的樣式方法：

Tailwind 搭配元件： 任何框架的工具優先樣式
CSS-in-JS： emotion、styled-components、vanilla-extract
CSS Modules： 無執行時期開銷的範圍樣式
設計系統整合： 跨框架的基於代碼樣式

各層使用時機

直接使用 TailwindCSS 時機：

建構自訂佈局與間距
為靜態內容與容器設定樣式
快速原型開發，無複雜互動
非互動式 UI 元素

範例場景： 主視覺區塊、網格佈局、無互動的卡片、文字樣式

使用 Radix UI 基礎元件時機：

建構自訂元件庫
需要無障礙但要求自訂設計
shadcn/ui 沒有你需要的元件
需要完全控制元件結構

範例場景： 自訂日期選擇器、獨特導航模式、特殊對話框行為

使用 shadcn/ui 元件時機：

快速建構標準 UI 元件
需要美觀預設且可自訂
企業應用程式開發
表單密集的應用程式，需驗證

範例場景： 管理後台、CRUD 應用程式、設定頁面、資料表格

關鍵設計原則

1. 漸進增強

從簡單開始，按需增強：

Tailwind 工具處理基本樣式
加入 Radix 基礎元件處理互動
使用 shadcn/ui 取得完整解決方案
在你的程式碼庫中自訂元件

2. 組合勝於複雜

從簡單、可重用的元件建構複雜 UI：

小型、專注的元件（單一職責）
組合基礎元件而非建立巨石
善用元件插槽與 children 模式

3. 無障礙優先

Radix UI 自動處理無障礙：

ARIA 屬性正確套用
內建鍵盤導航
焦點管理與鎖定
螢幕閱讀器相容

永遠不要覆寫無障礙功能——應強化它們。

4. 設計代碼一致性

一致地使用 Tailwind 的設計系統：

遵循間距尺度（4、8、16、24px）
使用色板（50-950 色階）
系統性地套用字體排版尺度
除非必要，避免任意值

5. 行動優先響應式

始終行動優先設計，向上擴展：

基礎樣式針對行動裝置
使用斷點（sm、md、lg、xl、2xl）強化
在實際裝置上測試，而非僅瀏覽器縮放

設定策略

安裝順序

TailwindCSS - 基礎
shadcn/ui CLI - 包含 Radix 依賴
加入元件 - 只安裝你需要的
設定主題 - CSS 變數 + Tailwind 設定
設定深色模式 - 主題提供者 + 切換開關

設定最佳實務

Tailwind 設定：

正確使用 content 路徑（掃描所有元件檔案）
使用 CSS 變數擴展主題，而非硬編碼值
使用 class 策略啟用深色模式
安裝 tailwindcss-animate 外掛

CSS 變數（三層系統）：

:root {
  /* 第一層：原始值（不可變） */
  --gray-50: 250 250 250;
  --gray-900: 24 24 27;
  --blue-500: oklch(0.55 0.22 264);

  /* 第二層：語意（感知主題） */
  --background: var(--gray-50);
  --foreground: var(--gray-900);
  --primary: var(--blue-500);

  /* 第三層：元件 */
  --button-height: 2.5rem;
  --card-padding: 1.5rem;
}

.dark {
  /* 只有語意代碼改變 */
  --background: var(--gray-900);
  --foreground: var(--gray-50);
}

色彩空間建議：

現代： 使用 OKLCH 以獲得感知均勻性
舊版支援： 使用 HSL 並提供備援
避免： 使用 RGB/HEX 作為設計代碼（不易閱讀）

代碼儲存：

以 JSON 格式儲存，便於跨平台分發
使用 Style Dictionary 轉換為 CSS 變數、Swift、XML
將代碼與元件程式碼分開進行版本控制

路徑別名：

在 tsconfig 中設定 @/components 和 @/lib
確保 Next.js 與 TypeScript 設定一致
在匯入中使用別名以保持程式碼簡潔

整合模式

模式 1：shadcn/ui + 自訂 Tailwind

以 shadcn/ui 元件為基礎，使用 Tailwind 類別自訂：

透過 className prop 套用自訂間距、顏色
使用 Tailwind 工具覆寫預設樣式
維持元件無障礙性

模式 2：Radix 基礎 + Tailwind

從頭建構自訂元件：

使用 Radix 處理行為（對話框、下拉選單等）
完全使用 Tailwind 工具設定樣式
完全控制結構與外觀

模式 3：混合方法

在你的程式碼庫中修改 shadcn/ui 元件：

編輯 components/ui/ 中的元件檔案
加入新的變體、尺寸或樣式
使用 CVA（Class Variance Authority）維持型別安全

模式 4：元件組合

結合多個基礎元件以建構複雜 UI：

Popover + Select 用於可搜尋下拉選單
Dialog + Form 用於模態表單
Tabs + Cards 用於多區塊介面

設計代碼架構

使用三層代碼系統以實現可擴展、可維護的設計系統：

第一層（原始值）： 原始值（gray-50、spacing-4）
第二層（語意）： 以目的為導向（background-primary、text-error）
第三層（元件）： 元件專屬（button-height、card-padding）

現代色彩： 使用 OKLCH 色彩空間以獲得感知均勻性與更好的無障礙計算。

📖 參閱 DESIGN_TOKENS.md 以了解：

完整的三層代碼系統實作
OKLCH 色彩空間指南與範例
代碼命名慣例與最佳實務
CSS 變數設定
多主題支援模式

響應式設計策略

行動優先方法： 從行動裝置（0-639px）開始，透過 sm/md/lg/xl/2xl 斷點向上擴展。

關鍵模式： 佈局切換（欄→列）、元件切換（對話框→抽屜）、容器查詢以實現模組化響應式。

📖 參閱 RESPONSIVE_PATTERNS.md 以了解：

完整的斷點策略與實作
響應式元件模式與範例
容器查詢指南
圖片最佳化策略
響應式設計的效能考量
全面測試檢查清單

表單架構

策略： React Hook Form + Zod 實現 schema 優先驗證，具型別推論與可存取的錯誤處理。

📖 參閱 CUSTOMIZATION.md 以了解：

完整的 React Hook Form + Zod 設定
可重用的欄位包裝模式
多步驟表單實作
無障礙需求檢查清單

效能最佳實務

核心策略： 程式碼分割（React.lazy）、Tailwind 最佳化（準確的 content 路徑）、虛擬化（@tanstack/react-virtual 用於長列表）。

📖 參閱 PERFORMANCE_OPTIMIZATION.md 以了解：

完整的效能最佳化指南
Core Web Vitals 最佳化策略
套件分析與 tree shaking
常見陷阱與解決方案
效能監控設定

元件自訂與深色模式

自訂策略

直接修改： 在你的程式碼庫中編輯 shadcn/ui 檔案
變體擴展： 使用 CVA 實現型別安全的變體
包裝元件： 在基礎元件周圍加入自訂邏輯
主題自訂： 全域修改 CSS 變數

深色模式設定

ThemeProvider 搭配 next-themes
Class 策略（class，而非 media query）
CSS 變數 在 .dark 類別中
可存取的切換開關 元件

📖 參閱 CUSTOMIZATION.md 以了解：

完整的自訂策略與範例
CVA 變體實作指南
深色模式設定與配置
設計考量與測試
表單架構模式

無障礙標準

Radix UI 內建保證

✅ ARIA 屬性正確套用
✅ 鍵盤導航功能正常
✅ 焦點管理與鎖定自動化
✅ 螢幕閱讀器相容

WCAG 對比度要求（關鍵）

WCAG 2.1 Level AA（法律最低要求）：

一般文字：4.5:1 最低對比度
大型文字（18pt/14pt 粗體以上）：3:1 最低
UI 元件/圖形：3:1 最低
業界標準： 大多數法律要求指定 AA

WCAG Level AAA（增強）：

一般文字：7:1 對比度
大型文字：4.5:1 對比度
最佳實務： 在設計限制允許時，以 AAA 為目標

測量方式：

對比度範圍：1:1（白底白字）到 21:1（黑底白字）
使用工具：WebAIM Color Contrast Checker、瀏覽器 DevTools
在設計階段測試，而非實作後

OKLCH 優勢：
感知均勻的色彩空間使對比度計算比 HSL 更可靠、更可預測。

實作檢查清單

✅ 所有文字符合 4.5:1 最低標準（AA 標準）
✅ 互動元素符合 3:1 最低標準
✅ 提供描述性標籤（aria-label、<label>）
✅ 測試完整的鍵盤導航流程
✅ 驗證可見的焦點指示器（不僅是瀏覽器預設）
✅ 使用螢幕閱讀器測試（NVDA、JAWS、VoiceOver）
✅ 使用語意 HTML 元素（<button>、<nav>、<main>）
✅ 為圖片與圖示提供替代文字
✅ 確保深色模式維持對比度標準

測試策略

自動化： 在設計時使用對比度檢查工具
手動： 使用 Tab 鍵遍歷整個介面
螢幕閱讀器： 至少使用一種螢幕閱讀器測試
真實使用者： 在測試中納入身心障礙使用者

常見陷阱

避免這些常見問題：

動態類別： Tailwind 不會在執行時期產生 → 使用條件式
Content 設定： 確認路徑包含所有元件檔案
匯入路徑： 檢查 tsconfig.json 別名
深色模式： 確保 ThemeProvider 設定與 CSS 變數
無障礙： 永遠不要移除 ARIA 屬性

📖 參閱 PERFORMANCE_OPTIMIZATION.md 以取得完整的疑難排解指南，包含 10 個以上常見問題與解決方案。

資源

官方文件

TailwindCSS： https://tailwindcss.com/docs
Radix UI： https://www.radix-ui.com/primitives
shadcn/ui： https://ui.shadcn.com | https://ui.shadcn.com/llms.txt

權威設計系統來源

USWDS 設計代碼： https://designsystem.digital.gov/design-tokens/
Smashing Magazine 命名： https://www.smashingmagazine.com/2024/05/naming-best-practices/
OKLCH 色彩空間： https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
WCAG 對比度： https://webaim.org/articles/contrast/

參考檔案（詳細指南與模式）

核心概念：

DESIGN_TOKENS.md - 三層代碼系統、OKLCH、命名
RESPONSIVE_PATTERNS.md - 斷點、容器查詢、測試
CUSTOMIZATION.md - 元件自訂、深色模式、表單
PERFORMANCE_OPTIMIZATION.md - 效能、Core Web Vitals、陷阱

實作參考：

TAILWIND_REFERENCE.md - 完整工具
RADIX_REFERENCE.md - 基礎元件含程式碼
SHADCN_REFERENCE.md - 元件含安裝
INTEGRATION_PATTERNS.md - 進階模式

觸發條件與使用案例

行為特質

程式碼品質： 元件組合 | 單一職責 | 正確的 hooks 使用 | 最佳化渲染 | 全面測試

回應方式

審查： 了解脈絡 → 系統性稽核 → 識別問題 → 提供證據 → 建議解決方案 → 排定優先順序

設計： 收集需求 → 選擇架構 → 設計代碼 → 元件結構 → 以無障礙方式實作 → 包含狀態 → 響應式 → 文件化

改善： 分析現狀 → 識別瓶頸 → 規劃改善 → 逐步實作 → 衡量影響 → 文件化 → 測試

整合： 驗證相容性 → 遵循官方模式 → 最佳實務 → 型別安全 → 效能預算 → Error boundaries

實作檢查清單

設定： 安裝 Tailwind + shadcn/ui | 設定三層代碼 | 設定深色模式 | 建立 cn() 輔助函式

開發： 套用行動優先設計 | 實作深色模式 | 測試無障礙 | 驗證 WCAG AA 對比度

生產環境： 驗證 Tailwind 清除 | 測試所有狀態 | 跨瀏覽器測試 | 效能稽核

📖 詳細檢查清單請參閱：

最佳實務摘要

技能摘要

主要功能：

審查： 稽核 UI/UX 的無障礙、效能與設計系統一致性
設計： 使用現代 React 與樣式系統建立可直接上線的介面
改善： 強化現有實作以獲得更好的 UX、效能與可維護性

技術重點：

TailwindCSS、Radix UI、shadcn/ui（樣式層）
設計代碼與設計系統
無障礙標準（WCAG 2.1/2.2）
響應式設計與行動優先模式
色彩系統（OKLCH）與字體排版

觸發條件：

UI/UX 審查、稽核或分析請求
設計系統架構與代碼設計
無障礙改善（WCAG 合規）
Tailwind/Radix/shadcn/ui 實作
響應式設計與行動優先開發
色彩系統與字體排版設計

範圍邊界：
✅ 設計系統、樣式、無障礙、設計代碼、UI 模式
❌ React 架構（react-nextjs-expert）、狀態管理、後端 API、基礎設施

技能版本： 2.1.0
最後更新： 2025-11-15
強化內容： UI/UX 審查能力、設計系統架構、框架無關模式
權威來源： WCAG 2.1/2.2、OKLCH 色彩科學、業界設計系統（USWDS、Carbon、Polaris）
漸進揭露： 參考檔案提供詳細指南 ✅
範圍： 設計系統、樣式、無障礙、UI/UX 模式（框架無關）
搭配技能： react-nextjs-expert（用於 React/Next.js 架構與狀態管理）

您可能也喜歡

songsee

385Kdesign-ui

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

steipete

獲取

ui-to-vue

237Kdesign-ui

Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.

affaan-m

獲取

frontend-skill

84Kdesign-ui

Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.

nexu-io

獲取

繼續探索

瀏覽 design-ui 熱門 Skills 最近更新

ui-design-system

相關技能

UI/UX 設計與開發專家

技術棧架構

三大支柱

架構層級

核心能力

UI/UX 審查與稽核

UI/UX 設計

UI/UX 改善

樣式整合

各層使用時機

直接使用 TailwindCSS 時機：

使用 Radix UI 基礎元件時機：

使用 shadcn/ui 元件時機：

關鍵設計原則

1. 漸進增強

2. 組合勝於複雜

3. 無障礙優先

4. 設計代碼一致性

5. 行動優先響應式

設定策略

安裝順序

設定最佳實務

整合模式

模式 1：shadcn/ui + 自訂 Tailwind

模式 2：Radix 基礎 + Tailwind

模式 3：混合方法

模式 4：元件組合

設計代碼架構

響應式設計策略

表單架構

效能最佳實務

元件自訂與深色模式

自訂策略

深色模式設定

無障礙標準

Radix UI 內建保證

WCAG 對比度要求（關鍵）

實作檢查清單

測試策略

常見陷阱

資源

官方文件

權威設計系統來源

參考檔案（詳細指南與模式）

觸發條件與使用案例

行為特質

回應方式

實作檢查清單

最佳實務摘要

技能摘要

您可能也喜歡

songsee

ui-to-vue

frontend-skill

繼續探索