tweakcn

tweakcn 是專為 shadcn/ui 設計的視覺化主題編輯器與產生器，協助開發者即時預覽並匯出主題，支援 Tailwind CSS v4、v3 與社群瀏覽、AI 輔助生成。

概覽

tweakcn 是一款專為 shadcn/ui 設計的視覺化主題編輯器與產生器。它協助開發者透過即時預覽來變更色彩、字體排版及其他主題屬性，以便建立與微調自訂主題，而不是盲目編輯樣式。

這個產品支援 Tailwind CSS v4 與 v3，可搭配 shadcn/ui 與自訂樣式使用，並提供將 CSS 變數或 Shadcn Registry 指令複製到專案中的匯出路徑。首頁也將其定位為無須註冊即可開始使用的起點，並提供社群主題與 AI 輔助主題建立功能。

專為 shadcn/ui 主題設計的強大工具

色彩控制

透過視覺介面調整背景、文字、邊框、強調色、圖表與側邊欄色彩，而不是手動編輯主題 token。

排版設定

調整字體大小、字重與文字轉換，使主題符合介面的語氣與層級。

Tailwind 版本支援

在 Tailwind v4 與 v3 之間切換，同時使用如 OKLCH 與 HSL 等受支援的色彩格式。

詳細屬性編輯

編輯圓角、間距、陰影與其他主題屬性，以更全面控制元件外觀。

對比度檢查器

在編輯時檢查對比度比率，於匯出前及早發現無障礙問題。

AI 主題生成

在 AI 流程中從圖片或提示詞建立主題，接著在編輯器中微調。

團隊使用 tweakcn 的常見方式

建立自訂應用程式主題
從預設或社群主題開始，接著調整色彩、圓角與排版，直到設計符合特定產品品牌。
從概念生成主題
使用 AI 主題流程，從圖片或提示詞生成起始點，然後在編輯器中微調結果。
匯出可實作的主題
在預覽結果後，透過匯出 CSS 變數或 Shadcn Registry 指令，將主題設定帶入專案。
探索並重用社群設計
瀏覽公開社群主題以獲取靈感，然後依 minimal、professional、dashboard 或 cyberpunk 等標籤比較樣式。
在設計過程中驗證對比度
在反覆調整色彩時檢查對比度比率，讓主題更接近可存取的 UI 選擇。

Pros and Cons

Pros

即時預覽讓主題變更在匯出前更容易評估。
同時支援手動自訂與 AI 輔助主題生成。
免費方案包含完整主題自訂與匯出選項。
社群主題提供範例與瀏覽既有設計的地方。
定價簡單且公開列出，包含免費方案與每月 Pro 選項。

Cons

公開來源未詳細說明每一項編輯器功能或整合項目。
部分 Pro 功能僅以高層次描述，因此來源未顯示列表項目以外的確切限制。

FAQ

什麼是 tweakcn？

tweakcn 是專為 shadcn/ui 設計的視覺化主題編輯器與產生器。它可讓你自訂色彩、字體排版、版面相關屬性，並即時預覽變更，最後將結果匯出為程式碼或 CSS 變數。

tweakcn 是免費的嗎？

是的。定價頁面包含 Free 方案與 Pro 方案。Free 方案包括完整主題自訂、5 個 AI 生成主題、最多可儲存與分享 10 個主題、透過 CSS 變數匯入與匯出、透過 Shadcn Registry 指令匯出，以及對比度檢查器。

Pro 方案包含哪些內容？

Pro 方案新增無限儲存與分享主題、無限 AI 生成主題、以圖片生成主題、優先支援，以及儲存你自己的字型與色彩的能力。

tweakcn 支援 Tailwind v4 嗎？

來源明確指出 tweakcn 支援 Tailwind CSS v4，編輯器頁面也提到 Tailwind v3。定價與首頁文案也提及 shadcn/ui 與自訂樣式。

我可以在現有專案中使用 tweakcn 嗎？

可以。首頁表示你可以在不註冊的情況下開始自訂，而定價頁面也包含支援完整主題自訂的 Free 方案。這個編輯器是為 shadcn/ui 專案設計的，包含透過 CSS 變數或 Shadcn Registry 指令匯入與匯出主題。

Quick Facts

類別: 設計工具 / 開發者工具
主要用途: 為 shadcn/ui 元件進行主題設計
平台 / 技術棧: Web app；Tailwind CSS v4 與 v3；shadcn/ui
入門方案: 提供免費方案；Pro 為每月 $8，按月計費
重要工作流程: 視覺化編輯、AI 主題生成、社群瀏覽、CSS 變數匯出、Shadcn Registry 匯出
網站: tweakcn.com