色彩控制
透過視覺介面調整背景、文字、邊框、強調色、圖表與側邊欄色彩，而不是手動編輯主題 token。
什麼是 tweakcn？
tweakcn 是一款專為 shadcn/ui 設計的視覺化主題編輯器與產生器。它協助開發者透過即時預覽來變更色彩、字體排版及其他主題屬性，以便建立與微調自訂主題，而不是盲目編輯樣式。
這個產品支援 Tailwind CSS v4 與 v3，可搭配 shadcn/ui 與自訂樣式使用，並提供將 CSS 變數或 Shadcn Registry 指令複製到專案中的匯出路徑。首頁也將其定位為無須註冊即可開始使用的起點，並提供社群主題與 AI 輔助主題建立功能。
tweakcn 能做什麼？
排版設定
調整字體大小、字重與文字轉換，使主題符合介面的語氣與層級。
Tailwind 版本支援
在 Tailwind v4 與 v3 之間切換，同時使用如 OKLCH 與 HSL 等受支援的色彩格式。
詳細屬性編輯
編輯圓角、間距、陰影與其他主題屬性，以更全面控制元件外觀。
對比度檢查器
在編輯時檢查對比度比率，於匯出前及早發現無障礙問題。
AI 主題生成
在 AI 流程中從圖片或提示詞建立主題，接著在編輯器中微調。
使用情境
“建立自訂應用程式主題”
從預設或社群主題開始，接著調整色彩、圓角與排版，直到設計符合特定產品品牌。
“從概念生成主題”
使用 AI 主題流程，從圖片或提示詞生成起始點，然後在編輯器中微調結果。
“匯出可實作的主題”
在預覽結果後，透過匯出 CSS 變數或 Shadcn Registry 指令，將主題設定帶入專案。
“探索並重用社群設計”
瀏覽公開社群主題以獲取靈感，然後依 minimal、professional、dashboard 或 cyberpunk 等標籤比較樣式。
“在設計過程中驗證對比度”
在反覆調整色彩時檢查對比度比率，讓主題更接近可存取的 UI 選擇。
常見問題
什麼是 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 指令匯入與匯出主題。
快速資訊
- 類別
- 設計工具 / 開發者工具
- 主要用途
- 為 shadcn/ui 元件進行主題設計
- 平台 / 技術棧
- Web app；Tailwind CSS v4 與 v3；shadcn/ui
- 入門方案
- 提供免費方案；Pro 為每月 $8，按月計費
- 重要工作流程
- 視覺化編輯、AI 主題生成、社群瀏覽、CSS 變數匯出、Shadcn Registry 匯出
- 網站
- tweakcn.com
tweakcn 流量分析
流量數據僅供參考。
- 網域評分
- 63