為啥我用 AI 做的網(wǎng)站都是藍(lán)紫漸變色？！！咋解決啊

大家好，我是程序員魚皮。

先做個小測試，下面這幾個網(wǎng)站，你能看出哪些是 AI 做的嗎？

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

是不是覺得有點意外？

“為啥我用 AI 搓出來的網(wǎng)站一股子 AI 味兒？而這些網(wǎng)站看起來干凈很多呢？”

這就是接下來我要分享的：

• 什么是 AI 編程的 AI 味兒？

• 為什么網(wǎng)站會有 AI 味兒？

• 怎么去除網(wǎng)站的 AI 味兒？

點個收藏，我們開始~

?? 推薦觀看本文對應(yīng)視頻版，效果更明顯：https://bilibili.com/video/BV1QF6EBiErM

什么是 AI 味兒？

所謂的 AI 味兒，就是那種一眼就能看出是 AI 生成的網(wǎng)站，界面樣式和內(nèi)容風(fēng)格都千篇一律。

1）配色死板：藍(lán)紫漸變色用到吐。

2）布局死板：首屏放個大標(biāo)題，下面三個卡片并排。

3）字體死板：基本上就是 Inter、Roboto 等幾種固定的字體。

4）Emoji 泛濫：什么 4?? 之類的，滿屏幕都是表情圖標(biāo)。

5）內(nèi)容空洞：基本沒有真實圖片，文字風(fēng)格也比較刻板。

用戶看這些網(wǎng)站時就一個感覺：我在跟機(jī)器人聊天。

為什么網(wǎng)站會有 AI 味兒？

說了這么多問題，到底為啥會這樣？

核心原因就倆字：求穩(wěn)。

舉個例子，為啥 AI 那么愛用藍(lán)紫漸變色？

因為 AI 的訓(xùn)練數(shù)據(jù)里，很多現(xiàn)代網(wǎng)站采用 Tailwind 樣式庫，而這個庫的默認(rèn)主色調(diào)就是藍(lán)紫色。AI 在學(xué)習(xí)數(shù)億行代碼時，這些顏色出現(xiàn)的頻率是最高的，于是 AI 就認(rèn)為 “現(xiàn)代化網(wǎng)站 ≈ 藍(lán)紫色漸變”。

并且 AI 學(xué)會了一個生存法則：用最常見的 = 最不容易出錯。

所以當(dāng)你讓 AI “開發(fā)一個現(xiàn)代化的網(wǎng)站” 時，AI 為了求穩(wěn)，就會選擇使用藍(lán)紫漸變色。

那怎么破局？

很簡單，從 “請求者” 變成 “指揮官”。

不要只說需求：給我做個網(wǎng)站

而是要明確要求：用深灰色背景、手繪圖標(biāo)、不對稱布局、拒絕藍(lán)紫色。

用強(qiáng)有力的約束條件，逼著 AI 偏離它的舒適區(qū)。

怎么去除網(wǎng)站的 AI 味兒？

下面分享我總結(jié)的 7 個方法，保證讓你的網(wǎng)站擺脫 AI 味兒。

方法 1、讓 AI 參考真實網(wǎng)站

最簡單粗暴的一招，你看到好看的網(wǎng)站，直接讓 AI 學(xué)。

有 4 種具體的做法：

1）如果你使用 Cursor 或者 Claude Code 等 AI 編程工具，或者利用 Firecrawl MCP，讓 AI 能夠直接讀取網(wǎng)頁。

你只需要跟 AI 說：

請訪問 ai.codefather.cn，提取它的配色方案、字體選擇和布局結(jié)構(gòu)，然后生成類似風(fēng)格的網(wǎng)站。

AI 會自己去看那個網(wǎng)站，然后學(xué)著做。

2）如果 AI 大模型支持圖片理解，你還可以把網(wǎng)頁截圖提供給 AI，搭配文字能讓 AI 還原網(wǎng)站更準(zhǔn)確。

效果如圖：

3）如果你用的 AI 大模型不支持圖片理解、純文本理解又不到位，可以先利用 截圖轉(zhuǎn)代碼 工具，比如 Screenshot to Code。

把喜歡的網(wǎng)站截個圖，上傳上去，它直接給你轉(zhuǎn)成代碼。

然后你再把代碼喂給 AI，讓它參考著做。

準(zhǔn)確度會高很多，抄樣式肯定不如抄代碼來的直接。

4）此外，還可以直接套用現(xiàn)成的網(wǎng)站模板或者 GitHub 上的開源項目。

推薦幾個不錯的網(wǎng)站模板資源：

• HTML5 UP：免費的響應(yīng)式網(wǎng)站合集，極簡風(fēng)格

• WordPress 官方主題庫：1 萬多個免費主題，啥類型都有

• Start Bootstrap：Bootstrap 生態(tài)的免費網(wǎng)站模板庫

• Colorlib：提供不少免費的網(wǎng)站模板，設(shè)計精美

這些網(wǎng)站模板都有源代碼，你選個不錯的下載下來，把代碼丟給 AI 讓它去改改內(nèi)容就好了，樣式基本準(zhǔn)確還原。

方法 2、設(shè)計優(yōu)先開發(fā)

這個方法特別適合做大項目。

簡單來說，就是 不要上來就讓 AI 梭哈整個項目。

比如傳統(tǒng)做法是這樣的：幫我做一個包含用戶系統(tǒng)、后臺管理的完整 SaaS 平臺。

然后 AI 嘩啦嘩啦給你生成幾十個文件，結(jié)果做完后發(fā)現(xiàn)頁面風(fēng)格不對，重新返工，浪費 Tokens。

推薦的做法是 拆分步驟，先讓 AI 做個前端網(wǎng)站 Demo，純靜態(tài)頁面就好。對設(shè)計滿意了之后，再讓 AI 基于 Demo 代碼，用同樣的風(fēng)格開發(fā)完整項目。

你像我生成出下面這種破玩意，肯定是不能讓 AI 繼續(xù)開發(fā)的！

這里推薦一個很強(qiáng)大的 AI 設(shè)計工具 Google Stitch。

你只需要輸入一段描述，它就能生成專業(yè)的界面原型。

甚至你在紙上畫個草圖，拍照上傳，它都能識別出來轉(zhuǎn)成代碼。

你還可以人工修改設(shè)計的主題風(fēng)格，或者人工標(biāo)注要修改的部分，讓 AI 幫你快速調(diào)整。

設(shè)計完成后，導(dǎo)出文件或下載代碼，再喂給 Cursor 等 AI 編程工具繼續(xù)開發(fā)。這樣風(fēng)格就定下來了，不會跑偏。

當(dāng)然，如果你會用 Figma 這種更專業(yè)的設(shè)計工具，你可以先在 Figma 里把網(wǎng)站設(shè)計得清清楚楚。

然后搭配 Figma MCP 擴(kuò)展，讓 AI 直接讀取你的 Figma 設(shè)計文件，按照設(shè)計生成代碼。

此外，還有個工具叫 Onlook，號稱為設(shè)計師準(zhǔn)備的 Cursor，可以讓設(shè)計師直接可視化編輯網(wǎng)頁代碼，設(shè)計和開發(fā)無縫銜接。

方法 3、豐富網(wǎng)站圖片

一般 AI 生成的網(wǎng)站是沒有圖片的，我們可以通過添加圖片讓網(wǎng)站更個性化。

沒必要讓 AI 從 0 開始生圖，只要告訴 AI 去主動找圖、到哪里找圖就好。

圖片資源主要包括插畫、圖標(biāo)、真實照片和占位圖這幾類。

1）插畫庫 unDraw：有非常多免費的 SVG 插畫，而且可以自定義顏色。

2）圖標(biāo)庫 Iconify：20 多萬個免費矢量圖標(biāo)

3）真實照片 Pexels：免費高質(zhì)量圖庫，還提供了 API 快速搜索圖片

4）占位圖 Picsum Photos：直接用 URL 指定圖片尺寸，每次刷新都是不同的真實照片

如果你的 AI 編程工具支持網(wǎng)頁讀取，可以直接讓 AI 從這些網(wǎng)站搜索圖片：

我要開發(fā)一個攝影作品集網(wǎng)站
請根據(jù)需要，為網(wǎng)站搜索并集成圖片資源：
1. 插畫：使用 undraw.co，搜索與網(wǎng)站內(nèi)容相關(guān)的插畫
2. 圖標(biāo)：使用 Iconify 圖標(biāo)庫
3. 真實照片：使用 Pexels 搜索真實照片
4. 占位圖：使用 Picsum Photos 作為臨時占位圖

這下，生成的網(wǎng)站看起來成熟多了吧？

方法 4、提示詞約束

就算不搞那些花里胡哨的工具，只要跟 AI 對話時，把你的要求說清楚，一樣能讓網(wǎng)站變專業(yè)。

Claude 官方的 Cookbook 中有篇文章 Frontend Aesthetics（前端美學(xué)），專門講怎么避免讓 AI 生成具有 AI 味兒的通用設(shè)計。

下面講幾個我自己常用的提示詞技巧。

1）反向提示

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

設(shè)計禁止清單：
? 紫色/靛藍(lán)色漸變
? 純平背景色（必須有噪點或漸變）
? Hero + 三卡片布局
? 完美居中對齊
? 高深的專業(yè)名詞和無意義的空話
? Emoji 作為功能圖標(biāo)
? 線性動畫 ease-in-out

你把這些禁止項寫清楚，AI 就不敢亂來了。

2）角色設(shè)定

給 AI 定個人設(shè)，比如：

你是一位資深獨立設(shè)計師，專注于《反主流》的網(wǎng)頁美學(xué)。
你鄙視千篇一律的 SaaS 模板，認(rèn)為軟件界面應(yīng)該有觸感和靈魂。
你的創(chuàng)意邊界：
- "現(xiàn)代但不要紫色" → 可以試試深灰+橙色
- "極簡但要有溫度" → 用大留白+手繪插畫
- "科技感但不要冰冷" → 用深色+暖色點綴

這樣 AI 就知道，它不是在做標(biāo)準(zhǔn)答案，而是在做有個性的設(shè)計。

3）拒絕空洞文案

AI 特別喜歡寫那些 “聽起來很厲害但啥也沒說” 的文案。

你得明確告訴它文案的要求：

網(wǎng)站的文字內(nèi)容必須做到：
- 具體化："每天節(jié)省 2 小時重復(fù)勞動"（不要說"提升生產(chǎn)力"）
- 口語化："用起來就像呼吸一樣自然"（不要說"卓越的用戶體驗"）
- 帶情緒："再也不用在 10 個群里找文件了"（不要說"高效協(xié)作"）
- 甚至可以挑釁："別再假裝你會看完那些 PPT 了"

這樣文案就會更有人味兒了。

4）語境注入

AI 老是生成通用設(shè)計，是因為它不知道你要傳達(dá)什么 “感覺”。

所以我們可以嘗試 先給 AI 喂情緒，再提設(shè)計。

比如你要做個具有科技感的博客網(wǎng)站，可以這么說：

先閱讀這段話：《黑客與畫家》 - 編程語言是用來思考的


 現(xiàn)在根據(jù)這種冷靜、理性的情緒設(shè)計博客首頁：
- 配色：深灰+冷藍(lán)
- 布局：理性、有序
- 感覺：沉思的、專注的

AI 會把視覺參數(shù)（顏色、間距、字體）和文本的情感特征（冷靜、理性）對齊，生成有特定氛圍的設(shè)計。

就像給演員說戲，不是告訴他演得開心一點，而是讓他回憶一段開心的記憶，情緒自然就出來了。

5）復(fù)用提示詞

前面講了這么多約束條件，你不能每次都重復(fù)人工編寫一遍吧？

所以要保存提示詞為項目規(guī)則文件 AGENTS.md，便于多次復(fù)用。

AGENTS.md 是一個開放標(biāo)準(zhǔn)，讓不同的 AI 工具都能讀取同一份規(guī)則文件，主流的 AI 編程工具（Cursor、Claude Code、Windsurf 等）都支持。

比如這里我給大家準(zhǔn)備了一套提示詞模板，包含了前面講的所有技巧：

# 項目設(shè)計規(guī)則（AGENTS.md）

 ## 角色設(shè)定
你是一位資深獨立設(shè)計師，專注于 "反主流" 的網(wǎng)頁美學(xué)。
你鄙視千篇一律的 SaaS 模板，追求每個像素都有溫度。

 ## ? 絕對禁止項

 ### 配色禁止
- 紫色/靛藍(lán)色/藍(lán)紫漸變（、）
- 純平背景色（必須有噪點紋理或漸變）
- Tailwind 默認(rèn)色板

 ### 布局禁止
- Hero + 三卡片布局
- 完美居中對齊
- 等寬多欄（必須不對稱）

 ### 文案禁止
- 高深的專業(yè)名詞和無意義的空話
- Lorem Ipsum 占位文本
- 被動語態(tài)和長句

 ### 組件禁止
- Shadcn/Material UI 默認(rèn)組件（必須深度定制）
- Emoji 作為功能圖標(biāo)
- 線性動畫（ease-in-out）

 ## ? 必須遵守項

 ### 文案風(fēng)格
- 口語化，像朋友聊天
- 具體化，有數(shù)字和場景
- 可以幽默、自嘲、甚至挑釁
- 每句話不超過 15 個字

 ### 圖片系統(tǒng)
- 圖標(biāo)：使用 Iconify 圖標(biāo)庫（https://iconify.design）
- 占位圖：使用 Picsum Photos（https://picsum.photos）
- 真實圖片：使用 Pexels 搜索（https://www.pexels.com）
- 插畫：使用 unDraw（https://undraw.co）

保存這個文件為 AGENTS.md，放在項目根目錄，以后每次跟 AI 對話，它都會自動讀取這個文件，按照你的要求來工作。

舉個例子，輸入跟之前一毛一樣的需求 “幫我做個動漫視頻網(wǎng)站”，有了規(guī)則文件后，效果立竿見影！

方法 5、Agent Skills

如果你覺得自己寫提示詞太麻煩，還有個更省事的辦法 —— Agent Skills。

簡單來說，Agent Skills 就是別人封裝好的專業(yè)技能包，你直接在 AI 編程工具中安裝就能用，讓 AI 學(xué)會各種專業(yè)技能，比如制作 PPT、整理 Excel 表格等等。

如果想讓 AI 開發(fā)的網(wǎng)站更精美獨特，可以用下面 2 個 Skills。

Frontend-design

這是 Anthropic 官方出品的 前端設(shè)計技能，可以教 AI 生成專業(yè)設(shè)計感網(wǎng)站。

用法很簡單，以 Claude Code 為例。

首先打開 Claude Code 并輸入命令，添加官方技能市場：

/plugin marketplace add anthropics/skills

這就像是在你的 AI 助手里開通了一個技能商店，接下來你就可以從商店中獲取技能了。

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

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

這個 example-skills 包含了一堆官方示例技能，包括前端設(shè)計、網(wǎng)頁測試、動圖制作等等。

裝完之后，你就可以直接讓 AI 使用這些技能了。

比如你輸入：幫我開發(fā)個人作品集網(wǎng)站。

AI 會主動問你：我發(fā)現(xiàn)你安裝了前端設(shè)計技能，需要用它來生成更具設(shè)計感的頁面嗎？

確認(rèn)之后，AI 會利用技能生成代碼，告別藍(lán)紫漸變、生成獨特風(fēng)格的精美頁面。

不用每次都給 AI 輸入一大堆相同的提示詞，裝一次技能就行了。

UI UX Pro Max

UI UX Pro MAX 是我現(xiàn)在用下來最順手的去 AI 味兒技能了，專門用于提升 AI 的設(shè)計能力。

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

用法很簡單，首先按照 開源倉庫文檔 的指引，安裝官方提供的命令行工具：

npm install -g uipro-cli

然后進(jìn)入到你的項目目錄下，根據(jù)使用的 AI 工具執(zhí)行對應(yīng)的命令。比如我這里用 Cursor：

uipro init --ai cursor

它會自動把技能安裝到 Cursor 的配置目錄里。

接下來，當(dāng)你讓 AI 開發(fā)一個網(wǎng)站時，可以使用斜杠命令手動觸發(fā)技能，或者讓 AI 自動識別技能。

1）AI 會根據(jù)你的需求識別出產(chǎn)品類型和需要的頁面類型

2）然后調(diào)用 search.py 搜索腳本，在 data 目錄里進(jìn)行多維度搜索，找到適合的配色、字體、布局風(fēng)格

3）綜合搜索結(jié)果，生成完整的設(shè)計方案（主色調(diào)、字體組合、間距規(guī)范等）

4）最后，再按照設(shè)計方案生成代碼

這樣一來，生成的界面既專業(yè)又有設(shè)計感。

AI 不需要把所有規(guī)則都背下來，而是用到哪個查哪個，這就是 Agent Skills 的精髓。

方法 6、反 AI 味兒組件庫

前面提到，AI 為了保險，默認(rèn)會選最主流的組件庫，比如 Tailwind CSS、Shadcn UI 等。

這些庫雖然專業(yè)，但也最容易產(chǎn)生 AI 味兒。

所以我們可以反其道而行之，明確告訴 AI 用一些 小眾但有特色 的組件庫。

比如 Aceternity UI 這個庫專門做那種炫酷效果，什么閃光粒子（Sparkles）、極光背景（Aurora Background）、流星效果（Meteors），都是高計算量的視覺組件。

AI 很難從零寫出這么復(fù)雜的效果，但你直接讓 AI 用這個庫，幾行代碼就能搞定。

要注意，對于這些相對小眾的組件庫，AI 可能不太熟悉用法。建議安裝 Context7 插件，可以實時查詢最新文檔。

或者直接把官方文檔地址發(fā)給 AI 讓它參考：

必須使用 Aceternity UI 設(shè)計網(wǎng)站
你需要閱讀官方文檔來了解最新的使用方法：https://ui.aceternity.com/components

網(wǎng)站的逼格立刻就上去了，完全不像 AI 生成的。

還有很多我覺得有特點的 UI 組件庫：

• Magic UI：150+ 動畫組件，專門做微交互、流光邊框、文字漸變

• DaisyUI：30+ 主題，有 cyberpunk、retro、cupcake 等風(fēng)格

• Brutalist UI：粗野主義風(fēng)格，粗邊框、硬陰影、高對比

• Glass UI：玻璃擬態(tài)效果，半透明、模糊背景

• ikun-ui：基于 Svelte.js 和 UnoCSS 的組件庫

• Radix UI：無樣式原語組件，完全自定義

• Mantine：100+ 組件，功能豐富

像我練習(xí)時長兩年半，最喜歡 ikun-ui 了~

方法 7、自主配色（擴(kuò)展知識）

如果你想讓網(wǎng)站更獨特，完全走自己的路，那就得人工設(shè)計配色方案了。

這個方法適合有設(shè)計基礎(chǔ)的朋友，可以用一些快速生成個性化配色的工具，比如：

• Coolors：主流的配色生成器，按空格鍵隨機(jī)生成，支持導(dǎo)出多種格式

• Adobe Color：Adobe 官方的專業(yè)配色工具

生成好配色后，把色值告訴 AI，讓它嚴(yán)格按照你的配色方案來設(shè)計。這樣出來的網(wǎng)站，配色絕對獨特。

實戰(zhàn)案例

前面我講的這些方法是可以結(jié)合使用的。下面分享幾個實戰(zhàn)例子，大家可以感受下效果。

案例 1、個人技術(shù)博客 優(yōu)化前

直接輸入提示詞：

開發(fā)個人技術(shù)博客網(wǎng)站首頁

效果是這樣的，一眼 AI……

優(yōu)化后

使用 AGENTS.md 提示詞規(guī)則 + UI UX Pro Max 技能：

開發(fā)個人技術(shù)博客網(wǎng)站首頁

得到的網(wǎng)站更有極客范兒，內(nèi)容更充實。

案例 2、SaaS 產(chǎn)品落地頁 優(yōu)化前

直接輸入提示詞：

開發(fā) SaaS 產(chǎn)品《服務(wù)器運維監(jiān)控平臺》的落地頁

效果是這樣的，又是藍(lán)紫配色，一眼 AI……

優(yōu)化后

使用 AGENTS.md 提示詞規(guī)則 + UI UX Pro Max 技能 + 語境注入 + 反 AI 味兒組件庫：

開發(fā) SaaS 產(chǎn)品《服務(wù)器運維監(jiān)控平臺》的落地頁


 先閱讀這段話感受氛圍：《黑客帝國》你選擇藍(lán)色藥丸還是紅色藥丸？
必須使用 Aceternity UI 設(shè)計網(wǎng)站
你需要閱讀官方文檔來了解最新的使用方法：https://ui.aceternity.com/components

網(wǎng)站背景變成了代碼雨，也更像一個專業(yè)產(chǎn)品介紹頁：

案例 3、健身 APP 落地頁（移動端） 優(yōu)化前

直接輸入提示詞：

開發(fā)健身 APP 落地頁（移動端）

效果…… 這啥玩意，不評價了……

優(yōu)化后

使用 AGENTS.md 提示詞規(guī)則 + UI UX Pro Max 技能 + 反 AI 味兒組件庫：

開發(fā)健身 APP 落地頁（移動端）


 必須使用 IKun UI 設(shè)計網(wǎng)站
你需要閱讀官方文檔來了解最新的使用方法：https://ikun-ui.netlify.app

這下得到的頁面更真實可用了，對比還是非常明顯的吧！

最后

看到這里你應(yīng)該意識到，現(xiàn)在 AI 開發(fā)網(wǎng)站的能力已經(jīng)非常強(qiáng)了。

有朋友覺得 AI 生成的效果不理想，可能只是因為沒給它足夠明確的指令。

就像一個廚師，你只說做個好吃的，他為了保險只能做最大眾化的家常菜。但你說 “多放辣椒、不要花椒、多放豆瓣醬”，他就能做出你想要的味道。

記住，AI 是工具，你才是主導(dǎo)者。

學(xué)會了或者學(xué)廢了的朋友們，點個贊吧~ 你可以在我免費開源的《AI 編程零基礎(chǔ)入門教程》中學(xué)到更多 AI 編程技巧。

點擊下方關(guān)注魚皮，獲取免費編程學(xué)習(xí)路線、簡歷模板、面試題解、AI 知識庫、項目教程、交流群。

一些對大家有用的資源：
100+ 編程學(xué)習(xí)路線 / 實戰(zhàn)項目 / 求職指導(dǎo)
100+ 簡歷模板
300+ 企業(yè)面試題庫 mianshiya.com
500+ AI 資源大全
1 對 1 模擬面試
動畫學(xué)算法教程