UI 樣式設計技能 是做什麼的？
結合 shadcn/ui 元件、Tailwind CSS 實用樣式與畫布式視覺設計系統，建立美觀且無障礙使用者介面的完整技能。
參考資源
- shadcn/ui: https://ui.shadcn.com/llms.txt
- Tailwind CSS: https://tailwindcss.com/docs
何時使用此技能
適用於以下情境：
- 使用 React 相關框架（Next.js、Vite、Remix、Astro）建構 UI
- 實作無障礙元件（對話框、表單、表格、導航）
- 使用工具優先的 CSS 方法進行樣式設計
- 建立行動優先的響應式佈局
- 實作深色模式與主題自訂
- 使用一致標記建立設計系統
- 產生視覺設計、海報或品牌素材
- 透過即時視覺反饋進行快速原型設計
- 加入複雜 UI 模式（資料表格、圖表、指令面板）
核心技術堆疊
元件層：shadcn/ui
- 基於 Radix UI 基本元件的預建無障礙元件
- 複製貼上發行模型（元件直接存在您的程式碼庫中）
- 以 TypeScript 為優先，完整型別安全
- 可組合的基本元件，支援複雜 UI
- 基於 CLI 的安裝與管理
樣式層：Tailwind CSS
- 工具優先的 CSS 框架
- 建置時處理，無執行時期負擔
- 行動優先的響應式設計
- 一致的設計標記（顏色、間距、排版）
- 自動去除未使用的程式碼
視覺設計層：Canvas
- 博物館品質的視覺構圖
- 以哲學為導向的設計方法
- 成熟的視覺溝通
- 極簡文字，最大視覺衝擊
- 系統化的模式與精緻美學
腳本路徑
此技能及其 references/ 中的腳本路徑是相對於包含此 SKILL.md 的目錄，而非專案目錄：scripts/<file> 是此技能自己的 scripts/ 資料夾，而 ../<skill>/scripts/<file> 是與之一起安裝的子技能。從該目錄（Claude Code 在載入技能時會回報為技能的基本目錄）建立完整路徑，並將工作目錄保持在專案根目錄 — 腳本會讀取和寫入專案檔案，例如 docs/brand-guidelines.md、assets/design-tokens.json 或 src/ 等相對於該路徑的檔案。
快速入門
元件 + 樣式設定
使用 Tailwind 安裝 shadcn/ui：
npx shadcn@latest init
CLI 會提示框架、TypeScript、路徑和主題偏好。這將會同時設定 shadcn/ui 和 Tailwind CSS。
新增元件：
npx shadcn@latest add button card dialog form
搭配實用樣式使用元件：
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
export function Dashboard() {
return (
<div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<Card className="hover:shadow-lg transition-shadow">
<CardHeader>
<CardTitle className="text-2xl font-bold">Analytics</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-muted-foreground">View your metrics</p>
<Button variant="default" className="w-full">
View Details
</Button>
</CardContent>
</Card>
</div>
)
}
替代方案：僅 Tailwind 設定
Vite 專案：
npm install -D tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }
/* src/index.css */
@import "tailwindcss";
元件庫指南
包含使用模式、安裝方式和組合範例的完整元件目錄。
請參閱：references/shadcn-components.md
涵蓋內容：
- 表單與輸入元件（Button、Input、Select、Checkbox、Date Picker、表單驗證）
- 佈局與導航（Card、Tabs、Accordion、Navigation Menu）
- 覆蓋層與對話框（Dialog、Drawer、Popover、Toast、Command）
- 反饋與狀態（Alert、Progress、Skeleton）
- 顯示元件（Table、Data Table、Avatar、Badge）
主題與自訂
主題設定、CSS 變數、深色模式實作與元件自訂。
請參閱：references/shadcn-theming.md
涵蓋內容：
- 使用 next-themes 設定深色模式
- CSS 變數系統
- 顏色自訂與調色板
- 元件變體自訂
- 主題切換實作
無障礙模式
ARIA 模式、鍵盤導航、螢幕閱讀器支援與無障礙元件使用。
請參閱：references/shadcn-accessibility.md
涵蓋內容：
- Radix UI 無障礙功能
- 鍵盤導航模式
- 焦點管理
- 螢幕閱讀器公告
- 表單驗證可及性
Tailwind 實用類別
適用於佈局、間距、排版、顏色、邊框與陰影的核心實用類別。
請參閱：references/tailwind-utilities.md
涵蓋內容：
- 佈局實用類別（Flexbox、Grid、定位）
- 間距系統（padding、margin、gap）
- 排版（字體大小、粗細、對齊、行高）
- 顏色與背景
- 邊框與陰影
- 自訂樣式的任意值
響應式設計
行動優先的斷點、響應式實用類別與適應性佈局。
請參閱：references/tailwind-responsive.md
涵蓋內容：
- 行動優先方法
- 斷點系統（sm、md、lg、xl、2xl）
- 響應式實用類別模式
- 容器查詢
- 最大寬度查詢
- 自訂斷點
Tailwind 自訂
設定檔結構、自訂實用類別、插件與主題擴展。
請參閱：references/tailwind-customization.md
涵蓋內容：
- @theme 指令用於自訂標記
- 自訂顏色與字型
- 間距與斷點擴展
- 自訂實用類別建立
- 自訂變體
- 層級組織（@layer base、components、utilities）
- Apply 指令用於元件提取
視覺設計系統
基於畫布的設計哲學、視覺溝通原則與精緻構圖。
請參閱：references/canvas-design-system.md
涵蓋內容：
- 設計哲學方法
- 視覺溝通勝過文字
- 系統化模式與構圖
- 顏色、形式與空間設計
- 極簡文字整合
- 博物館品質執行
- 多頁設計系統
實用腳本
用於元件安裝與設定檔產生的 Python 自動化工具。
shadcn_add.py
新增 shadcn/ui 元件並處理相依性：
python scripts/shadcn_add.py button card dialog
tailwind_config_gen.py
產生自訂主題的 tailwind.config.js：
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
當任何同層的 tailwind.config.js、.cjs、.mjs 或 .ts 檔案已存在時，產生器會拒絕建立或取代設定檔。請先檢閱回報的設定檔，然後僅在有意覆蓋的情況下傳遞 --force：
python scripts/tailwind_config_gen.py --colors brand:blue --force
最佳實務
- 元件組合：從簡單、可組合的基本元件建立複雜 UI
- 工具優先樣式：直接使用 Tailwind 類別；僅為真正重複的樣式提取元件
- 行動優先響應式：從行動樣式開始，分層加入響應式變體
- 無障礙優先：善用 Radix UI 基本元件，加入焦點狀態，使用語意化 HTML
- 設計標記：使用一致的間距比例、顏色調色板、排版系統
- 深色模式一致性：為所有主題元素套用深色變體
- 效能：善用自動 CSS 清除，避免動態類別名稱
- TypeScript：使用完整型別安全以獲得更好的開發體驗
- 視覺層級：讓構圖引導注意力，有意識地使用間距與顏色
- 專家工藝：每個細節都很重要 — 將 UI 視為工藝
參考文獻導航
元件庫
references/shadcn-components.md- 完整元件目錄references/shadcn-theming.md- 主題與自訂references/shadcn-accessibility.md- 無障礙模式
樣式系統
references/tailwind-utilities.md- 核心實用類別references/tailwind-responsive.md- 響應式設計references/tailwind-customization.md- 設定與擴展
視覺設計
references/canvas-design-system.md- 設計哲學與畫布工作流程
自動化
scripts/shadcn_add.py- 元件安裝scripts/tailwind_config_gen.py- 設定檔產生
常見模式
包含驗證的表單：
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
const schema = z.object({
email: z.string().email(),
password: z.string().min(8)
})
export function LoginForm() {
const form = useForm({
resolver: zodResolver(schema),
defaultValues: { email: "", password: "" }
})
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
<FormField control={form.control} name="email" render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input type="email" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)} />
<Button type="submit" className="w-full">Sign In</Button>
</form>
</Form>
)
}
包含深色模式的響應式佈局：
<div className="min-h-screen bg-white dark:bg-gray-900">
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
<CardContent className="p-6">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
Content
</h3>
</CardContent>
</Card>
</div>
</div>
</div>
資源
- shadcn/ui 文件：https://ui.shadcn.com
- Tailwind CSS 文件：https://tailwindcss.com
- Radix UI：https://radix-ui.com
- Tailwind UI：https://tailwindui.com
- Headless UI：https://headlessui.com
- v0（AI UI 產生器）：https://v0.dev