AI生成CSS的代价：失控的任意值与设计系统崩塌

我在过去的几个月里一直在观察 LLM 编写前端代码。一开始，这确实令人印象深刻——它们快速搭建 hero 区域或定价表格的速度不可否认。但作为一个在技术债务领域深耕二十年的人，我开始看到同样的模式在每个代码库中浮现：大量「魔法数字」的爆发和结构性的衰退。

如果你使用 Claude 或 Cursor 这样的 AI Agent 来构建 UI，你继承的不仅仅是代码，还有一大量未被管理的 CSS 熵。你会看到 w-[347px]、text-[#e74c3c]，以及无尽的嵌套 div 元素——它们在高分辨率显示器上看起来不错，但在真实需求（如无障碍访问、响应式适配或品牌更新）的重压下完全崩溃。

问题不在于 AI 写不了 CSS。问题在于 AI 不理解设计系统，它只理解模式。它在一个地方看到一个颜色，然后把它复制为任意值，而不是将其映射到 token。

任意值陷阱

我在观察 Agent 生成 Tailwind 代码时，最常看到的失败类型之一是「任意值滥用」。

Agent 会创建一个使用 bg-[#e74c3c] 的组件。然后在另一个组件中又使用了 text-[#e74c3d]。只有一像素的差异，但你已经破坏了品牌一致性。如果下个月你的品牌颜色变了，你不是在 @theme 块中更新一行，而是要在数百个文件中执行全局查找替换，还期望没有遗漏任何一个实例。

这不仅仅是「糟糕的代码风格」。这是高利息的技术债务。在 Tailwind v4 中，向基于 CSS 的 @theme 块的迁移使这个问题变得更加关键。我们应该定义 --color-primary: #e74c3c; 然后使用 bg-primary。如果一个任意值在代码库中出现超过一次，它就已经通不过设计系统测试了。它应该属于 theme。

无障碍戏院

有一种特定的失败类型，我称之为「无障碍戏院」。这是指 AI Agent 生成的代码在 sighted 开发者看来是可访问的，但对任何使用屏幕阅读器的人毫无用处。

一个经典例子：<button class="p-2"><TrashIcon /></button>。

对你来说，这个图标明显代表「删除」。但对屏幕阅读器来说，它只是一个匿名按钮。Agent 技术上遵循了构建按钮的指令，但违反了语义清晰度的工程要求。

修复方法很简单——添加 aria-label="Delete item" 并使用 sr-only 来处理文本描述——但 Agent 不会主动这样做，除非被迫。它们还经常忘记 focus-visible:ring。如果用户通过键盘导航到那个按钮，没有视觉指示来显示焦点在哪里。它创造了一个只是名义上「可访问」的界面。

移动优先的逻辑错误

然后是关于响应式的结构性逻辑错误。许多开发者（以及更多的 AI Agent）仍然以桌面优先的思维方式思考。他们为大屏幕编写样式，然后尝试用覆盖来「修复」移动端。

在 Tailwind 中，这通常看起来像：grid-cols-3 sm:grid-cols-1。

这在逻辑上是根本性错误的。在 Tailwind 的移动优先架构中，基础类应用于所有内容，前缀如 sm: 应用于该断点及以上。如果你把 grid-cols-3 写成基础类，你是在告诉浏览器：「在最小的屏幕上从 3 列开始。」这导致移动设备上的水平滚动和布局崩坏。你应该从 grid-cols-1 开始，然后向上扩展到 md:grid-cols-2。

Agent 没有考虑视口如何增长，它只是在尝试满足一个视觉快照。

从生成到验证

当我构建 Vinkius 时，我意识到我们不应该要求 AI Agent「生成更好的代码」。我们应该给它们工具来证明它们的代码是正确的。

你不需要一个会写 CSS 的 Agent；你需要一个能根据一套不可妥协的工程支柱来审计自己 CSS 的 Agent：设计系统完整性、无障碍合规性、响应式掌控。

这就是我开发 Tailwind Excellence Prover 的原因。它不是一个生成器。它不会为你写代码。相反，它作为一个 MCP server 坐在你的 Agent 管道中（Claude、Cursor 等），根据 Tailwind v4 标准验证输出。

Token 脱钩：你在使用任意的十六进制代码而不是 @theme 变量吗？

语义完整性：你在构建「div 汤」还是正确使用了 <main>、<nav> 和 <section>？

无障碍合规：交互元素是否缺少焦点状态？图标按钮有标签吗？

响应式策略：布局实际上是移动优先的吗，还是桌面驱动带着破碎的覆盖？

转向 Tailwind v4

Tailwind v4 的发布改变了 stakes。我们正在从沉重的 tailwind.config.js 转向使用 @theme、@utility 和 @variant 的 CSS 原生方法。如果你的 Agent 仍在尝试使用遗留的 v3 模式，它生成的就是过时的代码。

Excellence Prover 理解这种架构。它查找正确使用新的 @import "tailwindcss" 语法的地方，并确保自定义工具通过 @utility 实现，而不是老式的（通常臃肿的）@apply 滥用。

我们正在进入一个「编码」越来越少关于敲字符、越来越多关于定义约束的时代。如果你不在 MCP 这样的工具中定义这些约束，你的 AI Agent 最终会让你的代码库淹没在任意值和无意义标记的海洋中。

你可以在 Vinkius 上找到 Tailwind Excellence Prover：https://vinkius.com/mcp/tailwind-excellence-prover

不要再让你的 Agent 写代码了。让它们开始证明代码可以工作。

MCP 是 AI Agent 的音乐。我们构建了目录。探索 Vinkius MCP Catalog。