tweakcn

tweakcn 是一款面向 shadcn/ui 的可视化主题编辑器与生成器，支持实时预览、自定义主题、Tailwind CSS v4/v3、社区主题浏览和 AI 主题生成，并可导出到项目中。

概览

tweakcn 是一款面向 shadcn/ui 的可视化主题编辑器与生成器。它帮助开发者通过更改颜色、排版和其他主题属性来构建并完善自定义主题，而不是盲目编辑样式。

该产品支持 Tailwind CSS v4 和 v3，可与 shadcn/ui 及自定义样式配合使用，并提供将 CSS 变量或 Shadcn Registry 命令复制到项目中的导出路径。首页还将其定位为无需注册即可开始使用的入口，并提供社区主题浏览和 AI 辅助主题创建功能。

面向 shadcn/ui 主题定制的强大工具

颜色控制

通过可视化界面调整背景、文本、边框、强调色、图表和侧边栏颜色，无需手动编辑主题令牌。

排版设置

调整字体大小、字重和文本转换，使主题更符合界面的语气与层级。

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