从零开始搞网页开发，现在的环境真的比三年前复杂太多了。
我最近在尝试把 AI Agent 接入到前端工作流里，想通过大模型快速生成响应式页面，但发现一个很诡异的问题：AI 生成的 Tailwind CSS 类名在某些特定布局下会发生冲突，导致移动端适配直接崩掉。
下一篇
别再刷那些没用的证书了，多搞点实操证据 →
具体表现是：在处理复杂的 Grid 布局时，AI 经常会给同一个元素堆叠相互矛盾的响应式前缀（比如同时出现 md:grid-cols-2 和 lg:grid-cols-1 但逻辑顺序反了），导致浏览器渲染结果完全不可控。
我尝试过调整提示词，强制要求它先定义基础样式再定义响应式覆盖，但稳定性还是不够。目前我的临时解决方案是写一个简单的脚本，在部署前对生成的 HTML 进行一次类名正则扫描，把重复的响应式前缀给剔除掉。
// 简单的类名去重逻辑，防止AI生成冗余的Tailwind类
const cleanTailwindClasses = (htmlString) => {
return htmlString.replace(/(\w+:grid-cols-\d+)\s+(?=\w+:grid-cols-\d+)/g, '');
};
对于现在这种“AI写代码-人工修Bug”的模式，感觉最耗时的反而不是写逻辑，而是排查这些细小的样式冲突。如果有在做类似 AI 自动化前端部署的朋友，建议在工作流里加上一层 Lint 校验，否则后期维护起来简直是噩梦。
