網頁設計去AI模板化

網頁設計去AI模板化 是做什麼的？

網頁設計中的「AI模板化」並非單一錯誤選擇，而是數百萬個登陸頁面的平均值：紫到粉的漸層、置中英雄區塊搭配徽章藥丸和兩個按鈕、三個帶有淺色圖示方塊的同等特色卡片、深色背景上的玻璃卡片、以及寫著「解鎖無縫工作流程」的文案。每個元素單獨看都還行，但組合在一起，就變成一個可以屬於任何公司的頁面，也就等於不屬於任何公司。

這項技能執行三項任務：

1. 審計 現有頁面、模型或程式碼庫，並報告其模板化特徵，附帶具體修復方案。
2. 引導 新建置流程，從一開始就避免寫入模板化內容。
3. 重寫 聽起來像生成式的文案。

進行審計或建置時，請閱讀 references/tells.md（視覺、佈局、動態和Tailwind的模板特徵，以及各自的替代方案）。撰寫或審查任何標題、副標題、功能介紹或行動呼籲時，請閱讀 references/copy.md。

最重要的測試

替換測試。 將頁面上的Logo和產品名稱替換成競爭對手的。頁面仍然成立嗎？如果是，那麼無論它多麼精緻，它都是模板化設計。一個經過設計的頁面是建立在只有這個品牌才擁有的素材之上：它的產品、它的人員、它的地點、它的流程、它實際的數字、它的聲音。以下所有判斷都是這個測試的具體應用。

兩個輔助測試：

• 瞇眼測試。 瞇起你的眼睛。如果你看到一列以等距間隔堆疊的、大小相同的圓角矩形，那麼這個佈局就是一個模板。經過設計的頁面具有不規則的輪廓：一個區塊寬，下一個窄，某個東西非常大，許多東西很小。
• 源頭測試。 每個決策的依據是什麼？「來自品牌的素材」是好的。「因為登陸頁面看起來就是這樣」就是模板特徵。

模式 1：審計

當用戶提供URL、截圖、Figma框架、元件或儲存庫並希望獲得審查，或說頁面看起來很普通時使用。

1. 先閱讀所有內容。 對於程式碼，閱讀每個頁面/區塊元件以及Tailwind配置或全域CSS。對於截圖，在開始撰寫之前先看整個頁面。不要只看英雄區塊就發表評論。
2. 執行替換測試並用一句話說出結論。 要誠實且具體：「這可能是任何一個開發工具初創公司的首頁」比一個分數更有用。
3. 列出模板特徵，從最嚴重的開始。 對於每個特徵：特徵是什麼、位置在哪裡（檔案和行號，或區塊名稱）、為什麼它看起來像生成的、以及修復方法。從 references/tells.md 中提取，但要針對這個頁面撰寫修復方案，而不是通用的替代方案。
4. 指出值得保留的部分。 每個頁面都有一些運作良好的元素。要說出來，否則用戶可能會把它和模板化內容一起丟掉。
5. 給出三個影響最大的改變。 通常是：一個字體排版決策、一個佈局決策、一個內容決策。如果用戶只做了這些，頁面應該就能通過瞇眼測試。

審計的輸出格式：

## 結論
一兩句話。替換測試的結果。總體評級：模板化 / 混合 / 經過設計。

## 優先修復這些
1. [特徵] / [位置] / [具體修復]
2. ...
3. ...

## 其他所有問題，按區域分類
### 字體排版  ### 色彩  ### 佈局  ### 元件  ### 動態  ### 文案  ### 內容/圖片
（每個分類下一個簡短清單；跳過沒有問題的分類）

## 保留
哪些已經很好以及原因。

當用戶要求你應用修復時，請直接編輯實際檔案。除非被要求，否則不要從頭重寫整個頁面；有針對性的編輯能保留原本有效的部分，也更容易審查。

模式 2：建置無模板化的網站

在生成任何網站、頁面、區塊或模板時使用。先後順序很重要：早期的決策（概念、字體、網格）能防止模板化；後期的決策（替換這個漸層）只能隱藏它。

在撰寫任何標記語言之前

1. 找出品牌的原始素材。 這個業務實際上擁有什麼？一個有真實介面的產品、一個實體地點、一種材料、一個工藝流程、一個有觀點的創辦人、一個數據集、一個有名稱的客戶群。選定一個東西，讓它驅動整個頁面。咖啡烘焙商的網站可以圍繞烘焙曲線來建置；經銷商的網站可以圍繞展示廳；發票應用的網站可以圍繞一張真實的發票。如果用戶沒有給你任何東西，問一個問題，或者在回覆的開頭說明你正在建立的假設。
2. 選擇一個佈局概念，而不是一個區塊清單。 決定頁面要做的結構性動作：一個左欄固定的編輯式雙欄佈局、一個滿版圖片的節奏、一個密集的索引/表格頁面、一個巨大的標題配上小字體的支持文字、一個產品的水平滾動。然後讓區塊從這個概念中自然產生。永遠不要從「英雄區塊 → Logo條 → 特色 → 見證 → 價格 → 常見問題 → 行動呼籲 → 頁尾」開始。這個清單本身就是模板化模板；如果頁面需要其中一些區塊，它們應該看起來像這個頁面的區塊，而不是那個清單的區塊。
3. 先設定字體，再設定顏色。 選擇一個有個性的顯示字體和一個實用的正文字體；設定一個有較大跳躍的真實字級（例如 14 / 18 / 32 / 72 / 140），而不是Tailwind從 text-4xl 到 text-6xl 的平緩過渡。決定對齊方式：左對齊是經過設計的頁面的預設，而全部置中是生成式頁面的預設。
4. 從素材中衍生出調色板。 一兩種品牌色、一個紙張或墨水背景色，以及只在少數地方使用的強調色。漸層並未被禁止，但一個不是從任何東西衍生出來的漸層（紫→粉、藍→紫）是目前網路上最強的AI模板特徵。

在撰寫標記語言時

• 變化節奏。 不是每個區塊都是 py-24 max-w-7xl mx-auto。讓一個區塊打破容器邊界、一個區塊放在狹窄的寬度內、一個區塊是使用細線分隔的清單而不是卡片。
• 偏好線條和空間勝過卡片和陰影。 細邊框（border-b border-neutral-200）、空白和字體大小能比 rounded-2xl shadow-lg 區塊更好地傳達層級。當某個東西實際上是一個離散物件（例如一個產品、一個方案）時才使用卡片，而不是作為預設的包裝器。
• 使用真實內容或誠實的佔位符。 根據品牌的素材寫出真實的標題。如果某個事實未知，寫 {{TODO: real figure}} 而不是編造「10,000+ 快樂客戶」。假Logo、假五星好評和整數統計數據是內容模板化，比缺少一個區塊更糟糕。
• 圖示：少用或不用。 Emoji 永遠不是圖示。功能列表的每一行不需要一個 lucide 圖示。如果使用圖示，它們應該是一套一致的、小型且次要於文字的。
• 有理由的動態效果。 不要在每個元素上都做淡入交錯效果。一兩個與內容相關的刻意動作（例如在滾動時顯示產品圖片、懸停時顯示細節）看起來就是經過設計的。預設過渡效果應該快速且簡單。
• 圖片：具體勝過抽象。 沒有3D水滴、沒有漸層球體、沒有「桌上的筆電」這種庫存照片。一張真實的截圖、一張產品照片、一張地圖、一份文件、一個來自素材的紋理。如果這些都沒有，一個排版良好的文字區塊比一張佔位圖片更好。
• 也要檢查二階模板化。 對漸層模板化的反應本身也形成了模板：巨大的襯線字體、粒狀覆蓋層、帶 (01) 的編號章節、到處都是大寫等寬字體的標籤、跑馬燈行、跟隨游標的水滴、「© 2026 — 保留所有權利」使用等寬字體。它同樣容易辨識。只有在這些元素來自品牌時才使用，而不是因為它們象徵「經過設計」。

在交付之前

對你自己的輸出快速執行審計：替換測試、瞇眼測試、掃描 references/tells.md。修復你發現的問題。然後用一兩句話告訴用戶為什麼頁面看起來像這樣（它是基於哪個素材建置的、佈局概念是什麼），這樣他們可以判斷這個決策，而不是只看像素。

模式 3：文案

閱讀 references/copy.md。簡而言之：生成的文案是抽象、形容詞堆砌且對稱的。經過設計的文案是具體、有說服力且不規則的。將每個宣稱替換為事實，將每個「無縫」替換為實際發生的情況，將每個三重排比替換為唯一重要的一件事。標題應該用品牌的聲音、以客戶會使用的詞語說明事物是什麼或做什麼。行動呼籲應該說明接下來會發生什麼事（「查看烘焙曲線」、「預約試駕」），而不是「開始使用」。

校準

• 並非每個模式在每個情境下都是錯的。一個有三個方案的三欄定價表對於一個確實有三個方案的產品來說是正確的；模板特徵是當沒有東西支持時，中間那個欄位的「最受歡迎」徽章。根據替換測試來判斷，而不是根據檢查清單。
• 用戶可能想要一個傳統、可信賴的佈局（例如銀行、診所、經銷商）。「去模板化」不代表要奇怪。它代表要具體。一個基於真實素材的傳統結構能夠通過測試；一個充滿通用卡片的實驗性佈局則不能。
• 當用戶是設計師或開發者時，以程式碼或確切數值的形式提供修復。當他們不是時，用白話描述改變並主動提供協助。
• 不要奉承也不要落井下石。給出一個誠實的結論、一個排序清單和一條前進的道路。