[GitHub Global] Translate Vibe Coding 零基础教程/30 经验技巧/12 Vibe Coding 网站美化技巧.md to zh-TW
This commit is contained in:
yupi-translate-app[bot]
committed by
GitHub
GitHub
parent
1095595006
commit
a3d3dcbf8f
@@ -0,0 +1,361 @@
|
||||
# Vibe Coding 網站美化技巧
|
||||
|
||||
> 7 個方法，讓你的網站告別 AI 味
|
||||
|
||||
|
||||
|
||||
你好，我是魚皮。
|
||||
|
||||
先做個小測試，下面這幾個網站，你能看出哪些是 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](https://www.firecrawl.dev/)，讓 AI 能夠直接讀取網頁。
|
||||
|
||||
|
||||
|
||||
你只需要跟 AI 說：
|
||||
|
||||
```markdown
|
||||
請訪問 ai.codefather.cn，提取它的配色方案、字體選擇和佈局結構，然後生成類似風格的網站。
|
||||
```
|
||||
|
||||
AI 會自己去看那個網站，然後學著做。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2）如果 AI 大模型支援圖片理解，你還可以把網頁截圖提供給 AI，搭配文字能讓 AI 還原網站更準確。
|
||||
|
||||
|
||||
|
||||
效果如圖：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3）如果你用的 AI 大模型不支援圖片理解、純文字理解又不到位，可以先利用 **截圖轉程式碼** 工具，比如 [Screenshot to Code](https://github.com/abi/screenshot-to-code)。
|
||||
|
||||
|
||||
|
||||
把喜歡的網站截個圖，上傳上去，它直接給你轉成程式碼。
|
||||
|
||||
|
||||
|
||||
然後你再把程式碼餵給 AI，讓它參考著做。
|
||||
|
||||
|
||||
|
||||
準確度會高很多，抄樣式肯定不如抄程式碼來的直接。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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 讓它去改改內容就好了，樣式基本準確還原。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 方法 2、設計優先開發
|
||||
|
||||
這個方法特別適合做大專案。
|
||||
|
||||
簡單來說，就是 **不要上來就讓 AI 梭哈整個專案**。
|
||||
|
||||
比如傳統做法是這樣的：幫我做一個包含用戶系統、後台管理的完整 SaaS 平台。
|
||||
|
||||
然後 AI 嘩啦嘩啦給你生成幾十個檔案，結果做完後發現頁面風格不對，重新返工，浪費 Tokens。
|
||||
|
||||
|
||||
|
||||
推薦的做法是 **拆分步驟**，先讓 AI 做個前端網站 Demo，純靜態頁面就好。對設計滿意了之後，再讓 AI 基於 Demo 程式碼，用同樣的風格開發完整專案。
|
||||
|
||||
你像我生成出下面這種破玩意，肯定是不能讓 AI 繼續開發的！
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
這裡推薦一個很強大的 AI 設計工具 [Google Stitch](https://stitch.withgoogle.com/)。
|
||||
|
||||
你只需要輸入一段描述，它就能生成專業的介面原型。
|
||||
|
||||
|
||||
|
||||
甚至你在紙上畫個草圖，拍照上傳，它都能識別出來轉成程式碼。
|
||||
|
||||
|
||||
|
||||
你還可以人工修改設計的主題風格，或者人工標註要修改的部分，讓 AI 幫你快速調整。
|
||||
|
||||
|
||||
|
||||
設計完成後，匯出檔案或下載程式碼，再餵給 Cursor 等 AI 編程工具繼續開發。這樣風格就定下來了，不會跑偏。
|
||||
|
||||
|
||||
|
||||
當然，如果你會用 [Figma](https://www.figma.com/) 這種更專業的設計工具，你可以先在 Figma 裡把網站設計得清清楚楚。
|
||||
|
||||
|
||||
|
||||
然後搭配 [Figma MCP](https://github.com/GLips/Figma-Context-MCP) 擴展，讓 AI 直接讀取你的 Figma 設計檔案，按照設計生成程式碼。
|
||||
|
||||
|
||||
|
||||
此外，還有個工具叫 [Onlook](https://www.onlook.ai/)，號稱為設計師準備的 Cursor，可以讓設計師直接可視化編輯網頁程式碼，設計和開發無縫銜接。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 方法 3、豐富網站圖片
|
||||
|
||||
一般 AI 生成的網站是沒有圖片的，我們可以通過添加圖片讓網站更個性化。
|
||||
|
||||
沒必要讓 AI 從 0 開始生圖，只要告訴 AI 去主動找圖、到哪裡找圖就好。
|
||||
|
||||
圖片資源主要包括插畫、圖標、真實照片和佔位圖這幾類。
|
||||
|
||||
1）插畫庫 [unDraw](https://undraw.co/)：有非常多免費的 SVG 插畫，而且可以自訂顏色。
|
||||
|
||||
|
||||
|
||||
2）圖標庫 [Iconify](https://iconify.design/)：20 多萬個免費向量圖標
|
||||
|
||||
|
||||
|
||||
3）真實照片 [Pexels](https://www.pexels.com/)：免費高質量圖庫，還提供了 API 快速搜尋圖片
|
||||
|
||||
|
||||
|
||||
4）佔位圖 [Picsum Photos](https://picsum.photos/)：直接用 URL 指定圖片尺寸，每次刷新都是不同的真實照片
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
如果你的 AI 編程工具支援網頁讀取，可以直接讓 AI 從這些網站搜尋圖片：
|
||||
|
||||
```markdown
|
||||
我要開發一個攝影作品集網站
|
||||
請根據需要，為網站搜尋並整合圖片資源：
|
||||
1. 插畫：使用 undraw.co，搜尋與網站內容相關的插畫
|
||||
2. 圖標：使用 Iconify 圖標庫
|
||||
3. 真實照片：使用 Pexels 搜尋真實照片
|
||||
4. 佔位圖：使用 Picsum Photos 作為臨時佔位圖
|
||||
```
|
||||
|
||||
|
||||
|
||||
這下，生成的網站看起來成熟多了吧？
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 方法 4、提示詞約束
|
||||
|
||||
就算不搞那些花裡胡哨的工具，只要跟 AI 對話時，把你的要求說清楚，一樣能讓網站變專業。
|
||||
|
||||
Claude 官方的 Cookbook 中有篇文章 [Frontend Aesthetics](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics)（前端美學），專門講怎麼避免讓 AI 生成具有 AI 味的通用設計。
|
||||
|
||||
|
||||
|
||||
下面講幾個我自己常用的提示詞技巧。
|
||||
|
||||
#### 1）反向提示
|
||||
|
||||
不要只說「要什麼」，更要說「不要什麼」。
|
||||
|
||||
```plain
|
||||
設計禁止清單：
|
||||
❌ 紫色/靛藍色漸變
|
||||
❌ 純平背景色（必須有噪點或漸變）
|
||||
❌ Hero + 三卡片佈局
|
||||
❌ 完美居中對齊
|
||||
❌ 高深的專業名詞和無意義的空話
|
||||
❌ Emoji 作為功能圖標
|
||||
❌ 線性動畫 ease-in-out
|
||||
```
|
||||
|
||||
你把這些禁止項寫清楚，AI 就不敢亂來了。
|
||||
|
||||
|
||||
|
||||
#### 2）角色設定
|
||||
|
||||
給 AI 定個人設，比如：
|
||||
|
||||
```markdown
|
||||
你是一位資深獨立設計師，專注於《反主流》的網頁美學。
|
||||
你鄙視千篇一律的 SaaS 模板，認為軟體介面應該有觸感和靈魂。
|
||||
你的創意邊界：
|
||||
- "現代但不要紫色" → 可以試試深灰+橙色
|
||||
- "極簡但要有溫度" → 用大留白+手繪插畫
|
||||
- "科技感但不要冰冷" → 用深色+暖色點綴
|
||||
```
|
||||
|
||||
這樣 AI 就知道，它不是在做標準答案，而是在做有個性的設計。
|
||||
|
||||
|
||||
|
||||
#### 3）拒絕空洞文案
|
||||
|
||||
AI 特別喜歡寫那些「聽起來很厲害但啥也沒說」的文案。
|
||||
|
||||
你得明確告訴它文案的要求：
|
||||
|
||||
```plain
|
||||
網站的文字內容必須做到：
|
||||
- 具體化："每天節省 2 小時重複勞動"（不要說"提升生產力"）
|
||||
- 口語化："用起來就像呼吸一樣自然"（不要說"卓越的用戶體驗"）
|
||||
- 帶情緒："再也不用在 10 個群裡找檔案了"（不要說"高效協作"）
|
||||
- 甚至可以挑釁："別再假裝你會看完那些 PPT 了"
|
||||
```
|
||||
|
||||
這樣文案就會更有人味了。
|
||||
|
||||
|
||||
|
||||
#### 4）語境注入
|
||||
|
||||
AI 老是生成通用設計，是因為它不知道你要傳達什麼「感覺」。
|
||||
|
||||
所以我們可以嘗試 **先給 AI 餵情緒，再提設計**。
|
||||
|
||||
比如你要做個具有科技感的部落格網站，可以這麼說：
|
||||
|
||||
```markdown
|
||||
先閱讀這段話感受氛圍：《黑客與畫家》 - 程式語言是用來思考的
|
||||
|
||||
現在根據這種冷靜、理性的情緒設計部落格首頁：
|
||||
- 配色：深灰+冷藍
|
||||
- 佈局：理性、有序
|
||||
- 感覺：沉思的、專注的
|
||||
```
|
||||
|
||||
AI 會把視覺參數（顏色、間距、字體）和文字的情感特徵（冷靜、理性）對齊，生成有特定氛圍的設計。
|
||||
|
||||
|
||||
|
||||
就像給演員說戲，不是告訴他演得開心一點，而是讓他回憶一段開心的記憶，情緒自然就出來了。
|
||||
|
||||
|
||||
|
||||
#### 5）複用提示詞
|
||||
|
||||
前面講了這麼多約束條件，你不能每次都重複人工編寫一遍吧？
|
||||
|
||||
所以要保存提示詞為專案規則檔案 [AGENTS.md](https://agents.md/)，便於多次複用。
|
||||
|
||||
[AGENTS.md](https://agents.md/) 是一個開放標準，讓不同的 AI 工具都能讀取同一份規則檔案，主流的 AI 編程工具（Cursor、Claude Code、Windsurf 等）都支援。
|
||||
|
||||
|
||||
|
||||
比如這裡我給大家準備了一套提示詞模板，包含了前面講的所有技巧：
|
||||
|
||||
```markdown
|
||||
# 專案設計規則（AGENTS.md）
|
||||
|
||||
##
|
||||
Reference in New Issue
Block a user