# Vibe Coding 网站美化技巧

> 7 个方法，让你的网站告别 AI 味儿



你好，我是鱼皮。

先做个小测试，下面这几个网站，你能看出哪些是 AI 做的吗？

![](https://pic.yupi.icu/1/1769600749428-08e8524c-c71c-4ef0-b72f-feec296f5684.png)

![](https://pic.yupi.icu/1/1769600766773-a2f0782c-704f-4b17-a91a-bce1f3ee4b49.png)

![](https://pic.yupi.icu/1/1769600778173-2c16a9e4-4b3b-4d5e-9bfa-2c3f1450ab04.png)



公布答案：**全都是 AI 做的！**

![](https://pic.yupi.icu/1/1769600732342-59517bbf-7b63-4a3c-9979-76529d846259.png)

是不是觉得有点意外？

“为啥我用 AI 搓出来的网站一股子 AI 味儿？而这些网站看起来干净很多呢？”

这就是接下来我要分享的：

- 什么是 AI 编程的 AI 味儿？
- 为什么网站会有 AI 味儿？
- 怎么去除网站的 AI 味儿？

学会这些技巧后，你也能让 AI 做出更精美的网站。

⭐️ 推荐观看本文对应视频版，效果更明显：
https://bilibili.com/video/BV1QF6EBiErM


## 什么是 AI 味儿？

所谓的 AI 味儿，就是那种一眼就能看出是 AI 生成的网站，界面样式和内容风格都千篇一律。

![](https://pic.yupi.icu/1/1769600840225-3990db3e-7527-436e-a5bc-2a716fd287ab.png)

1）配色死板：蓝紫渐变色用到吐。

2）布局死板：首屏放个大标题，下面三个卡片并排。

3）字体死板：基本上就是 Inter、Roboto 等几种固定的字体。

4）Emoji 泛滥：什么 🐟4️⃣🐶 之类的，满屏幕都是表情图标。

5）内容空洞：基本没有真实图片，文字风格也比较刻板。

用户看这些网站时就一个感觉：我在跟机器人聊天。

![](https://pic.yupi.icu/1/1769600858180-10f1ed0d-f92d-47bd-b88d-9f708c3d1b09.png)



## 为什么网站会有 AI 味儿？

说了这么多问题，到底为啥会这样？

核心原因就俩字：**求稳**。

举个例子，为啥 AI 那么爱用蓝紫渐变色？

因为 AI 的训练数据里，很多现代网站采用 Tailwind 样式库，而这个库的默认主色调就是蓝紫色。AI 在学习数亿行代码时，这些颜色出现的频率是最高的，于是 AI 就认为 “现代化网站 ≈ 蓝紫色渐变”。

![](https://pic.yupi.icu/1/1769600882890-89e4170f-00bf-44b5-9f17-1ebde2d3351f.png)

并且 AI 学会了一个生存法则：**用最常见的 = 最不容易出错**。

所以当你让 AI “开发一个现代化的网站” 时，AI 为了求稳，就会选择使用蓝紫渐变色。

**那怎么破局？**

很简单，从 “请求者” 变成 “指挥官”。

不要只说需求：给我做个网站

而是要明确要求：用深灰色背景、手绘图标、不对称布局、拒绝蓝紫色。

用强有力的约束条件，逼着 AI 偏离它的舒适区。

![](https://pic.yupi.icu/1/1769600923212-e36b1723-7a7d-4772-a757-3f513a96407c.jpeg)



## 怎么去除网站的 AI 味儿？

下面分享我总结的 7 个方法，保证让你的网站摆脱 AI 味儿。

### 方法 1、让 AI 参考真实网站

最简单粗暴的一招，你看到好看的网站，直接让 AI 学。

有 4 种具体的做法：

1）如果你使用 Cursor 或者 Claude Code 等 AI 编程工具，或者利用 [Firecrawl MCP](https://www.firecrawl.dev/)，让 AI 能够直接读取网页。

![](https://pic.yupi.icu/1/1769600968915-1e80b6a6-53d2-40dd-9458-b5f8b11459c4.png)

你只需要跟 AI 说：

```markdown
请访问 ai.codefather.cn，提取它的配色方案、字体选择和布局结构，然后生成类似风格的网站。
```

AI 会自己去看那个网站，然后学着做。

![](https://pic.yupi.icu/1/1769601048258-79c99e12-f960-460d-b66f-b0420bc4619a.png)



2）如果 AI 大模型支持图片理解，你还可以把网页截图提供给 AI，搭配文字能让 AI 还原网站更准确。

![](https://pic.yupi.icu/1/1769601076313-ac8b9644-1dc1-484a-b9ea-94d0828bb8a3.png)

效果如图：

![](https://pic.yupi.icu/1/1769601123122-81bd55a5-5408-4472-b70a-e0b98fa68547.png)



3）如果你用的 AI 大模型不支持图片理解、纯文本理解又不到位，可以先利用 **截图转代码** 工具，比如 [Screenshot to Code](https://github.com/abi/screenshot-to-code)。

![](https://pic.yupi.icu/1/1769601172971-c6d47b5d-49c9-4b8e-86f2-55b2c3267e75.png)

把喜欢的网站截个图，上传上去，它直接给你转成代码。

![](https://pic.yupi.icu/1/1769601152959-ac25b585-b1e0-4b95-94a3-07acc9a2eb4e.png)

然后你再把代码喂给 AI，让它参考着做。

![](https://pic.yupi.icu/1/1769601184992-01d76651-b0c7-4987-bf51-fc3f515bd917.png)

准确度会高很多，抄样式肯定不如抄代码来的直接。

![](https://pic.yupi.icu/1/1769601222476-2dcde723-c897-4c6c-9d56-1e3ab50ac05f.png)



4）此外，还可以直接套用现成的网站模板或者 GitHub 上的开源项目。

推荐几个不错的网站模板资源：

- [HTML5 UP](https://html5up.net/)：免费的响应式网站合集，极简风格
- [WordPress 官方主题库](https://cn.wordpress.org/themes/)：1 万多个免费主题，啥类型都有
- [Start Bootstrap](https://startbootstrap.com/)：Bootstrap 生态的免费网站模板库
- [Colorlib](https://colorlib.com/wp/free-wordpress-themes/)：提供不少免费的网站模板，设计精美

这些网站模板都有源代码，你选个不错的下载下来，把代码丢给 AI 让它去改改内容就好了，样式基本准确还原。

![](https://pic.yupi.icu/1/1769601317176-fc548cbf-fecb-4ae7-aa9e-6f573a20d59a.png)



### 方法 2、设计优先开发

这个方法特别适合做大项目。

简单来说，就是 **不要上来就让 AI 梭哈整个项目**。

比如传统做法是这样的：帮我做一个包含用户系统、后台管理的完整 SaaS 平台。

然后 AI 哗啦哗啦给你生成几十个文件，结果做完后发现页面风格不对，重新返工，浪费 Tokens。

![](https://pic.yupi.icu/1/1769601339363-dcbc5190-fdfe-4a1c-b231-885545a855bc.png)

推荐的做法是 **拆分步骤**，先让 AI 做个前端网站 Demo，纯静态页面就好。对设计满意了之后，再让 AI 基于 Demo 代码，用同样的风格开发完整项目。

你像我生成出下面这种破玩意，肯定是不能让 AI 继续开发的！

![](https://pic.yupi.icu/1/1769601353690-2df4bbca-7140-446c-af0e-f7111bc9ea98.png)



这里推荐一个很强大的 AI 设计工具 [Google Stitch](https://stitch.withgoogle.com/)。

你只需要输入一段描述，它就能生成专业的界面原型。

![](https://pic.yupi.icu/1/1769601399879-e2a70816-4e5a-4da3-b5a5-397e9c9f596f.png)

甚至你在纸上画个草图，拍照上传，它都能识别出来转成代码。

![](https://pic.yupi.icu/1/1769601433733-0fa47423-cb67-4860-993d-17fb4a463d69.png)

你还可以人工修改设计的主题风格，或者人工标注要修改的部分，让 AI 帮你快速调整。

![](https://pic.yupi.icu/1/1769601453928-09f4b942-4cb6-4df6-a2f8-047008f6011d.png)

设计完成后，导出文件或下载代码，再喂给 Cursor 等 AI 编程工具继续开发。这样风格就定下来了，不会跑偏。

![](https://pic.yupi.icu/1/1769601475052-01de6924-0e89-4ad2-b0bc-cd45e778509e.png)

当然，如果你会用 [Figma](https://www.figma.com/) 这种更专业的设计工具，你可以先在 Figma 里把网站设计得清清楚楚。

![](https://pic.yupi.icu/1/1769601491432-a98ef003-f613-43e8-9333-b709df447703.png)

然后搭配 [Figma MCP](https://github.com/GLips/Figma-Context-MCP) 扩展，让 AI 直接读取你的 Figma 设计文件，按照设计生成代码。

![](https://pic.yupi.icu/1/1769601504433-d43ef9b4-ca40-49c0-977c-170ab43af4f8.png)

此外，还有个工具叫 [Onlook](https://www.onlook.ai/)，号称为设计师准备的 Cursor，可以让设计师直接可视化编辑网页代码，设计和开发无缝衔接。

![](https://pic.yupi.icu/1/1769518652135-ad6e4342-4a01-483e-8d42-bd5e38c53550.png)



### 方法 3、丰富网站图片

一般 AI 生成的网站是没有图片的，我们可以通过添加图片让网站更个性化。

没必要让 AI 从 0 开始生图，只要告诉 AI 去主动找图、到哪里找图就好。

图片资源主要包括插画、图标、真实照片和占位图这几类。

1）插画库 [unDraw](https://undraw.co/)：有非常多免费的 SVG 插画，而且可以自定义颜色。

![](https://pic.yupi.icu/1/1769601537109-69845405-15c2-49c8-be61-ab07d9dd60ab.png)

2）图标库 [Iconify](https://iconify.design/)：20 多万个免费矢量图标

![](https://pic.yupi.icu/1/1769601552661-0984adc0-a931-434f-bf6b-bebdcfcf7585.png)

3）真实照片 [Pexels](https://www.pexels.com/)：免费高质量图库，还提供了 API 快速搜索图片

![](https://pic.yupi.icu/1/1769601563667-0d0ee4ec-6b47-403c-ae3b-fef23771b47a.png)

4）占位图 [Picsum Photos](https://picsum.photos/)：直接用 URL 指定图片尺寸，每次刷新都是不同的真实照片

![](https://pic.yupi.icu/1/1769601577827-353e909f-344c-4807-aae4-4a5d075953c9.png)



如果你的 AI 编程工具支持网页读取，可以直接让 AI 从这些网站搜索图片：

```markdown
我要开发一个摄影作品集网站
请根据需要，为网站搜索并集成图片资源：
1. 插画：使用 undraw.co，搜索与网站内容相关的插画
2. 图标：使用 Iconify 图标库
3. 真实照片：使用 Pexels 搜索真实照片
4. 占位图：使用 Picsum Photos 作为临时占位图
```



这下，生成的网站看起来成熟多了吧？

![](https://pic.yupi.icu/1/1769601635196-ea757546-bd01-4b6d-a0c7-382b315f564a.png)



### 方法 4、提示词约束

就算不搞那些花里胡哨的工具，只要跟 AI 对话时，把你的要求说清楚，一样能让网站变专业。

Claude 官方的 Cookbook 中有篇文章 [Frontend Aesthetics](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics)（前端美学），专门讲怎么避免让 AI 生成具有 AI 味儿的通用设计。

![](https://pic.yupi.icu/1/1769601710440-6f8ffae7-3a7c-4b7f-afb9-2b0bca8008d5.png)

下面讲几个我自己常用的提示词技巧。

#### 1）反向提示

不要只说 “要什么”，更要说 “不要什么”。

```plain
设计禁止清单：
❌ 紫色/靛蓝色渐变
❌ 纯平背景色（必须有噪点或渐变）
❌ Hero + 三卡片布局
❌ 完美居中对齐
❌ 高深的专业名词和无意义的空话
❌ Emoji 作为功能图标
❌ 线性动画 ease-in-out
```

你把这些禁止项写清楚，AI 就不敢乱来了。



#### 2）角色设定

给 AI 定个人设，比如：

```markdown
你是一位资深独立设计师，专注于《反主流》的网页美学。
你鄙视千篇一律的 SaaS 模板，认为软件界面应该有触感和灵魂。
你的创意边界：
- "现代但不要紫色" → 可以试试深灰+橙色
- "极简但要有温度" → 用大留白+手绘插画
- "科技感但不要冰冷" → 用深色+暖色点缀
```

这样 AI 就知道，它不是在做标准答案，而是在做有个性的设计。



#### 3）拒绝空洞文案

AI 特别喜欢写那些 “听起来很厉害但啥也没说” 的文案。

你得明确告诉它文案的要求：

```plain
网站的文字内容必须做到：
- 具体化："每天节省 2 小时重复劳动"（不要说"提升生产力"）
- 口语化："用起来就像呼吸一样自然"（不要说"卓越的用户体验"）
- 带情绪："再也不用在 10 个群里找文件了"（不要说"高效协作"）
- 甚至可以挑衅："别再假装你会看完那些 PPT 了"
```

这样文案就会更有人味儿了。



#### 4）语境注入

AI 老是生成通用设计，是因为它不知道你要传达什么 “感觉”。

所以我们可以尝试 **先给 AI 喂情绪，再提设计**。

比如你要做个具有科技感的博客网站，可以这么说：

```markdown
先阅读这段话：《黑客与画家》 - 编程语言是用来思考的

现在根据这种冷静、理性的情绪设计博客首页：
- 配色：深灰+冷蓝
- 布局：理性、有序
- 感觉：沉思的、专注的
```

AI 会把视觉参数（颜色、间距、字体）和文本的情感特征（冷静、理性）对齐，生成有特定氛围的设计。

![](https://pic.yupi.icu/1/1769601745340-d621e29c-76f7-4a8f-af01-7271d88c5272-20260128202014218.png)

就像给演员说戏，不是告诉他演得开心一点，而是让他回忆一段开心的记忆，情绪自然就出来了。



#### 5）复用提示词

前面讲了这么多约束条件，你不能每次都重复人工编写一遍吧？

所以要保存提示词为项目规则文件 [AGENTS.md](https://agents.md/)，便于多次复用。

[AGENTS.md](https://agents.md/) 是一个开放标准，让不同的 AI 工具都能读取同一份规则文件，主流的 AI 编程工具（Cursor、Claude Code、Windsurf 等）都支持。

![](https://pic.yupi.icu/1/1769601770744-9db9fb73-1210-4807-8c41-3e1248a88455.png)

比如这里我给大家准备了一套提示词模板，包含了前面讲的所有技巧：

```markdown
# 项目设计规则（AGENTS.md）

## 角色设定
你是一位资深独立设计师，专注于 "反主流" 的网页美学。
你鄙视千篇一律的 SaaS 模板，追求每个像素都有温度。

## ❌ 绝对禁止项

### 配色禁止
- 紫色/靛蓝色/蓝紫渐变（#6366F1、#8B5CF6）
- 纯平背景色（必须有噪点纹理或渐变）
- Tailwind 默认色板

### 布局禁止
- Hero + 三卡片布局
- 完美居中对齐
- 等宽多栏（必须不对称）

### 文案禁止
- 高深的专业名词和无意义的空话
- Lorem Ipsum 占位文本
- 被动语态和长句

### 组件禁止
- Shadcn/Material UI 默认组件（必须深度定制）
- Emoji 作为功能图标
- 线性动画（ease-in-out）

## ✅ 必须遵守项

### 文案风格
- 口语化，像朋友聊天
- 具体化，有数字和场景
- 可以幽默、自嘲、甚至挑衅
- 每句话不超过 15 个字

### 图片系统
- 图标：使用 Iconify 图标库（https://iconify.design）
- 占位图：使用 Picsum Photos（https://picsum.photos）
- 真实图片：使用 Pexels 搜索（https://www.pexels.com）
- 插画：使用 unDraw（https://undraw.co）
```

保存这个文件为 `AGENTS.md`，放在项目根目录，以后每次跟 AI 对话，它都会自动读取这个文件，按照你的要求来工作。

![](https://pic.yupi.icu/1/1769601809476-e38cc355-3b1d-4b5c-af19-733829e0628c.png)

举个例子，输入跟之前一毛一样的需求 “帮我做个动漫视频网站”，有了规则文件后，效果立竿见影！

![](https://pic.yupi.icu/1/1769601868173-f9e1ff80-8bd6-468a-bdf3-4d1ebbea7552.png)



### 方法 5、Agent Skills

如果你觉得自己写提示词太麻烦，还有个更省事的办法 —— **Agent Skills**。

简单来说，Agent Skills 就是别人封装好的专业技能包，你直接在 AI 编程工具中安装就能用，让 AI 学会各种专业技能，比如制作 PPT、整理 Excel 表格等等。

![](https://pic.yupi.icu/1/1769601927834-226e857f-9dbb-4eca-a1d3-255fd1e0638d.jpeg)

如果想让 AI 开发的网站更精美独特，可以用下面 2 个 Skills。

#### Frontend-design

这是 Anthropic 官方出品的 [前端设计技能](https://github.com/anthropics/skills/tree/main/skills/frontend-design)，可以教 AI 生成专业设计感网站。

用法很简单，以 Claude Code 为例。

首先打开 Claude Code 并输入命令，添加官方技能市场：

```plain
/plugin marketplace add anthropics/skills
```

![](https://pic.yupi.icu/1/1769307009465-4e04d585-3f68-4fcb-a3b0-ba43ad70139a-20260127164823520-20260128201603535.png)

这就像是在你的 AI 助手里开通了一个技能商店，接下来你就可以从商店中获取技能了。

![](https://pic.yupi.icu/1/1769307026089-70a117da-b18e-4c7d-992b-1d08e30a7a0b-20260127164823553-20260128201603572.png)

在 Claude Code 中输入命令，安装官方提供的技能包：

```plain
/plugin install example-skills@anthropic-agent-skills
```

![](https://pic.yupi.icu/1/1769307063576-10e2ce68-b5cd-41c7-8d6c-da0781298929-20260127164823605-20260128201603607.png)

这个 example-skills 包含了一堆官方示例技能，包括前端设计、网页测试、动图制作等等。

![](https://pic.yupi.icu/1/1769307079120-6aaf2999-fee5-4fdb-a5e3-2ba66824b4de-20260127164823637-20260128201603651.png)

装完之后，你就可以直接让 AI 使用这些技能了。

比如你输入：帮我开发个人作品集网站。

AI 会主动问你：我发现你安装了前端设计技能，需要用它来生成更具设计感的页面吗？

![](https://pic.yupi.icu/1/1769307135496-aa2a1e4e-4e8a-43e5-a138-9a148410b52e-20260127164911476-20260128201603748.png)

确认之后，AI 会利用技能生成代码，告别蓝紫渐变、生成独特风格的精美页面。

![](https://pic.yupi.icu/1/1769307161745-c81ca221-9902-49dd-96de-a99d50a17684-20260127164929260-20260128201603790.png)

不用每次都给 AI 输入一大堆相同的提示词，装一次技能就行了。



#### UI UX Pro Max

[UI UX Pro MAX](https://ui-ux-pro-max-skill.nextlevelbuilder.io/) 是我现在用下来最顺手的去 AI 味儿技能了，专门用于提升 AI 的设计能力。

![](https://pic.yupi.icu/1/1769601961428-9c2501f0-1d85-4911-932f-714396b5e06a.png)

它支持几乎目前所有主流的 AI 编程工具，比如 Claude Code、Cursor、VS Code、Codex 等等。

用法很简单，首先按照 [开源仓库文档](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) 的指引，安装官方提供的命令行工具：

```bash
npm install -g uipro-cli
```

![](https://pic.yupi.icu/1/1769307627168-c682f14b-4517-4325-ad4a-33e88661e714-20260127165342236-20260128201604037.png)

然后进入到你的项目目录下，根据使用的 AI 工具执行对应的命令。比如我这里用 Cursor：

```bash
uipro init --ai cursor
```

![](https://pic.yupi.icu/1/1769307641070-2138ef02-8f26-460a-8cdd-979c59b725de-20260127165352453-20260128201604091.png)

它会自动把技能安装到 Cursor 的配置目录里。

接下来，当你让 AI 开发一个网站时，可以使用斜杠命令手动触发技能，或者让 AI 自动识别技能。

![](https://pic.yupi.icu/1/1769307707968-1545cef4-b8e2-4bf9-b0a7-98130afc78ba-20260127165405230-20260128201604126.png)

1）AI 会根据你的需求识别出产品类型和需要的页面类型

![](https://pic.yupi.icu/1/1769307720984-a6afcae8-a5e8-4577-be7c-8356b42832ee-20260127165431384-20260128201604166.png)

2）然后调用 `search.py` 搜索脚本，在 data 目录里进行多维度搜索，找到适合的配色、字体、布局风格

![](https://pic.yupi.icu/1/1769307768048-ef58645a-6188-4af7-9865-8033602126f7-20260127165431494-20260128201604217.png)

3）综合搜索结果，生成完整的设计方案（主色调、字体组合、间距规范等）

![](https://pic.yupi.icu/1/1769307782038-59ea2231-b43d-45e3-a39f-6c36b0c7f645-20260127165431536-20260128201604239.png)

4）最后，再按照设计方案生成代码

![](https://pic.yupi.icu/1/1769307794443-ffc76a7e-24e9-4e4d-b973-ef97285fd32b-20260127165431613-20260128201604303.png)

这样一来，生成的界面既专业又有设计感。

![](https://pic.yupi.icu/1/1769307819333-fef63881-90b7-4248-8ca7-35354f8a7a7a-20260127165431745-20260128201604458.png)

AI 不需要把所有规则都背下来，而是用到哪个查哪个，这就是 Agent Skills 的精髓。



### 方法 6、反 AI 味儿组件库

前面提到，AI 为了保险，默认会选最主流的组件库，比如 Tailwind CSS、Shadcn UI 等。

这些库虽然专业，但也最容易产生 AI 味儿。

所以我们可以反其道而行之，明确告诉 AI 用一些 **小众但有特色** 的组件库。

比如 [Aceternity UI](https://ui.aceternity.com/) 这个库专门做那种炫酷效果，什么闪光粒子（Sparkles）、极光背景（Aurora Background）、流星效果（Meteors），都是高计算量的视觉组件。

![](https://pic.yupi.icu/1/1769601991258-c39a8b17-c707-4fb5-ab92-73abe8eb6d35.png)

AI 很难从零写出这么复杂的效果，但你直接让 AI 用这个库，几行代码就能搞定。

要注意，对于这些相对小众的组件库，AI 可能不太熟悉用法。建议安装 Context7 插件，可以实时查询最新文档。

![](https://pic.yupi.icu/1/1769602022954-c4712a60-e6e3-4818-b599-ca83fa41fdd3.png)

或者直接把官方文档地址发给 AI 让它参考：

```plain
必须使用 Aceternity UI 设计网站
你需要阅读官方文档来了解最新的使用方法：https://ui.aceternity.com/components
```

网站的逼格立刻就上去了，完全不像 AI 生成的。

![](https://pic.yupi.icu/1/1769602042077-97940429-7324-4ba9-938a-5897095115c8.png)

还有很多我觉得有特点的 UI 组件库：

- [Magic UI](https://magicui.design/)：150+ 动画组件，专门做微交互、流光边框、文字渐变
- [DaisyUI](https://daisyui.com/)：30+ 主题，有 cyberpunk、retro、cupcake 等风格
- [Brutalist UI](https://brutalistui.site/)：粗野主义风格，粗边框、硬阴影、高对比
- [Glass UI](https://ui.glass/)：玻璃拟态效果，半透明、模糊背景
- [ikun-ui](https://github.com/ikun-svelte/ikun-ui)：基于 Svelte.js 和 UnoCSS 的组件库
- [Radix UI](https://www.radix-ui.com/)：无样式原语组件，完全自定义
- [Mantine](https://mantine.dev/)：100+ 组件，功能丰富

像我练习时长两年半，最喜欢 [ikun-ui](https://github.com/ikun-svelte/ikun-ui) 了~

![](https://pic.yupi.icu/1/1769602061209-92ee57f0-76aa-412e-a4bb-c700094688b2.png)



### 方法 7、自主配色（扩展知识）

如果你想让网站更独特，完全走自己的路，那就得人工设计配色方案了。

这个方法适合有设计基础的朋友，可以用一些快速生成个性化配色的工具，比如：

- [Coolors](https://coolors.co/)：主流的配色生成器，按空格键随机生成，支持导出多种格式
- [Adobe Color](https://color.adobe.com/)：Adobe 官方的专业配色工具

![](https://pic.yupi.icu/1/1769602205633-22850346-ee55-4ab3-916d-c54e0f66fae2.png)

生成好配色后，把色值告诉 AI，让它严格按照你的配色方案来设计。这样出来的网站，配色绝对独特。



## 实战案例

前面我讲的这些方法是可以结合使用的。下面分享几个实战例子，大家可以感受下效果。

### 案例 1、个人技术博客

#### 优化前

直接输入提示词：

```markdown
开发个人技术博客网站首页
```

效果是这样的，一眼 AI……

![](https://pic.yupi.icu/1/1769602233437-c2df5654-4dc2-407d-86f8-c95888c446fd.png)



#### 优化后

使用 `AGENTS.md` 提示词规则 + UI UX Pro Max 技能：

```markdown
开发个人技术博客网站首页
```

得到的网站更有极客范儿，内容更充实。

![](https://pic.yupi.icu/1/1769602249372-66ac1c3f-7aaa-4890-be04-5a3615226d49.png)

![](https://pic.yupi.icu/1/1769602300430-f710cad3-dedb-4035-869c-42ef76467e95.png)



### 案例 2、SaaS 产品落地页

#### 优化前

直接输入提示词：

```markdown
开发 SaaS 产品《服务器运维监控平台》的落地页
```

效果是这样的，又是蓝紫配色，一眼 AI……

![](https://pic.yupi.icu/1/1769602314736-88e9b6e7-a14a-4ea3-99f4-5a2626c0d880.png)



#### 优化后

使用 `AGENTS.md` 提示词规则 + UI UX Pro Max 技能 + 语境注入 + 反 AI 味儿组件库：

```markdown
开发 SaaS 产品《服务器运维监控平台》的落地页

先阅读这段话感受氛围：《黑客帝国》你选择蓝色药丸还是红色药丸？
必须使用 Aceternity UI 设计网站
你需要阅读官方文档来了解最新的使用方法：https://ui.aceternity.com/components
```

网站背景变成了代码雨，也更像一个专业产品介绍页：

![](https://pic.yupi.icu/1/1769602346623-9d0988bb-5904-4328-9e87-9698bd9476f0.png)

![](https://pic.yupi.icu/1/1769602360859-110bfa1e-e0e5-4276-8074-883f7c7ddae9.png)



### 案例 3、健身 APP 落地页（移动端）

#### 优化前

直接输入提示词：

```markdown
开发健身 APP 落地页（移动端）
```

效果…… 这啥玩意，不评价了……

![](https://pic.yupi.icu/1/1769602385367-1a74cdeb-7452-471d-b13b-3afdddb6fb81.png)



#### 优化后

使用 `AGENTS.md` 提示词规则 + UI UX Pro Max 技能 + 反 AI 味儿组件库：

```markdown
开发健身 APP 落地页（移动端）

必须使用 IKun UI 设计网站
你需要阅读官方文档来了解最新的使用方法：https://ikun-ui.netlify.app
```



这下得到的页面更真实可用了，对比还是非常明显的吧！

![](https://pic.yupi.icu/1/1769602473561-48f4ba99-d41a-462d-a7d3-6ea8613c43ba.png)



## 写在最后

看到这里你应该意识到，现在 AI 开发网站的能力已经非常强了。

有朋友觉得 AI 生成的效果不理想，可能只是因为没给它足够明确的指令。

就像一个厨师，你只说做个好吃的，他为了保险只能做最大众化的家常菜。但你说 “多放辣椒、不要花椒、多放豆瓣酱”，他就能做出你想要的味道。

**记住，AI 是工具，你才是主导者。**

学会了或者学废了的朋友们，点个赞吧~ 



## 推荐资源

1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)

2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)

3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)

4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)

5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
