Les équipes marque et produit ont besoin d’aperçus PNG reproductibles pour chaque thème (clair, sombre, saisonnier) dès que les design tokens bougent. Ce tutoriel décrit une chaîne OpenClaw sur Mac distant : installation et Gateway, déclenchement par surveillance de dossier ou tâche planifiée, rendu batch piloté par un JSON, comparaison par seuil face aux baselines, puis rapport lisible pour la revue. Il s’adresse aux utilisateurs MacPng qui livrent logos, bannières et planches UI ; en amont, suivez le guide d’installation OpenClaw (toutes plateformes) et, pour les lots PNG génériques, le volet ensembles PNG surveillés sur Mac distant.
Sommaire
Enjeux : assets marque et multi-thèmes
Sans automatisation, trois problèmes reviennent sur les livraisons créatives :
- Dérive silencieuse : une correction hex dans les tokens ne se reflète pas dans tous les visuels d’approbation ; la marketing valide un cadre obsolète.
- Exports non rejouables : selon la machine, lissage des polices et profils couleur diffèrent ; les PNG ne « matchent » jamais la CI.
- Revue faible : deux dossiers côte à côte fatiguent les parties prenantes ; il manque une synthèse à seuil et des heatmaps ciblées.
OpenClaw regroupe skills, passerelle et accès fichiers sur macOS. En l’exécutant sur un nœud dédié, les sondes Gateway et les rendus partagent le même environnement que vos gabarits — idéal pour aligner les prévisualisations avec une charte sRGB ou Display P3 documentée dans votre dépôt (voir aussi les articles MacPng sur la gestion couleur PNG).
Matrice de déclenchement : watch, planifié, manuel
| Déclencheur | Idéal pour | Compromis |
|---|---|---|
| Watch debouncé | Dépôt d’un tokens.json ou d’exports SVG mis à jour dans inbox/ |
Exige chemins stables et accès disque complet ; éviter un tir à chaque autosave |
cron / launchd |
Régression nocturne sur la branche principale | Sans garde sur le hash git, risque de traiter des fichiers inchangés |
| Invocation manuelle du skill | Avant un tag release ou une revue stakeholder | Dépend d’une commande SSH explicite |
Quelle que soit l’option, coalescez les événements filesystem, posez un fichier de verrou pour empêcher deux runs concurrents et identifiez chaque lot par un identifiant dans les logs.
Étapes du pipeline reproductible
- Préparer le Mac distant. Créer
tokens/,templates/,out/previews/,out/diff/,logs/; le même arbre se rejoue sur le prochain hôte loué. - Installer OpenClaw et activer la Gateway. Épingler les versions ; vérifier que l’URL de health répond OK et que la clé API couvre la racine projet.
- Enregistrer un skill (ou script appelé par le skill). Paramètres typiques : liste de thèmes, largeur/hauteur PNG, règles de nommage, chemins vers baselines pour la comparaison.
- Câbler le déclenchement. Watch sur
tokens/avec debounce 1–3 s, ou appel CI après merge sur le manifeste. - Boucle de rendu. Pour chaque thème, fusionner les valeurs dans le gabarit, rasteriser à échelle d’affichage fixe, écrire
{composant}_{theme}_{WxH}.png. - Comparer et résumer. Diff chaque nouveau fichier contre la baseline approuvée ; ne générer des heatmaps que si le seuil est dépassé.
- Publier les artefacts.
report.mdousummary.jsonsousout/diff/, pièce jointe ticket ou import DAM.
Contrat JSON et boucle de rendu
Un manifeste par ligne de marque suffit souvent : tableau themes[] avec id, carte colors, radius, clés typo optionnelles, et template pointant vers la scène à rasteriser. Validez le JSON (schéma) avant tout rendu headless pour éviter des PNG vides coûteux en temps GPU.
- Déterminisme : DPR fixe, animations désactivées, fond explicite, ICC sRGB embarqué si la livraison l’exige.
- Nommage : slugs minuscules pour un tri prévisible dans le Finder et dans le rapport.
- Taille de lot : commencer par quelques dizaines de vignettes sur M4, puis paralléliser après mesure mémoire ; pour des contrôles transverses (taille, alpha), croiser avec OpenClaw : contrôles QA PNG par lot sur Mac distant.
Seuils, diff et sortie du rapport
ImageMagick compare (ou outil équivalent) fournit un score numérique et, si besoin, une image de différence. Gates courantes : moins d’environ 1 % de pixels modifiés et RMSE sous un plafond calibré sur canevas normalisé (ex. 1024 px de large).
Chaque ligne du rapport doit indiquer : thème, fichier, métriques, statut pass/fail, chemin heatmap éventuel, hash baseline. Les heatmaps alourdissent le stockage : ne les conservez que pour les échecs ou les échantillons audit.
Erreurs fréquentes, retry et journaux
| Symptôme | Cause probable | Retry / remède |
|---|---|---|
| Gateway 502 ou timeout | Cold start du skill, conflit de port | Backoff 2 s / 4 s / 8 s ; après trois échecs, redémarrer la Gateway |
| Permission denied à l’écriture | Sandbox macOS ou mauvais utilisateur SSH | Aligner propriétaire (whoami), ACL ; une seule relance après correction |
| Rendu vide ou couleurs fausses | Police manquante ou mismatch P3/sRGB | Installer les polices sur le nœud distant, embarquer le profil, re-rendre |
| Diff toujours en échec | Bruit anti-alias ou tailles différentes | Normaliser dimensions, léger fuzz, ou relever le seuil après revue baseline |
| Watch déclenché trop tôt | Fichier encore en cours d’écriture | Deux stat de taille identiques à 400–800 ms d’intervalle avant traitement |
Appendez des lignes JSONL dans logs/runs.jsonl : horodatage, SHA git, nombre pass/fail, durée — la traçabilité aide lors d’une régression entre deux releases.
Checklist avant vol
- Santé Gateway OK ; version OpenClaw épinglée dans la doc du dépôt
- Schéma tokens validé ; chemins
templates/existants sur le Mac distant - Répertoires
out/etlogs/inscriptibles par l’utilisateur SSH - Baselines versionnées ; seuils documentés dans le README ou
thresholds.yaml - Debounce watch configuré ; verrou anti-chevauchement testé
- Rapport joint au ticket ou lien partagé avec marketing / design ops
FAQ
Faut-il du WebP en plus du PNG ?
Les PNG restent la référence pour l’approbation pixel-perfect et la transparence ; le WebP peut suivre en étape aval une fois les tokens figés.
Comment geler une baseline après validation juridique ?
Tag git + hash dans le rapport ; interdire l’écrasement automatique des baselines sur la branche protégée.
OpenClaw remplace-t-il Figma ?
Non : il orchestre rendu, diff et journaux ; la source de vérité design reste dans vos outils et fichiers tokens.
Déployer OpenClaw et les prévisualisations tokens sur un Mac M4 loué
Parcourez l’accueil MacPng, le blog et l’aide (SSH, VNC, prise en main) sans engagement préalable ; comparez les nœuds sur la page tarifs avant de lancer votre pipeline.