经常用 Codex 的朋友都知道，它的干活速度真的没得说。
但最让人抓狂的是——这家伙有时候太有自己的主见了。
结果它一顿操作猛如虎，给你堆出一张看似花里胡哨的页面，质量普普通通。
其实问题真不怪 AI，主要怪我们没把设计要求翻译成它能听懂的大白话。
要想让 Codex 不瞎发挥，最好的办法就是直接给它一套明明白白的设计规范。
今天特意整理了 10 条压箱底的 UI 设计规范，写界面、改组件或者搭后台时，直接塞进你的 Codex 提示词里！
一、指定明确的设计系统
如果你不给 Codex 限制一个明确的视觉背景，它就会把各种不搭调的组件和配色胡乱拼在一起。
不要对它说“做得好看点”这种话，直接给它一个你想要的大厂设计系统（比如 Tailwind UI、Ant Design）或者经典的产品风格（如 Linear 的极简暗黑风）。
这相当于给 AI 提供了一个“视觉安全底线”，它在写代码时，组件的圆角、阴影和基础调性就绝对不会跑偏。
推荐提示词：“请参考 [Tailwind UI] 的现代化极简风格，使用中性灰（Neutral Gray）和中等圆角（Rounded-md），保持组件风格高度一致。”
二、建立清晰的标题层级
一个页面里，用户应该一眼知道哪里是主标题，哪里是说明文字，哪里是辅助信息。
如果 H1、H2、正文、标签的字号和字重差距太小，界面就会变成一片灰。
Codex 生成页面时，经常会把所有文字做得差不多大，这时候就要明确要求它建立层级。
-
-
-
-
推荐提示词：“强化 H1、H2、正文和辅助文字的视觉层级，让用户能快速扫读页面。”
三、控制文本行宽
当一行文字太长时，用户读到下一行会很容易串行，尤其是在桌面端大屏上。
如果 Codex 默认把段落拉满整个容器，页面就会显得很散，阅读体验也会下降。
-
-
-
推荐提示词：“正文内容设置最大行宽，中文每行控制在 30-38 字左右，避免文本横向铺满。”
四、做好手机和电脑的自适应
结果你用手机一打开，页面根本没适配，字小得像蚂蚁，按钮挤在一起，甚至需要左右滑动屏幕才能勉强看全，体验非常糟糕。
其实不用去记那些复杂的像素数值和断点概念，我们只需要用大白话给 Codex 规定好“大屏并排，小屏叠放”的自适应规则：
-
电脑大屏下（横着看）： 视野宽，内容横着排。比如卡片并排展示 3 到 4 个，或者左边放侧边栏，右边放内容。
-
手机小屏下（竖着看）： 屏幕窄，内容竖着叠。卡片自动变成单列“一图一排”往下铺，原本的侧边栏自动折叠成顶部的一个小菜单按钮。
推荐提示词：“请做好手机和电脑的自适应排版。在电脑大屏上卡片横向并排展示；在手机小屏上，卡片自动变成单列垂直堆叠，并确保文字和按钮在手机上大到可以轻松用手指点击。”
五、给图片设置尺寸约束
页面最大宽度、卡片宽度、图片比例、表格区域、侧边栏，都需要有明确约束。
尤其是 AI 生成页面时，如果不限制容器尺寸，很容易在大屏上出现内容被拉得过宽、图片比例失控、卡片大小不一致的问题。
-
-
-
-
推荐提示词：“为所有主要容器、图片和卡片设置合理的最大宽度与比例约束，避免内容在大屏上失控拉伸。”
六、管理颜色和字体
一个页面里如果出现太多随机颜色、随机字号、随机圆角，后面就很难统一修改。
应该先定义基础 Tokens，比如主色、强调色、背景色、文字色、边框色、字号、圆角、阴影。
这样后续你让 Codex 修改风格时，它可以直接改变量，而不是满页面逐个找样式。
推荐提示词：“先抽象设计 Tokens，包括颜色、字号、圆角、阴影和间距，组件样式统一引用这些 Tokens。”
七、明确组件状态
很多 AI 生成 UI 看截图还行，一交互就露馅。
按钮不应该只有默认状态，输入框也不应该只有空白状态。
真实产品里，一个组件至少要考虑默认、悬停、选中、禁用、加载、错误等状态。
尤其是后台、表单、工具类页面，状态完整度直接决定这个界面能不能真的用。
推荐提示词：“为按钮、输入框、列表项和卡片补齐 hover、active、disabled、loading、empty、error 等常见状态。”
八、保证触摸目标尺寸
好看的界面不能只服务视力好、鼠标精准、屏幕够大的用户。
移动端所有可点击区域建议不小于 44×44px，桌面端按钮和图标按钮也要有足够可点击范围。同时要注意文字和背景的对比度，不要用太浅的灰字承载重要信息。
如果页面有表单，还要给输入框、错误提示、按钮文案留出清晰的可读结构。
推荐提示词：“所有可交互元素触摸目标不小于 44×44px，并保证文字对比度、键盘可访问性和错误提示清晰。”
九、统一圆角与阴影规范
AI 生成的界面容易显得“土味”和“脏乱”，很大程度上是因为圆角不匹配和阴影太重。想要精致感，需要让 AI 遵循两套规则：
-
圆角要嵌套： 遵循“外大内小”原则。外层容器圆角大（如 12px），内部组件圆角小（如 8px），视觉上才平行同心。
-
阴影要清爽： 别让 AI 自行手写高对比度的深色投影。强制其仅调用设计系统自带的微弱阴影，让界面更有呼吸感。
推荐提示词：“采用嵌套圆角（外框用 12px，内部组件用 8px）。仅允许调用系统默认的微弱阴影，严禁手写任何高对比度或深色投影。”
十、 运用 8 点网格间距系统
把页面边距、模块间距、卡片内边距、按钮间距统一成 8 的倍数，会让界面天然更稳定。常用数值可以控制在 8、16、24、32、48、64px 之间。
-
-
如果这两类间距混着用，页面很容易出现“看起来哪里都差一点”的松散感。
推荐提示词：“所有布局间距统一采用 8 点网格系统，优先使用 8、16、24、32、48、64px。”
用 Codex 做 UI，不能把审美完全交给 AI，需要把重复搭建、改样式、补状态、做响应式这些工作交给 AI。
你越会用设计语言描述需求，Codex 越能产出稳定、统一、可落地的界面。
下一次让它做页面时，不妨把上面这 10 条直接塞进提示词里，效果会比单纯说“做高级一点”靠谱很多。
