Codex Design 和 tweakcn 对比。

tweakcn 和 Codex Design 设计系统库都能让 AI 做的应用不再和其他 shadcn 应用长得一样。tweakcn 是 shadcn/ui 主题的可视化编辑器；我们的库是一组完整的网站和手机 App 设计系统，写成 Codex 或 Claude Code 能照着做的格式，每套都附 shadcn 主题。

更新于 2026年11月6日 · 阅读约 5 分钟

先说结论

想一个颜色一个颜色地手动调 shadcn 主题，或者从图片生成主题，用 tweakcn。想让 AI agent 照着一整套设计系统来做（包括字号阶梯、版式规则和要避免的套路），而且网站和手机 App 都要，从 Codex Design 的设计系统库开始。

• 选 tweakcn：想要实时预览、亲手控制每个 shadcn 变量；想从大量社区主题里挑；或者想用提示词、图片让 AI 生成主题。
• 选 Codex Design 设计系统库：你用 Codex 或 Claude Code 做设计；除了网页还要做手机 App；或者希望每套系统都是一份 agent 会保存并遵守的 DESIGN.md。

两个工具分别是什么

tweakcn 是 Tailwind CSS 和 shadcn/ui 的开源可视化主题编辑器，作者是 Sahaj（GitHub 上是 jnsahaj）。从一个预设开始，边看实时预览边调颜色、字体、圆角、间距和阴影，自带对比度检查，最后导出成 CSS 变量或 shadcn registry 命令。支持 Tailwind v4 和 v3，颜色格式可选 OKLCH 或 HSL。Pro 版可以无限次用 AI 生成主题，也能从图片生成。

Codex Design 设计系统库 是本站免费提供的一组设计系统，每套都包含浅色和深色模式的配色、Google Fonts 字体、字号阶梯、圆角、间距、阴影，以及使用规则。每套都有实时预览、agent 可以通过网址直接读取的 DESIGN.md、Tailwind v4 的 globals.css，以及一行命令就能安装的 shadcn 主题。其中一半专为手机 App 设计，规定了触控尺寸、底部标签栏和页面边距。

对比

以上信息截至 2026 年 11 月 6 日，来自 tweakcn.com 和它的 GitHub 仓库。

什么时候选 tweakcn

想自己动手调一个主题时，tweakcn 更好用。每个 shadcn 变量都是一个滑块或取色器，改动立刻反映在预览里，社区主题库也提供了很多起点。如果你已经有品牌色，想先看看它们放在各种 shadcn 组件上的效果，用它比手改 CSS 快得多。

什么时候选 Codex Design 设计系统库

主题只定了颜色、字体和圆角，但 agent 还需要知道标题多大、正文多宽、区块之间留多少空间，以及要避开哪些套路。我们库里的每套系统都把这些写进了 DESIGN.md，所以 Codex 或 Claude Code 会把它用到每个界面上，而不只是 shadcn 组件。App 类系统还加上了手机屏幕需要的规则，比如 48px 的触控区域和底部标签栏。这些系统也刻意避开了紫色渐变、毛玻璃这类一看就是 AI 做的套路，不想让产品显得像生成出来的，从这里开始更稳妥。

常见问题

Codex Design 设计系统库可以替代 tweakcn 吗？

如果是挑一个起点主题，可以：每套系统都能用一行命令安装成 shadcn 主题。如果要可视化地编辑主题，tweakcn 功能更多；我们的库是给 AI agent 照着做的。

可以一起用吗？

可以。从我们的库里挑一套系统，安装它的 shadcn 主题，再到 tweakcn 里微调颜色，最后让 agent 把 DESIGN.md 更新成一致的数值。

用设计系统库需要安装 Codex Design 插件吗？

不需要。设计系统在本站免费提供，任何项目都能用。Codex Design 插件是在 Codex 里加一块画布，用来比较不同的设计方向。

继续阅读

• 给 AI agent 用的设计系统免费的网页和 App 设计系统，附 DESIGN.md 和 shadcn 主题。
• DESIGN.md 是什么，怎么用这个格式是什么、完整示例，以及怎么让 Codex 遵守它。
• 去 AI 味的设计 skill 横评：Taste Skill、Impeccable、UI UX Pro Max 怎么选？几个最热门的去 AI 味设计 skill 对比。