# tweakcn

適用於 shadcn/ui 的視覺化主題編輯器與產生器，支援 Tailwind CSS 和 AI

- Findings24: <https://findings24.com/zh-TW/tools/tweakcn>
- 網站: <https://tweakcn.com>
- 價格: Freemium
- 分類: AI 趣味工具

## 什麼是 tweakcn？

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

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

## tweakcn 能做什麼？

### 色彩控制

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

### 排版設定

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

### 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