我用 ui-ux-pro-max，让 Codex 从 0 到 1 做出了一个“不含 AI 味”的网页
最近我在折腾一件很有意思的事：不是单纯让 AI “生成一个页面”，而是让它真的像一个靠谱的设计师 + 前端搭档一样，从设计系统、视觉语言、交互细节到代码落地，完整做出一个网页。
这次我用的是 ui-ux-pro-max 这个技能，再配合 Codex，最终做出来的效果和我之前直接“AI 一键生成页面”的体验完全不一样。最大的感受就一句话：
页面终于不像“AI 做的页面”了。
这篇文章就分享一下，我是怎么让 Codex 从 0 到 1 开发一个不含 AI 味网页的。
我将它部署了，大家可以看下：https://toolorbit.site/
一、为什么很多 AI 生成网页，一眼就能看出“AI 味”？
如果你也用过不少 AI 生成前端页面，应该会有类似感觉：
- 配色安全但没记忆点
- 排版工整但缺少节奏
- 卡片、按钮、区块都很“模板化”
- 文案很满，但重点不突出
- 动效是有的，但没情绪、没氛围
- 看起来“能用”，但不像一个认真打磨过的产品页
说白了，很多 AI 做网页时，本质上是在“拼常见组件”，而不是先建立一套明确的视觉和体验逻辑。
这也是为什么，页面虽然完整，但总让人觉得像：
“一个训练数据平均值页面。”
二、ui-ux-pro-max 和普通“让 AI 写页面”有什么区别？
我觉得它最有价值的一点，不是直接帮你生成代码，而是它会先帮你做一层设计系统推理。
根据这个技能的说明，它的工作流不是上来就写 HTML / Vue / React，而是先做这几步：
- 分析需求
- 生成设计系统
- 补充风格、配色、字体、UX 规则
- 再结合技术栈给出实现建议
也就是说，它不是先问“页面怎么写”，而是先问：
- 这个产品是什么类型？
- 适合什么视觉风格？
- 配色应该往什么方向走？
- 字体气质应该是什么？
- 哪些设计反模式要避开？
- 最后才是如何落地成代码
这一步非常关键。
因为去 AI 味的本质，不是让 AI 少生成一点，而是让 AI 先建立审美约束，再开始生成。
三、我实际是怎么让 Codex 开始干活的？
ui-ux-pro-max 这个技能里有一个我很喜欢的思路：先生成 Design System。
比如它推荐先运行类似这样的检索：
python3 skills/ui-ux-pro-max/scripts/search.py "landing page saas modern editorial" --design-system -p "Project Name"
这一步会先输出一套设计系统建议，包括：
- 适合的页面模式
- 视觉风格
- 配色方向
- 字体组合
- 特效建议
- 需要避免的反模式
如果你做的是官网、产品页、品牌页，这种流程特别有用。
因为很多人让 AI 写页面时，提示词通常只有：
帮我生成一个高级感官网
做一个现代简约风 landing page
写一个很有设计感的首页
这类提示词的问题是：太抽象了。
AI 会“理解”，但它的理解往往落到最安全、最通用的方案上。最后就是你看到的那种“挺好，但没灵魂”的页面。
而 ui-ux-pro-max 的作用，就是把这种抽象需求拆解成可执行的设计约束。
四、我总结了一套“去 AI 味”的实战方法
在这次配合 Codex 开发网页的过程中，我总结出一个特别有效的方法：
1. 先别急着让它写代码，先让它定调性
先告诉 Codex：
- 产品是什么
- 面向谁
- 希望用户看到页面时的第一感受是什么
- 你不想要什么
比如：
我要做一个产品官网，目标用户是独立开发者和小团队。
整体气质希望克制、干净、有一点编辑感。
不要做成那种大圆角、渐变按钮、满屏卡片、很像 AI 模板站的感觉。
这类描述，比“做个高级官网”有效太多。
2. 用 ui-ux-pro-max 先产出设计系统
这是最重要的一步。
因为它会帮你把“审美偏好”变成明确规则，比如：
- 该用什么配色逻辑
- 标题和正文字体怎么搭
- 页面结构应该偏品牌叙事还是偏转化
- 动效应该轻还是强
- 哪些套路要避开
一旦这套规则先出来，Codex 后面写代码时就不容易跑偏。
3. 明确告诉它：不要“AI 常见套路”
这一点我建议大家一定要写进提示词里。
比如可以直接说：
- 不要泛滥使用卡片
- 不要每一屏都一个大标题 + 副标题 + 按钮
- 不要默认紫色渐变和玻璃拟态
- 不要堆满徽章、评分、假数据和虚假社证
- 不要做成“模板市场既视感”
这其实是在给 AI 建立“负向约束”。
很多时候，不是它不会做好看，而是它默认走最常见、最稳妥的路径。你只要把这些“俗套路径”堵掉，它反而更容易做出有辨识度的东西。
4. 让 Codex 先讲页面结构，再写实现
我这次的体验里，一个特别明显的提升是：
先让 Codex 解释为什么这样布局，再让它落代码。
比如先让它输出：
- Hero 区为什么要这样组织信息
- 为什么主视觉应该轻一点
- 为什么这块用留白而不是卡片分组
- 为什么 CTA 应该克制而不是到处都是按钮
这样做有两个好处：
- 你能判断它到底是不是“理解了”
- 它后续写出来的代码会更稳定，不容易写着写着变成 AI 模板站
五、最后做出来的网页，为什么明显“没 AI 味”？
我复盘了一下，主要不是因为代码更高级了，而是因为它具备了下面这些特征：
- 有明确的视觉主次，而不是所有模块平均用力
- 有留白和节奏，而不是信息堆砌
- 字体、颜色、间距是一个系统，不是拼出来的
- 每个区块都有存在理由，不是为了“看起来完整”
- 动效是辅助表达，不是装饰噪音
- 页面更像真实产品，而不是“生成结果展示图”
简单说就是：
AI 味重的页面，往往是在“完成页面”；
AI 味轻的页面，重点是在“表达产品”。
这两者看起来很像，但做出来差别非常大。
六、如果你也想复现，我建议按这个流程来
这是我觉得最顺的一套流程：
- 先定义产品类型、目标用户、风格关键词
- 用
ui-ux-pro-max生成设计系统 - 补充检索配色、字体、UX 规则
- 把“不要什么”明确写给 Codex
- 先定页面结构和视觉逻辑
- 最后再让它进入具体代码实现
如果项目一开始就这样做，AI 不再只是“代码生成器”，而更像一个有设计约束的前端搭档。
七、我的结论
以前我总觉得，AI 做网页最大的问题是“不够像人做的”。
现在我更愿意换个说法：
不是 AI 做不出好网页，而是你不能只让它直接生成网页。
像 ui-ux-pro-max 这种技能的价值，就在于它帮你把“审美、结构、体验、实现”串成一个完整流程。再配合 Codex 去执行，出来的东西就不再是那种千篇一律的 AI 页面，而是真正有产品感、有设计逻辑的网页。
如果你也在用 Codex 做前端，我很推荐试试这个思路：
先做设计系统，再写页面。
这一步，真的能大幅降低 AI 味。