前几天我在实现一个前端页面时，碰到 AI 生成页面巨丑，并且花费半天、对话n轮，却怎么都优化不过来的情况。

今天就分享给大家，希望可以给你一些灵感。

下面是优化n轮，不理想的界面效果，下面以签到展示为例。

新建对话，切换IDE/SOLO模式，更换模型都尝试了，但都是一些边角的优化，整体布局一直如此。

我甚至已经怀疑当时的大模型是不是抽风了。

但作为一个天天给小伙伴分享“如果 AI 效果不佳，请仔细考虑是否正确使用”的人，我能怪 AI 吗？

那必然不行，于是，我人肉看代码去了。

还真让我发现了一个之前没有注意的点。

由于这个项目界面风格比较自由，因此初版提示词并未限定技术栈，而 AI 也不出意外地选择了自己最喜欢的 Tailwind，我平时没有用过 Tailwind。

为什么注意到它呢，因为做这个界面的前两天，刚看了 Tailwind 裁员 75% 的事情，印象很深。

基于多年的编程直觉，我感觉它是个变数，就试了试。

CheckInDisplay.vue 最近几次优化都是基于
tailwind优化的，效果很差。
请忘记tailwind直接发挥你的全力，通过自定
义css效果进行美化，但需要与
HomePage.vue 风格一致。

结果，竟然真的摆脱了前面一直绕不出去的丑陋风格。

后来我想了想，好像也说的通。

Tailwind 的原子化设计哲学擅长快速搭建一致性的系统 UI，但在需要打破网格、自定义动效或微妙留白的高设计感场景中，这些反而成了 AI 的束缚。

因此，如果你想要界面更具设计感，更加漂亮，可以考虑让 AI 采用原生 CSS 去发挥，也许会有意外效果呢~

当时没有截图，为了更好的阅读效果，我重新拉取了好多版代码才找回错误的界面，支持一下不过分吧！