AI 为什么写不好 Web UI？根因拆解与提示词工程实战

AI 写后端代码、写 SQL、写脚本都快得很唯独一碰到 Web UI 就容易翻车。让它生成个登录页布局能跑、按钮能点、接口能调可一眼看过去总觉得哪里不对。说不上是丑就是“没内味”。这个问题我琢磨了很久也踩了不少坑今天想把背后的原因和破解思路一次性说清楚。这不是一篇“AI 编程吐槽文”而是想认真拆一拆AI 写不好 Web UI 的根因是什么哪些是模型本身的局限哪些是训练数据的问题哪些其实是使用者没把需求说清楚更重要的是作为实际写业务代码的人我们能用什么方法让 AI 生成的界面从“能跑”到“能看”这篇文章适合正在把 AI 接进前端工作流的朋友也适合对“AI 产品经理、AI 测试开发、AI Agent 工作流”这些方向感兴趣的人。全文没有任何玄学都是实测下来的经验。1. AI 写的 Web UI到底“差”在哪先别急着骂 AI 审美差。我们把“差”拆开看其实是几个完全不同的问题混在一起。1.1 不是不能用是“没内味”我让 AI 生成过一个典型的后台管理页面左侧菜单、顶部导航、中间表格区。代码一次跑通增删改查全有响应式也做了。但用起来就是别扭——表格间距忽大忽小按钮排列毫无节奏感侧边栏和内容的留白比例不对功能分区之间的视觉边界含糊。用一句话总结代码层面及格了设计层面不及格。同为代码产物后端接口写错了会直接报错逻辑错了会出 bug这些是“硬错误”。UI 的问题几乎全是“软错误”——不报错、不崩溃、能点能跳但整体就是不对。这类问题的麻烦之处在于没有一套明确的自动化规则可以判定它“错了”只能靠人来感知。1.2 五个最常见的翻车现场我整理了五类高频问题相信用过 AI 写界面的朋友都会眼熟布局呆板所有内容靠左堆叠或者居中排开没有视觉节奏。真正的设计会通过网格、侧偏、留白制造层次感AI 生成的布局永远是“平均分配、依次排列”。配色诡异要么饱和度拉满要么颜色之间毫无关联。给 AI 说“蓝色科技感”它能给你一个荧光蓝配纯黑说“清新淡雅”出来的往往是饱和度失控的薄荷绿配惨白。层级模糊页面的信息架构是平的。重点内容没有放大次要内容没有弱化按钮、标题、正文的视觉权重几乎一样。用户打开页面不知道先看哪里。组件滥用AI 特别喜欢把 Bootstrap 或 Ant Design 的现成组件往页面上堆。圆角卡片、渐变背景、大图标、走马灯一个不落结果整个页面像组件库的 Demo 拼盘。细节缺失hover 态不做、加载态不做、空数据态不做、表单校验的报错样式不做。在 AI 看来这些“边缘状况”不属于高优先级但在真实产品里这些恰恰是最影响体验的部分。这些问题的共性是什么它们都不是“功能性的 bug”而是“设计判断力”的缺失。要理解 AI 为什么缺这种东西得往模型和数据层面挖。2. 为什么 AI 写不好根因拆解网上很多人把问题归为“AI 没有审美”。审美是表象真正的原因藏在三层数据、标注、评测。2.1 训练数据里就没有多少好 UI大模型训练要的是数据量和可获取性。Web UI 相关的训练数据从哪里来无非是 GitHub 上的开源项目、技术博客里的代码示例、Stack Overflow 的问答代码片段。问题很明显这些数据里真正优秀的 UI 占比极低。开源项目的 UI 大多是“备胎水平”——能用、没设计很多热门仓库的代码是业务导向的设计水平一般真正顶级的设计作品以高保真设计稿的形式存在于 Figma、Sketch 里而不是以代码形式挂在 GitHub 上。就算有优质代码往往也是静态截图没有配套的设计决策说明。于是模型学到的“UI 代码分布”是偏的平庸的界面占了训练数据的绝大多数那些有克制的配色、精确的间距、良好的层级反而因为数量少被淹没。模型统计上最常输出的恰恰是那种“看起来差不多但谈不上好”的界面。2.2 UI 质量的“隐性知识”无法被标注代码有对错设计没有。一个按钮放左边还是放右边留白是 16px 还是 24px标题用 16 号字还是 20 号字——这些决策没有标准答案全看上下文、品牌调性、目标用户。大模型的训练依赖“标注数据”。你可以给十万张图标注“这是猫”但没法给十万个界面标注“这个好看因为对比度克制、层级清晰、留白舒适”。好看不是一个可枚举的属性集合它是多个维度组合出来的主观体验。更麻烦的是UI 背后的“为什么”完全无法从代码中习得。一个设计师把价格栏放大可能是为了让用户聚焦性价比把按钮放在页面右下角可能是遵循拇指热区规律。这些决策逻辑不存在于 HTML 和 CSS 里模型看到的就是一排标签和属性它无法推断背后的意图。而没有意图的 UI 生成本质上就是在“猜一个概率最高的布局”。2.3 评测标准缺失AI 根本不知道“好看”是什么AI 训练靠评分信号。模型输出以后要有评测方式误差越大就调得越狠。后端代码有单元测试可以自动判断对错那 UI 怎么评测有没有用能不能点页面高度对不对——这些可以自动化检查。但“好不好看”“层次清不清晰”“节奏合不合理”自动化评测做不了。于是模型在训练中接收到的信号天然偏科功能完整性占了大头视觉质量几乎无法进入 loss 函数。不是 AI 不在乎审美是它的反馈激励里压根没有审美这一项。你用一个界面掠过真人的 eye-tracking 数据或者转化率来当奖励信号也许能逼出更好的设计但目前的主流训练流程里没这步。2.4 从自然语言到视觉布局的致命损耗多模态模型看起来是“文字进、图片出”但中间的信息损耗非常严重。自然语言描述界面有一个先天的劣势语言是线性的界面是空间的。你说“把导航栏放在顶部下方左侧是筛选区右侧是内容列表”语言帮你把空间关系转译成了逻辑关系但当你描述“这个页面的气质要沉稳一点”时语言已经撑不住了。人可以在“沉稳”和“庄重”“商务感”“克制”之间来回校准模型拿到一个形容词只能从概率分布里抓取对应的视觉组合抓取结果往往不稳定。这就是为什么你给 AI 讲半天需求它生成的界面像“设计感觉跑偏了”——不是你描述不够是语言这个通道本身就不是传递视觉的最佳载体。3. AI 能做好哪些做不好哪些一张能力边界表聊完根因我们来点实用的到底什么能放心交给 AI什么得留给自己做。3.1 能力边界对照清单任务类型AI 表现说明基础组件拼装优秀导航栏、卡片、表单、表格、按钮组给出组件库即可稳定输出CRUD 页面骨架良好列字段、表单校验、接口调用逻辑链路清晰时基本一次到位数据可视化布局良好图表容器、筛选条件区、统计卡片组合套用常见模式很稳静态营销页一般能出结构完整的页面但视觉张力、转化逻辑明显不足品牌化视觉设计偏差需要主观判断品牌气质、色彩情绪AI 输出的辨识度低复杂交互状态流偏差涉及拖拽、多步流程、条件分支、权限差异时容易漏状态微交互与动效细节偏差hover 反馈、过渡动画、手势操作都容易被简化或忽略设计体系一致性偏差单个页面或许还行多页面之间的统一性维护不住无障碍可访问性偏差contrast 对比度、键盘导航、ARIA 标签经常遗漏这张表是我用不同 AI 编程工具分别实测后的总结。纵向比较下来规律很清晰只要任务能被“逻辑规则”覆盖AI 的产出就可靠只要任务需要“主观判断”AI 就开始露怯。3.2 值得关注的“半成品”状态还有一个细节值得单独提出来现在的 AI 生成 UI本质上是“完成度挺高的半成品”。它擅长把页面从 0 分推到 70 分但从 70 分推到 90 分它基本使不上劲。这反而是好事情。写一个 UI 最耗时间的是什么是把空页面搭到“能看”这一步。框架搭好、组件就位、数据流打通——这些又繁琐又容易出错的工作 AI 能干剩下的 20 分视觉精修留给你和设计师省下的时间非常可观。我现在的用法是把 AI 当成“超级实习生前端工程师”。它给你交一版初稿能跑能点但你别指望它直接能上线。你来做拆解、调优、补充它负责把骨架和逻辑闭环搞出来。4. 实操指南让 AI 从“能跑”到“能看”聊了这么多原理是时候动手了。这部分我总结了三套实测有效的方案全部来自真实项目可以直接抄作业。4.1 方案一提示词里主动补设计约束很多人把 AI 写 UI 差归咎为“模型不行”但实际操作中提示词没有设计约束才是主要原因。你只说“做一个数据看板”AI 只能按概率输出一个“统计里的平庸看板”你给它精确到数值和规则的设计约束它给出的页面质量立刻不一样。我试过的最有效的一套 UI 提示词模板包含以下要素技术栈React Tailwind CSS 组件库自定义组件不要使用现成 UI 库的默认皮肤 页面类型数据看板 核心功能今日订单量、销售额、退款率、转化趋势图 设计约束 - 页面最大宽度 1200px整体居中左右留白 24px - 主色使用 #2563EB辅助色使用 #0F766E强调色使用 #DC2626 - 字体仅用系统字体栈标题 font-weight 700正文 font-weight 400 - 卡片圆角 8px阴影使用 tailwind 的 shadow-sm不要用强阴影 - 页面背景 #F8FAFC卡片背景纯白 - 所有按钮统一高度 36px圆角 6px - 空白区域不少于 16px块与块间距统一 24px - 图表容器高度 320px图例放在右上角 先输出页面的布局结构说明确认后再写代码。对比测试下来没有约束时 AI 生成的是“花里胡哨的通用模板”加了约束之后生成的页面至少是一个“能用、不辣眼睛、接近设计规范”的成品。核心逻辑是把设计判断量化成模型能理解的规则。这套方法的精髓在于不要用“好看”“高级感”这类抽象词。AI 对抽象词的理解飘忽不定但对“圆角 8px、主色 #2563EB、间距 24px”这类具象参数非常听话。4.2 方案二分步生成先骨架后细节我发现很多人让 AI 写 UI 时天然期待“一句话生成完整页面”。实际效果波动极大。更可靠的姿势是分四步走第一步让 AI 先用文字输出页面布局结构。哪里是导航、哪里是内容区、哪里是侧边栏、元素的层级关系如何。这一步相当于设计稿的线框图转成文字版先统一对“布局”的理解。第二步让 AI 按这个结构生成 HTML 骨架只放容器和占位区块不填充具体内容和样式。第三步逐步加入组件和交互逻辑。表格、表单、弹窗一个模块一个模块接上去每接一个模块让 AI 自测一次布局是否错乱。第四步最后统一过设计细节。间距、颜色、字体、留白、hover 态用类似“给所有卡片统一间距为 24px”这种批量指令收尾。这套流程看起来蠢但效率极高。一次生成完整页面的成功率低拆成四步后每一轮的错误都局限在可见范围内AI 修起来也快。整体算下来比“一遍生成-反复大改”要省好几轮。4.3 方案三让 AI 自己当“设计评审”这是我在摸索中发现最好用的隐藏技巧——让 AI 审 AI。生成完页面后把代码丢给它然后追加一条指令你现在是一名资深 UI 设计师请从以下维度审查这份代码 - 视觉层级的明确性 - 间距系统是否一致 - 色彩使用的克制性 - 边缘状态的覆盖情况loading、empty、error - 按钮、输入框等交互组件是否缺乏状态样式 输出具体的修改建议并标注修改的优先级。得到评审结果后把建议逐条作为新的指令再返回去执行。这个“AI 提出- AI 修改”的闭环能把 70 分的页面推到 80 分左右。原理说起来很简单模型的“评判能力”比“生成能力”更成熟你让它挑毛病它比你直接让它创作要靠谱得多。用这个方法时注意一点评审输出的建议别全盘接收。AI 对“高级感”的执念经常让它提出过度设计的修改方案比如加渐变、加动效、加装饰元素。只采纳那些关于一致性、间距、状态覆盖的建议视觉风格方向的建议要人工把关。5. 常见问题与实操心得最后汇总一下实际踩过的坑和对应的排查思路按问题速查的方式整理。5.1 问题速查表症状原因分析解决办法生成的页面布局错乱提示词里没有约束父容器和栅格结构明确指定 Grid/Flex 结构或要求使用 Tailwind 的指定栅格类配色怎么调都难看只给了“科技感”“大气”等无效描述直接给出主色、辅助色、强调色的色值组件间距忽大忽小缺少统一的间距系统定义指定间距基准如 8px 基础单位并要求全局使用同倍数间距页面太素或太花设计约束过松模型在概率分布里乱选先让 AI 输出设计规范色彩、字体、组件规范确认后再写码一改这里那里就崩生成速度太快结构化程度低让 AI 输出前先列代码结构或改用分步生成方案代码能跑但不像设计稿提示词没有包含高保真参考的还原要求上传设计稿截图作为视觉参考提示词里标注“严格按照截图还原”5.2 最后分享一个小技巧我在实际操作中体会最深的是AI 写 UI 的翻车现场多数不是 AI 的能力问题是使用姿势问题。你把 UI 拆成“逻辑可控的大小块”把设计约束量化成色值、间距、字体 token再配合“生成-评审-修改”的闭环AI 产出的界面质量稳定能到中等偏上。这不是玄学纯粹是任务拆解和信息对齐的功夫。再补一个隐藏技巧让 AI 先生成一整套设计 token而不是直接生成页面。先让它定义间距列表4/8/12/16/24/32/48、颜色变量主色/辅助色/中性色/语义色、字体系统字号/字重/行高把这份 token 表塞进上下文再让 AI 基于这些 token 写页面。实测下来页面之间的统一性会明显高出一截视觉也沉稳得多。我刚试点这种模式时团队里有人说“你这就是给 AI 加了个设计系统前置层”。对就是这么回事。AI 不是天生写不好 Web UI而是需要你用设计系统的思维方式去约束它。这个经验在 AI 编程、AI 工作流、多 AI 协作的产品化过程里都适用——把模糊的主观标准转化成明确的、结构化的输入模型的产出就会急剧改善。换个角度想这恰恰说明了人力的价值AI 把界面需求翻译成可执行的代码指令但我们得负责把审美、品牌、用户心理这些“隐性知识”显性化。未来写 Web UI 的人不会消失只是角色的重心从“手写代码”悄悄转移到了“定义规则、判定质量、把控体验”。