Codex 生成前端 UI 太丑怎么办？改进提示词和验收方法
Codex 生成前端 UI 太丑，通常不是因为它不能写前端，而是因为需求太空、缺少设计约束、没有参考组件、没有截图验收。解决方法是把“好看”拆成布局、层级、间距、颜色、状态和响应式检查。
先确认目标
本文解决什么问题？
这篇文章解决“AI 写出来的页面像模板、像 Demo、不够专业”的问题。重点是给 Codex 更明确的设计输入和验收标准。
为什么 AI UI 容易丑
| 原因 | 表现 |
|---|---|
| 只说“高级一点” | 生成一堆卡片、渐变和大标题 |
| 没有业务场景 | 页面像通用模板 |
| 没有现有设计约束 | 颜色、间距、组件风格混乱 |
| 没有移动端验收 | 桌面看着还行，手机挤在一起 |
| 没有截图检查 | 代码通过但视觉不合格 |
可以直接照做
给 Codex 的 UI 验收输入
不要再说“高级一点”，改成这段：
优化这个页面的阅读和操作体验。
保持现有颜色变量和组件风格。
重点检查：标题层级、段落间距、按钮文案、移动端不溢出、表格可滚动。
不要新增大面积渐变，不要嵌套卡片，不要改无关页面。
完成后请截图桌面和移动端，并运行 lint/typecheck/build。
这段输入能把审美问题变成可检查问题。
改进步骤
描述页面用途
说明这是工具页、后台表格、文章站、落地页还是游戏。不同场景需要不同密度和风格。
给出现有约束
告诉 Codex 使用哪些组件、颜色变量、卡片样式、按钮样式，不要让它随便造一套设计系统。
明确不要什么
例如不要大面积渐变、不要营销式 hero、不要嵌套卡片、不要文字溢出。
拆成可验收项
要求检查桌面和移动端：文字不重叠、按钮不溢出、主操作明显、层级清楚。
用截图反馈迭代
让 Codex 根据截图问题修改，而不是只看代码想象 UI。
可直接使用的提示词框架
请基于当前项目已有设计风格修改这个页面。
目标用户是：____。
页面用途是：____。
不要新增设计系统，不要大面积渐变，不要嵌套卡片。
请重点优化：信息层级、间距、移动端、主按钮、空状态。
完成后运行：pnpm lint、pnpm typecheck、pnpm build。
如果可以，请用浏览器检查桌面和移动端截图。
常见 UI 验收清单
| 检查项 | 标准 |
|---|---|
| 信息层级 | 用户第一眼知道页面要做什么 |
| 间距 | 模块之间有区分，内部元素不挤 |
| 按钮 | 主操作明显，文案具体 |
| 移动端 | 不横向滚动，文字不溢出 |
| 风格 | 和现有页面一致 |
不要让 Codex 在没有截图、没有设计约束、没有验收标准的情况下“自由发挥美化”。这通常会带来更多返工。
常见问题 FAQ
Codex 适合做前端设计吗？
适合实现和迭代明确的设计要求。不适合在没有方向时凭一句“做漂亮点”直接产出高质量视觉。
没有设计稿怎么办？
至少给出目标用户、页面类型、参考页面、禁止项和验收清单。越具体越好。
为什么代码没报错但页面不好看？
前端质量不只靠编译通过，还要看视觉层级、响应式、交互状态和真实截图。
阅读结论
总结
Codex 生成 UI 太丑时，先补设计约束和验收标准。把“好看”拆成可检查的布局、层级、间距、状态和移动端问题，效果会稳定很多。