專案背景

隨著團隊期望導入 Claude Code 等 AI 開發工具，在幾次與 RD 的對話討論中，我發現過去零散且定義不全的文件，無法提供 AI 精確的視覺規範脈絡，導致 RD 無法有效將設計規範提供給 AI 作為開發依據。為了從根本解決此問題，我主導重新統整設計系統，從定義 Design Tokens 開始，目標是建立一套 AI 可直接讀取的結構化規範，並大幅降低人工維護的成本。

執行方式與調整

初期計畫：AI 全自動生成實驗

初期嘗試透過匯出 Figma Variables 的 JSON 檔後，直接餵給 AI 生成 Markdown 內容與視覺化規範網頁，試圖達成全自動化交付。

測試後發現 AI 在生成複雜網頁時會產生樣式偏移與邏輯幻覺，導致產出物與設計稿不符，可能反而增加人工校對負擔，在面對元件擴充時也缺乏有效的管控機制。同時我也意識到，即使有了 AI 數據規範，團隊仍需要一份人性化的規範文件，讓工程師能作為依據檢核 AI 產出的正確性。

最終方式：導入專業平台 Supernova

為了確保規範的準確性並兼顧維護效率，決定使用穩定性更高的專業平台 Supernova：

1. 高準確度與穩定性： 直接串接 Figma Variables 並透過平台功能產出規格網站，確保設計數據的一致性。

2. 自動化同步機制：透過一鍵同步解決傳統標註與手動更新文件的失誤率。

3. 跨團隊雙向協作： 提供工程師共編空間，允許 RD 在元件旁加入 CSS 代碼塊 記錄開發細節，確保團隊對組件實作的理解完全一致。

交付細節與 AI 應用

1. 多格式交付： AI 工具需要語意化的上下文，而不只是數值，這樣才能在生成元件時正確套用設計意圖。因此我在規範網站同步提供 JSON 檔案 與 claude.md，並詳細記錄版本變更，確保開發端能隨時下載最新的結構化資源。

2. AI 輔助轉譯： 由於人工將每一個 Token 命名整理並製作成文件非常耗時，且出錯率極高，我利用 AI 協助統整 JSON 檔中的 Token ，讓 AI 自動整理出對照表，幫助工程師在短時間內理解複雜的語意化命名邏輯。

最終成果

在一週內完成了設計系統基礎架構與底層 Token 的制定，元件部分尚需補齊。但目前團隊已嘗試導入這套系統作為 AI 開發的基底，以此架構進行 AI 開發測試與協作，並在實際測試中持續觀察文件是否需要加入更多的定義或內容，為後續的 AI 自動化開發提供了數據支撐。