進入後半部的階段，我們面臨一個關鍵轉折：將20天開發的原型轉化為可交付的專業標準。今天的核心任務是建立完整的設計系統，這不只是視覺統一的需求，更是確保原型能順利轉換為生產代碼的必要基礎。沒有設計系統的原型，就像沒有藍圖的建築工程，開發團隊將面臨無數的重複決策和不確定性。

為什麼設計系統是交付的必要條件

原型設計的最終目標是支撐實際開發，而開發團隊最需要的是明確的標準而非創意靈感。當前端工程師看到我們的訂單頁面時，他需要知道：這個藍色按鈕的確切色值是什麼？hover狀態該如何表現？在不同頁面中是否保持一致？如果每個按鈕都是獨立的設計決策，開發成本將會倍增。

設計系統就是將設計師的思考過程標準化，讓開發者能夠快速理解並複製設計意圖。更重要的是，統一的設計系統能確保產品在未來擴展時保持一致性，避免因為人員變動或時間推移導致的風格混亂。

AI協作建立設計系統的獨特優勢

AI在設計系統建立上有人工難以匹敵的優勢：Pattern識別能力和批量處理效率。它能快速掃描所有頁面，識別重複使用的設計元素，並歸納出統一的規則。更重要的是，AI不會有設計師常見的「這個按鈕我記得做過類似的」模糊記憶，它能精確比較每個元素的差異。

但AI也有明顯限制：缺乏設計意圖的判斷能力。它無法區分「故意的設計差異」和「意外的不一致」。因此，AI協作的關鍵在於提供清晰的設計邏輯和明確的標準化目標。

實作案例1：建立基礎元件庫

我們從最基礎的UI元件開始建立設計系統。這些元件將成為所有頁面的建構基礎。

建立門市iPad系統的統一元件庫：

元件分類需求：
1. 按鈕系統
   - 主要操作：登入、確認訂單、送出表單
   - 次要操作：取消、返回、重置
   - 危險操作：刪除、強制登出

2. 表單控制項
   - 文字輸入：客戶姓名、電話、地址
   - 選擇器：日期、時間、商品規格
   - 數量調整：商品數量、折扣百分比

3. 資訊展示元件
   - 商品卡片：圖片、名稱、價格、庫存
   - 客戶資訊卡：基本資料、購買歷史
   - 狀態指示器：訂單進度、系統狀態

設計標準：
- 最小觸控目標：48px x 48px（iPad觸控友好）
- 主色調：#2B66FF（現有系統一致）
- 圓角統一：6px（現代感但不過度）
- 陰影統一：0 2px 4px rgba(0,0,0,0.1)

技術要求：
- 建立components.css獨立檔案
- 使用CSS變數確保一致性
- 每個元件支援hover/active/disabled狀態
- 保持HTML、CSS、JS檔案分離
- 響應式適配iPad橫向/直向切換

請產出完整的元件庫，包含所有狀態變化和使用範例。

重點修正：AI初版會產出過多變化，我強調「以現有設計為基準進行標準化」後，得到了更實用的結果。

實作案例2：色彩和字體系統標準化

在元件庫基礎上，建立更深層的設計token系統，確保所有視覺決策都有明確依據。

為門市iPad系統建立完整的設計token系統：

色彩token定義：
- 功能色彩
  * Primary: #2B66FF（主要操作、重點強調）
  * Success: #10B981（成功狀態、確認操作）
  * Warning: #F59E0B（警告提示、待確認）
  * Danger: #EF4444（錯誤狀態、危險操作）

- 中性色彩
  * Gray-50: #F9FAFB（背景色）
  * Gray-200: #E5E7EB（邊框色）
  * Gray-500: #6B7280（次要文字）
  * Gray-900: #111827（主要文字）

字體token定義：
- 頁面標題：24px/700（各頁面主要標題）
- 區塊標題：20px/600（功能區域標題）
- 卡片標題：18px/500（商品名稱、客戶姓名）
- 內文字體：16px/400（表單標籤、說明文字）
- 輔助資訊：14px/400（時間、狀態說明）

間距token定義：
- 基礎間距：8px的倍數系統
- 元件內部：12px（按鈕padding、卡片padding）
- 元件之間：16px（相關元件間距）
- 區塊之間：24px（不同功能區間距）
- 頁面邊距：32px（頁面邊緣間距）

技術實現：
- 使用CSS自定義屬性（:root變數）
- 建立token命名規範（語意化優先）
- 提供使用指南和錯誤範例
- 確保所有token在iPad環境下的可讀性

請產出完整的design-tokens.css檔案和使用說明文件。

系統化應用設計token的策略

設計token建立後，最關鍵是確保現有代碼能正確套用這套標準。我們需要systematic的應用策略：首先audit現有所有CSS檔案，識別硬編碼的顏色和尺寸值；其次建立migration checklist，逐步將硬編碼替換為token變數；最後建立validation process，確保未來新增的元件都遵循token標準。

AI協作在這個過程中特別有價值，它能快速掃描大量代碼，找出不符合標準的設定，並提供自動化的修正建議。關鍵是在prompt中提供清楚的「修正映射表」，讓AI知道舊的設定應該對應到哪個新的token。

設計系統的維護和演進機制

好的設計系統不是一次性建立就完成，而是需要持續維護和演進的活體系統。我們需要建立clear governance：什麼情況下可以新增token？如何處理設計系統無法覆蓋的特殊需求？誰有權限修改核心token？

透過AI協作，我們可以建立automated consistency check，定期掃描所有使用設計系統的頁面，確保沒有drift現象。這種systematic monitoring讓設計系統能夠長期保持健康狀態，真正發揮標準化的價值。

為開發交付做好準備

完整的設計系統是成功交付的基石。當開發團隊接手我們的原型時，他們將獲得的不只是視覺檔案，而是完整的設計決策邏輯和實現標準。這種systematic handover大幅降低了interpretation risk，確保最終產品能夠忠實呈現原型的設計意圖。

設計系統是原型設計專業化的分水嶺。透過AI協作建立的統一標準，我們將散點式的頁面設計提升為系統性的產品規範。這種標準化思維的建立，正是從原型設計師邁向產品設計師的關鍵轉變。