# 我用 `ui-ux-pro-max`，让 Codex 从 0 到 1 做出了一个“不含 AI 味”的网页

最近我在折腾一件很有意思的事：不是单纯让 AI “生成一个页面”，而是让它真的像一个靠谱的设计师 + 前端搭档一样，从设计系统、视觉语言、交互细节到代码落地，完整做出一个网页。

这次我用的是 `ui-ux-pro-max` 这个技能，再配合 Codex，最终做出来的效果和我之前直接“AI 一键生成页面”的体验完全不一样。最大的感受就一句话：

**页面终于不像“AI 做的页面”了。**

这篇文章就分享一下，我是怎么让 Codex 从 0 到 1 开发一个**不含 AI 味**网页的。

我将它部署了，大家可以看下：[https://toolorbit.site/](https://toolorbit.site/)

---

## 一、为什么很多 AI 生成网页，一眼就能看出“AI 味”？

如果你也用过不少 AI 生成前端页面，应该会有类似感觉：

- 配色安全但没记忆点
- 排版工整但缺少节奏
- 卡片、按钮、区块都很“模板化”
- 文案很满，但重点不突出
- 动效是有的，但没情绪、没氛围
- 看起来“能用”，但不像一个认真打磨过的产品页

说白了，很多 AI 做网页时，本质上是在“拼常见组件”，而不是先建立一套明确的视觉和体验逻辑。

这也是为什么，页面虽然完整，但总让人觉得像：

**“一个训练数据平均值页面。”**

---

## 二、`ui-ux-pro-max` 和普通“让 AI 写页面”有什么区别？

我觉得它最有价值的一点，不是直接帮你生成代码，而是它会先帮你做一层**设计系统推理**。

根据这个技能的说明，它的工作流不是上来就写 HTML / Vue / React，而是先做这几步：

1. 分析需求
2. 生成设计系统
3. 补充风格、配色、字体、UX 规则
4. 再结合技术栈给出实现建议

也就是说，它不是先问“页面怎么写”，而是先问：

- 这个产品是什么类型？
- 适合什么视觉风格？
- 配色应该往什么方向走？
- 字体气质应该是什么？
- 哪些设计反模式要避开？
- 最后才是如何落地成代码

这一步非常关键。

因为**去 AI 味的本质，不是让 AI 少生成一点，而是让 AI 先建立审美约束，再开始生成。**

---

## 三、我实际是怎么让 Codex 开始干活的？

`ui-ux-pro-max` 这个技能里有一个我很喜欢的思路：**先生成 Design System。**

比如它推荐先运行类似这样的检索：

```bash
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 应该克制而不是到处都是按钮

这样做有两个好处：

1. 你能判断它到底是不是“理解了”
2. 它后续写出来的代码会更稳定，不容易写着写着变成 AI 模板站

---

## 五、最后做出来的网页，为什么明显“没 AI 味”？

我复盘了一下，主要不是因为代码更高级了，而是因为它具备了下面这些特征：

- 有明确的视觉主次，而不是所有模块平均用力
- 有留白和节奏，而不是信息堆砌
- 字体、颜色、间距是一个系统，不是拼出来的
- 每个区块都有存在理由，不是为了“看起来完整”
- 动效是辅助表达，不是装饰噪音
- 页面更像真实产品，而不是“生成结果展示图”

简单说就是：

**AI 味重的页面，往往是在“完成页面”；  
AI 味轻的页面，重点是在“表达产品”。**

这两者看起来很像，但做出来差别非常大。

---

## 六、如果你也想复现，我建议按这个流程来

这是我觉得最顺的一套流程：

1. 先定义产品类型、目标用户、风格关键词
2. 用 `ui-ux-pro-max` 生成设计系统
3. 补充检索配色、字体、UX 规则
4. 把“不要什么”明确写给 Codex
5. 先定页面结构和视觉逻辑
6. 最后再让它进入具体代码实现

如果项目一开始就这样做，AI 不再只是“代码生成器”，而更像一个有设计约束的前端搭档。

---

## 七、我的结论

以前我总觉得，AI 做网页最大的问题是“不够像人做的”。

现在我更愿意换个说法：

**不是 AI 做不出好网页，而是你不能只让它直接生成网页。**

像 `ui-ux-pro-max` 这种技能的价值，就在于它帮你把“审美、结构、体验、实现”串成一个完整流程。再配合 Codex 去执行，出来的东西就不再是那种千篇一律的 AI 页面，而是真正有产品感、有设计逻辑的网页。

如果你也在用 Codex 做前端，我很推荐试试这个思路：

**先做设计系统，再写页面。**

这一步，真的能大幅降低 AI 味。

---

最近我在折腾一件很有意思的事：不是单纯让 AI “生成一个页面”，而是让它真的像一个靠谱的设计师 + 前端搭档一样，从设计系统、视觉语言、交互细节到代码落地，完整做出一个网页。

我用 ui-ux-pro-max，让 Codex 从 0 到 1 做出了一个“不含 AI 味”的网页

前端

开发工具

使用ui-ux-pro-max技能配合Codex，从设计系统到代码落地打造无AI味的网页。通过建立视觉约束、明确风格方向、避免常见AI模板套路，最终呈现有产品感和设计逻辑的页面。分享实战方法：先定调性、生成设计系统、明确负面约束，让AI成为有设计思维的前端搭档。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我用 ui-ux-pro-max，让 Codex 从 0 到 1 做出了一个“不含 AI 味”的网页-腾讯云开发者社区-腾讯云

我用 ui-ux-pro-max，让 Codex 从 0 到 1 做出了一个“不含 AI 味”的网页

我用 ui-ux-pro-max，让 Codex 从 0 到 1 做出了一个“不含 AI 味”的网页

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐