摆脱“AI生成味”：如何用 AI 写出高颜值的前端页面？

最近在技术圈里闲逛，发现大家都在吹“AI 编程”有多神，特别是前端领域，好像动动嘴皮子就能生成个炫酷网页。但实际操作过的朋友可能会跟我有一样的感受：AI 写代码确实快，但写出来的东西……真的挺丑的。

那种一眼假的“AI 味”特别重，像是十年前的 Bootstrap 默认模板，颜色搭配俗气，布局僵硬。作为一名“重操旧业”的开发者，我也踩了不少坑，今天就来聊聊怎么利用现有的工具（比如 Stitch MCP），把 AI 生成的前端页面从“能看”变成“耐看”。

为什么 AI 写的前端总是“土土的”？

首先得承认，目前的主流模型（哪怕是所谓的 GPT-4.5 级别）在“审美”这个维度上，表现常常让人下头。

• 审美降智： AI 倾向于使用高饱和度的默认配色，间距把控也缺乏设计感。
• 代码虽对，但不够灵活： 它生成的 CSS 往往是教科书级别的写法，为了兼容性牺牲了现代设计的美感。
• 缺乏上下文流： 如果你只是扔给它一句“做一个登录页”，它会给你一个万能且平庸的登录页。

我的实战经验：从“直接生成”到“设计先行”

刚开始，我也傻傻地直接让 Codex 或者 Vibe Coding 生成整个页面。大半年用下来，效果确实差强人意，基本上能一眼看出哪段是 AI 写的。

后来我调整了工作流，核心思路就一句话：不要让 AI 当设计师，让它干苦力。

1. 用 Stitch MCP 先定“设计稿”

我现在习惯先用 Stitch MCP 这样的工具来辅助页面的结构设计。这里不是指让它写代码，而是利用它在设计层面把页面结构、组件布局先定下来。

你可以把它想象成是在和 AI 画草图。在这一步，你关注的是：

• 模块怎么拆分？
• 视觉层级是怎么样的？
• 配色方案选什么？（我会手动指定 Tailwind 的色号，不让 AI 自发挥）

2. 看着“图纸”改代码

当你有了清晰的页面布局逻辑（甚至是一张设计意图描述）后，再去让 AI（如 Codex）根据这个参考来写代码。

比如：“根据我刚才描述的三栏布局结构，用 Tailwind CSS 写出对应的 HTML，主色调使用 Slate-900，强调色使用 Indigo-500。”

这样生成的代码，因为有具体的设计约束，会比你直接说“写个好看的三栏布局”要精致得多。

怎么彻底去除“AI 味”？

虽然 AI 写代码很快，但想达到“无 AI 味”，还需要人工做一点额外的微调（Refactor）：

1. 统一设计语言： 不要在一个页面上混用三四种不同的圆角大小或阴影风格。
2. 微调间距： AI 很喜欢用 p-4、m-4 这种默认值，手动改成 p-6 或者 py-2，质感立马不一样。
3. 加入微交互： AI 很少主动写 Hover 效果或过渡动画，加上简单的 transition-all duration-300，页面瞬间就活了。

总结

目前的 AI 想要独立完成高审美、高完成度的前端页面还是有点勉强的。最好的用法是把 AI 当作一个执行力超强的“初级前端”，而你必须是那个指哪打哪的“设计主管”。

如果你也在用 AI 辅助前端开发，不妨试试“设计先行，代码后置”的流程，说不定能省去不少后期修补“丑代码”的时间。

你们平时是怎么处理 AI 生成的样式的？有没有什么私藏的 Prompt 或者工具？欢迎在评论区交流！