反 AI 廉價感網頁設計
多數 AI 生成的網站看起來都差不多，因為模型會用最常見的統計答案來填滿每一個開放式決策：Inter 字型、靛藍到紫色的漸層、帶有柔和陰影的圓角 2xl 卡片、置中的英雄區塊加上藥丸提示徽章、三個帶有 Lucide 圖示的功能卡片。每個選擇單獨看都沒問題。但組合起來就給人「沒有人做過任何決定」的感覺，訪客能立刻察覺。
專業設計師避開這些元素不是因為有規則禁止，而是因為他們從主題（商業、內容、受眾）出發，每個選擇都由此延伸。你的工作方式也應該一樣。下面的禁止清單是備用防線，而非設計方法。
設計流程
1. 在任何程式碼之前，先撰寫設計簡報
花幾句話完成這部分，可以在你的思考過程裡寫，或是在專案規模較大時展示給使用者看。填寫以下項目：
- 主題： 這是什麼？給誰用的？他們需要在這個頁面上做什麼？
- 性格： 三個專門形容這個主題的形容詞。「現代、乾淨、時尚」可以用來形容所有東西，所以不算數。像是「灰塵味、溫暖、有點書呆子氣」適合二手書店，或是「冷靜、平靜、精確」適合實驗室。
- 真實世界參考： 一個頁面借鑒的實體或歷史設計傳統。例如：火車時刻表、1970 年代瑞士海報、種子包裝、博物館牆標、五金目錄、報紙頭版、同人誌、餐廳菜單、田野筆記本、舊軟體手冊、唱片封套。從主題中挑選，不要每次都預設用同一個。
- 調色盤： 3–5 個實際的 Hex 色碼，並說明它們從何而來（產品的材質、品牌、照片、上述的參考來源）。
- 利基與類型： 說出利基市場（烘焙坊、律師事務所、開發工具、健身房、婚禮…），然後從
references/fonts-by-niche.md中為該利基選擇字型，挑選符合你那三個形容詞的選項。寫一行說明為什麼適合（「Alfa Slab One：看起來像啤酒廠牆上的手繪招牌」）。如果你寫不出那行說明，代表你還沒選好。 - 一個標誌性細節： 一個只屬於這個網站、令人難忘的設計。例如，價格像手寫黑板一樣的設定、像法律文件一樣的邊緣章節編號、像方格紙一樣的格線、或是使用全版且未裁切的照片。
如果使用者已經提供了品牌、顏色、字型或參考資料，就以它們為準。圍繞它們來建立設計簡報。
2. 從內容向外建構
- 有真實內容時就使用真實內容。如果沒有，請為這個主題撰寫合理、具體的佔位文案（聽起來真實的產品名稱、有真實感的數字、可信的地址），而不是通用的行銷填充文字。
- 讓內容決定佈局。菜單需要欄位和虛點引導線。作品集需要大圖片和簡潔的裝飾。文件網站需要側邊欄和密集文字。不要把每個主題都塞進同一個登陸頁面模板。
- 變化區塊結構。真實的網站會有一個長篇文字區塊、一個密集的表格、一個打破網格的圖片。它們不會重複「標題 + 副標題 + 3 張卡片」八次。
3. 交付前進行審查
將你的輸出與 references/slop-catalog.md 進行比對（在一個會話中首次使用此技能時請閱讀它；它是完整的清單，包含原因和替代方案）。如果專案在磁碟上且 Node 可用，請執行掃描器：
node <skill-path>/scripts/slop-check.js <file-or-folder>
它會標記常見的特徵（漸層、發光陰影、過度使用的字型、閃閃發光的表情符號、流行詞文案）及其檔案和行號。並非每個命中都是錯誤的。天氣圖中的漸層或使用者明確要求的字型就沒問題。修正每個命中點，或者有理由地保留它。
簡短禁止清單
這些是最明顯的特徵。除非使用者要求或品牌真的需要，否則避免使用。完整清單在目錄中。
顏色
- 紫色 / 紫羅蘭色 / 靛藍色 / 藍色 / 粉紅色的漸層，用於背景、按鈕、邊框或文字
- 標題上的漸層文字（
background-clip: text） - 在近乎黑色的背景上使用霓虹色強調色（電光青、洋紅、酸橙綠）
- 英雄區塊後方模糊的彩色「球體」、極光或網格漸層色塊
- 未經修改直接使用 Tailwind 的預設調色盤（
indigo-600、slate-900、violet-500）作為品牌色
表面與效果
- 彩色發光陰影（
box-shadow: 0 0 40px rgba(139,92,246,.5)）和到處都是的shadow-2xl - 玻璃態效果：使用半透明白色填充和
border-white/10的backdrop-blur - 每個元素都用自己獨立的圓角卡片，到處都是相同的大圓角（
rounded-2xl/3xl） - 帶有徑向漸層遮罩的點狀或網格背景圖案
- 動畫漸層邊框、閃爍掃描、「光束」線條、聚光燈跟隨滑鼠
- 每個卡片在懸停時都往上飄（
translateY(-4px)+ 更大的陰影）
排版
- 未經思考直接選用 Inter、Poppins、Montserrat、Plus Jakarta Sans、DM Sans、Outfit、Sora、Manrope、Space Grotesk、Geist 或 Instrument Serif。它們都是好字型。問題是沒有理由就選擇它們。
- 任何不符合利基市場的字型，或該利基市場的明顯陳腔濫調（請參閱
references/fonts-by-niche.md） - 英雄標題中的某個詞使用漸層或斜體襯線字體（「Build faster」）
- 每個區塊標題上方都有一個小小的全大寫寬間距「眉毛」標籤
- 所有東西都置中對齊
佈局
- 模板：固定導覽列 → 帶有「✨ New」藥丸徽章的置中英雄區塊 → 兩個按鈕 → 「Trusted by」灰階標誌 → 3 欄功能卡片（帶有放在圓角方形中的圖示）→ 統計數據條 → 帶 5 星評價的卡片 → 3 層定價方案（中間高亮）→ 常見問題手風琴 → 漸層 CTA 橫幅 → 4 欄頁尾
- 預設使用 Bento 網格來展示功能
- 傾斜、帶有透視變形的偽造儀表板截圖
內容與文案
- 使用表情符號作為圖示或項目符號（🚀 ✨ ⚡ 💡 🔥），以及用閃閃發光圖示來表示任何「AI」相關
- 「Unlock the power of」、「Supercharge」、「Elevate」、「Seamless」、「Effortless」、「Revolutionize」、「Next-generation」、「all-in-one platform」、「built for the future」、「take X to the next level」
- 三段式標語：「Fast. Simple. Powerful.」
- 虛構的統計數據（10k+ users, 99.9% uptime）和假的使用者評價（「Sarah J., CEO at TechCorp」）
動態
- 每個元素都有的滾動漸入效果，並設置錯開時間
- 浮動/上下飄動的元素、打字機效果的標題、數字跳動效果
該怎麼做
顏色。 從中性色開始，但要賦予它們溫度（暖調紙張 #f4efe6、冷調灰 #e8eaec、墨色 #1b1a17），而不是純 #fff 和 Tailwind 的 slate。加入一個強調色並節制使用，用於連結、主要操作和一兩個重點高亮。從主題中汲取靈感：陶藝工作室用赤陶色、交通 App 用信號橙、藥局用瓶綠色。使用平塗色塊。如果確實需要漸層（天空、熱力圖），讓它保持微妙並與意義相關聯。
排版。 根據利基市場選擇字型，絕不隨機或習慣性挑選。思考這個生意在它的招牌、菜單、標籤或信紙上可能會印什麼字體，然後找到相符的字型。一個啤酒廠和一個律師事務所絕不該意外分享同一種字體。在選擇前請閱讀 references/fonts-by-niche.md。它涵蓋了約 40 個利基市場，每個都有數個選項，以及 AI 在每個利基中會傾向使用的陳腔濫調（遊戲用 Orbitron、奢侈品用 Playfair、健身房用 Bebas + Montserrat），還包含非拉丁語系如印地語和泰米爾語的字型。系統字型堆疊（system-ui, -apple-system, "Segoe UI", sans-serif）對於工具和儀表板來說是合理的選擇。一個字體家族通常就夠了。最多兩個。使用字重、級數和間距來建立層級，並將主體文字左對齊，設定可讀的行長（約 60–75 個字元）。
表面。 使用留白、分隔線（1px solid 搭配較深的中性色）和背景變化來區隔元素，而不是依賴陰影。如果要使用陰影，讓它小一點、中性且像真實光線一樣偏移（0 1px 2px rgb(0 0 0 / .08)）。有目的地選擇圓角半徑：0 適用於編輯或工業風格，2–6px 適用於大多數 UI，只有藥丸和頭像才用全圓形。不是所有東西都需要容器。
佈局。 使用不對稱：一個寬的文字欄搭配一個窄的側邊欄、一個打破網格的圖片、一個左對齊的英雄區塊。讓密集度配合內容。定價可以是簡單的表格。功能可以是用句子組成的清單，而不是卡片。省略主題不需要的區塊。一個烘焙坊網站不需要統計數據條。
互動。 連結加底線。懸停狀態改變顏色或底線，而非位置。按鈕要有清楚的按下/焦點狀態。只在需要解釋某件事時使用動態（選單開啟、狀態改變），並尊重 prefers-reduced-motion 設定。
圖像。 實際事物的真實照片勝過任何插圖。如果沒有，使用誠實的佔位符（一個標示「photo: storefront, morning light」的中性色方塊），勝過使用庫存 3D 塊狀人物、等角視角人物或 AI 藝術。簡單的圖表、地圖、產品照片和純文字排版看起來都更人性化。
文案。 具體地說明這個東西是做什麼的，用業主在櫃檯前會說的樸實詞語。「每天早上 7 點開始供應新鮮酸種麵包，週一公休」遠比「體驗工藝卓越」來得好。與其編造一個統計數據，不如不要放。
不要用一個陳腔濫調換另一個
當一個預設被禁止時，第二常見的答案就會成為新的預設：用 Space Grotesk 取代 Inter、用青色取代紫色、每個網站都使用帶有粗黑邊框和黃色高亮的「粗獷主義」風格。如果你設計的兩個不同主題看起來相似，代表你是在使用模板，而不是根據設計簡報。回到步驟 1，讓主題更用力地推動設計。
當使用者想要「廉價感」外觀時
有些使用者想要那種華麗的 SaaS 外觀，或者一個品牌真的就是紫色加上漸層。請遵循明確的指示和品牌規範。它們會覆蓋此技能的設定。你仍然可以在不犧牲品牌要求的情況下應用節制原則：用一個漸層代替五個、用真實的文案代替流行詞、選用經過深思熟慮的字型搭配。