10 条 Codex 设计规范，提升 AI 出 UI 界面产出质量！

经常用 Codex 的朋友都知道，这玩意儿干活速度确实没得说。但最让人抓狂的是——它有时候太有自己的主见了。比如你随口丢一句“帮我把界面做得高级一点”，结果它一顿操作猛如虎，给你堆出一张看似花里胡哨的页面，质量却普普通通。问题真不怪 AI，主要怪咱们没把设计要求翻译成它能听懂的大白话。要想让 Codex 不瞎发挥，最好的办法就是直接给它一套明明白白的设计规范。今天整理了 10 条压箱底的 UI 设计规范，写界面、改组件或者搭后台时，直接塞进你的 Codex 提示词里就行。

一、指定明确的设计系统

如果你不给 Codex 限制一个明确的视觉背景，它就会把各种不搭调的组件和配色胡乱拼在一起。别对它说“做得好看点”这种话，直接给它一个你想要的大厂设计系统（比如 Tailwind UI、Ant Design）或者经典的产品风格（如 Linear 的极简暗黑风）。这相当于给 AI 提供了一个“视觉安全底线”，它在写代码时，组件的圆角、阴影和基础调性就绝对不会跑偏。

推荐提示词：“请参考 [Tailwind UI] 的现代化极简风格，使用中性灰（Neutral Gray）和中等圆角（Rounded-md），保持组件风格高度一致。”

二、建立清晰的标题层级

一个页面里，用户应该一眼知道哪里是主标题，哪里是说明文字，哪里是辅助信息。如果 H1、H2、正文、标签的字号和字重差距太小，界面就会变成一片灰。Codex 生成页面时，经常会把所有文字做得差不多大，这时候就要明确要求它建立层级。比较稳的做法是：

1. H1 用最大字号和更高字重
2. H2 用中等字号承接分区
3. 正文保持舒适阅读
4. 辅助信息降低字号和颜色权重

推荐提示词：“强化 H1、H2、正文和辅助文字的视觉层级，让用户能快速扫读页面。”

三、控制文本行宽

当一行文字太长时，用户读到下一行会很容易串行，尤其是在桌面端大屏上。如果 Codex 默认把段落拉满整个容器，页面就会显得很散，阅读体验也会下降。比较舒服的范围是：

1. 英文每行约 60-75 个字符
2. 中文每行约 30-38 个字
3. 正文容器最大宽度约 600-720px

推荐提示词：“正文内容设置最大行宽，中文每行控制在 30-38 字左右，避免文本横向铺满。”

四、做好手机和电脑的自适应

AI 在写页面时，默认通常只管大电脑屏幕。结果你用手机一打开，页面根本没适配，字小得像蚂蚁，按钮挤在一起，甚至需要左右滑动屏幕才能勉强看全，体验非常糟糕。其实不用去记那些复杂的像素数值和断点概念，用大白话给 Codex 规定好“大屏并排，小屏叠放”的自适应规则就行：

1. 电脑大屏下（横着看）：视野宽，内容横着排。比如卡片并排展示 3 到 4 个，或者左边放侧边栏，右边放内容。
2. 手机小屏下（竖着看）：屏幕窄，内容竖着叠。卡片自动变成单列“一图一排”往下铺，原本的侧边栏自动折叠成顶部的一个小菜单按钮。

推荐提示词：“请做好手机和电脑的自适应排版。在电脑大屏上卡片横向并排展示；在手机小屏上，卡片自动变成单列垂直堆叠，并确保文字和按钮在手机上大到可以轻松用手指点击。”

五、给图片设置尺寸约束

一个成熟的界面，不应该任由内容无限拉伸。页面最大宽度、卡片宽度、图片比例、表格区域、侧边栏，都需要有明确约束。尤其是 AI 生成页面时，如果不限制容器尺寸，很容易在大屏上出现内容被拉得过宽、图片比例失控、卡片大小不一致的问题。重点约束这几项：

1. 页面主容器最大宽度
2. 图片固定比例或最大高度
3. 卡片最小和最大宽度
4. 表格、列表、输入区域的可滚动范围

推荐提示词：“为所有主要容器、图片和卡片设置合理的最大宽度与比例约束，避免内容在大屏上失控拉伸。”

六、管理颜色和字体

一个页面里如果出现太多随机颜色、随机字号、随机圆角，后面就很难统一修改。应该先定义基础 Tokens，比如主色、强调色、背景色、文字色、边框色、字号、圆角、阴影。这样后续你让 Codex 修改风格时，它可以直接改变量，而不是满页面逐个找样式。

推荐提示词：“先抽象设计 Tokens，包括颜色、字号、圆角、阴影和间距，组件样式统一引用这些 Tokens。”

七、明确组件状态

很多 AI 生成 UI 看截图还行，一交互就露馅。按钮不应该只有默认状态，输入框也不应该只有空白状态。真实产品里，一个组件至少要考虑默认、悬停、选中、禁用、加载、错误等状态。尤其是后台、表单、工具类页面，状态完整度直接决定这个界面能不能真的用。

推荐提示词：“为按钮、输入框、列表项和卡片补齐 hover、active、disabled、loading、empty、error 等常见状态。”

八、保证触摸目标尺寸

好看的界面不能只服务视力好、鼠标精准、屏幕够大的用户。移动端所有可点击区域建议不小于 44×44px，桌面端按钮和图标按钮也要有足够可点击范围。同时要注意文字和背景的对比度，不要用太浅的灰字承载重要信息。如果页面有表单，还要给输入框、错误提示、按钮文案留出清晰的可读结构。

推荐提示词：“所有可交互元素触摸目标不小于 44×44px，并保证文字对比度、键盘可访问性和错误提示清晰。”

九、统一圆角与阴影规范

AI 生成的界面容易显得“土味”和“脏乱”，很大程度上是因为圆角不匹配和阴影太重。想要精致感，需要让 AI 遵循两套规则：

1. 圆角要嵌套：遵循“外大内小”原则。外层容器圆角大（如 12px），内部组件圆角小（如 8px），视觉上才平行同心。
2. 阴影要清爽：别让 AI 自行手写高对比度的深色投影。强制其仅调用设计系统自带的微弱阴影，让界面更有呼吸感。

推荐提示词：“采用嵌套圆角（外框用 12px，内部组件用 8px）。仅允许调用系统默认的微弱阴影，严禁手写任何高对比度或深色投影。”

十、运用 8 点网格间距系统

界面不精致，很多时候不是颜色不对，而是间距乱了。把页面边距、模块间距、卡片内边距、按钮间距统一成 8 的倍数，会让界面天然更稳定。常用数值可以控制在 8、16、24、32、48、64px 之间。需要特别区分：

1. padding 是元素内部内容到边框的距离
2. margin 是元素和元素之间的距离

如果这两类间距混着用，页面很容易出现“看起来哪里都差一点”的松散感。

推荐提示词：“所有布局间距统一采用 8 点网格系统，优先使用 8、16、24、32、48、64px。”

用 Codex 做 UI，不能把审美完全交给 AI，需要把重复搭建、改样式、补状态、做响应式这些工作交给 AI。你越会用设计语言描述需求，Codex 越能产出稳定、统一、可落地的界面。下一次让它做页面时，不妨把上面这 10 条直接塞进提示词里，效果会比单纯说“做高级一点”靠谱很多。