# 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）

## 