Creative Tim UI 是做什麼的？

一個建立在 shadcn/ui 之上的全面區塊庫，提供 390+ 個涵蓋 40+ 個類別的生產就緒區塊。所有區塊均為 React + Tailwind CSS，相容於 Next.js (App Router)、Remix 和 Vite。

瀏覽完整區塊庫：https://www.creative-tim.com/ui AI 可讀索引：https://www.creative-tim.com/ui/llms.txt

安裝此技能

# 透過 skills CLI 安裝 (建議)
npx skills add creativetimofficial/ui

# 全域安裝 (所有專案皆可使用)
npx skills add creativetimofficial/ui -g

# 或僅安裝到特定代理
npx skills add creativetimofficial/ui --agent claude-code

技能頁面：https://skills.sh/creativetimofficial/ui/creative-tim-ui

設計理念

在超過 300 個產品與類別中，Creative Tim 堅持同樣的原則：識別開發者真正需要的東西，將其做到極致，並捨棄其餘一切。這種克制正是此區塊庫的核心。

產生或修改區塊時，請遵循以下原則：

95% 規則 — 將常見使用案例做到極致。不要為罕見問題添加設定、抽象層或靈活性。開發者應該能讀取一個區塊並立即理解它的功能。

「輕量」原則 — 一個區塊在沒有任何東西可以移除時才算完成，而非在沒有東西可以添加時。質疑每一個包裝 div、每一個 props、每一個動畫、每一個圖示。如果區塊在沒有它的情況下也能運作，那麼它很可能不應該存在。

先研究再渲染 — 思考看著這個畫面的人想要做什麼。儀表板應呈現使用者需要採取行動的數字。表單應以最少阻力收集資訊。圍繞目的進行設計，而非表象。

建立在基礎之上 — shadcn/ui 的基本元件（Card、Table、Button、Badge）設計良好且有人維護。組合它們，不要重新實作。Creative Tim 的貢獻在於組合與判斷，而非基本元件。

真實使用，而非展示 — 標準是：一個真實的團隊會將這個內容發佈到生產環境嗎？避免不傳遞資訊的視覺複雜度。溝通永遠勝過裝飾。

包含程式碼範例的完整細節：rules/brand-philosophy.md

何時套用

在以下情況使用此技能：

在專案中安裝或自訂 Creative Tim UI 區塊
產生應符合 Creative Tim 設計系統的新區塊
審查產生的 UI 程式碼是否符合品牌/風格
設定 PRO API 金鑰以存取高級區塊
將新專案導入 Creative Tim UI 區塊庫

區塊類別

類別	代碼	描述
AI Agents	`ai-agents`	聊天介面、活動摘要、工具使用、轉錄
Pages	`pages`	完整的代理管理頁面佈局
Account	`account`	個人檔案、設定、帳單管理
Authentication	`authentication`	登入、註冊、2FA 流程
Hero	`hero`	登陸頁面英雄區
Pricing	`pricing`	定價表與帳單方案
Charts	`charts`	資料視覺化
KPI	`kpi`	指標卡片與儀表板
Stats	`stats`	統計區段
Tables	`table`	含排序/篩選功能的資料表格
Ecommerce	`ecommerce`	產品列表、購物車、結帳
Blog	`blog`	文章列表、文章佈局
Testimonials	`testimonials`	社會證明區段
...		[完整列表請見 /ui/llms.txt]

安裝區塊

兩種方法皆完全支援 — 選擇最適合您設定的方式。

選項 1 — Creative Tim CLI (建議)

npx @creative-tim/ui@latest add <區塊名稱>

先初始化新專案 (自動偵測 Next.js / Vite / Remix / Astro)：

npx @creative-tim/ui@latest init

範例：

npx @creative-tim/ui@latest add hero-01
npx @creative-tim/ui@latest add ai-agent-activity-01
npx @creative-tim/ui@latest add agent-management-list-01

該套件也提供具名二進位檔 (creative-tim-ui、creative-tim) — 指令相同：

npx creative-tim-ui add hero-01
npx creative-tim add hero-01

選項 2 — shadcn CLI (完整 URL)

npx shadcn@latest add https://www.creative-tim.com/ui/r/<區塊名稱>.json

範例：

npx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json
npx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json

兩種方法都會將元件原始碼複製到您的專案中，並自動安裝所有必要的 shadcn/ui 基本元件 (Button、Card、Badge 等)。

PRO 區塊 (API 金鑰)

部分區塊標示為 PRO，需要 Creative Tim API 金鑰。您可以在 https://www.creative-tim.com/ui 獲取免費金鑰。

設定

將金鑰加入您的環境變數：

# .env.local
CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx

使用任一 CLI 時傳遞金鑰：

# Creative Tim CLI
npx @creative-tim/ui@latest add pro-區塊名稱 --api-key $CREATIVE_TIM_UI_API_KEY

# shadcn CLI — 透過 registry 設定 Authorization header

或透過 Creative Tim CLI 設定全域金鑰：

npx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx

設定金鑰後，PRO 區塊的安裝方式與免費區塊完全相同。

設計規則

請參閱個別規則檔案以取得完整細節。快速摘要：

品牌色彩

主要強調色：橘色 (orange-500 / orange-600) — Creative Tim 的品牌顏色
永遠不要使用 violet、purple 或 indigo 作為強調色 — 這些顏色代表 AI 生成的預設值
中性表面：slate、gray、zinc
狀態顏色：emerald (成功)、amber (警告)、red (錯誤)、blue (資訊)

字體排版

text-sm 用於所有可讀的主體內容 — 標籤、描述、表格儲存格、列表項目
text-xs 僅用於：頭像縮寫、font-mono 時間戳、徽章藥丸 (狀態/優先級)、側邊欄群組標題 (大寫 + tracking-wider)、小型 h-6/h-7 動作按鈕
永遠不要使用 text-[10px]、text-[11px] 或任何任意字體大小值

Tailwind v4 — 無任意值

使用數值比例尺進行間距/尺寸設定：h-8、w-12、gap-3、p-4 — 絕對不要使用 h-[32px]
使用標準分數作為寬度：max-w-sm、max-w-2xl、w-1/2 — 絕對不要使用 max-w-[85%]
僅使用響應式中斷點：sm:、md:、lg:、xl: — 絕對不要使用 [@media(min-width:640px)]:

元件模式

內容分組時優先使用 Card > CardHeader + CardContent
KPI / 統計卡片：CardContent className="px-4 py-0" (使用 py-0，而非預設的 py-6)
任何可能超出範圍的列表請使用 ScrollArea
側邊欄導航：64 (w-64)、border-r、bg-muted/30
避免使用行內 style={{}} — 一律使用 Tailwind 類別

水合安全性

絕不在 useState 初始化器中使用 new Date()、Date.now() 或 toLocaleTimeString()
使用靜態/寫死字串作為 SSR 安全的初始狀態；在 useEffect / setInterval 內部切換為即時值

完整設計指南

包含程式碼範例的完整規則：AGENTS.md

個別規則：

rules/install-blocks.md     — CLI 安裝操作說明
rules/pro-api-key.md        — PRO 金鑰設定與驗證
rules/design-brand.md       — 品牌色彩與識別
rules/tailwind-rules.md     — Tailwind v4 編碼限制
rules/component-patterns.md — 首選的元件模式
rules/hydration-safety.md   — SSR/CSR 水合規則

部署此技能

此技能位於儲存庫中的 .claude/skills/creative-tim-ui/。任何人都可以透過執行以下指令將其安裝到自己的 Claude Code 設定中：

claude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui

或手動複製並建立符號連結：

# 將技能目錄複製到您的專案中
cp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui

安裝完成後，該技能可在該專案內的任何 Claude Code 會話中以 /creative-tim-ui 的形式使用。

Creative Tim UI

Creative Tim UI 是什麼？

在你喜歡的 AI 中提問

說明文件