如何让AI生成的设计脱离“AI味”
✏️
什么是“AI味”
所谓的“AI味”，就是那种一眼就能看出是AI生成的网站。界面样式和内容都千篇一律，比如配色死板，蓝紫色渐变用到吐，还有布局死板、字体死板、满屏的Emoji表情图标、基本没有真实图片、文字风格也比较刻板。用户看这些网站时，就一个感觉“我在跟机器人聊天”。
为什么网站有“AI味”
其实核心原因就俩字：求稳
举个例子，为啥AI那么爱用蓝紫渐变色呢，因为AI的训练数据里，很多现代网站采用Tailwind样式库，而这个库的默认主色调就是蓝紫色。AI在学习数亿行代码时，这些颜色的出现频率是最高的，于是AI就会认为：现代化网站 ≈ 蓝紫色渐变。并且AI学会了一个生存法则：用最常见的 = 最不容易出错的。所以当你让AI开发一个现代化的网站时，AI为了求稳，就会选择使用蓝紫渐变色。
那怎么破局呢？
很简单，要从“请求者”变成“指挥官”，不要只说需求，而是要明确要求，用强有力的约束条件，逼着AI偏离它的舒适区
去“AI味”妙招
1、参考真实网站
你在在网上冲浪时，看到了好看的网站，可以让AI直接学着做
你只需要跟AI说“请访问XXX网站，提取这个网站的配色方案、字体选择和布局结构，然后生成类似风格的网站”
或者上传网页截图“帮我开发一个网站，界面设计要和我提供的截图中的网页设计一模一样”
2、Skills
这里分享几个作者常用的几个AI Agent Skills
-
frontend-design
-
figma
-
algorithmic-art
-
shadcn
-
theme-factory
-
web-design-guidelines
3、优化你的提示词
用AI Agent工具开发时，不要只写功能要求了，比如“帮我编写一个XXX产品介绍网页，要详细介绍XXX产品”
要明确需求，这样写只会让AI瞎猜灵感，它无法完全理解的意思，它设计的往往不是你理想中的样式，这样的描述太模糊、没有结构、没有约束
以下为提示词示例，你可以稍作修改使用：
你现在是一名资深的前端开发工程师 + 产品设计师，请帮我从0到1编写一个完整的「XXX产品介绍网页」。
【一、项目目标】
创建一个高质量、具有商业级展示效果的产品介绍网页，用于展示“XXX产品”，要求页面视觉高级、结构清晰、信息完整，适合用于官网或宣传落地页。
【二、页面整体要求】
1. 页面类型：单页（Landing Page）
2. 风格要求：简洁 / 高级 / 现代科技感（可根据产品类型自动调整）
3. 响应式设计：必须兼容 PC + 平板 + 手机
4. 技术要求：
- 使用 HTML + CSS + JavaScript（或可选：React / Vue，如果更合适）
- 代码结构清晰、可直接运行
- 样式不要杂乱，避免重复代码
5. 动效要求：
- 适当加入滚动动画（如淡入、上移）
- 按钮、卡片需有 hover 效果
- 不要过度动画，保持高级感
【三、页面结构（必须完整实现）】
请严格按照以下模块生成页面：
1. 顶部导航栏（Header）
- Logo（可用“XXX”占位）
- 导航菜单（如：产品介绍 / 功能 / 优势 / 价格 / 联系）
- 固定在顶部（sticky）
2. 首屏Banner（Hero Section）
- 产品核心标题（突出卖点）
- 一句简短描述（slogan）
- 主视觉区域（可用占位图）
- CTA按钮（如：立即体验 / 了解更多）
3. 产品介绍（About Section）
- 详细介绍“XXX产品”的用途、背景、解决的问题
- 图文排版
4. 核心功能（Features Section）
- 至少列出4~6个核心功能点
- 每个功能包含：标题 + 描述 + 图标/图片
5. 产品优势（Advantages Section）
- 对比传统方案
- 突出差异化优势（性能、体验、价格等）
6. 使用场景（Use Cases）
- 展示产品适用的实际场景（2~4个）
- 卡片式布局
7. 用户评价 / 案例（Testimonials）
- 至少2~3条模拟评价
- 可包含头像占位
8. 价格/套餐（Pricing，可选但建议）
- 分层展示（基础版 / 高级版等）
9. CTA行动区（Call To Action）
- 强引导用户点击（注册 / 购买 / 联系）
10. 页脚（Footer）
- 公司信息（占位）
- 联系方式（占位）
- 社交媒体链接（占位）
【四、内容生成要求】
1. 所有文案必须完整生成，不要留“待补充”
2. “XXX产品”相关内容要合理虚构，但要逻辑真实、专业
3. 文案风格偏产品经理 + 市场营销风格
【五、设计要求】
1. 使用统一设计语言（颜色、间距、字体）
2. 推荐使用：
- 柔和渐变 / 卡片设计 / 圆角
3. 页面要有“高级感”，避免廉价UI
【六、输出要求】
1. 输出完整代码（HTML + CSS + JS 或框架代码）
2. 所有代码写在一个文件中（或明确结构）
3. 可直接复制运行
4. 代码中添加必要注释，方便理解
【七、禁止事项】
- 不要只给结构说明，必须输出完整代码
- 不要省略模块
- 不要使用过时或低质量UI
请直接开始生成最终网页代码。
或者还有一种邪修办法——用AI来完善发给AI的提示词
作者使用AI Agent的顺序（假设已经有个产品目标）：
- 用ChatGPT出提示词
你是一位专业的提示词工程师（Prompt Engineer），擅长将模糊、不完整的需求，优化为可以让 AI Agent 高质量执行的提示词。
我会给你一段“原始提示词”，它存在表达不清、细节不足、结构混乱的问题。
你的任务是：
1. 完全理解我的真实意图（不要只做表面润色）
2. 补全缺失的关键细节（包括功能、逻辑、约束、边界情况）
3. 重构提示词结构，让 AI Agent 更容易理解和执行
4. 明确输出格式（非常重要）
5. 避免歧义，让结果尽可能稳定、可复现
优化要求：
- 提示词必须结构清晰（建议使用分点或模块化）
- 语言必须具体、明确，避免模糊词（如“好看一点”“优化一下”）
- 必须加入约束条件（例如：不能随意更改UI结构）
- 如果是开发类任务，要补充技术细节（如组件、交互逻辑）
- 如果有歧义，请帮我做合理假设，并写入提示词中
输出格式要求：
请输出两部分：
【优化后的提示词（可直接使用）】
【优化说明（你具体优化了什么）】
以下是我的原始提示词：
---
（把你的提示词粘在这里）
---
- 将生成出来的提示词发给AI Agent工具，然后在提示词最后加上
你对开发有什么不理解的要直接向我提问，不要自己猜测，更不要为我的项目添油加醋！