把品牌訊息整理成清楚的網站

你現在讀的這個網站，就是這篇案例的主角。我們沒有找一個範本改改文字，而是用 AiTOM 自己建立的介面系統，把品牌訊息整理成清楚的雙語網站。這樣做的理由很直接：如果我們主張「先設計好工作方式，再讓 AI 協助」，就應該先在自己的網站上證明給你看，包含它哪些地方做得到，哪些地方還在調整。

起點

起點是一組已經確定的品牌訊息：定位為「AI Transformation & Brand Growth」，品牌語言是「從洞察出發，每一步都算數。」，視覺以藍色為主色。接下來的問題是，要怎麼把這些訊息變成讀者真的看得懂、找得到的網站，而且是中英文兩種語言，內容會持續增加，不能每加一頁就重做一次版面。

我們也不希望網站變成一件一次性的作品。內容要能被許多人（與 AI）安全地修改，改完要能被檢查，出問題要能退回。換句話說，我們要的是一個可以長期運作的系統，而不是一張漂亮的頁面。

我們怎麼做

我們把網站拆成明確的層，每一層只做一件事：

• 設計基礎（design tokens）：顏色、字級、間距等共用規格，確保整站一致。
• 元件：按鈕、卡片、導覽等基本單位，使用設計基礎的規格。
• 區塊模組（section modules）：由元件組成的頁面段落，例如主視覺、案例列表。
• 版型（layouts）：決定區塊如何排列。
• 頁面資料模型：描述一頁需要哪些內容，把內容和版面分開。
• 組合器（composer）：依資料模型把版型與區塊組成完整頁面。

內容的部分，我們用 CMS 的 JSON 文章管理，再編譯成頁面。網站有中英文兩種語言，目前包含 43 篇雙語的深度能力文章，每篇都附來源。這樣內容與版面分開，編輯文字不會動到版型，調整版型也不會誤改文章。

整個過程中，總監只需要說明需求，由 AI 提出結構建議，再由負責人看截圖驗收：桌面寬度與 375px 的手機寬度都要看過。每一次發布前，都會跑自動化的瀏覽器 QA；上線由人執行，上線後再做實際驗證並留下紀錄。

遇到的問題與調整

第一個問題是 AI 寫的內容雖然流暢，卻缺少出處。為此，我們在深度文章上加了來源與證據規則：每篇文章附來源，文字與依據對得上，才算完成。

第二個問題是「全部重新產生」的風險。當網站由資料編譯而成，重新產生所有頁面很方便，但也可能悄悄改寫與本次工作無關的頁面。我們改成限定變更範圍，並在發布前檢查差異，確認只有預期的頁面變動。

第三個是視覺效果的取捨。我們曾做過一種視覺效果，總監看過後決定不採用。因為歷史完整保留，這個效果被乾淨地退回，其他部分完全不受影響。這也是我們堅持「不覆寫、可還原」的原因。

改變了什麼

最具體的結果來自 QA。最近一次發布共 270 頁，通過 810 項自動化檢查，失效連結為 0。這些數字是實際跑出來的結果，也說明這個網站不是靠人眼一頁一頁檢查，而是每次發布都有一套可重複的檢查。

在工作方式上，新增內容變得單純：寫好一篇 JSON 文章，編譯、檢查，確認後由人執行上線，再驗證並記錄。品牌訊息也因此有了固定的出口，不同頁面講的是同一件事。

我們不宣稱這個網站完美。它仍在持續調整，而重點是調整的方式是安全的：範圍明確、差異可查、錯誤可退回。

可以帶走的做法

• 先確定品牌訊息，再設計頁面。訊息清楚了，版面才有依據。
• 把網站分層：設計基礎、元件、區塊、版型、資料模型、組合器，各管一件事。
• 內容與版面分開，用資料管理內容，再編譯成頁面。
• 每次發布先跑自動化 QA，並看桌面與手機寬度的截圖。
• 上線由人執行，上線後驗證並記錄。
• 限定每次變更的範圍，保留版本，需要時還原。

網站不是一次做完的作品，而是一個可以安心繼續長大的系統。