# tweakcn

适用于 shadcn/ui 的可视化主题编辑器与生成器，支持 Tailwind CSS 和 AI

- Findings24: <https://findings24.com/zh-CN/tools/tweakcn>
- 网站: <https://tweakcn.com>
- 价格: Freemium
- 分类: AI 趣味工具

## 什么是 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 应用；Tailwind CSS v4 和 v3；shadcn/ui
- **入门方式**: 提供免费方案；Pro 为每月 8 美元，按月计费
- **主要工作流**: 可视化编辑、AI 主题生成、社区浏览、CSS 变量导出、Shadcn Registry 导出
- **网站**: tweakcn.com