为什么 AI 生成的页面总是紫色？以及如何“去 AI 味”
generate by chatGPT
为什么 AI 生成的页面总是紫色？以及如何“去 AI 味”
最近刷到一个有趣的梗：Tailwind 创始人调侃地为当年把 bg-indigo-500 设成默认按钮色道歉——因为现在几乎所有 AI 生成的 UI 都是那种“熟悉的紫色”。你是不是也有同样的感觉？一眼 AI，大片紫、渐变卡片、圆角阴影三件套。
这不是错觉，这是模式收敛。
当你用类似这样的提示词：
站在产品经理和设计师的角度，使用 HTML 设计一个番茄工作法 iOS 应用原型图……
AI 会优先选择它训练数据中“最常见、最安全、最不出错”的组合：Tailwind + 紫色主色 + 柔和渐变 + 大圆角 + 轻阴影。因为这是当前主流开源组件库和 SaaS 产品的审美均值。
如果你不指定风格，它就会回到“统计平均值”。这就是紫色泛滥的根本原因。
一、为什么 AI 会收敛到紫色？
原因可以拆成三个层面。
第一，训练数据分布。
Tailwind、Shadcn、Radix、各类 SaaS 模板大量使用 Indigo / Violet 系主色。模型学习到的“现代 UI”≈“紫色卡片 + 柔和渐变”。
第二，风险最小化。
紫色既不像红色那么激进，也不像绿色那样有语义歧义（成功/错误），是一个“中性偏科技感”的安全选择。
第三，提示词太宽泛。
“现代化”“精美”“完整”“可直接实现”这些词没有具体约束，模型只能调用默认范式。
本质不是 AI 审美差，而是你没有给它风格边界。
二、如何让 AI 不再生成“紫色默认模板”
核心思路：把抽象词换成可执行设计约束。
不要说“现代化”，要说：
- 主色：#0F172A 深灰蓝
- 辅助色：#22C55E 番茄计时状态绿色
- 强调色：#F97316 橙色
- 禁止使用紫色系
不要说“iOS 风格”，要说：
- 使用 iOS 17 Human Interface Guidelines 风格
- 采用大标题 + 分组卡片
- 模糊背景 + 半透明材质
- 使用 SF Pro 字体（或等价替代）
不要说“精美完整”，要说：
必须包含以下状态：
- 未开始
- 计时中
- 暂停
- 结束统计页
明确列出组件结构
示例改写提示词：
使用原生 HTML + CSS（不依赖 Tailwind CDN），设计一个番茄工作法 iOS 风格应用原型。
主色为 #22C55E，禁止使用紫色系。
采用玻璃拟态（glassmorphism）设计，圆角 16px，阴影为柔和扩散阴影。
字体使用本地 Inter 或 SF Pro 替代。
页面需包含：计时首页、计时中状态、暂停弹窗、统计页。
所有组件需可直接供 Vue 3 项目拆分实现。
当你给出明确的视觉约束，AI 的输出会明显提升。
三、进阶玩法：定义“设计技能（Skill）”
与其每次重写提示词，不如抽象成一套“设计规范模板”。
你可以建立一个本地 prompt 模板，例如：
1 | Design System: |
以后所有 UI 生成都附带这段规范。
这本质上是“定义 Agent Skill”，而不是每次临时对话。
四、如何“二开”AI 生成的项目
如果已经生成了一个“紫色 Tailwind 模板”，怎么改？
建议按下面步骤做：
1. 去框架化（可选）
如果你希望长期维护：
- 去掉 CDN
- 把 Tailwind 样式提取为变量
- 或重写为 SCSS / CSS Modules
2. 抽离 Design Token
建立：
1 | :root { |
替换所有硬编码的 bg-indigo-500。
3. 组件化重构（Vue）
拆分结构：
1 | /components |
把原始 HTML 拆成 Vue 组件。
4. 建立状态机
番茄钟不是静态页面，它是状态驱动：
1 | idle -> running -> paused -> finished |
用 Vue ref 或 pinia 建立状态流，而不是靠 DOM 切换。
五、真正去 AI 味的方法
“去 AI 味”不是换颜色，而是增加“选择”。
AI 模板最大的问题是：
- 所有按钮一样
- 所有卡片一样
- 所有阴影一样
真实设计不会这么均匀。
你可以：
- 给主 CTA 更强对比
- 给统计页用不同布局结构
- 刻意打破 8px 统一圆角
- 控制留白，而不是平均分布
设计的灵魂在于“节奏差异”，而不是整齐。
六、总结
AI 生成紫色页面不是 bug，而是统计平均。
当提示词过于抽象时，模型会回到默认模板。
想要真正定制化 UI，你必须给出：
- 明确色彩体系
- 明确设计风格
- 明确状态结构
- 明确技术栈限制
从“让 AI 设计”转变为“让 AI 按规范实现设计”。
这样生成的页面，才会真正变成你的作品，而不是一眼 AI。