你的網站不是醜，是太像 AI

打開幾個由 AI 快速生成的網站，你可能會遇到一種似曾相識的畫面：藍紫漸層鋪滿首屏、毛玻璃卡片漂在背景上、圓角膠囊放著一行小字、中央是一段超大的科技感標題，旁邊再排上一組線條一致的圖示。

這些元素沒有哪一個天生不好。漸層可以建立層次，卡片可以整理資訊，圓角也能讓介面更親和。真正讓人覺得很像 AI 的，是它們在缺少情境的狀況下被反覆綁在一起，最後變成不管什麼產品都能套用的視覺平均值。

為什麼 AI 會回到同一套安全答案？

生成式 AI 擅長從大量既有模式中預測合理的下一步。當你要求它做一個現代、專業、高級、有科技感的網站，這些形容詞沒有告訴它使用者是誰、內容的重要順序、產品真正的差異或品牌願意承擔什麼風格風險。

缺少這些資訊時，模型最合理的做法，就是選擇在訓練資料與常見範例中反覆出現、通常不會立刻被否決的組合。

於是，科技感容易被翻譯成藍紫漸層與發光背景；高級容易變成大量留白、細字與玻璃效果；SaaS 容易變成置中 Hero、兩顆 CTA、三欄功能卡與一段預製的客戶推薦。

這不一定是模型沒有能力，而是我們沒有給它需要做選擇的條件。

問題不是元件，而是沒有取捨

設計同質化常被簡化成一份禁用清單：不要紫色、不要漸層、不要膠囊、不要卡片、不要某一套圖示。這種清單可以暫時避開最明顯的套路，卻不一定會產生更好的設計。

因為把預設全部刪掉之後，如果受眾、任務、內容與品牌方向仍然模糊，AI 只會換一批同樣安全的新預設。

真正的關鍵是取捨。設計要回答的不是能不能用卡片，而是這些資訊為什麼需要被放在同一個容器裡；不是能不能有第二顆按鈕，而是使用者在這個時刻真的有兩個同等重要的下一步嗎。

決策一：先定義使用者的第一個任務

不要先從顏色或風格開始。先說清楚這個頁面給誰看，以及他進來後最先需要完成什麼。

同樣是 AI 工具網站，第一次接觸的個人創作者、正在比較 API 的工程師、負責採購的企業管理者，需要看到的資訊順序完全不同。如果沒有第一任務，畫面就容易塞滿每個網站都有的功能卡、數字與口號。

可以把需求寫成一句可驗收的話：

第一次使用的創作者進入首屏後，能在十秒內理解工具用途，並開始建立第一個作品。

這句話會直接影響標題、素材、按鈕與資訊密度，比做得有未來感更能推動實際設計。

決策二：只留一個最重要的行動

AI 很容易產生一組並排按鈕：一顆主要 CTA 加一顆次要 CTA。這種做法不是錯，但如果每個頁面都如此，常代表設計沒有真正決定下一步。

問一個更難但更有效的問題：如果只能留一個行動，應該留下什麼？

當主要行動明確，其他內容就能依它重新排序。次要連結可以移到導覽、內容段落或操作後的下一步，而不是在首屏搶同一份注意力。

決策三：把視覺規則寫成可判斷的限制

簡約、漂亮、有質感都太抽象。有效的限制應該能讓設計者判斷某個選擇是否符合要求。

例如：

• 色彩只使用黑、白與一個高彩度紅色，狀態色除外。
• 標題與內文只用兩個字重，不使用幾何科技字體。
• 互動元件採小圓角，內容區塊不使用懸浮陰影。
• 每個頁面只允許一個高對比主要按鈕。
• 圖像優先使用真實作品與產品狀態，不用抽象光球填空。

這些限制不是為了束縛創意，而是迫使系統在一致規則中做更有意義的選擇。

決策四：使用真正能代表內容的素材

當網站沒有真實產品、人物、場景或資料，AI 只好用抽象裝飾補滿空間。這也是發光球體、假程式碼、漂浮卡片與假應用視窗大量出現的原因。

如果產品本身值得看，就讓實際操作狀態成為主視覺；如果服務價值來自人，就使用真實工作場景；如果內容依賴數據，就呈現真正需要理解的圖表與比較。

真實素材會自然帶出比例、色彩、細節與敘事，讓版面不必靠通用裝飾假裝完整。

決策五：強迫自己做一個可辨識的構圖選擇

一個頁面不需要每個地方都很特別，但至少要有一個能說明為什麼是這樣安排的構圖決策。

它可能是讓真實作品占據首屏大部分面積；也可能是把操作步驟做成連續的垂直敘事；或是用一段關鍵資料作為整頁的視覺節奏。

重點不是追求怪異，而是避免每個區塊都直接採用預設答案。

差異化不能破壞可用性

反對制式感，不代表每一個按鈕都要長得不同，或導覽必須藏在使用者找不到的地方。

一致、可預測的結構能降低理解成本，對可用性與無障礙尤其重要。相同功能應該保持相同呈現，互動元件需要足夠對比與清楚狀態，閱讀順序也不能為了視覺效果被打亂。

真正成熟的差異化，發生在內容、比例、字體、素材與敘事選擇，而不是讓使用者重新學一次網站怎麼操作。

一個更有效的生成式設計提示方式

與其寫：

做一個高級、現代、有科技感的 AI 網站。

可以改成：

這是給第一次使用的創作者。首屏只要讓他理解工具用途並開始第一個作品。只保留一個主要行動。使用黑、白、紅三色，不用漸層、懸浮卡片或裝飾光暈。主視覺使用真實作品，不畫假介面。桌面與手機都要維持清楚閱讀順序；相同功能保持一致樣式。

後者不只是更長，而是加入了可判斷的決策：受眾、任務、行動、色彩、素材與可用性。

AI 生成設計真正缺少的，通常不是更多形容詞，而是有人願意為每個重要選擇說出理由。

查證摘要

• pols.dev 將 AI slop 描述為泛用、低投入、看起來相似的 AI 輸出，並整理多種常見制式設計模式。
• Shuffle 將 AI 網站同質化連結到常見模式、高機率安全組合與缺少品牌脈絡的輸入。
• web.dev 強調一致、可預測的結構與互動有助使用者理解，因此差異化不應破壞可用性。
• 本文沒有把任何單一元件定義為錯誤；判斷重點是它是否符合受眾、任務、內容與整體規則。
• 主要資料：https://pols.dev/slop.md
• 延伸資料：https://shuffle.dev/blog/2026/01/why-do-most-ai-generated-websites-look-the-same/
• 可用性參考：https://web.dev/learn/accessibility/design-ux/