你用 AI 做的網站，為什麼看起來跟別人一樣？

這一兩年做網站這件事，門檻掉得很快。

我教過一位六十多歲的阿姨用 AI 做出小遊戲，也看過完全沒寫過程式的行銷企劃，兩週內生出一個客戶資料分析儀表板。後龍的鄉親花四小時架好自己的官網，隔天就開始收單。這些都不是特例，是現在每天都在發生的事。

但接下來會發生一件有點掃興的事：當你把十個人用 AI 做出來的網站並排放在一起，你會發現它們長得很像。

同樣的字型、同樣的紫色漸層、同樣置中的大標題配三欄等寬卡片、同樣的圓角、同樣沒有理由的陰影。不是誰抄誰，是大家都問了同一個問題：「幫我做一個好看的網站。」

先認出它：AI 味的六個長相

要改掉一個東西，得先認得出它。這六個特徵幾乎是一組的，看到一個，另外五個通常也在。

字型用 Inter。 Inter、Roboto，或者乾脆不指定讓系統決定。這些字型本身沒問題，問題是它們是安全牌，安全到沒有任何記憶點。更常見的狀況是：英文字型挑了半天，中文完全沒寫，於是 macOS 上是蘋方、Windows 上是微軟正黑，你的網站在兩臺電腦上長得不一樣，而且哪一種都不是你選的。

紫色漸層配白底。 那個 #6366f1 的靛藍紫，加上斜四十五度的漸層。看過一次之後，你會開始在每個 AI 生成的頁面上看到它。

置中英雄區加三欄卡片。 大標置中、副標置中、兩顆按鈕置中，底下三張等寬卡片。這個版型萬用到誰都能套，也因此誰都不是。

處處大圓角。 每個區塊都是 rounded-2xl，連分隔線都圓了。圓角是一種語氣，不是預設值。

沒有理由的投影。 元素並沒有浮起來的必要，卻都帶著一層灰影。現在比較常見的做法是用 1px 邊框處理層次，而不是陰影。

每個元素都在動。 滑到哪裡都有東西淡入放大。動態沒有重點，等於沒有動態。

這不是 AI 的錯

模型的工作，是給你最可能的下一個選擇。

最可能等於訓練資料裡最常見，最常見等於大家都長的那個樣子。所以當你說「做得好看一點」「再現代一點」「要有質感」，它聽到的其實是：請給我被標記為好看的那個平均值。

你要的不是平均值，是不常見但對這個專案正確的那個選擇。而模型沒辦法替你決定什麼對這個專案才是正確的，因為那取決於你的讀者是誰、他們在什麼狀態下打開這一頁。

所以第一步不是換提示詞，是換目標。

把目標從「好看」換成「認得出是你」

好看是形容詞，每個人心裡的畫面都不同。

「一眼認得出是你」則是一連串具體決定：用哪一套字、留多少白、線要多細、哪裡放一個只有你會用的記號。這些每一項都可以量化，也因此每一項都可以交辦給 AI。

我自己經營七個網站，題材、讀者、語氣都不同。它們共用同一個腦袋，但沒有一個長得像。差別不在花了多少錢或用了多厲害的框架，而在每一個決定背後有沒有理由。

下面把辨識度拆成五個維度。每一個維度我都用自己的站當例子，因為那些是我確實做過決定、也承擔過後果的地方。

維度一：字型，中文才是主角

你挑的是英文字型，但畫面上九成是中文。

這是最常見的失衡。跟 AI 討論半天要用 Inter 還是 Manrope，然後中文直接掉回系統預設。結果是英文很講究、中文很隨便，而讀者看到的幾乎都是中文。

所以第一條規則很簡單：中文字型堆疊沒寫，等於沒有選字型。

我的幾個站在這個維度上走了不同的路。researcher.tw 是給研究生看的學術站，內文用系統黑體，標題用 Noto Serif TC，而且只載 600 與 700 兩個字重，用 preload 非阻塞載入，因為學術站要的是穩重與快。writers.tw 是寫作者的站，字型家族最多，因為它要同時排中文正文與英文引文。builder.tw 用 Chakra Petch 這個方正帶工程感的拉丁體，標題壓到 900 字重，因為它想看起來像一張施工圖。

還有一個更隱蔽的坑，我自己也踩過。

我的 solo.tw 用 next/font 好好載入了 Noto Sans TC，字檔也確實下載了，但整份 CSS 裡引用那個變數的次數是零，真正被使用的另一個變數則從未被定義過。結果就是：字檔白載了，畫面落回系統預設 sans。這種錯不會報錯、不會壞版，只會讓你的站悄悄變回預設的樣子，我是在做這輪盤點時才發現的。

檢查方法只要三十秒：在中文段落上按右鍵選檢查，看 Computed 裡的 font-family，再看 Rendered Fonts 那一欄。那才是實際生效的字型，不是你寫的那一行。

維度二：色彩，一個底、一個墨、一個強調

三個顏色真的就夠了。

我七個站沒有一個用超過一個強調色。差異全在那三個顏色怎麼挑，以及強調色捨得用得多省。

底色不要純白。 純白刺眼，而且沒有性格。我的站底色分別是 #f2f5f8 的冷藍白、#faf6ee 的米黃、#f9f5f1 的暖紙、#efece3 的灰米，差別只在幾個色階，但那幾個色階決定了整站的溫度。

墨色不要純黑。 純黑對比過強。主文字色最好帶著底色的色相，讀起來才像同一張紙上的字。

強調色只有一個，而且省著用。 這是最多人失守的地方：按鈕是強調色、標題是強調色、圖示是強調色、hover 是強調色，整頁十幾處，讀者的眼睛不知道該看哪裡。強調色的價值來自稀有，一頁出現兩三次是強調，出現十次就是背景。

交辦的時候，直接把它寫成可以檢查的條件：「強調色全頁不超過三處，做完自己數一遍。」

灰色也有個小訣竅：不要用純灰。#888888 配暖色底看起來像髒掉，把主文字色調淡當次要文字色，整頁立刻像同一套系統。這是花力氣最少、效果最明顯的一個調整。

維度三：版面，欄寬決定的是行長

容器可以很寬，但跑文欄一定要另外收窄。

中文一行超過四十字，讀者的眼睛回到下一行時會找不到位置，於是跳行、於是重讀、於是關掉。這件事讀者不會抱怨，他們只會離開。

researcher.tw 的 CSS 裡有一行註解，我每次看到都覺得當初有寫下來真好：

全站外殼統一成 72rem 之後，內文若跟著撐到 72rem，中文一行會超過 70 字，讀起來會累。長文的跑文因此另外收在這個寬度裡。想整體調整閱讀行長，只改這一行。

重點不是那個數字，是那段註解。三個月後你自己回來看，才知道當初為什麼這樣定，也才不會在下一次改版時被順手改掉。

交辦時可以直接要求：每一個非顯而易見的數值，都在旁邊寫一行為什麼。

另外一個最容易改掉 AI 味的小動作：不要什麼都置中。 置中是模型的預設安全牌。改成靠左切齊、或刻意讓一邊留白，畫面立刻不一樣。writers.tw 的窄欄不置中，而是靠外殼左緣切齊，右邊留出一整條白，視覺上像一份放在桌面左側的手稿，右邊那條白是留給批註的地方。

維度四：裝飾，一個記號勝過十種漸層

這是七個站差最多的一個維度，做起來也最省事，因為幾乎全部用 CSS 畫出來，沒有一張圖片。

vista.tw 是郵政。 郵票齒孔是一張 data-URI 的 SVG，航空郵簡的紅藍斜條是一行 repeating-linear-gradient，郵戳是 SVG 加一段延遲 1.5 秒才蓋下去的動畫。重點不是郵政這個題材，是它從頭到尾只用了一個隱喻，三個元件講同一件事，所以整站看起來是同一個作者做的。

writers.tw 是稿紙。 底紋是 42×34 的稿紙格，首頁標題每個字佔一格，方框靠負 margin 讓相鄰邊框重疊成連續格線，其中「AI」兩個字佔兩格並疊一個紅圈，像老師用紅筆圈起來。而真正的標題文字放在螢幕閱讀器讀得到的地方，所以裝飾沒有犧牲無障礙。

builder.tw 是工程藍圖。 背景是四層 gradient 畫的方格紙，卡片四角放 L 形裁切角標，說明文字兩側拉出細線排成尺寸標註的樣子。

researcher.tw 是星圖。 首頁破格滿版的深藍底上疊一張手排的星空 SVG，列表每一列前面有顆小星，hover 時拉出一條短短的星軌。

挑隱喻有個好用的方法：先問這個站在對誰說話，再挑一個具體的實體物件，然後每一個設計問題都去問它。底色要什麼？藍圖紙是冷灰藍。強調色要什麼？圖面上的標註筆是橘紅色。背景要不要放東西？藍圖有方格。答案就出來了。

那如果不做記號呢？

我的 solo.tw 就是這個選擇：整套 token 沿用元件庫的出廠設定，只把主色換成紅色。這不是偷懶，是取捨。它換來開發快、元件現成、不會出錯，對一個以轉換為目標的銷售型網站來說，這些常常比辨識度重要。代價是遮住 Logo 之後，它跟其他幾萬個用同一套元件庫的網站分不出來。

重點是：這要是一個你想清楚的選擇，而不是你沒注意到的預設。

維度五：動態，只留一個重點

AI 給的預設是「每個區塊滾到就淡入」。那不叫動態設計，那叫全部都在動。

一次編排好的進場，比二十個各自淡入的區塊更有存在感。vista.tw 整站只留一個會動的東西：頁面載入 1.5 秒後，郵戳才蓋下去。那個延遲是刻意的，讓讀者先看完內容，郵戳才落下，動態在這裡有敘事功能，不只是動而已。

還有一件常被漏掉的事：prefers-reduced-motion 不是把動畫關掉就好，要給它一個合理的最終樣子。有些人開這個設定是因為前庭系統對動態敏感，直接把元素留在動畫的起始狀態，等於讓他們看到半成品。

怎麼把這些交辦給 AI

前面五個維度都是可以講給 AI 聽的決定。剩下的問題是怎麼講。

一段有效的設計交辦有三個部分，多數人只寫了第一段的一半，然後對結果失望。

第一段，角色與立場。 這個網站是誰在對誰說話。學術資源站的讀者多半在焦慮中，需要被安撫而不是被推銷，語氣要像過來人在說話，不是機構公告。銷售頁就完全是另一回事。

第二段，可檢查的限制。 色票、字型、欄寬、間距、圓角，全部給數值。能被 grep 出來的才叫限制：

底色 #faf8f3，主文字 #2b2620，次要文字 #6b6459，強調色 #c62828 只用在關鍵詞。
中文字型 "Noto Serif TC"，英文 "Source Serif 4"。跑文欄寬上限 56rem。
區塊之間的間距用 8 的倍數。圓角 4px。深色模式用 prefers-color-scheme 另給一組色。

第三段，禁令。 這一段的效果通常比前兩段加起來還強，因為它把平均值直接擋掉了。你說「要有設計感」，模型往中心走；你說「不准用 Inter、不准紫漸層、不准置中英雄區」，它就只能往別的地方走。

這八條可以直接抄走：

禁止事項（違反其中任何一條就算失敗）：
- 不要用 Inter、Roboto、Arial 或系統預設字型當標題字
- 中文一定要指定字型堆疊，不要讓它掉回系統黑體
- 不要紫色漸層，不要 #6366f1 那類靛藍紫
- 不要置中英雄區配三欄等寬卡片這種版型
- 不要 box-shadow，需要層次就用 1px 邊框
- 圓角最多 8px，不要 rounded-2xl
- 強調色全頁最多出現兩處，其餘用墨色與灰
- 不要每個區塊都加滾動淡入動畫

最後再補一段驗收：「做完之後，自己檢查一遍：強調色出現幾次？超過兩處就改回墨色。」這一段常被忽略，但它讓 AI 自己抓自己的違規。

還有兩個實務上的建議。

不要一次要成品，先要三個方向。 多數人講不出自己要什麼，但看到三個並排的版本，五秒鐘就能指出哪個對。選完之後說出你為什麼選它，那句話會變成下一輪的限制。

把決定寫成檔案，不要只留在對話裡。 一個 CSS 變數區塊，加一份寫給 AI 看的說明檔，每次開工先讀它。人換了、對話換了、模型換了，網站還是同一個樣子。這就是為什麼七個站可以各有各的臉：每一站都有自己的那份檔案。

這三段式的完整版，包含 CLEAR 框架與十個職場常見場景的提示詞範本，我寫在《零基礎學 Vibe Coding》的第 5 章。

做完之後，怎麼自己驗收

講完方法，最後一段講怎麼檢查。

我把上面這些判準做成了一支免費工具：AI 味健檢器。輸入網址就跑，不必註冊，它只讀取公開的 HTML 與 CSS，不會登入、不會送出表單，也不會儲存你的網頁內容。

它做兩件事。

十條機器驗得到的。 這十條全部來自 CSS 與 HTML 的宣告：標題字型是不是預設安全牌、中文字型有沒有寫進堆疊、有沒有那個靛藍紫漸層、圓角有沒有克制在 8px 以內、有沒有濫用投影、跑文欄寬與外殼是不是兩個數字、間距有沒有一組刻度、有沒有處理深色模式、動態有沒有給 prefers-reduced-motion 退路、色票有沒有收斂成一套系統。

它有一個我自己很在意的設計：抓不到依據的條目會標成「難判」而不猜，也不列入計算。我不想要一支會給你假信心的工具。

三條機器驗不到的。 這三條需要你自己看一眼，而它們恰好是最容易出事的地方：中文字型實際生效了嗎（就是前面 solo.tw 那個坑）、深色模式下每個元素都看得見嗎、遮住 Logo 還認得出是誰。每一條它都會告訴你具體怎麼看。

怎麼用

第一步，把你的網址貼進去按「開始檢測」，幾秒鐘就有結果。它會先給你一句總結，例如「適用 9 條，通過 8 條」，接著逐條列出通過、未過或難判，未過的那幾條會告訴你依據是什麼。

第二步，看未過的條目在講什麼。這裡最有價值的不是分數，是它給的依據。

我拿 builder.tw 自己測，適用 9 條通過 8 條，唯一沒過的是間距那條，它給的理由是：68 個間距值裡有 21 個不是 4 的倍數，例如 14、10、6、11px。這種數字就是沒有刻度、隨手給的。這個問題我自己看一百遍也不會發現，因為每一個數字單獨看都很合理。

第三步，把「三條機器驗不到的」真的做一遍。特別是中文字型那條，開發者工具三十秒就能確認，而它是最常見的隱形缺陷。

第四步，如果你想把結果變成行動，頁面下方可以留信箱換一份交辦稿。它會依你這次的檢測結果，組一份可以直接貼給 AI 的稿子，角色、限制、禁令、驗收四段齊全，另外附一份六個網站的設計決策對照表，字型、色票、欄寬與裝飾語彙逐項並列。診斷結果本來就免費，那份稿子與對照表是另外給的。

想把整套流程走完

這篇談的是做出來之後怎麼做得不一樣。做出來之前的那一段，我寫進了《零基礎學 Vibe Coding：用 AI 做出網站、App 與工作自動化工具》。

跟這篇最相關的是兩章。第 8 章〈從零打造你的網站〉以 vista.tw 與 solo.tw 為例，講內容型網站與互動式應用的兩種策略，以及部署與 SEO 該怎麼處理；第 10 章〈品牌銷售頁〉談怎麼把設計思維結合 AI 開發，含 A/B 測試與持續優化。前面提到的那支健檢器，十條規則的靈感也來自這本書。

不確定適不適合自己的話，第 1 章與第 4 章開放全文免費試閱，含書裡的所有插圖，不必註冊也不必留資料。第 1 章帶你認識這件事，第 4 章直接動手做出第一個作品，看完再決定就好。想直接入手的話，博客來、天瓏書局、誠品線上、金石堂、三民網路書局與墊腳石都買得到。

最後

AI 會給你最可能的那一個。做決定的，還是你。

你不需要懂設計理論，也不需要會畫圖。你需要的是把想要的東西講成可以檢查的條件，然後把那些條件寫下來，讓它們在下一次開工時還在。

今天就能做的三件事：把那八條禁令存進你的筆記；幫現有的站定下三個顏色並寫成 CSS 變數；把 Logo 遮起來，問三個朋友認不認得出這是誰的網站。

三件事加起來不到一小時，但你的網站會開始有自己的臉。

常見問題

為什麼用 AI 做的網站看起來都很像？

因為模型的工作是給你最可能的下一個選擇，而最可能等於訓練資料裡最常見。你說「做一個好看的網站」，它只能回你一個平均值：Inter 字型、紫色漸層、置中大標配三欄卡片。這不是 AI 的限制，是需求描述的限制。把形容詞換成可以被檢查的數值與禁令，結果就會不一樣。

不懂設計的人，要怎麼跟 AI 講清楚視覺需求？

把設計拆成五個可以決定的維度：字型、色彩、版面行長、裝飾記號、動態。每一個維度都給具體數值而不是形容詞，例如底色 #f2f5f8、主文字 #16406e、強調色只用一個且全頁不超過三處、跑文欄寬收在 56rem、間距一律 4 的倍數。再加一段禁令，明講不准出現什麼，效果通常比正面要求還強。

怎麼知道自己的網站有沒有 AI 味？

有三個自己就能做的檢查：遮住 Logo 問朋友認不認得出這是誰的網站；數一數強調色在一頁裡出現幾次，超過三處就不是強調；用開發者工具看中文段落的 Computed font-family，很多站宣告了字型卻沒生效，畫面其實落回系統預設。另外 lab.vista.tw 上有一支免費的 AI 味健檢器，輸入網址就會用十條規則自動檢查。