用 AI Agent 自动生成 Tailwind 响应式页面时如何解决类名冲突

最近在尝试把 AI Agent 深度接入前端工作流，目标是实现通过大模型直接快速生成高质量的响应式页面。但实际跑了一段时间发现，现在的前端开发环境在 AI 的介入下，反而出现了一种非常诡异的“样式内卷”现象：AI 生成的 Tailwind CSS 类名在特定布局下会发生严重的逻辑冲突，直接导致移动端适配崩溃。

最让我头疼的是在处理复杂 Grid 布局时，AI 经常会出现逻辑混乱。它会在同一个 HTML 元素上堆叠多个相互矛盾的响应式前缀。举个具体的例子，它可能会在同一个 div 上同时写上 md:grid-cols-2 和 lg:grid-cols-1，而且由于它对 Tailwind 响应式优先级（Mobile First）的理解偶尔会掉链子，导致生成的类名顺序逻辑反了，结果就是浏览器渲染出来的布局完全不可控，原本应该是大屏显示单列、中屏显示双列，结果变成了随机抽签。

起初我以为是 Prompt（提示词）的问题，于是尝试通过优化指令来解决。我强制要求 AI 必须遵循“先定义基础样式 → 再定义响应式覆盖”的严格顺序，但这种方法在面对简单页面时有效，一旦页面结构复杂到需要多级嵌套 Grid 时，稳定性依然不够，AI 还是会习惯性地在类名列表里乱塞前缀。

在这种“AI 写代码 → 人工修 Bug”的循环中，我发现最耗时的竟然不再是编写核心业务逻辑，而是排查这些极其细小的样式冲突。这种冲突在开发环境下可能不明显，但一旦部署到不同尺寸的真机上，就会出现各种莫名其妙的错位。

为了不让这个环节变成噩梦，我目前采取了一个临时但有效的工程化方案：在部署流水线之前，写了一个简单的脚本对生成的 HTML 进行一次类名正则扫描，强行剔除掉重复或冗余的响应式前缀，确保最终输出的类名集是干净的。

具体的处理逻辑如下：

// 简单的类名去重逻辑，防止AI生成冗余的Tailwind类
const cleanTailwindClasses = (htmlString) => {
  // 使用正则匹配重复的 grid-cols 定义，确保每个断点只有一个定义
  return htmlString.replace(/(\w+:grid-cols-\d+)\s+(?=\w+:grid-cols-\d+)/g, '');
};

通过这个正则过滤，我可以过滤掉大部分因为 AI 幻觉产生的重复定义，保证页面在 md 或 lg 断点下的渲染结果符合预期。

这次经历给我最大的启发是，现在的 AI 自动化前端部署不能完全信任模型的“一次性输出”。如果你也在构建类似的 AI 工作流，强烈建议在“生成”和“部署”之间强行加入一层 Lint 校验或静态扫描机制。否则，当你面对一个由 AI 维护的、拥有数千个类名的复杂页面时，手动排查样式冲突的成本将远超你最初节省的开发时间。