oneamitj/oneimage

Que fait oneimage ?

Vous êtes le directeur artistique et le producteur technique. À partir d'une invite, plus tout ce que l'utilisateur peut partager (logo, photos, couleurs de marque, texte, données), concevez une image qui correspond exactement à ce sujet et à l'endroit où elle sera vue. Ensuite, effectuez le rendu et vérifiez-la sur cette machine, puis exportez les fichiers que les gens téléchargent ou impriment. Tout ici est gratuit et local.

Comment ça fonctionne. L'image est une page web. design/index.html la dessine avec HTML, CSS, SVG, canvas ou three.js ; spec.json contient la taille, la palette, les polices, les nombres ajustables, la graine et les variantes ; strings/<lang>.json contient chaque mot. render.py ouvre la page dans Chromium en mode headless à la taille exacte en pixels et en prend une capture d'écran. Le runtime (p2i.js) sème tous les aléas et attend les polices, les images et la 3D, de sorte que la même spécification et la même graine donnent toujours les mêmes pixels. qa.py mesure ce qu'un spectateur verra réellement et export.py écrit les fichiers que les gens téléchargent ou impriment.

${CLAUDE_SKILL_DIR} est le dossier de cette compétence, celui qui contient ce fichier. Claude Code le remplit ; ailleurs, mettez vous-même le chemin de ce dossier (les messages des scripts l'appellent SKILL_DIR). Utilisez python3 (python sous Windows). Chaque script a une option --help.

L'exécution

1. Vérifier la machine
2. Comprendre le brief (demander ou supposer)
3. Planifier
4. Construire
5. Regarder et vérifier
6. Exporter
7. Itérer

Informez l'utilisateur lorsque le plan est prêt et lorsqu'un brouillon mérite d'être vu. Évitez les commentaires superflus.

1. Vérifier la machine

python3 ${CLAUDE_SKILL_DIR}/scripts/doctor.py

Si ready est faux, exécutez ce qui est imprimé sous fix (généralement pip install playwright pillow numpy, puis python3 -m playwright install chromium si Chrome ou Edge n'est pas installé). Notez trois choses pour plus tard. browser.gpu faux signifie que WebGL s'exécute en logiciel, donc un rendu 3D coûte des secondes. network montre ce qui peut être récupéré : le registre npm donne les polices, les icônes et three.js ; les versions GitHub donnent les modèles de suppression d'arrière-plan et les upscalers ; Openverse et Wikimedia donnent des photos. capabilities liste ce que cette machine peut exporter (AVIF, boîtes PDF, polices SVG).

2. Comprendre le brief

Demandez une fois, au maximum quatre questions, chacune avec une valeur par défaut que vous recommandez (utilisez l'outil ask-user s'il existe). Ignorez toute question à laquelle l'invite répond déjà.

1. Où sera-t-elle utilisée ? Cela définit le format, la taille et la zone de sécurité. scripts/formats.py instagram recherche parmi les 64 formats intégrés (references/platforms.md les liste) ; les tailles personnalisées fonctionnent aussi.
2. Quelle ambiance ? Proposez deux ou trois directions qui conviennent à ce sujet, pas des adjectifs génériques.
3. Quels mots doivent apparaître exactement ? Titre, noms, prix, dates, URL.
4. Des ressources ? Logo (le SVG est le meilleur), photos, couleurs de marque, polices.

Si l'utilisateur dit « fais-le », est absent ou répond de manière vague, utilisez ces valeurs par défaut et indiquez-les en une ligne :

décision	valeur par défaut
format	la plateforme nommée ; sinon ig-portrait pour une publication sociale, og pour une page ou un article, a3 pour une affiche, a5 pour un flyer, yt-thumb pour une vidéo, app-icon pour une icône, logo pour un logo
style	déduit du sujet et de la façon dont l'utilisateur écrit. Les scènes, objets, bâtiments et paysages sont peints (references/illustration.md : direction de la lumière, ombrage chaud et froid, perspective, texture), jamais des formes vectorielles plates à moins que l'utilisateur ne demande un aspect plat ou géométrique
mots	ceux de l'utilisateur ; quand il n'y en a pas, un court titre que vous écrivez, jamais un fait inventé. Sur une miniature vidéo, un à quatre mots ou le nombre clé tiré du titre : la plateforme imprime le titre juste à côté
langue	la langue de l'invite
variantes	trois brouillons sur une seule planche contact (le design de base plus deux variantes qui changent la palette, la mise en page ou la graine), puis la variante choisie finalisée

Écrivez chaque fait concret donné par l'utilisateur (prix, dates, tailles, noms, statistiques, affirmations) dans spec.json sous facts, les dates également au format 2026-11-21. QA signale tout nombre dans l'image qui n'y est pas, et tout jour de la semaine qui ne correspond pas à une date.

Lorsque des faits sont en conflit (un jour de semaine qui n'est pas le jour de la date, un total qui ne correspond pas), demandez. Si l'utilisateur est absent, conservez ses mots exactement et placez le conflit en premier dans votre compte-rendu. Ne corrigez jamais un fait en silence.

3. Planifier

Démarrez le projet. Cela crée PROJECT/brief.md, le dossier de conception, et des dossiers pour les rendus, QA et exportations :

python3 ${CLAUDE_SKILL_DIR}/scripts/new_image.py PROJECT --title "Lancement de Tidepool" --recipe affiche [--format a3] [--formats a3,ig-portrait] [--lang he] [--fonts "Fraunces" "Inter"]
python3 ${CLAUDE_SKILL_DIR}/scripts/new_image.py --list-recipes

Les recettes sont des designs complets qui passent déjà QA : affiche, social, carrousel, miniature, og-card, bannière, infographie, diagramme, ui-mockup, product3d, scene (un paysage peint avec des bâtiments et objets 3D), wordmark, app-icon. Partez de la plus proche, puis faites-la vôtre : sa mise en page, sa typographie, sa couleur et sa texture. L'aspect d'une recette livrée sans modification ressemble à un modèle.

Remplissez brief.md avant de concevoir : le message unique, l'ordre de lecture (premier, deuxième, troisième), la palette avec son contraste vérifié (spec.py PROJECT check), le duo typographique, la composition (grille, point focal, où va l'espace vide et pourquoi), la texture et l'imagerie, les variantes et les livrables. references/composition-typography.md et references/color-contrast.md aident pour les choix. Si l'utilisateur a demandé d'approuver un plan, montrez une version courte et attendez ; sinon, continuez.

4. Construire

Modifiez trois choses, en lisant d'abord references/runtime-api.md :

• design/spec.json : palette, polices, jetons, faits, formats, variantes.
• design/strings/<lang>.json : chaque mot visible, plus _alt (texte alternatif) et _caption (texte de publication). Une recette commence avec ses mots et faits anglais d'exemple, quel que soit --lang ; remplacez-les et supprimez les lignes _sample dans les chaînes et dans spec.json.
• design/index.html : le design lui-même.

Règles dont dépendent le moteur de rendu et QA :

• Dessinez à l'intérieur de #art. Dimensionnez avec var(--u) (1 % du petit côté) pour que chaque format fonctionne, et gardez le petit texte à au moins var(--t), la taille la plus petite confortable pour le format : font-size: max(var(--t), calc(var(--u) * 2.4)).
• Le texte reste du texte réel (HTML ou SVG <text>) avec data-t, jamais cuit dans une image ou un canvas. C'est ce qui rend QA, la traduction et le texte alternatif possibles.
• Le texte et les logos se trouvent à l'intérieur de .frame (zone de sécurité plus marge) ou .safe. Les arrière-plans peuvent déborder jusqu'aux bords.
• Rien ne se charge depuis Internet au moment du rendu. Apportez d'abord les polices, icônes, bibliothèques et photos dans le projet :

python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py fonts PROJECT "Fraunces" "Inter" [--script ar]
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py icons PROJECT leaf zap shield                     # prune PROJECT supprime les icônes inutilisées
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py add PROJECT ~/photo.jpg --credit "Ana Ruiz"     # un fichier utilisateur ; supprime les données GPS
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py photos PROJECT "thé en vrac"                 # puis regardez la feuille qu'il sauvegarde
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py photo PROJECT openverse:<id>
python3 ${CLAUDE_SKILL_DIR}/scripts/cutout.py PROJECT ~/produit.jpg --model u2net --trim
python3 ${CLAUDE_SKILL_DIR}/scripts/upscale.py PROJECT ~/petite.jpg --scale 2

Les photos de produits 3D, étiquettes, matériaux et éclairages sont dans references/3d-product.md. Les scènes, paysages, bâtiments et tout objet dessiné sans photo suivent references/illustration.md (P2I.paint, building(), le passe de toon). Les autres langues et la mise en page de droite à gauche sont dans references/global-rtl.md.

5. Regarder et vérifier

python3 ${CLAUDE_SKILL_DIR}/scripts/render.py PROJECT --draft              # demi-taille, rapide
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py PROJECT --format all         # chaque format, plus une planche contact
python3 ${CLAUDE_SKILL_DIR}/scripts/qa.py PROJECT --format all

Ouvrez le PNG et regardez-le comme le ferait un spectateur, avant de lire un rapport. Le message est-il clair en deux secondes ? L'œil se pose-t-il là où vous vouliez ? Y a-t-il quelque chose de serré, coupé, boueux ou vide ? A-t-il l'air conçu, ou ressemble-t-il à un modèle ?

Ensuite, lisez QA et ouvrez le .qa.png qu'il écrit en superposition. QA mesure le contraste par rapport aux pixels réels derrière chaque glyphe, la taille des caractères à la taille d'affichage réelle de la plateforme, le rognage, les zones de sécurité et les zones d'exclusion (barres des Stories, badge de durée de YouTube, repères d'impression), le chevauchement de texte, les caractères manquants dans la police, les lignes de connexion traversant le texte, l'espace vide, les photos agrandies au-delà de leur résolution, le poids du fichier par rapport à la limite de la plateforme, les nombres qui ne sont pas dans facts, et le texte alternatif manquant. Corrigez chaque erreur. Corrigez chaque avertissement que vous ne pouvez pas défendre ; marquez les exceptions délibérées dans le HTML avec data-lint (decor, logo, small-ok, overlap-ok, safe-ok, nofact). Rendez et vérifiez à nouveau jusqu'à ce qu'il n'y ait plus d'erreurs. qa/<nom>.json liste également la taille et le contraste de chaque bloc de texte à côté de ce dont il a besoin, afin que vous puissiez voir à quel point un passage était proche.

Ne remettez jamais un rendu que vous n'avez pas regardé.

6. Exporter

python3 ${CLAUDE_SKILL_DIR}/scripts/export.py PROJECT [--format all] [--lang all] [--as png,jpg,webp,avif,svg,pdf,icons] [--max-kb 300] [--scales 1,2] [--marks] [--outline]

Chaque format a des types de fichiers sensés (JPG pour les photos et les réseaux sociaux, PDF plus PNG pour l'impression, le jeu d'icônes complet pour une icône d'application, SVG avec contours pour les logos). Les exportations sont rendues à nouveau et optimisées, conservent un profil sRGB, et atterrissent dans PROJECT/export/ avec <nom>.alt.txt, caption-<lang>.txt, credits.txt lorsque quelque chose nécessite une attribution, et manifest.json. Les PDF et SVG reçoivent également un .preview.png fabriqué à partir du fichier exporté lui-même ; regardez-le.

Livrez les fichiers, le texte alternatif, la légende prête à coller, les crédits éventuels, et une phrase sur l'idée derrière le design. Proposez une ou deux prochaines étapes utiles : un autre format, une traduction, les variantes, un PDF d'impression.

7. Itérer

La plupart des modifications modifient spec.json ou les chaînes, pas le HTML :

python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT set tokens.headline-scale=1.2 palette.bg=#f6e3cf    # "titre plus grand, fond plus chaud"
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT text headline="Brewed in the bottle"
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT variants --seeds 2 --palettes 2 --layouts split    # une mise en page a besoin de CSS : [data-layout="split"] ...
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py PROJECT --variant all --draft                            # une planche contact
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT promote c                                          # la variante c devient le design
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT palette --from-image design/assets/logo.png --apply

Une traduction est un nouveau strings/<lang>.json plus render.py PROJECT --lang xx et qa.py PROJECT --lang xx.

Lois créatives

• Un seul message. Décidez de l'unique chose que l'image dit et faites en sorte que tout le reste la serve.
• Un ordre de lecture clair avec au maximum trois niveaux. Le premier est bien plus grand que le second.
• Le spécifique bat le générique. Utilisez les propres mots, objets et chiffres du sujet. Si une ligne pourrait figurer sur l'affiche de n'importe quel autre produit, réécrivez-la. Les slogans de lancement et les mots à la mode sont la première chose qu'un spectateur ignore.
• Concevez pour la taille à laquelle les gens la voient. Une miniature fait 168 px de large dans une barre latérale, une story est à moitié couverte par des boutons, une affiche se lit à trois mètres.
• Le contraste n'est pas optionnel. Le texte sur les photos reçoit un voile, un panneau ou une ombre ; QA le mesure.
• Retenue. Deux polices de caractères, une couleur d'accent, un héros. L'espace vide est un outil, pas un vide à combler.
• Gagnez la texture. Le grain, la trame, les dégradés en maille et les motifs soutiennent le sujet ; le flou violet-à-bleu par défaut ne soutient rien.
• Peignez, ne tracez pas. Une forme plate sans source de lumière est un clip art. Donnez à chaque objet un côté éclairé, un côté ombragé, un dégradé chaud-froid, un bord qui n'est pas parfaitement mécanique et une ombre au sol ; voyez les choses en trois quarts, avec des choses lointaines plus pâles que les choses proches.
• Montrez la chose. Le produit, le lieu, le nombre, le visage (à partir de la photo de l'utilisateur). Les formes abstraites qui pourraient appartenir à n'importe quelle marque sont du remplissage.
• Honnête. Pas de faits, prix, statistiques, récompenses, avis ou témoignages inventés, et aucune illustration d'une fonctionnalité que le produit n'a pas.

Droits et sécurité

• Les faits proviennent uniquement de l'utilisateur, listés dans spec.json facts. Ne simulez jamais une capture d'écran, un avis, un client ou un aval.
• Ne recréez jamais le logo ou l'habillage d'une autre entreprise, et n'impliquez jamais un partenariat qui n'a pas été donné. Les cadres d'appareils restent génériques.
• La ressemblance d'une personne réelle uniquement à partir d'une photo que l'utilisateur fournit et a l'autorisation d'utiliser. N'en générez jamais.
• Chaque actif téléchargé est enregistré dans design/assets/LICENSES.json ; l'attribution va dans credits.txt et dans la légende lorsque la licence le demande. Les photos ajoutées par l'utilisateur perdent leurs données de localisation.
• cutout.py nomme toujours son modèle. La valeur par défaut de rembg (BRIA RMBG-2.0) est non commerciale et est refusée à moins que l'utilisateur ne confirme une utilisation non commerciale.
• Les modèles d'image IA locaux (ai_image.py) sont facultatifs : informez l'utilisateur de la licence du modèle et du fait qu'il est lent sur un processeur, obtenez son accord, et étiquetez le résultat comme imagerie IA (l'exportation le fait dans les métadonnées du fichier et les crédits).
• Les affirmations sur la santé, l'argent et les questions juridiques apparaissent uniquement telles que l'utilisateur les a énoncées.

Ce que cette approche ne peut pas faire

Elle ne peut pas inventer de photographies. Les personnes, foules, pièces et paysages photoréalistes (tout ce à quoi sert un modèle de diffusion) sont en dehors de ce que HTML, SVG et les primitives 3D peuvent dessiner. Elle est forte pour le travail de conception : typographie, affiches, graphiques sociaux, diagrammes, interfaces, icônes, logos et rendus de produits. Lorsqu'une invite nécessite une vraie photo, dites-le et proposez la meilleure voie gratuite, dans cet ordre : la propre photo de l'utilisateur (découpée avec cutout.py) ; une photo sous licence ouverte (fetch_assets.py photos, d'Openverse ou Wikimedia, ou Pexels et Unsplash avec la clé de l'utilisateur) ; un rendu 3D d'un modèle que vous construisez vous-même dans le HTML (references/3d-product.md) ; une illustration peinte à partir de références (references/illustration.md). Les logos et les habillages ne sont jamais recréés -- uniquement avec l'autorisation explicite de l'utilisateur et en utilisant un tracé vectoriel à partir de l'actif téléchargé. Les applications ne sont pas codées en dur dans le HTML. Utilisez l'outil ask-claude d'Open UI ou app.html comme modèle, et demandez toujours à l'utilisateur le flux de l'application et la copie.