介面系統怎麼用模組組出每一頁

如果你請五個人各做一頁網頁，最後很可能得到五種按鈕、五種標題大小，以及五種對「重要」的理解。每一頁單獨看都還不錯，放在一起就不像同一家公司。

請 AI 來做頁面，這個問題會更明顯。AI 做得很快，但每次都可能「發明」一點新東西：一個稍微不同的圓角、一種沒出現過的顏色、一段自己補上的文字。速度越快，偏離得也越快。

這篇文章想說明，我們的介面系統怎麼處理這件事：不手刻頁面，而是先定好內容，再用已經核准的模組，一層一層組出每一頁。

先有核准的內容，再有頁面

我們做頁面的第一步，不是畫版面，而是確認內容。這一頁要說什麼、用哪些數字、放哪張圖，先由人看過並核准。內容定案之後，才進入組裝。

這個順序很重要。如果內容和版面同時在變，討論很容易混在一起：到底是字不對，還是排版不對？先把內容固定，後面的每一步就只需要回答一個問題：這些已經確認的內容，用哪些模組呈現最清楚。

從一份憲章，長成整套規則

模組不是憑空出現的。它們來自一套由上而下的規則，我們把它分成四層。

• 憲章：少數幾條不會輕易改變的承諾，例如「清楚比華麗重要」「每個人都要看得清楚」。
• 原則：把承諾說成可以判斷對錯的句子，例如「一個畫面只有一個主要動作」。
• 規格：具體的數值與行為，例如顏色、字級、間距、元件在不同狀態下的樣子。
• 角色：按鈕、卡片、頁首這些實際使用的元件，都是由規格組合而成。

這個結構的好處是，任何一個按鈕為什麼長這樣，都能往上追問：它依據哪條規格？這條規格是為了哪條原則？原則又守著哪一項承諾？當有人想改一個細節，也很容易判斷影響會擴散到哪裡。

許多領域，共用同一組模組

一家公司會有很多種頁面：報價、專案、知識整理、對外溝通、成長分析。它們的內容不同，但底下需要的東西其實很像：一個頁首、幾張內容卡片、一張資料表、一個表單，以及一張讓人做決定的卡片。

所以我們不為每個領域各做一套元件，而是讓所有領域共用同一個模組平面。就像一家餐廳有很多道菜，但廚房裡的刀具、鍋子和基本醬料是共用的。每道菜的味道不同，但出菜的品質是一致的。

當共用模組改善了，例如資料表在手機上更好讀，所有用到它的頁面都一起受益，不需要每個領域各修一次。

登記與版本：讓每一頁都能重建

每一個模組都會被登記：它叫什麼名字、目前是哪個版本、依據哪些規格。頁面組裝完成時，也會記下它用了哪些模組、各是哪個版本。

這聽起來像是額外的行政工作，但它解決了一個實際的問題：半年後有人問「這一頁當初為什麼長這樣」，我們不需要靠記憶回答，只要查紀錄。需要修正時，也能用同一份紀錄重新組出一模一樣的頁面，再只改要改的地方。

好的系統不是讓每一頁都一樣，而是讓每一頁都說得出自己從哪裡來。

當規則需要改變

規則不是寫好就永遠不動。用了一段時間，我們可能發現某個灰色在陽光下看不清楚，或某種卡片在小螢幕上太擠。這時候要改的，不是某一頁，而是那一條規格或那一個模組。

改動會產生一個新版本，舊版本不會被抹掉。已經上線的頁面，紀錄裡寫的仍是當初的版本，所以隨時都能重建出原本的樣子；要不要升級到新版本，是一個可以被看見、被討論的決定，而不是某天打開網站突然發現全部變了。

升級前，系統會先列出這個模組被哪些頁面使用，讓人知道影響範圍有多大。小的修正可以一起升級；牽動較大的改變，就分批進行，每一批都檢查過再往下走。

這也是為什麼我們堅持從上層往下改。如果只是在某一頁偷偷調了顏色，這個調整不會進到規格裡，下一次組裝時就會消失，或者更糟，只在那一頁留下一個沒人記得原因的例外。把改變放回規則裡，它才會成為整個系統的一部分。

為什麼這樣能讓品牌一致，也讓 AI 安全組頁

把頁面拆成「核准的內容」加上「登記的模組」之後，AI 的工作就變得很清楚：它負責挑選和組合，而不是發明。它不能臨時創造一種新顏色，因為顏色只存在於規格裡；它也不能改寫文字，因為內容已經定案。

組好的頁面在發布前，會再對照規格檢查一次。通過了才上線；沒通過，就退回並說明原因。這讓速度和一致性不再互相拉扯：AI 可以很快地組出很多頁，而每一頁都還是同一個品牌。

• 對人來說：只需要核准內容與檢查結果，不必逐像素盯版面。
• 對 AI 來說：可用的積木是有限且明確的，犯錯的空間變小。
• 對品牌來說：改善一次模組，所有頁面一起變好。

重點回顧

• 先由人核准內容，再組裝頁面。
• 一份憲章長成原則、規格與角色，每個元件都能追溯來源。
• 許多領域共用同一組模組平面。
• 模組登記並有版本，每一頁都能重建；AI 負責組合，不負責發明。