Claude Code 生成的前端页面惨不忍睹？AI 写代码的审美困局

最近 AI 编程助手的话题热度居高不下，尤其是各种“全能型”代码生成工具雨后春笋般冒出来。可真到了上手实战环节，不少朋友和我一样，对着屏幕上 AI 一顿操作猛如虎生成的页面，心里只剩下一句话：这也太丑了吧。

这不，前两天就看到有开发者发帖吐槽 Claude Code 生成的前端界面丑到让 UI/UX 专家都头大。帖子一出，瞬间引发了一大波共鸣，看来大家被 AI 的审美支配的恐惧真是如出一辙。

AI 写代码：逻辑跑得通，眼睛看不下去

平心而论，AI 在写逻辑代码、实现复杂功能、处理边缘情况这几块确实越来越强。你让它写个数据处理管道或者自动化脚本，基本不用操心，甚至还能给你想出你没考虑到的问题。可一旦涉及到前端、界面设计、用户体验，画风就突变了。

不管是 Claude 还是别的什么模型，生成的页面往往有几个通病：

1. 布局僵硬：要么是万年不变的顶部导航栏+左栏菜单+右侧内容区，要么就是居中一个白色的卡片，死气沉沉。
2. 配色灾难：AI 似乎对“好看”的理解还停留在 Windows 95 时代，或者就是那种默认的蓝色链接、黑色文字，完全没有层次感。
3. 细节缺失：按钮没有 hover 效果，间距忽大忽小，字体甚至都不统一，完全没有现代 Web 应用的质感。
4. 组件乱堆：比如为了显示信息，就硬生生把所有字段都堆在列表页一行里，也不管用户能不能看得清。

有些同学会尝试用 Prompt 反复调教，告诉它“给我用 Tailwind CSS 写一个现代化的 Dashboard”，结果对方回你一个配色诡异、对齐歪七扭八的“现代化”页面，简直让人吐血。

为什么 AI 搞不定设计？

其实这也不能全怪 AI。深层原因有两个：

一是“审美”这东西太主观，而且太依赖语境。一套好看的设计，不仅要符合视觉原则，还要符合产品调性、用户习惯，甚至当前的设计潮流。这些微妙的“感觉”，大语言模型目前很难通过训练数据完美捕捉并复现。它可能学了一亿张设计稿，但不知道为什么这张比那张好看，只是在模仿概率。

图：AI生成的页面往往存在布局僵硬、配色灾难等问题。

二是 AI 目前更擅长“功能性”替代，而不是“创造性”替代。它能把你的功能需求转化为代码逻辑，但“好看”往往需要创造力和对细节的极致把控，这恰恰是目前生成式 AI 的弱项。

咋办？人机协作的正确姿势

既然单靠 AI 生成完美页面不现实，那我们该怎么利用它？经过这段时间的摸索，我觉得把 AI 当作“高级苦力” rather than “全能设计师”是比较稳妥的打法。

这里有几个实用的建议，能让你少折腾几次，产出的东西至少能看：

1. 设计图先行，AI 跑代码：不要指望 AI 凭空给你设计稿。你自己先用 Figma 或者哪怕手绘个草图，理清布局、配色和组件层级。然后把这些具体的要求抛给 AI，让它去写具体的 HTML/CSS 代码。

2. 投喂现成的组件库：直接告诉 AI：“使用 Ant Design（或者 MUI、shadcn/ui 等）的标准组件来构建页面”。组件库自带的设计规范，能保住基础审美的下限。你只需要通过 Prompt 告诉它如何组织这些组件，让它帮你省去写样板代码的时间。

3. 分步拆解，不要一锅端：不要上来就让它“给我写个完整的电商网站首页”。这种需求太模糊，AI 很容易瞎编。你可以拆分成：“第一步，只写顶部导航栏，高度 60px，背景色白色”；“第二步，写一个三列布局的 Banner 区域”。这样一点点拼凑，最后再你手动微调一下 CSS，效果会好很多。

4. 利用 AI 做 tedious 的工作：让它做响应式适配、写复杂的 CSS 选择器、生成各种状态的数据结构。这些是枯燥且容易出错的活儿，交给 AI 最合适，腾出你的精力去打磨核心的视觉体验。

图：人机协作流程中，先绘制设计草图能有效指导AI生成更符合预期的代码。

总结

Claude Code 生成的前端页面确实挺丑，但这并不妨碍它成为一个高效的编程辅助工具。现阶段，把 AI 当作能写代码的“实习生”比较合适——活儿干得快，逻辑也通，但在审美和设计细节上，还得靠你这个“资深设计师/产品经理”把把关。

别指望 AI 能一次性把 UI 做到满分，那是对它要求过高了。只要它能帮我们把那些重复繁琐的代码搞定，让我们有更多时间去思考产品逻辑和打磨用户体验，这波羊毛就算薅到位了。

大家在平时用 AI 辅助写代码时，有遇到过什么啼笑皆非的“灾难现场”吗？有没有什么独家的调教技巧？欢迎在评论区交流一下！