大家好，我是程序員魚皮。
先做個小測試，下面這幾個網站，你能看出哪些是 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 編程工具，或者利用
你只需要跟 AI 説：
請訪問 ai.codefather.cn，提取它的配色方案、字體選擇和佈局結構，然後生成類似風格的網站。
AI 會自己去看那個網站，然後學着做。
2）如果 AI 大模型支持圖片理解，你還可以把網頁截圖提供給 AI，搭配文字能讓 AI 還原網站更準確。
效果如圖：
3）如果你用的 AI 大模型不支持圖片理解、純文本理解又不到位，可以先利用 截圖轉代碼 工具，比如
把喜歡的網站截個圖，上傳上去，它直接給你轉成代碼。
然後你再把代碼餵給 AI，讓它參考着做。
準確度會高很多，抄樣式肯定不如抄代碼來的直接。
4）此外，還可以直接套用現成的網站模板或者 GitHub 上的開源項目。
推薦幾個不錯的網站模板資源：
這些網站模板都有源代碼，你選個不錯的下載下來，把代碼丟給 AI 讓它去改改內容就好了，樣式基本準確還原。
方法 2、設計優先開發
這個方法特別適合做大項目。
簡單來説，就是 不要上來就讓 AI 梭哈整個項目。
比如傳統做法是這樣的：幫我做一個包含用户系統、後台管理的完整 SaaS 平台。
然後 AI 嘩啦嘩啦給你生成幾十個文件，結果做完後發現頁面風格不對，重新返工，浪費 Tokens。
推薦的做法是 拆分步驟，先讓 AI 做個前端網站 Demo，純靜態頁面就好。對設計滿意了之後，再讓 AI 基於 Demo 代碼，用同樣的風格開發完整項目。
你像我生成出下面這種破玩意，肯定是不能讓 AI 繼續開發的！
這裏推薦一個很強大的 AI 設計工具
你只需要輸入一段描述，它就能生成專業的界面原型。
甚至你在紙上畫個草圖，拍照上傳，它都能識別出來轉成代碼。
你還可以人工修改設計的主題風格，或者人工標註要修改的部分，讓 AI 幫你快速調整。
設計完成後，導出文件或下載代碼，再餵給 Cursor 等 AI 編程工具繼續開發。這樣風格就定下來了，不會跑偏。
當然，如果你會用
然後搭配
此外，還有個工具叫
方法 3、豐富網站圖片
一般 AI 生成的網站是沒有圖片的，我們可以通過添加圖片讓網站更個性化。
沒必要讓 AI 從 0 開始生圖，只要告訴 AI 去主動找圖、到哪裏找圖就好。
圖片資源主要包括插畫、圖標、真實照片和佔位圖這幾類。
1）插畫庫
2）圖標庫
3）真實照片
4）佔位圖
如果你的 AI 編程工具支持網頁讀取，可以直接讓 AI 從這些網站搜索圖片：
我要開發一個攝影作品集網站
請根據需要，為網站搜索並集成圖片資源：
1. 插畫：使用 undraw.co，搜索與網站內容相關的插畫
2. 圖標：使用 Iconify 圖標庫
3. 真實照片：使用 Pexels 搜索真實照片
4. 佔位圖：使用 Picsum Photos 作為臨時佔位圖
這下，生成的網站看起來成熟多了吧？
方法 4、提示詞約束
就算不搞那些花裏胡哨的工具，只要跟 AI 對話時，把你的要求説清楚，一樣能讓網站變專業。
Claude 官方的 Cookbook 中有篇文章
下面講幾個我自己常用的提示詞技巧。
1）反向提示
不要只説 “要什麼”，更要説 “不要什麼”。
設計禁止清單：
❌ 紫色/靛藍色漸變
❌ 純平背景色（必須有噪點或漸變）
❌ Hero + 三卡片佈局
❌ 完美居中對齊
❌ 高深的專業名詞和無意義的空話
❌ Emoji 作為功能圖標
❌ 線性動畫 ease-in-out
你把這些禁止項寫清楚，AI 就不敢亂來了。
2）角色設定
給 AI 定個人設，比如：
你是一位資深獨立設計師，專注於《反主流》的網頁美學。
你鄙視千篇一律的 SaaS 模板，認為軟件界面應該有觸感和靈魂。
你的創意邊界：
- "現代但不要紫色" → 可以試試深灰+橙色
- "極簡但要有温度" → 用大留白+手繪插畫
- "科技感但不要冰冷" → 用深色+暖色點綴
這樣 AI 就知道，它不是在做標準答案，而是在做有個性的設計。
3）拒絕空洞文案
AI 特別喜歡寫那些 “聽起來很厲害但啥也沒説” 的文案。
你得明確告訴它文案的要求：
網站的文字內容必須做到：
- 具體化："每天節省 2 小時重複勞動"（不要説"提升生產力"）
- 口語化："用起來就像呼吸一樣自然"（不要説"卓越的用户體驗"）
- 帶情緒："再也不用在 10 個羣裏找文件了"（不要説"高效協作"）
- 甚至可以挑釁："別再假裝你會看完那些 PPT 了"
這樣文案就會更有人味兒了。
4）語境注入
AI 老是生成通用設計，是因為它不知道你要傳達什麼 “感覺”。
所以我們可以嘗試 先給 AI 喂情緒，再提設計。
比如你要做個具有科技感的博客網站，可以這麼説：
先閲讀這段話：《黑客與畫家》 - 編程語言是用來思考的
現在根據這種冷靜、理性的情緒設計博客首頁：
- 配色：深灰+冷藍
- 佈局：理性、有序
- 感覺：沉思的、專注的
AI 會把視覺參數（顏色、間距、字體）和文本的情感特徵（冷靜、理性）對齊，生成有特定氛圍的設計。
就像給演員説戲，不是告訴他演得開心一點，而是讓他回憶一段開心的記憶，情緒自然就出來了。
5）複用提示詞
前面講了這麼多約束條件，你不能每次都重複人工編寫一遍吧？
所以要保存提示詞為項目規則文件
比如這裏我給大家準備了一套提示詞模板，包含了前面講的所有技巧：
# 項目設計規則（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 對話，它都會自動讀取這個文件，按照你的要求來工作。
舉個例子，輸入跟之前一毛一樣的需求 “幫我做個動漫視頻網站”，有了規則文件後，效果立竿見影！
方法 5、Agent Skills
如果你覺得自己寫提示詞太麻煩，還有個更省事的辦法 —— Agent Skills。
簡單來説，Agent Skills 就是別人封裝好的專業技能包，你直接在 AI 編程工具中安裝就能用，讓 AI 學會各種專業技能，比如製作 PPT、整理 Excel 表格等等。
如果想讓 AI 開發的網站更精美獨特，可以用下面 2 個 Skills。
Frontend-design
這是 Anthropic 官方出品的
用法很簡單，以 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
它支持幾乎目前所有主流的 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 用一些 小眾但有特色 的組件庫。
比如
AI 很難從零寫出這麼複雜的效果，但你直接讓 AI 用這個庫，幾行代碼就能搞定。
要注意，對於這些相對小眾的組件庫，AI 可能不太熟悉用法。建議安裝 Context7 插件，可以實時查詢最新文檔。
或者直接把官方文檔地址發給 AI 讓它參考：
必須使用 Aceternity UI 設計網站
你需要閲讀官方文檔來了解最新的使用方法：https://ui.aceternity.com/components
網站的逼格立刻就上去了，完全不像 AI 生成的。
還有很多我覺得有特點的 UI 組件庫：
像我練習時長兩年半，最喜歡
方法 7、自主配色（擴展知識）
如果你想讓網站更獨特，完全走自己的路，那就得人工設計配色方案了。
這個方法適合有設計基礎的朋友，可以用一些快速生成個性化配色的工具，比如：
生成好配色後，把色值告訴 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 是工具，你才是主導者。
學會了或者學廢了的朋友們，點個贊吧~ 你可以在我免費開源的
