# 設計系統自動化工具

## 📋 概述

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

## 🛠️ 工具清單

### 1. design-sync.sh
**功能**: 自動同步設計代幣和元件樣式到各個相關位置

**使用方法**:
```bash
# 賦予執行權限
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 整合
```yaml
# .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
```

## 🔄 自動化任務清單

### 每次設計變更時
- [x] 同步設計代幣到所有使用位置
- [x] 更新元件索引文檔
- [x] 驗證CSS語法正確性
- [x] 生成變更日誌

### 每週執行
- [ ] 檢查未使用的樣式類別
- [ ] 生成元件使用統計報告
- [ ] 檢查設計一致性

### 每月執行
- [ ] 完整的設計系統審計
- [ ] 性能優化建議
- [ ] 無障礙性檢查

## 📊 報告輸出

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

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

## 🚨 錯誤處理

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

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

## 🔗 相關文檔

- [設計系統總覽](../README.md)
- [元件庫使用指南](../../component-library/COMPONENT_USAGE_GUIDE.md)
- [設計代幣規範](../tokens/design-tokens.css)

---

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