hwcloud-scene-image

Générateur d'image de scénario produit · v2 / v3

À partir d'un « titre », produisez une image de scénario de 1760×1120. Le style est prédéfini, inutile de le redessiner – il suffit de choisir la mise en page + remplir le contenu.

Deux orientations, choisissez d'abord :

	v2 · carte	v3 · graphique
Sujet principal	Nœuds rectangulaires arrondis + étiquettes courtes	Grande icône / nœud circulaire / dispositif graphique
Zone de contenu	Carte blanche de contenu entière	Absente – les éléments graphiques flottent directement sur le panneau bleu clair
Quantité de texte	5–7 endroits, 2–4 caractères	3–4 endroits, 2–3 caractères
Convient pour	Énumération côte à côte de 5–6 concepts	Peu de points forts, l'élément graphique parle de lui-même
Gabarit	template-b/c-*	template-d/e-*

Par défaut, utiliser v3 – ce type d'image finit souvent réduit à 240 px de large ; les éléments graphiques résistent mieux au rétrécissement que le texte. Ne revenir à v2 que si l'information est « 5 éléments côte à côte, chacun doit être lu ».

Pourquoi utiliser le rendu HTML/CSS plutôt que l'IA générative d'images ? Cette série d'images comporte du texte précis et des contours de 1 px. Les modèles de diffusion rendraient le texte flou, les contours tremblants, et les résultats varieraient à chaque fois pour la même invite. Rendu HTML > capture d'écran : le texte est toujours net, modifiable à tout moment, reproductible et industrialisable.

Pourquoi la structure doit-elle être simple ? Ces images seront souvent vues à une largeur de 240 px (carte web), et non 1760. À une échelle de 1/7, « six nœuds + micro-graphiques + fines barres de squelette » deviendront un bruit gris uniforme. L'indicateur clé de v2 est : réduite à 240 px, on doit encore pouvoir lire le titre et l'essentiel de chaque étiquette.

Échelle de réduction (mémorisez ce tableau)

Largeur d'affichage	Échelle	Texte 48 px réellement affiché	Conclusion
1760 (PPT plein écran)	1:1	48 px	Un peu grand mais acceptable
480 (grande image web)	1/3,7	13 px	Confortable
240 (carte web)	1/7,3	6,6 px	Taille de validation du design
190 (vignette de liste)	1/9,3	5,2 px	Limite atteinte

Donc : aucun texte de moins de 40 px ne doit apparaître, aucun élément de moins de 300 px de large ne peut supporter des détails.

Règles impératives (si l'une d'elles n'est pas respectée, le résultat ne ressemblera pas à ce qui est attendu)

1. Toile 1760×1120 (11:7), fond blanc pur, pas de dégradé, pas de coin sombre, pas de bordure.
2. Les coordonnées de l'enveloppe extérieure et du panneau sont fixes ; ne pas les modifier. C'est la seule source de « profondeur ». La carte blanche de contenu de troisième niveau n'appartient qu'à v2 ; pour v3, on ne la place pas, les éléments graphiques reposent directement sur le panneau.
3. L'image entière contient exactement un carreau dégradé, 170–200 px de côté, c'est le sujet visuel principal.
4. Nombre total d'éléments dans la zone de contenu ≤ 7 (les lignes et poignées ne comptent pas). Au-delà de 7, ils deviennent du bruit à la réduction.
5. Texte : titre 76 px, étiquettes 48–50 px, badge 44 px. Pas de texte à 20 px.
6. Teinte bloquée entre 200° et 250°. La seule couleur chaude #F58A8A est réservée aux alertes.
7. Pas de personnage, pas de perspective, pas de 3D, pas de photo, pas d'arrière-plan environnemental. Tous les rectangles sont strictement alignés sur les axes.
8. Ne produire que le format 1760×1120 ; ne pas exporter des variantes réduites comme 660×420.
9. Tout le texte doit être du texte réel (texte HTML), pas une image ni un tracé.
10. Chaque ligne de connexion doit avoir ses deux extrémités sur le bord d'un élément ou sur une autre ligne. Avant la livraison, le script de vérification des connexions render.py doit passer (code de sortie 0).

Géométrie fixe (recopier, ne pas modifier)

Couche	Élément	left	top	w	h	r
L0	canvas	0	0	1760	1120	–
L1	shell enveloppe blanche	110	66	1520	968	62
L2	panel panneau bleu clair	140	96	1460	908	50
L3	content carte blanche de contenu	180	240	1310	644	40
L4	badge flotteur	1312	à définir	320	128	32
–	title titre	190	132	–	–	76 px / 600

Limites dérivées (pour aligner le contenu) :

• Bord droit du panneau : 1600 ; bord inférieur : 1004 ; bord droit de la carte de contenu : 1490 ; bord inférieur : 884.
• Du bord inférieur de la carte de contenu au bord inférieur du panneau : bande bleue de 120 px (1004 − 884).
• Bord droit du badge : 1632, dépasse le panneau de 32 px – c'est le « débordement », ne pas le ramener à l'intérieur.
• Largeur disponible pour le contenu = 180→1490, moins 60 px de marge intérieure de chaque côté = 1190. Les éléments doivent se trouver entre 240 et 1430.
• Le badge occupe l'espace après 1312 ; le bord droit des éléments de contenu ne doit pas dépasser 1230, sinon ils seront écrasés.

Dégradé du panneau (doit s'arrêter à #F5FAFF, pas plus clair) :

background:linear-gradient(180deg,#E4F1FF 0%,#E9F4FF 34%,#F2F9FF 74%,#F5FAFF 100%);

Dimensions minimales des éléments (v2)

Élément	Dimensions	Description
Carreau dégradé	170–200 de côté	Occupe 10–11 % de la largeur, la plus grande zone colorée de l'image
Barre de couche large	910×152	Une barre pour toute une couche, contient « icône + nom de couche »
Nœud standard	330×132	Trois par ligne, espacement 35
Petite carte de sortie	360×120	Trois par ligne, espacement 40
Badge flotteur	320×128	Icône 46 + texte 44 px
Icône	50–54	stroke-width 2.2, trop fin disparaît à la réduction
Ligne de connexion	4 px	dasharray 12 10, flèche triangulaire isocèle
Poignée de sélection	20×20	border 3px, centrée sur le coin du nœud

Flux de travail

Étape 1 · Titre long → Titre court + badge

• Prendre le nom de la fonctionnalité, le réduire à 4–6 caractères chinois : « Visualisation de documentation technique et de base de connaissances-… » → « Génération d'illustration doc  ».
• Texte du badge : 4 caractères (320 px ne peut contenir que 4 caractères de 44 px), doit être une « promesse » : « Insertion unique », « Modif. ce bloc », « Layout inchangé », « Modifiable localement ».
• Écrire une phrase d'exemple réelle, ne pas écrire « texte d'exemple ».

Étape 2 · Choisir la mise en page

Caractéristique du titre	Mise en page	Gabarit
Un noyau → plusieurs sortes de productions, rayonnement de capacité, un centre N scénarios	D noyau de branches (v3)	assets/template-d-orbit.html
A→B→C trois étapes, upload→analyse→stockage, construction→test→publication	E pipeline circulaire (v3)	assets/template-e-pipeline.html
Entrée → génération → sorties multiples, conversion, organisation (nécessite des étiquettes textuelles pour clarifier)	B bifurcation haut→bas (v2)	assets/template-b-flow.html
Parle à la fois de « génération en une phrase » et de « pouvoir modifier après génération » (nécessite une sensation d'interface)	C-1 État d'édition sur le canevas (v2)	assets/template-c-ui.html
Architecture en couches (accès/service/données) décrite couche par couche	C-2 État de sélection de couche (v2)	assets/template-c-arch.html

Détails dans references/layouts.md. En cas de doute : si ≤ 4 points principaux, utiliser D ou E ; si l'information doit être disposée ligne par ligne, utiliser C-2 (c'est la plus lisible en miniature).

Étape 3 · Modifier le gabarit

Copier un gabarit, ne modifier que ces endroits, ne pas toucher une ligne du CSS de la coque :

1. Texte de .title ;
2. Étiquettes courtes (2–4 caractères) dans chaque rubrique/chaque nœud/chaque carte ;
3. Texte (4 caractères) + top du badge .badge (espacement vertical entre deux badges ≥ 40 px) ;
4. Phrases d'exemple dans les barres d'entrée / bulles ;
5. En supprimant un élément, supprimer simultanément ses lignes et flèches de connexion, sinon il restera des bouts de ligne suspendus ;
6. En modifiant les connexions, obligatoirement suivre la méthode « nœud central + segments indépendants » décrite plus loin dans « Comment dessiner les connexions sans qu'elles ne se cassent », ne pas ajouter de virages à la volée.

Étape 4 · Rendu

python <SKILL_DIR>/scripts/render.py <input.html> <output.png>

<SKILL_DIR> est le répertoire d'installation de cette skill (là où se trouve SKILL.md), pas le répertoire de travail courant – votre cwd est généralement le projet de l'utilisateur, écrire directement scripts/render.py ne trouvera pas le fichier.

Le script copie le HTML dans un répertoire temporaire ASCII avant d'appeler le navigateur headless – les chemins contenant des caractères chinois font échouer silencieusement le headless, produisant une sortie blanche ou une ancienne image. Il vérifie également que la sortie fait bien 1760×1120, et vérifie automatiquement que les extrémités de chaque ligne de connexion ne sont pas suspendues – le code de sortie 3 indique des lignes cassées, ne pas livrer.

Étape 5 · Auto-vérification miniature (la plus importante)

python <SKILL_DIR>/scripts/preview.py <output.png> --width 240

Il faut vraiment regarder la vignette, et vérifier avec references/checklist.md. Le seul critère de décision est :

À 240 px, peut-on encore lire le titre, l'essentiel de chaque étiquette, et « quelle zone est importante » ?

Si non, réduire les éléments, agrandir la police, ne pas essayer de résoudre en ajoutant des détails.

v3 · Graphique (piloté par icônes et éléments graphiques)

En une phrase : ce qui peut être dessiné ne doit pas être écrit.

Dans v2, chaque élément est « rectangle arrondi + icône + texte », tous isomorphes, donc l'image entière ressemble à un ensemble de blocs de processus. v3 change seulement trois choses : supprimer la carte de contenu blanche, tripler la taille des icônes, et laisser les éléments graphiques porter la sémantique par eux-mêmes.

Trois règles strictes

1. Ne pas placer la carte de contenu blanche. Les éléments graphiques flottent directement sur le panneau bleu clair ; le fond blanc n'est utilisé que pour les petits objets comme les badges et les flotteurs. Les limites se font par ombre, pas par contour.
2. Icône ≥ 84 px. Épaisseur visuelle de la ligne = stroke × taille d'affichage / 24, objectif 7–9 px (environ 1 px après réduction à 240 px).
3. Étiquettes ≤ 4 endroits, chaque endroit 2–3 caractères. Au-delà de 4, vous utilisez encore le texte pour expliquer – retournez dessiner cette information sous forme graphique.

Bibliothèque d'icônes (50)

assets/icons.svg est un sprite. Inclure tout le contenu en ligne dans la page pour pouvoir l'utiliser :

<body>
  <!-- Coller ici tout le contenu de assets/icons.svg -->
  <svg><use href="#i-database"/></svg>
</body>

Les références externes (<use href="icons.svg#i-database"/>) seront bloquées par le navigateur sous file:// à cause de CORS, et les icônes disparaîtront complètement dans la capture headless sans message d'erreur.

python <SKILL_DIR>/scripts/iconlib.py --list            # Lister tous les ids par groupe
python <SKILL_DIR>/scripts/iconlib.py --preview p.png   # Générer un mur d'icônes pour choisir

Groupes : Graphiques / Schémas 12 · Éléments techniques 15 · IA et contenu 18 · Interaction 5.

Les symboles n'ont pas de stroke-width, à adapter selon la taille d'affichage :

Taille d'affichage	stroke
84–108	1,9–2,0
130–140	1,5
170–190	1,3

Si vous ne trouvez pas l'icône appropriée, remplacez-la par une similaire, ne dessinez pas une nouvelle forme à la main – si le style des lignes n'est pas uniforme, l'image entière trahit immédiatement.

Pièces d'éléments (15)

assets/parts.html est un mur de pièces, chaque pièce a un exemple réel + un nom de classe + des dimensions, il suffit de copier le HTML + CSS :

Carreau dégradé · Badge rond blanc · Badge flotteur débordant · Capsule d'étiquette · Cadre de fenêtre · Empilement de couches · Flèche dégradée · Connexion pointillée · Poignée de sélection · Bulle de commande · Progression circulaire · Micro-graphique à barres · Texture de points · Étoile · Carreau sélectionné.

Deux mises en page

• D Noyau de branches → Un noyau → sorties multiples. Le centre est « trois pages empilées décalées + étoile », pas une seule icône.
• E Pipeline circulaire → A→B→C en trois étapes. La partie centrale est le seul élément dégradé, c'est aussi le premier point d'attention du lecteur.

Les deux sont assemblés à partir des pièces ci-dessus ; pour modifier l'image, il suffit de changer l'icône et les étiquettes de 2–3 caractères.

Squelette des mises en page v2

B Bifurcation haut→bas (template-b-flow.html) Capsule d'entrée 690×136 centrée → ligne verticale → carreau dégradé 200 → ligne verticale jusqu'à la ligne principale → ligne principale horizontale se divisant en trois chemins → trois cartes de sortie 360×120. Badge placé en haut à droite.

C-1 État d'édition sur canevas (template-c-ui.html) Carreau en haut à gauche 170 + barre d'entrée 850×118 → plaque de canevas bleu clair 1160×352, contenant trois nœuds 330×132, le nœud central sélectionné → bulle de commande en dessous 430×112, reliée au nœud sélectionné par une ligne pointillée de 4 px. Badge en haut à droite.

C-2 État de sélection de couche (template-c-arch.html) Trois barres de couche 910×152 empilées verticalement (espacement 40, l'ensemble centré verticalement), celle du milieu sélectionnée avec un petit carreau dégradé de 104 px → deux badges à droite. Le moins d'informations, la meilleure lisibilité en miniature.

Pièces d'éléments v2 (6, cela suffit)

1. Carreau d'icône dégradé – 170–200 / r44–52 / linear-gradient(135deg,#4A9DFC,#5E92F9 45%,#7C6BF5) + icône linéaire blanche (84–100px, stroke-width 1.6) + lueur douce inférieure 0 18 40 rgba(74,157,252,.42), 0 0 40 8 rgba(124,107,245,.14).
2. Badge flotteur – fond blanc 320×128 / r32 + 0 20 48 rgba(31,71,141,.16) + icône bleue 46 px + texte 44 px.
3. Barre de couche / nœud – fond blanc + contour 3px #C9DCF2 + bloc d'icône arrondi bleu clair 90 px + étiquette 50px/500. Ne pas mettre de barre de squelette, écrire directement du texte réel.
4. État sélectionné – 5px #4A9DFC + 0 0 0 12px rgba(74,157,252,.11) + poignées de 20 px aux quatre coins (centrées sur les coins) + éventuellement un petit carreau dégradé intégré. Ne pas dessiner de cadre de sélection en pointillé (les lignes de connexion le traverseraient).
5. Ligne de connexion – 4px / #A9C7EC / dasharray 12 10, flèche triangulaire isocèle M827 716 h16 l-8 14 z. Ne pas utiliser de triangle rectangle.
6. Plaque de canevas – #F8FBFF / 2px #DDEBFB / r36, regroupe « nœuds + bulles » en un groupe pour éviter que l'image ne soit dispersée.

Comment dessiner les connexions sans qu'elles ne se cassent

Les connexions sont la seule partie de l'image qui nécessite d'écrire manuellement les coordonnées absolues, et aussi la plus sujette aux erreurs. Une ligne tronquée de quelques centaines de pixels donne encore une image qui semble « correcte » – à 1760 px, on ne le voit pas sans zoomer, à 240 px on ne voit plus rien, jusqu'à ce que l'image ait été livrée et que quelqu'un le signale.

Les bifurcations doivent être décomposées en « nœud central + segments indépendants »

Erreur – un seul path qui tourne et bifurque en cours de route, la ligne principale ne couvrant que la branche la plus à gauche :

<path d="M835 652 V690 H435 V716"/>   <!-- vertical → horizontal gauche → vertical, cassé ici -->
<path d="M835 690 V716"/>
<path d="M1235 690 V716"/>            <!-- point de départ suspendu dans le vide -->

Correct – tous les points d'intersection coïncident exactement aux extrémités :

<path d="M835 652 V690"/>    <!-- ligne verticale tombe sur le nœud (835,690) -->
<path d="M835 690 H435"/>    <!-- moitié gauche de la ligne principale -->
<path d="M835 690 H1235"/>   <!-- moitié droite de la ligne principale -->
<path d="M435 690 V716"/>    <!-- trois branches, leur y de départ est égal au y de la ligne principale -->
<path d="M835 690 V716"/>
<path d="M1235 690 V716"/>

Trois règles :

1. Un path ne fait qu'une seule chose : soit descendre tout droit, soit traverser horizontalement. Ne pas tourner ni bifurquer en cours de route.
2. Les deux extrémités de la ligne principale doivent être égales aux x des branches la plus à gauche et la plus à droite ; ces trois nombres doivent être textuellement identiques dans le code. Si une extrémité change, l'autre doit suivre.
3. Le y de la fin d'une branche = top de la carte − 14 (14 est la hauteur de la flèche). Le y de début de la branche = y de la ligne principale.

Vérification automatique à chaque rendu

render.py appelle automatiquement linklint.py après le rendu : il fait calculer par le navigateur les véritables extrémités de chaque ligne, et détermine si chacune touche le bord d'un élément (≤ 8 px) ou intersecte une autre ligne (≤ 3 px). Si ce n'est pas le cas, c'est une suspension, et il imprime les coordonnées :

[x] 1 extrémité suspendue trouvée :
    Ligne 6, départ à (1235,690), l'objet le plus proche est à 40 px  d="M1235 690 V716"

Dans ce cas, le code de sortie est 3, ne pas livrer. On peut aussi vérifier indépendamment :

python <SKILL_DIR>/scripts/linklint.py scene.html -v

Les formes remplies telles que les flèches triangulaires et les losanges de relation ne participent pas à la vérification (leur base est déjà collée à l'extrémité de la ligne), mais elles sont considérées comme des cibles connectables – donc connecter une ligne à une flèche est valide.

Cette vérification ne reconnaît que la géométrie, pas le « ça a l'air correct ». Elle a déjà détecté un vrai accident : la branche droite d'un embranchement à trois voies manquait de 800 px de ligne horizontale, alors que l'image entière semblait parfaitement normale à l'œil nu.

Erreurs courantes (toutes déjà rencontrées)

Phénomène	Cause	Correction
Réduit à 240 px, devient une tâche grise uniforme	Éléments trop petits, trop nombreux	Réduire à ≤ 7 éléments, augmenter la police à 48 px, épaissir les contours à 3–5 px
Les barres de squelette ressemblent à du bruit gris en miniature	Utilisation de barres décoratives	Remplacer par de vraies étiquettes courtes (2–4 caractères)
Bande blanche en bas, le panneau semble n'avoir qu'une bordure	Dégradé trop clair jusqu'à #FBFCFE	S'arrêter à #F5FAFF
Le badge écrase le contenu	L'élément de contenu dépasse 1230	Contrôler le bord droit du contenu en dessous de 1230
Poignée flottante en dehors du coin	top écrit manuellement sans soustraire la moitié	handle.left = coin x − 10, top = coin y − 10
Ligne pointillée invisible	Masquée par la lueur du nœud sélectionné	Ajouter z-index:6 au svg contenant la ligne de connexion
Flèche tordue, ressemble à un triangle rectangle	Chemin mal écrit	Utiliser un triangle isocèle, voir pièce 5
Ligne principale horizontale écrase la carte	Point de bifurcation trop bas	Carré → ligne principale ≥ 38 px, ligne principale → carte ≥ 40 px
Espacement inégal entre trois cartes	left écrit manuellement	Disposer à intervalles égaux et vérifier que les centres sont alignés sur les flèches
Rendu blanc/ancienne image	HTML dans un chemin avec caractères chinois	Utiliser scripts/render.py
Trois images de densités inégales	Dimensions d'éléments écrites différemment	Toutes les valeurs selon le tableau « Dimensions minimales des éléments »
Ligne coupée en chemin, branche suspendue	Un seul path tourne et ne couvre qu'une partie des branches	Décomposer en « nœud central + segments indépendants », voir « Comment dessiner les connexions sans qu'elles ne se cassent »
La ligne pointillée de la bulle a un espace avec le nœud	Le point de départ ne tombe pas sur le bord de l'élément	Point de départ y = bottom de l'élément, laisser linklint vérifier à 0 px

Index des fichiers

Cette skill est auto-suffisante : les chemins ci-dessous sont relatifs au répertoire contenant SKILL.md, pas besoin d'accéder à d'autres dépôts ou documents externes.

SKILL.md
├── references/
│   ├── style-tokens.md    Table complète des tokens (couleurs, polices, rayons, ombres) incluant les tokens graphiques v3
│   ├── layouts.md         Schémas des cinq mises en page, cas d'usage, composition des éléments
│   └── checklist.md       Liste de vérification avant livraison (inclut validation miniature 240 px et éléments spécifiques v3)
├── assets/
│   ├── icons.svg          50 icônes linéaires en sprite (à inclure en ligne dans la page, puis <use href="#i-xxx"/>)
│   ├── parts.html         Mur de 15 pièces graphiques, consultable et copiable
│   ├── template-d-orbit.html      D Noyau de branches (v3)
│   ├── template-e-pipeline.html   E Pipeline circulaire (v3)
│   ├── _blank-shell.html          Uniquement la coque, pour repartir de zéro
│   ├── template-b-flow.html       B Bifurcation haut→bas (v2)
│   ├── template-c-ui.html         C-1 État d'édition sur canevas (v2)
│   └── template-c-arch.html       C-2 État de sélection de couche (v2)
├── scripts/
│   ├── render.py          HTML → PNG 1760×1120 (gestion des chemins + détection navigateur + vérification des connexions)
│   ├── linklint.py        Vérifie si les extrémités de chaque ligne sont suspendues (appelé automatiquement par render.py)
│   ├── preview.py         Génère une vignette 240 px pour l'auto-vérification miniature
│   └── iconlib.py         Liste les ids d'icônes / génère un mur d'icônes
└── examples/              5 images finalisées + fichiers source rendables, donnés uniquement à titre de référence, ne participent pas à la génération

Le texte et les graphiques des gabarits sont des exemples réels fonctionnels ; les modifier directement est plus rapide que de repartir d'une page vierge.