為啥我用 AI 做的網站都是藍紫漸變色？！！咋解決啊

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

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

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

是不是覺得有點意外？

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

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

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

• 為什么網站會有 AI 味兒？

• 怎么去除網站的 AI 味兒？

點個收藏，我們開始~

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

什么是 AI 味兒？

所謂的 AI 味兒，就是那種一眼就能看出是 AI 生成的網站，界面樣式和內容風格都千篇一律。

1）配色死板：藍紫漸變色用到吐。

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

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

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

5）內容空洞：基本沒有真實圖片，文字風格也比較刻板。

用戶看這些網站時就一個感覺：我在跟機器人聊天。

為什么網站會有 AI 味兒？

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

核心原因就倆字：求穩。

舉個例子，為啥 AI 那么愛用藍紫漸變色？

因為 AI 的訓練數據里，很多現代網站采用 Tailwind 樣式庫，而這個庫的默認主色調就是藍紫色。AI 在學習數億行代碼時，這些顏色出現的頻率是最高的，于是 AI 就認為 “現代化網站 ≈ 藍紫色漸變”。

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

所以當你讓 AI “開發一個現代化的網站” 時，AI 為了求穩，就會選擇使用藍紫漸變色。

那怎么破局？

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

不要只說需求：給我做個網站

而是要明確要求：用深灰色背景、手繪圖標、不對稱布局、拒絕藍紫色。

用強有力的約束條件，逼著 AI 偏離它的舒適區。

怎么去除網站的 AI 味兒？

下面分享我總結的 7 個方法，保證讓你的網站擺脫 AI 味兒。

方法 1、讓 AI 參考真實網站

最簡單粗暴的一招，你看到好看的網站，直接讓 AI 學。

有 4 種具體的做法：

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

你只需要跟 AI 說：

請訪問 ai.codefather.cn，提取它的配色方案、字體選擇和布局結構，然后生成類似風格的網站。

AI 會自己去看那個網站，然后學著做。

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

效果如圖：

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

把喜歡的網站截個圖，上傳上去，它直接給你轉成代碼。

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

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

4）此外，還可以直接套用現成的網站模板或者 GitHub 上的開源項目。

推薦幾個不錯的網站模板資源：

• HTML5 UP：免費的響應式網站合集，極簡風格

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

• Start Bootstrap：Bootstrap 生態的免費網站模板庫

• Colorlib：提供不少免費的網站模板，設計精美

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

方法 2、設計優先開發

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

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

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

然后 AI 嘩啦嘩啦給你生成幾十個文件，結果做完后發現頁面風格不對，重新返工，浪費 Tokens。

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

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

這里推薦一個很強大的 AI 設計工具 Google Stitch。

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

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

你還可以人工修改設計的主題風格，或者人工標注要修改的部分，讓 AI 幫你快速調整。

設計完成后，導出文件或下載代碼，再喂給 Cursor 等 AI 編程工具繼續開發。這樣風格就定下來了，不會跑偏。

當然，如果你會用 Figma 這種更專業的設計工具，你可以先在 Figma 里把網站設計得清清楚楚。

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

此外，還有個工具叫 Onlook，號稱為設計師準備的 Cursor，可以讓設計師直接可視化編輯網頁代碼，設計和開發無縫銜接。

方法 3、豐富網站圖片

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

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

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

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

2）圖標庫 Iconify：20 多萬個免費矢量圖標

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

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

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

我要開發一個攝影作品集網站
請根據需要，為網站搜索并集成圖片資源：
1. 插畫：使用 undraw.co，搜索與網站內容相關的插畫
2. 圖標：使用 Iconify 圖標庫
3. 真實照片：使用 Pexels 搜索真實照片
4. 占位圖：使用 Picsum Photos 作為臨時占位圖

這下，生成的網站看起來成熟多了吧？

方法 4、提示詞約束

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

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

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

1）反向提示

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

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

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

2）角色設定

給 AI 定個人設，比如：

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

這樣 AI 就知道，它不是在做標準答案，而是在做有個性的設計。

3）拒絕空洞文案

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

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

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

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

4）語境注入

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

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

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

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


 現在根據這種冷靜、理性的情緒設計博客首頁：
- 配色：深灰+冷藍
- 布局：理性、有序
- 感覺：沉思的、專注的

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

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

5）復用提示詞

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

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

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

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

# 項目設計規則（AGENTS.md）

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

 ## ? 絕對禁止項

 ### 配色禁止
- 紫色/靛藍色/藍紫漸變（、）
- 純平背景色（必須有噪點紋理或漸變）
- 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 對話，它都會自動讀取這個文件，按照你的要求來工作。

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

方法 5、Agent Skills

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

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

如果想讓 AI 開發的網站更精美獨特，可以用下面 2 個 Skills。

Frontend-design

這是 Anthropic 官方出品的 前端設計技能，可以教 AI 生成專業設計感網站。

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

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

/plugin marketplace add anthropics/skills

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

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

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

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

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

比如你輸入：幫我開發個人作品集網站。

AI 會主動問你：我發現你安裝了前端設計技能，需要用它來生成更具設計感的頁面嗎？

確認之后，AI 會利用技能生成代碼，告別藍紫漸變、生成獨特風格的精美頁面。

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

UI UX Pro Max

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

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

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

npm install -g uipro-cli

然后進入到你的項目目錄下，根據使用的 AI 工具執行對應的命令。比如我這里用 Cursor：

uipro init --ai cursor

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

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

1）AI 會根據你的需求識別出產品類型和需要的頁面類型

2）然后調用 search.py 搜索腳本，在 data 目錄里進行多維度搜索，找到適合的配色、字體、布局風格

3）綜合搜索結果，生成完整的設計方案（主色調、字體組合、間距規范等）

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

這樣一來，生成的界面既專業又有設計感。

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

方法 6、反 AI 味兒組件庫

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

這些庫雖然專業，但也最容易產生 AI 味兒。

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

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

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

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

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

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

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

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

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

• DaisyUI：30+ 主題，有 cyberpunk、retro、cupcake 等風格

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

• Glass UI：玻璃擬態效果，半透明、模糊背景

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

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

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

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

方法 7、自主配色（擴展知識）

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

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

• Coolors：主流的配色生成器，按空格鍵隨機生成，支持導出多種格式

• Adobe Color：Adobe 官方的專業配色工具

生成好配色后，把色值告訴 AI，讓它嚴格按照你的配色方案來設計。這樣出來的網站，配色絕對獨特。

實戰案例

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

案例 1、個人技術博客 優化前

直接輸入提示詞：

開發個人技術博客網站首頁

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

優化后

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

開發個人技術博客網站首頁

得到的網站更有極客范兒，內容更充實。

案例 2、SaaS 產品落地頁 優化前

直接輸入提示詞：

開發 SaaS 產品《服務器運維監控平臺》的落地頁

效果是這樣的，又是藍紫配色，一眼 AI……

優化后

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

開發 SaaS 產品《服務器運維監控平臺》的落地頁


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

網站背景變成了代碼雨，也更像一個專業產品介紹頁：

案例 3、健身 APP 落地頁（移動端） 優化前

直接輸入提示詞：

開發健身 APP 落地頁（移動端）

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

優化后

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

開發健身 APP 落地頁（移動端）


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

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

最后

看到這里你應該意識到，現在 AI 開發網站的能力已經非常強了。

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

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

記住，AI 是工具，你才是主導者。

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

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

一些對大家有用的資源：
100+ 編程學習路線 / 實戰項目 / 求職指導
100+ 簡歷模板
300+ 企業面試題庫 mianshiya.com
500+ AI 資源大全
1 對 1 模擬面試
動畫學算法教程