dramaling-vocab-learning/docs/02_design/design-system/automation/README.md

設計系統自動化工具

📋 概述

本目錄包含設計系統的自動化維護工具，確保設計規範和元件庫的一致性。

🛠️ 工具清單

1. design-sync.sh

功能: 自動同步設計代幣和元件樣式到各個相關位置

使用方法:

# 賦予執行權限
chmod +x design-sync.sh

# 執行同步
./design-sync.sh

自動化任務:

• ✅ 同步設計代幣 (design-tokens.css) 到元件庫
• ✅ 生成元件索引 (COMPONENT_INDEX.md)
• ✅ 驗證CSS文件語法
• ✅ 生成變更報告 (CHANGE_LOG.md)

2. component-validator.js

功能: 驗證元件符合設計規範

3. style-watcher.sh

功能: 監控樣式文件變更並自動同步

📝 自動化流程

日常維護流程

1. 修改設計代幣: 編輯 design-system/tokens/design-tokens.css
2. 執行同步: 運行 ./design-sync.sh
3. 檢查報告: 查看 CHANGE_LOG.md 確認變更
4. 提交變更: Git提交所有自動更新的文件

CI/CD 整合

# .github/workflows/design-sync.yml 範例
name: Design System Sync

on:
  push:
    paths:
      - 'docs/02_design/design-system/**'
      - 'docs/02_design/component-library/**'

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Run design sync
        run: |
          cd docs/02_design/design-system/automation
          chmod +x design-sync.sh
          ./design-sync.sh          
      - name: Commit changes
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add -A
          git commit -m "🤖 Auto-sync design system" || true
          git push          

🔄 自動化任務清單

每次設計變更時

• 同步設計代幣到所有使用位置
• 更新元件索引文檔
• 驗證CSS語法正確性
• 生成變更日誌

每週執行

• 檢查未使用的樣式類別
• 生成元件使用統計報告
• 檢查設計一致性

每月執行

• 完整的設計系統審計
• 性能優化建議
• 無障礙性檢查

📊 報告輸出

自動化工具會生成以下報告：

1. COMPONENT_INDEX.md - 所有元件的索引清單
2. CHANGE_LOG.md - 設計系統變更歷史
3. VALIDATION_REPORT.md - CSS驗證報告
4. USAGE_STATS.md - 元件使用統計

🚨 錯誤處理

如果自動化腳本執行失敗：

1. 檢查目錄結構是否正確
2. 確認文件權限設置
3. 查看錯誤日誌 automation.log
4. 手動執行失敗的步驟

🔗 相關文檔

• 設計系統總覽
• 元件庫使用指南
• 設計代幣規範

---

最後更新: 2025-09-15 維護者: Drama Ling 開發團隊