网页与 App · 摘录

10 条优化界面 UI 的提示词

10 条写给 AI 编程代理的界面规则，让它照着清理网页或 App 的文案、颜色、字号和对齐。

作者: Zayn Hao ↗ (@ZaynHao)
适用模型／工具: Codex · Claude Code
许可: 未声明 · 摘录
原文语言: zh
用途: 网页与 App

1. 不要使用中点 “·”作为文案的分隔符。如果有，移除它。
2. 不要在界面添加冗余的解释性描述文本，这会弄脏 UI 界面，还会浪费用户的注意力。
3. review 界面文案，尽量使其描述符合当前界面面相的人群，容易理解但不要过于口语化，长短适合其功能场景，不要冗余和随意造词。

去作者原帖看完整提示词 ↗

全文转载许可尚未核实，本站只展示摘录。

署名要求：复用时请保留作者名和原作出处。作者: Zayn Hao ｜原作出处 ↗

怎么用

适用模型／工具: Codex · Claude Code

把 10 条整段发给你的编程代理，让它在现有界面上逐条检查和修改。

它能做什么

这是 Zayn Hao 在 X 上分享的一套界面优化提示词，一共 10 条，作者说发给 Codex 或 Claude Code 就能用来改界面。每条只管一件事。前三条是去掉中点分隔符、删掉多余的解释文字、按使用人群重写界面文案。后面七条依次讲颜色、对齐、边框、动效、字号、交互和圆角阴影，例如颜色换成 Radix UI Colors 并照它的规范使用，边框用 0.5px，动效以 ease-out 250ms 为基础，文字大小不超过 4 种、最小 12px。作者说其中一些带有个人经验。它特别的地方是每条都写成一句能直接执行的规则，不少还给了具体数值，编程代理可以照着逐条检查。把 10 条整段发给你的编程代理，让它在现有界面上逐条检查和修改。

适合谁

用 Codex、Claude Code 这类 AI 编程代理做网页或 App，想让界面更干净的开发者和独立做产品的人。

使用前提

作者写的是 Codex 和 Claude Code，代理会直接改你项目里的代码，改之前先提交或备份。第 4 条要用到开源配色 Radix UI Colors，项目里还没有的话要先加进来。这些规则带着作者的个人偏好，例如 0.5px 边框和 12px 最小字号，要按你的用户和屏幕自己判断。作者没有声明转载许可，本站只展示前 3 条摘录，完整 10 条请看作者原帖。

请遵守所列许可，不要用生成内容复刻他人作品或真人肖像。

效果示例

以上根据作者公开发布的内容整理，本站没有实际测试。