Omni-Design Studio (Compétence de design & vidéo promo intégrée en 3 étapes déterministes)

🎯 Philosophie de conception (Pourquoi la qualité pro même avec des modèles bas de gamme ?) Toutes les décisions complexes (extraction des couleurs, synthèse de catchphrase, composition éditoriale asymétrique, mise en page 300 DPI PDF/SVG, et édition vidéo 24 fps & synthèse vocale) sont encapsulées dans un seul pipeline Python déterministe build_omni_design.py (Formula-First). L'agent IA (quel que soit le modèle) n'a qu'à exécuter les 3 étapes suivantes (① Préparation ➔ ② Génération de 3 photos ➔ ③ Construction groupée) pour produire toujours des livrables de qualité designer humain.

🗺️ Schéma d'architecture globale (Machine à états 3 étapes)

flowchart TD
    Start(["👤 Demande utilisateur"]) --> Check{"Le concept / les images de référence sont-ils spécifiés ?"}

    %% Step 1
    Check -- "Non spécifié (demande vague)" --> Ask["【Étape 1A】Poser 5 questions clés<br>build_omni_design.py --ask-concept"]
    Ask --> UserAns["Réponse utilisateur / Remplissage de la fiche"]
    Check -- "Spécifié / Déjà répondu" --> PromptGen["【Étape 1B】Extraction ADN & Génération de 3 prompts photo<br>build_omni_design.py --print-image-prompts<br>(--ref-image / --ref-url / --concept-sheet)"]
    UserAns --> PromptGen

    %% Step 2
    PromptGen --> Harness{"Environnement (harnais) ?"}
    Harness -- "Codex (Principal)" --> CodexImg["【Étape 2A】Outil image_gen intégré Codex × 3<br>(gpt-image-2.5-sunburst / Gratuit par abonnement)<br>Sauvegarde auto dans ~/.codex/generated_images/"]
    Harness -- "Antigravity" --> AgyImg["【Étape 2B】Sous-agent image-generator × 3 images<br>(Imagen 4 Ultra / Gratuit par abonnement)"]
    Harness -- "Photo fournie / Aucune" --> DirectBuild

    %% Step 3
    CodexImg --> DirectBuild["【Étape 3】Construction tous médias en 1 commande<br>build_omni_design.py --auto-codex-images --with-promo-video"]
    AgyImg --> DirectBuild

    DirectBuild --> Out(["📦 Package complet modifiable (0 €)<br>① website.html / poster.html / packaging_mockup.html<br>(Blocs visuels type WordPress & éditeur canvas intégrés)<br>② website_preview.png / poster_300dpi.png / poster_print.pdf / packaging_3d_mockup.png / packaging_dieline.svg<br>③ promo_video_vertical_9x16.mp4 / landscape_16x9.mp4<br>④ promo_video_studio_9x16.html / 16x9.html (Studio d'édition de sous-titres & timeline navigateur)<br>⑤ promo_captions.srt / .vtt (Sous-titres pour Premiere, CapCut) & promo_audio_track.wav"])

⚡ Règles d'exécution en 3 étapes (même les modèles bas de gamme ne s'égarent pas)

Le chemin du script à utiliser est toujours celui-ci (les autres sous-scripts sont appelés automatiquement) : SCRIPT="$HOME/.codex/skills/omni-design-studio/scripts/build_omni_design.py"

Étape 1 : Confirmation du concept & Obtention des 3 prompts de génération photo

Si la catchphrase ou le concept n'est pas encore défini, exécutez d'abord ceci pour poser 5 questions (cible, 3 bénéfices, pour qui × grâce à quoi × comment devient-il, destruction des anciennes hypothèses ➔ vraie solution, avant-après) :
```
python3 "$SCRIPT" --ask-concept
```
(Modèle original : templates/CONCEPT_QUESTION_SHEET.md)
Une fois le nom de marque, l'image de référence (--ref-image / --ref-url) décidés, exécutez avec --print-image-prompts pour obtenir les 3 prompts photo (JSON) harmonisés avec l'ADN couleur/tonalité :
```
python3 "$SCRIPT" \
  --brand "Nom de la marque" \
  --category "Catégorie de produit (ex: Boucles d'oreilles, Haute joaillerie)" \
  --ref-image "/chemin/vers/reference.jpg" \
  --print-image-prompts
```
(※ Si aucune image de référence n'est fournie, omettez --ref-image ; l'ADN par défaut de la curation humaine organic_editorial sera utilisé pour les couleurs et le style)

Étape 2 : Générer 3 photos avec le meilleur modèle gratuit par abonnement (photos sans texte)

Utilisez les 3 prompts ( hero_image_prompt, poster_image_prompt, pack_image_prompt ) générés à l'étape 1 pour produire 3 photos de studio commercial pur sans texte (aucun paiement à l'utilisation via clé API, uniquement dans le cadre de l'abonnement) :

🅰️ En cours d'exécution dans Codex (1ère priorité : gpt-image-2.5-sunburst) : Appelez l'outil image_gen intégré à Codex 3 fois (sauvegarde automatique dans ~/.codex/generated_images/).
🅱️ En cours d'exécution dans Antigravity (Imagen 4 Ultra / Nano Banana 2.1) : Appelez invoke_subagent(TypeName="image-generator") pour générer 3 images et recevez leurs chemins de sauvegarde.
🅲 Si l'utilisateur fournit ses propres photos : Transmettez-lui directement la "📋 Demande de contenu de l'agent (composition photo nécessaire, taille recommandée, proposition de prompt IA)" affichée par l'étape 1 (exécution sans --print-image-prompts).

Étape 3 : Sortir en une commande tous les designs & vidéo promo

Il suffit ensuite d'exécuter la commande suivante pour que les 3 HTML modifiables intégralement dans le navigateur (comme WordPress) avec images, textes, éléments, mises en page, les PNG/PDF/SVG haute résolution, et le kit vidéo promotionnel entièrement rééditable (légendes, montage, son) soient tous produits :

# Pour Codex (--auto-codex-images lie automatiquement les images générées à l'étape 2)
python3 "$HOME/.codex/skills/omni-design-studio/scripts/build_omni_design.py" \
  --auto-codex-images \
  --target all \
  --with-promo-video \
  --brand "LUMIÈRE & CO." \
  --category "Boucles d'oreilles, Haute joaillerie" \
  --headline "Luminous Craft," \
  --subcopy "Collection de boucles d'oreilles organiques alliant or recyclé 18K et perles Akoya" \
  --out-dir ~/Downloads/omni_output_pack

# Pour Antigravity / Claude Code ou avec des chemins d'images individuels
python3 "$HOME/.codex/skills/omni-design-studio/scripts/build_omni_design.py" \
  --target all \
  --with-promo-video \
  --brand "LUMIÈRE & CO." \
  --category "Boucles d'oreilles, Haute joaillerie" \
  --headline "Luminous Craft," \
  --subcopy "Collection de boucles d'oreilles organiques alliant or recyclé 18K et perles Akoya" \
  --hero-image /chemin/vers/hero.jpg \
  --poster-image /chemin/vers/poster.jpg \
  --pack-image /chemin/vers/pack.jpg \
  --out-dir ~/Downloads/omni_output_pack

🎨 Fonctions d'édition visuelle type WordPress et d'édition de sous-titres vidéo (intégrées en standard)

Les 3 fichiers de design générés (website.html, poster.html, packaging_mockup.html) et les fichiers studio vidéo (promo_video_studio_9x16.html, promo_video_studio_16x9.html) intègrent automatiquement, via cms_editor_runtime.py, un éditeur visuel type WordPress (Gutenberg) / Studio (✦ OMNI WP-STUDIO). Ouvrez-les simplement dans un navigateur pour effectuer les modifications suivantes :

Édition directe du texte (Inline WYSIWYG) : Cliquez sur les titres, corps de texte, badges, copies verticales pour les corriger sur place. Modifiez la taille de police (A+/A-), la couleur du texte, la famille de polices (Mincho / Moderne japonais / Gothique / Brutalisme / Grille suisse) en un clic.
Remplacement d'image & changement de forme du cadre : Double-cliquez sur une image (ou glissez-déposez depuis votre PC) pour la remplacer instantanément. Changez la forme du cadre entre « Fenêtre en arc (Arch) », « Carte arrondie (Bento) », « Angles droits (Sharp) », « Cercle (Circle) ».
Déplacement libre des éléments, blocs et mises en page : Déplacez l'élément sélectionné (haut/bas/gauche/droite), dupliquez (⧉) ou supprimez (🗑️) un bloc, ajoutez un nouveau bloc texte (＋ Ajouter du texte) ou image (🖼️ Ajouter une image), inversez une disposition 2 colonnes en un clic (⇄ Inverser la disposition).
Sauvegarde HTML et export PDF : Le bouton 💮 HTML sauvegardé (💾 HTML sauvegarde) sauvegarde l'état édité en un seul fichier HTML ; 🖨️ Sortie PDF (🖨️ Sortie PDF) exporte un PDF haute résolution / impression avec barre d'outils auto-masquée.
Édition post-production vidéo & sous-titres (Prêt pour la post-production) :
- promo_video_studio_9x16.html / 16x9.html : Utilisez la barre de timeline en bas pour chercher et lire les Scènes 1 à 4, modifiez directement les sous-titres, titres et photos dans la vidéo, puis exportez le fichier de sous-titres édité avec le bouton 📝 Sauvegarder les sous-titres SRT.
- promo_captions.srt / promo_captions.vtt / promo_audio_track.wav : Importez ces fichiers directement dans Premiere Pro, CapCut, DaVinci Resolve, Final Cut Pro, etc. pour remplacer les sous-titres ou rééditer la musique/narration.

🛠️ Référence des fonctions optionnelles (à utiliser uniquement si nécessaire)

Ce que vous voulez faire	Drapeau / Commande supplémentaire
Appliquer automatiquement la copie d'une fiche concept remplie	`--concept-sheet /chemin/vers/CONCEPT_QUESTION_SHEET.md`
Reproduire intégralement les couleurs, le style et la police d'une image/URL de référence	`--ref-image /chemin/vers/echantillon.jpg` ou `--ref-url https://...`
Spécifier manuellement le style de design (défaut : `organic_editorial`)	`--trend [organic_editorial
Générer la planche contact des 100 designs humains	`python3 .../scripts/curate_human_designs.py --out-dir ~/Downloads/curation_100`
Mode production de masse (Plan B : DeepSeek + Flux ~0,4 €/image)	`--plan plan_b` (défaut : `--plan plan_a` = gratuit par abonnement)

Omni-Design Studio（Studio de design déterministe 3 étapes & vid…

Qu'est-ce que Omni-Design Studio（Studio de design déterministe 3 étapes & vid… ?

Demander à votre IA préférée

Documentation

Omni-Design Studio (Compétence de design & vidéo promo intégrée en 3 étapes déterministes)

🗺️ Schéma d'architecture globale (Machine à états 3 étapes)

⚡ Règles d'exécution en 3 étapes (même les modèles bas de gamme ne s'égarent pas)

Étape 1 : Confirmation du concept & Obtention des 3 prompts de génération photo

Étape 2 : Générer 3 photos avec le meilleur modèle gratuit par abonnement (photos sans texte)

Étape 3 : Sortir en une commande tous les designs & vidéo promo

🎨 Fonctions d'édition visuelle type WordPress et d'édition de sous-titres vidéo (intégrées en standard)

🛠️ Référence des fonctions optionnelles (à utiliser uniquement si nécessaire)

Skills associés

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me