De l'image au vecteur
Transforme une image de référence en SVG qui lui correspond, puis en l'œuvre stylisée (et, si souhaité, animée) demandée.
Dans les commandes ci-dessous, <skill> désigne le dossier de ce skill, celui qui contient ce fichier. Utilisez python3 là où python n'est pas Python 3. L'option -I empêche Python d'importer des fichiers indésirables du dossier de l'image.
Pourquoi ce flux existe
Dessiner une forme reconnaissable en tapant des coordonnées « à vue d'œil » échoue, même quand cela semble proche. Chaque point estimé dérive un peu, les dérives s'accumulent, et le résultat donne une forme générique plutôt que la chose réelle. Les gens le remarquent immédiatement (« ça ne lui ressemble pas du tout »). Tracer les pixels mêmes de la référence donne la géométrie exacte, et chaque étape ultérieure (couleurs, ombrage, animation) repose sur des formes déjà justes.
Deux habitudes comptent autant que le tracé :
- Prouvez la correspondance avant de l'affirmer. Placez votre sortie à côté de la référence et superposez-la à la référence. Ne dites jamais « cela correspond à votre image » sans avoir regardé cette superposition. Le dire quand ce n'est pas le cas coûte plus de confiance que le dessin lui-même.
- Faites approuver le design avant de l'intégrer. Montrez des variantes sous forme d'aperçus rendus et laissez la personne choisir. Modifier un aperçu est peu coûteux ; modifier du code intégré ne l'est pas, et un design que la personne n'a pas vu a tendance à être rejeté.
Configuration
Les scripts nécessitent Python 3.9+ avec Pillow, NumPy et scikit-image, Node 18+, et (pour les aperçus) Edge, Chrome ou Chromium. Vérifiez avec :
python -c "import PIL, numpy, skimage" && node --version
Si les paquets Python manquent, demandez avant d'installer quoi que ce soit. pip install -r <skill>/requirements.txt les installe, ou uv run --with pillow --with numpy --with scikit-image python ... s'exécute sans installation.
Travaillez dans un dossier temporaire. Laissez l'image de référence là où elle se trouve, et ne la copiez pas dans quelque chose qui sera partagé.
Les étapes
1. Obtenez une bonne référence
Les illustrations plates se tracent proprement : un dessin 2D, une icône plate, un logo, un dessin animé avec des couleurs unies et des contours. Une photo ou un rendu 3D a des dégradés et des reflets qui se brisent en points. Si vous n'avez qu'une photo, demandez (ou, avec l'accord de la personne, cherchez) un dessin plat du même sujet. Une image nette « comment dessiner X : dernière étape » est idéale. N'utilisez la photo que pour guider l'ombrage plus tard.
Regardez d'abord l'image vous-même. Nommez ses parties en termes simples (pour un hibou : touffes d'oreilles, disques faciaux, yeux, bec, ventre, ailes) afin de pouvoir en parler avec la personne.
2. Échantillonnez ses couleurs
python -I <skill>/scripts/palette.py <image>
Ceci imprime la taille de l'image, la boîte englobante du sujet, les couleurs dominantes et une palette de départ. Transformez cela en une configuration de tracé : une couleur nommée par région plate (corps, ventre, œil, ligne, fond, ...). Les petites régions (un bec, un reflet) peuvent être en dessous du seuil de départ, alors vérifiez l'image pour celles-ci. Notez aussi les couleurs de bord anti-crénelées : un contour foncé donne souvent deux ou trois nuances sombres. Donnez à chacune sa propre entrée de palette et placez-les dans la même couche.
3. Tracez
Écrivez la configuration (references/config.md documente chaque clé, et examples/owl/owl.config.json est un exemple fonctionnel) et exécutez :
python -I <skill>/scripts/trace.py <image> <config.json> <out-dir>
Chaque pixel va à sa couleur de palette la plus proche. Les régions connectées de chaque couche sont délimitées (marching squares sur un masque légèrement flou, donc les bords sont lisses), simplifiées et écrites dans <out-dir>/regions.json comme données de chemin SVG dans les coordonnées pixels de l'image. Une couche silhouette (tout ce qui n'est pas le fond) est toujours incluse. Il écrit aussi trace.svg, un SVG en couleurs unies du résultat, et classes.png, montrant à quelle couleur chaque pixel est allé. Regardez classes.png lorsqu'une région est incorrecte. Le tableau à la fin de references/config.md liste les corrections habituelles.
4. Prouvez la correspondance
node <skill>/scripts/compare.mjs <out-dir>/regions.json <image> <config.json> <out-dir>/compare.html
python -I <skill>/scripts/render.py <out-dir>/compare.html <out-dir>/compare.png --size 1160x520
Les compareColours de la configuration mappent chaque couche à la couleur propre de la référence, donc la reconstruction devrait ressembler à l'originale. La page montre la référence, la reconstruction, et la reconstruction superposée à la référence à 55 % avec la silhouette soulignée en bleu. Regardez le PNG et vérifiez honnêtement : le contour, chaque région, les lignes et leur épaisseur. Corrigez la configuration et retracez jusqu'à ce qu'ils correspondent. Montrez aussi cette comparaison à la personne. C'est ce qui gagne sa confiance pour la suite.
Si tout ce qu'ils voulaient était un SVG de l'image, trace.svg l'est : remettez-le avec la comparaison, et arrêtez-vous ici sauf s'ils veulent plus.
5. Restylez en trois variantes
Construisez trois rendus vraiment différents des mêmes formes tracées, dans les couleurs demandées par la personne. references/styles.md contient les recettes :
- A, Icône plate : remplissages unis, contours gras, une division clair/ombre en deux tons. Plus nette aux petites tailles.
- B, 3D douce : chaque région obtient son propre dégradé éclairé en haut à gauche, les plaques se soulèvent avec une ombre portée douce, une coque brillante, des détails lumineux.
- C, Métal cinématographique : dégradés brossés multibandes, bords biseautés, traînées de reflets, bloom.
Un recoloriage (une « édition sombre », par exemple) est un échange de palette sur les mêmes couches. Chaque région conserve sa forme, et c'est pourquoi elle reste reconnaissable comme l'originale.
Créez une page d'aperçu montrant chaque variante en grand sur un fond sombre et un fond clair, aux tailles auxquelles elle sera vraiment utilisée (un avatar à 72 px et 40 px, un favicon à 32 px et 16 px, etc.), plus les couleurs originales pour comparaison. Rendez-la en PNG avec render.py, regardez-la vous-même, et montrez-la à la personne de la manière permise par votre environnement (une image ou un fichier qu'elle peut ouvrir, un artefact, un panneau latéral). Demandez-lui de choisir, ou de mixer (la finition de C avec les contours de A, par exemple). Ne construisez rien encore.
6. Animez (optionnel, après qu'un style est choisi)
Lisez references/animation.md. En bref : une ambiance par état (idle, pensée, parole, pause), des keyframes CSS pour les boucles, et SMIL <animate> pour tout ce qui est synchronisé avec des données, comme le lip-sync sur une enveloppe de volume de parole. Prévisualisez les ambiances en direct sous forme de page HTML, et envoyez aussi un PNG fixe. Obtenez à nouveau l'approbation.
7. Intégrez-le
Ne touchez au projet que maintenant. Transformez les formes tracées en un module de code plutôt que de copier les données de chemin :
node <skill>/scripts/emit_shapes.mjs <out-dir>/regions.json <target>/shapes.ts --name OWL_SHAPES --layers silhouette,body,wings=wing[],eyes=eye,ink
key=layer renomme une couche, et [] conserve ses régions sous forme de tableau pour que chacune puisse être ombrée individuellement. Le module exporte aussi OWL_SHAPES_VIEWBOX. Gardez les coordonnées dans l'espace pixel de la référence et encadrez-les avec ce viewBox. Les notes d'intégration sont dans references/animation.md, et les notes pour les mods Claude Code sont dans references/claude-code-mods.md.
Communication avec la personne
- Montrez, ne décrivez pas. Chaque étape de design se termine par une image qu'elle peut voir.
- Quand elle dit que ça ne va pas, croyez-la. Comparez avec la référence et dites précisément ce qui diffère avant de changer quoi que ce soit.
- Expliquez la méthode en termes simples si elle demande comment vous faites (« je trie chaque pixel par couleur, je trace le contour de chaque couleur et je transforme les contours en formes vectorielles »).
- Pour un personnage déposé ou le logo d'une entreprise, le tracer pour un usage personnel est acceptable. Mentionnez une fois, sans faire la leçon, que la publication ou la vente est une autre affaire.