2026 OpenClaw pipeline design : étapes reproductibles de l'export design au renommage PNG par lot sur Mac distant

La place d'OpenClaw dans le workflow design

OpenClaw est une couche d'automatisation pilotée par l'IA qui s'insère entre vos outils de design et le jeu d'assets final. Il intervient sur la revue d'assets, le traitement PNG, le nommage et la livraison. Sur un Mac distant, il s'exécute dans un environnement macOS stable avec les apps design natives (Sketch, Figma desktop, Affinity, Adobe) et un shell Unix, ce qui rend les scripts et la gestion des chemins cohérents. Pour les designers et les ops contenu, l'intérêt est un pipeline unique et reproductible : design → export PNG → renommage par lot → validation → remise au dev ou au CMS. OpenClaw ne remplace pas l'outil de design ; il standardise ce qui se passe après l'export pour que chaque exécution produise la même structure et le même nommage.

Installation et configuration de base sur Mac distant

Il faut un accès SSH (ou VNC) au Mac distant. Ensuite :

1. Environnement : macOS 13+ recommandé ; installer les Xcode Command Line Tools (xcode-select --install), Python 3.10+ et Node 18+ si le pipeline les utilise.
2. OpenClaw : Cloner ou installer OpenClaw dans un dossier dédié (ex. ~/openclaw). Suivre le guide d'installation OpenClaw pour votre plateforme.
3. Chemins : Choisir un répertoire racine d'export (ex. ~/DesignExports/png) et un répertoire de sortie pour les assets renommés (ex. ~/DesignExports/renamed). Les créer et noter les chemins pour les étapes suivantes.
4. Permissions : Vérifier que votre utilisateur peut lire/écrire ces dossiers et que tout script ou processus OpenClaw s'exécute avec le même utilisateur (pas de « permission denied » à l'écriture).

Après cela, le Mac distant est prêt pour l'export et le renommage.

Déclenchement de l'export PNG et configuration des chemins

L'export PNG peut être déclenché manuellement ou automatiquement ; l'essentiel est que tous les PNG arrivent dans un même dossier configuré pour que l'étape suivante sache toujours où lire.

• Manuel : Dans Figma, Sketch ou votre outil, définir la destination d'export vers le dossier racine (ex. ~/DesignExports/png). Exporter les artboards ou slices en PNG et laisser les fichiers dans ce dossier.
• Automatisé / scripté : Si l'outil propose une CLI ou des plugins, déclencher l'export par script et écrire vers le même chemin. Certaines équipes utilisent cron ou un petit daemon qui surveille un dossier « requête » et lance un job d'export.
• Configuration des chemins : Dans un petit fichier de config (ex. config.json ou variables d'environnement), définir EXPORT_DIR et OUTPUT_DIR. Chaque script et compétence OpenClaw doit les lire pour centraliser les chemins.

Exemple de config type env :

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

Une fois que les exports vont toujours dans EXPORT_DIR, l'étape de renommage par lot peut prendre ce répertoire comme entrée.

Règles de renommage par lot et exemples de scripts/commandes

Définir une convention de nommage unique et l'appliquer à chaque PNG exporté pour que le dev et le CMS reçoivent des noms de fichiers prévisibles.

Règles : Minuscules, tirets (pas d'espaces), et inclure les dimensions quand utile. Exemples : hero-banner_1920x1080.png, icon-cta_64x64.png, category_assetname_800x600.png.

Exemple : renommage par dimensions (macOS sips + shell). Le script suivant suppose que les PNG sont dans EXPORT_DIR ; il renomme chaque fichier en basename_WxH.png et écrit dans 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

Sauvegarder en rename_by_size.sh, exécuter chmod +x rename_by_size.sh, puis lancer depuis le Mac distant. Pour des règles plus complexes (ex. catégorie depuis le nom du dossier, numéros de séquence), étendre le script ou utiliser une compétence OpenClaw qui implémente la même logique.

Étapes reproductibles du pipeline complet

Exécuter dans l'ordre pour un pipeline design → PNG rejouable à tout moment.

1. Export : Dans l'outil de design, exporter tous les artboards/slices nécessaires en PNG vers EXPORT_DIR (ou déclencher l'export automatisé pour que les fichiers y arrivent).
2. Renommage : Se connecter en SSH au Mac distant, cd dans le dossier du script de renommage ou de la compétence OpenClaw, et lancer (ex. ./rename_by_size.sh ou la commande OpenClaw). Vérifier que les fichiers apparaissent dans OUTPUT_DIR avec les noms attendus.
3. Validation (optionnel) : Lancer un contrôle dimensions/spécifications (min/max, taille fichier) sur OUTPUT_DIR. Déplacer ou signaler les échecs ; corriger et ré-exporter si besoin.
4. Livraison : Utiliser OUTPUT_DIR comme source unique pour le dev : copie vers le repo, upload CDN ou import CMS. Tagger ou versionner le dossier pour tracer les releases.

Erreurs courantes et dépannage des permissions

Problèmes typiques et corrections :

• Permission denied à l'écriture : Vérifier que EXPORT_DIR et OUTPUT_DIR appartiennent à l'utilisateur qui exécute le script ; ls -la puis chmod ou chown si besoin. Si cron ou un service est utilisé, s'assurer qu'il tourne sous cet utilisateur.
• No such file or directory : Remplacer ~ par un chemin absolu dans les scripts (ex. $HOME/DesignExports/png) pour que cron ou les shells non interactifs résolvent correctement les chemins.
• sips / command not found : sips est fourni avec macOS ; s'il manque, confirmer que vous êtes sur un vrai Mac (ou VM Mac). Pour des scripts basés sur ImageMagick, installer avec brew install imagemagick.
• Dossier d'export vide : Vérifier que l'outil design enregistre bien vers EXPORT_DIR (paramètres d'export). Sur un Mac distant, s'assurer que le chemin est local au Mac, pas un volume réseau qui pourrait être démonté.
• Écrasement de fichiers : Si plusieurs exports produisent le même nom de base, ajouter un numéro de séquence ou un horodatage dans le script de renommage (ex. base_1920x1080_001.png).

Après correction, relancer depuis l'étape d'export pour garder tout le pipeline synchronisé.