2026 OpenClaw 設計素材流水線：在遠端 Mac 上從設計稿導出到 PNG 批量重命名的可複現步驟

OpenClaw 在設計工作流中的定位

OpenClaw 是介於設計工具與最終素材集之間的 AI 驅動自動化層，負責素材審核、PNG 處理、命名與交付。在遠端 Mac 上運行時，可依賴 macOS 原生設計軟體（Sketch、Figma 桌面版、Affinity、Adobe）與 Unix 殼層，路徑與腳本行為一致，適合做為「設計稿 → 導出 PNG → 批量重命名 → 校驗 → 交給開發或 CMS」的單一可複現流水線。OpenClaw 不取代設計工具，而是把導出後的步驟標準化，讓每次執行都產出相同結構與命名。

在遠端 Mac 上安裝與基礎配置

需要具備遠端 Mac 的 SSH（或 VNC）存取權限，接著依序完成：

1. 環境：建議 macOS 13+；安裝 Xcode 指令列工具（xcode-select --install），若流水線會用到 Python / Node，請安裝 Python 3.10+ 與 Node 18+。
2. OpenClaw：將 OpenClaw 克隆或安裝到專用目錄（例如 ~/openclaw），依官方 OpenClaw 安裝指南依平台完成安裝。
3. 路徑：選定一個「導出根目錄」（例如 ~/DesignExports/png）與一個「重命名後輸出目錄」（例如 ~/DesignExports/renamed），建立並記下路徑供後續步驟使用。
4. 權限：確認執行腳本或 OpenClaw 的帳號對上述目錄具讀寫權限，避免寫入時出現 Permission denied。

完成後，遠端 Mac 即可進行導出與重命名步驟。

從設計稿導出 PNG 的觸發方式與路徑配置

PNG 導出可手動或自動觸發，重點是所有 PNG 都落入同一個已配置目錄，後續步驟才能穩定讀取。

• 手動：在 Figma、Sketch 等設計工具中，將導出目標設為上述導出根目錄（如 ~/DesignExports/png），將畫板或切片導出為 PNG，檔案保留在該目錄。
• 自動／腳本：若工具支援 CLI 或外掛，可用腳本觸發導出並寫入同一路徑；亦有團隊以 cron 或監聽「請求」目錄的小程式自動跑導出任務。
• 路徑配置：在設定檔（如 config.json 或環境變數）中設定 EXPORT_DIR 與 OUTPUT_DIR，所有腳本與 OpenClaw 技能都從此讀取，以便一處修改、處處生效。

範例（環境變數風格）：

EXPORT_DIR=~/DesignExports/png
OUTPUT_DIR=~/DesignExports/renamed

只要導出一律寫入 EXPORT_DIR，批量重命名步驟即可固定從該目錄讀取。

批量重命名規則與腳本／命令範例

建議訂一套命名規範並套用到所有導出的 PNG，讓開發與 CMS 拿到可預期的檔名。

規則建議：小寫、短橫線、無空格，必要時含尺寸。範例：hero-banner_1920x1080.png、icon-cta_64x64.png、類別_資源名_800x600.png。

範例：依尺寸重命名（macOS sips + shell）。假設 PNG 在 EXPORT_DIR，以下腳本將每個檔案重新命名為 basename_寬x高.png 並寫入 OUTPUT_DIR：

#!/bin/bash
EXPORT_DIR=~/DesignExports/png
OUTPUT_DIR=~/DesignExports/renamed
mkdir -p "$OUTPUT_DIR"
for f in "$EXPORT_DIR"/*.png; do
  [ -f "$f" ] || continue
  w=$(sips -g pixelWidth "$f" | awk '/pixelWidth/{print $2}')
  h=$(sips -g pixelHeight "$f" | awk '/pixelHeight/{print $2}')
  base=$(basename "$f" .png | tr '[:upper:]' '[:lower:]' | tr ' ' '-')
  cp "$f" "$OUTPUT_DIR/${base}_${w}x${h}.png"
done

可存成 rename_by_size.sh，執行 chmod +x rename_by_size.sh 後在遠端 Mac 上執行。若需依資料夾名分類、序號等更複雜規則，可擴充腳本或由 OpenClaw 技能實作同一邏輯。

完整流水線可複現步驟

按下列順序執行，即可完成一輪「設計稿 → PNG → 批量重命名」的可複現流水線：

1. 導出：在設計工具中將所需畫板／切片導出為 PNG 到 EXPORT_DIR（或觸發自動導出使檔案落入該目錄）。
2. 重命名：SSH 登入遠端 Mac，cd 到重命名腳本或 OpenClaw 技能所在目錄，執行腳本或 OpenClaw 指令（例如 ./rename_by_size.sh）。確認 OUTPUT_DIR 中出現預期檔名。
3. 校驗（可選）：對 OUTPUT_DIR 執行尺寸／規格檢查（如最小／最大寬高、檔案大小），將不符者移出或產出報告，必要時修正後重新導出。
4. 交付：以 OUTPUT_DIR 為單一來源交給開發：複製到版控、上傳 CDN 或匯入 CMS；若有版本需求可對目錄打標籤或做版本標記。

常見報錯與權限問題排查

常見狀況與處理方式：

• 寫入時 Permission denied：確認 EXPORT_DIR、OUTPUT_DIR 的擁有者為執行腳本的使用者；ls -la 檢查後以 chmod 或 chown 修正。若使用 cron 或系統服務，需確保以該使用者身份執行。
• No such file or directory：腳本中將 ~ 改為完整路徑（如 $HOME/DesignExports/png），避免 cron 或非互動式 shell 無法解析 ~。
• sips / command not found：sips 為 macOS 內建；若環境非實機 Mac，請確認是否在 Mac 或 Mac VM 上。若改用 ImageMagick，可 brew install imagemagick。
• 導出目錄為空：確認設計工具的導出目標確實為 EXPORT_DIR（檢查導出設定中的路徑）。遠端 Mac 上請使用本機磁碟路徑，避免使用可能未掛載的網路磁碟。
• 檔案被覆寫：若多批導出會產生相同基底檔名，可在重命名腳本中加入序號或時間戳（如 base_1920x1080_001.png）避免覆寫。

修正後從「導出」步驟重新跑一輪，保持整條流水線一致。