用 AI 写前端，你有没有遇到过这种情况——

代码跑起来没问题，功能都有，但打开一看，总感觉哪里不对劲。间距挤、排版乱、视觉层次平、配色说不上哪里丑但就是丑……

和真正有设计感的界面放在一起，差距一眼就出来了。

问题出在哪？

不是 AI 的代码写得烂，是它根本不懂设计。

设计师靠的是多年积累的「直觉」——哪里该留白，间距给多少，字号怎么拉开层次，这些东西他们不用想，看一眼就知道怎么处理。

但 AI 没有这套直觉。你不告诉它，它就按默认值糊一个上去，出来的东西千篇一律，没有设计感可言。

说白了：AI 的代码能力够了，设计素养还差得远。

有人专门做了一份「补丁合集」

GitHub 上有个项目叫 Awesome AI Tools for UI，目前收录了 26 个工具，专门解决「AI 写前端不好看」的问题。

地址：http://github.com/maxbogo/awesome-ai-tools-for-ui

按用途分成了五大类，挑几个重点的说一下。

Skills 类：给 AI 装一套「设计审美」

这类工具的思路很直接——

把设计师脑子里那些隐性知识，比如排版规则、间距规范、视觉层级怎么拉开，整理成 AI 能看懂的格式，直接喂给 Claude、Cursor 这类编程助手。

效果就是：AI 生成界面之前，先「学了一遍」基础设计规范。

不是让 AI 凭空发挥，而是给它一套约束框架，在框架内走，出来的东西就不会太歪。

Apps 类：有参考图，快速复刻

收录了 Variant、Google Stitch 等工具。

适合的场景是：你已经看好了某个风格的界面，想快速复刻出来。

有参考，AI 就有方向，不用它自己乱猜「好看是什么样的」。

MCP Servers 类：直接调现成组件

这类工具有点不一样，比如 Magic MCP、UI Layouts MCP。

它们能让 AI 编辑器直接对接真实的组件库，拿现成的高质量组件来拼界面，而不是从零手写每一行样式代码。

好处是：组件本身就是经过设计打磨的，AI 只负责「拼装」，而不是「设计」，出来的界面质量自然稳定多了。

结语

如果你日常用 AI 写前端，这份合集值得收藏。

工具不复杂，核心逻辑就一句话：AI 不会自己学设计，但可以被喂设计。

给它规范、给它参考、给它现成组件，它就能把界面做得像样一点。

项目地址：http://github.com/maxbogo/awesome-ai-tools-for-ui