為什麼你的網站改一次就歪一點
不是 AI 的問題，是沒有規範可以遵守

真正的原因

很多人第一個念頭是「AI 沒辦法維持一致」。這個說法在幾年前成立，現在不太成立了 —— 現在的 AI 已經讀得了整個專案、跨檔案修改，也能照著既有的元件和規則動手。

真正的原因比較無聊：一開始就沒有一套規範可以讓它遵守。

如果每一頁都是想到什麼就叫 AI 改什麼，沒有共用元件、沒有把按鈕、字級、間距這些規則定下來，那 AI 每次能參考的就只有你當下那句話。上禮拜你把圓角定成 8px 的那個決定，從來沒有寫在任何地方 —— 它不在檔案裡，只在你腦子裡。

所以五十次修改之後出現好幾種按鈕樣式，不是誰失職，是這件事沒有被記錄下來過。

設計系統其實只要定五件事

「設計系統」聽起來很大，但對一個十頁的形象官網來說，它只需要五件事說清楚：

1. 色彩 —— 主色、輔色、強調色、文字色、背景色，各一到兩支就好。不要「這裡再深一點」
2. 字級 —— 大標、中標、小標、內文、註解，五階足夠。每一階固定一個數字
3. 間距 —— 挑一個基準（例如 8px），所有上下留白都是它的倍數。這一條最有效，因為版面「看起來亂」多半是間距亂
4. 按鈕 —— 主要、次要、文字按鈕三種，各自的顏色、圓角、內距、hover 狀態寫死
5. 元件 —— 卡片、清單、表格、表單長什麼樣，各定一種

定完之後最重要的動作是把它寫下來，放在專案裡。寫在文件裡、寫在 CSS 變數裡、寫在給 AI 的說明檔裡都可以，重點是它要在檔案裡，不是在腦子裡。

一個下午做得完的最小版本

如果你不想搞得太複雜，這是我覺得投報率最高的做法：開一個檔案，把上面五件事各寫幾行，就這樣。

例如：

• 主色 #003D74、輔色一支、強調色一支，其他不准出現
• 字級只有 32 / 24 / 18 / 16 / 14 五種
• 所有間距都是 8 的倍數，最常用 20 和 40
• 主要按鈕：主色底、白字、圓角 8px、上下 12px 左右 24px
• 卡片：白底、1px 淺灰邊、圓角 8px、內距 24px

然後每次要改東西的時候，把這個檔案一起丟給 AI，或請它先讀過再動手。這件事的效果會大到有點意外 —— 因為它把「一致性」從你的記憶力，變成一份可以被讀取的資料。

再進一步就是把重複出現的區塊做成共用元件，改一個地方全站生效。那也是「加一個產品分類要手動改十七個地方」這種問題的解法。

有了規範之後，AI 才幫得上忙

這是我覺得最值得講的一段：AI 很適合執行規範，但規範本身不能靠每一次臨時下 prompt 才決定。

有了規範之後，AI 的角色會變得很好用 —— 你可以直接說「照我們的規範加一個服務項目區塊」，它產出的東西會跟站上其他部分長得一樣。沒有規範的話，同一句話它每次都會給你稍微不同的答案，而每一個答案單獨看都沒錯。

這也是為什麼我們在幫客戶做網站時，會把力氣放在建立框架跟規則，而不是幫客戶改字。框架訂好之後，客戶自己改、同事改、還是叫 AI 改，都比較不容易越改越亂。

已經歪掉的網站怎麼救

不用打掉重練。順序大概是這樣：

1. 先盤點現況 —— 把站上所有按鈕、標題、卡片截圖排在一起，你會很快看出有幾種
2. 選一種當標準，不是設計一種新的。選現有的、最常出現、你也最滿意的那一種
3. 把標準寫下來
4. 從流量最高的幾頁開始收，不要一次全站
5. 之後每次改東西都對照那份標準

第 2 步是重點。很多人一發現不一致就想重新設計，結果工程量暴增然後放棄。從現有的挑一種當標準，成本低很多，效果也夠。

如果你的網站已經改到自己都不確定哪一種才是對的，把網址丟給我們，我們可以先幫你盤出現在到底有幾套樣式，以及收斂起來要動到哪些地方 —— 通常比想像中少。