Communitygithub.com

Omni-Design Studio (3-stufiges deterministisches Design & integ…

Extrahiert aus Konzeptfragebögen, Referenzdesigns (Bilder/URLs/100 menschlich kuratierte) Farb-, Kompositions-DNA und Claims in 0ms deterministisch und synthetisiert sie mit den Fotos der besten abofreien Bildmodelle (Codex `image_gen` [gpt-image-2.5-sunburst] oder Antigravity `image-generator` [Imagen 4 Ultra]), um mit einem einzigen Befehl eine Website, ein 300-DPI-Druckplakat (PNG/PDF), eine Verpackung (3D-Mockup & Abwicklungs-SVG) und ein Werbevideo (9:16 Hochformat & 16:9 Querformat MP4) zu generieren.

Was ist Omni-Design Studio (3-stufiges deterministisches Design & integ…?

Omni-Design Studio ist ein deterministisches KI-Design-Skill, das einen vollständigen Workflow von der Konzepterfassung bis zur Ausgabe mehrerer Medienformate mit einem einzigen Befehl ermöglicht. Es unterstützt die Plattformen Codex, Antigravity, Claude Code und Cursor und verwendet dafür ein Python-Skript als zentrale Pipeline. Das Skill extrahiert in drei Schritten Farb- und Kompositions-DNA aus Referenzbildern und Konzeptvorgaben, generiert drei fotorealistische Studioaufnahmen mit den jeweils besten abofreien Bildmodellen, und erstellt daraus eine WordPress-ähnliche bearbeitbare Website, ein druckfertiges 300-DPI-Poster (PNG/PDF), eine Verpackung (3D-Mockup & Abwicklungs-SVG) sowie ein Werbevideo (Hoch- und Querformat) mit editierbaren Untertiteln. Die Besonderheit ist die deterministische Python-Pipeline, die selbst mit schwächeren Modellen (Flash Low, DeepSeek Flash, Luna) konsistent professionelle Ergebnisse liefert, da alle komplexen Entscheidungen in einem einzigen Skript gekapselt sind.

Funktioniert mit✓Claude Code✓Codex CLI~Cursor✓Antigravity
npx skills add kodawarimax/omni-design-studio

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Omni-Design Studio (3-stufiges deterministisches Design & integrierte Promotion-Video-Skill)

🎯 Design-Philosophie (Warum liefern selbst schwächere Modelle Profi-Qualität?)
Komplexe Entscheidungen (Farbextraktion, Claim-Synthese, asymmetrischer Editorial-Satz, 300-DPI-PDF/SVG-Abwicklung, 24-fps-Video-Easing & Sprachsynthese) sind alle in der deterministischen Python-Pipeline build_omni_design.py (Formula-First) gekapselt.
Der KI-Agent (unabhängig vom Modell) muss lediglich die folgenden 3 Schritte (① Vorbereitung → ② 3 Fotos generieren → ③ Stapelverarbeitung) der Reihe nach ausführen, um stets Ergebnisse auf dem Niveau eines menschlichen Designers zu erhalten.


🗺️ Gesamtarchitektur-Diagramm (3-stufiger Zustandsautomat)

flowchart TD
    Start(["👤 Benutzeranfrage"]) --> Check{"Konzept / Referenzbilder<br>angegeben?"}

    %% Schritt 1
    Check -- "Nicht angegeben (vage Anfrage)" --> Ask["【Schritt 1A】5 Kernfragen präsentieren<br>build_omni_design.py --ask-concept"]
    Ask --> UserAns["Benutzerantwort / Formular ausfüllen"]
    Check -- "Angegeben / ausgefüllt" --> PromptGen["【Schritt 1B】DNA-Extraktion & 3 Foto-Prompts ausgeben<br>build_omni_design.py --print-image-prompts<br>(--ref-image / --ref-url / --concept-sheet)"]
    UserAns --> PromptGen

    %% Schritt 2
    PromptGen --> Harness{"Ausführungsumgebung (Harness)?"}
    Harness -- "Codex (Primär)" --> CodexImg["【Schritt 2A】Codex-integriertes image_gen Tool × 3<br>(gpt-image-2.5-sunburst / abofrei)<br>Automatisch gespeichert in ~/.codex/generated_images/"]
    Harness -- "Antigravity" --> AgyImg["【Schritt 2B】image-generator Sub-Agent × 3 Bilder<br>(Imagen 4 Ultra / abofrei)"]
    Harness -- "Eigene Fotos vorhanden / nein" --> DirectBuild

    %% Schritt 3
    CodexImg --> DirectBuild["【Schritt 3】Einzelbefehl für alle Medienformate<br>build_omni_design.py --auto-codex-images --with-promo-video"]
    AgyImg --> DirectBuild

    DirectBuild --> Out(["📦 Fertigpaket, frei editierbar (kostenlos)<br>① website.html / poster.html / packaging_mockup.html<br>(Mit WordPress-ähnlichen visuellen Blöcken & Canvas-Editor)<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 (Browser-Untertitel & Timeline-Editor-Studio)<br>⑤ promo_captions.srt / .vtt (Untertitel für Premiere, CapCut) & promo_audio_track.wav"])

⚡ 3-stufige Ausführungsregel, die auch bei schwächeren Modellen nicht zögert

Es wird ausschließlich der folgende Skript-Pfad verwendet (alle anderen Sub-Skripte werden intern automatisch aufgerufen):
SCRIPT="$HOME/.codex/skills/omni-design-studio/scripts/build_omni_design.py"

Schritt 1: Konzeptprüfung & 3 Foto-Prompts abrufen

  1. Wenn Claim oder Konzept noch nicht feststehen, führen Sie zunächst Folgendes aus, um dem Benutzer 5 Fragen (Zielgruppe, 3 Vorteile, Wer × Wodurch × Was wird erreicht, Zerstörung alter Annahmen → wahre Lösung, Vorher-Nachher) zu stellen:
    python3 "$SCRIPT" --ask-concept
    
    (Originalvorlage: templates/CONCEPT_QUESTION_SHEET.md)
  2. Wenn Markenname und Referenzbilder (--ref-image / --ref-url) feststehen, führen Sie den Befehl mit --print-image-prompts aus, um drei auf die Farb- und Stil-DNA abgestimmte Foto-Prompts (JSON) zu erhalten:
    python3 "$SCRIPT" \
      --brand "Markenname" \
      --category "Produktkategorie (z.B. Ohrringe, Feinschmuck)" \
      --ref-image "/pfad/zu/referenz.jpg" \
      --print-image-prompts
    
    (Hinweis: Wenn keine Referenzbilder vorhanden sind, lassen Sie --ref-image weg; dann werden die Standard-Farben und -Stile der menschlich kuratierten DNA organic_editorial verwendet.)

Schritt 2: Mit den besten abofreien Modellen 3 reine Fotovorlagen generieren (kein Text auf den Bildern)

Verwenden Sie die 3 in Schritt 1 ausgegebenen Prompts (hero_image_prompt, poster_image_prompt, pack_image_prompt), um 3 reine kommerzielle Studiofotos ohne Text zu generieren (Strenge: Keine API-Key-Verbrauchsabrechnung, nur innerhalb des Abos):

  • 🅰️ Bei Ausführung in Codex (1. Priorität: gpt-image-2.5-sunburst) :
    Rufen Sie das Codex-eigene image_gen-Tool 3 Mal auf (wird automatisch in ~/.codex/generated_images/ gespeichert).
  • 🅱️ Bei Ausführung in Antigravity (Imagen 4 Ultra / Nano Banana 2.1) :
    Rufen Sie invoke_subagent(TypeName="image-generator") auf, generieren Sie 3 Bilder und empfangen Sie die Speicherpfade.
  • 🅲 Wenn der Benutzer eigene Fotos bereitstellt:
    Geben Sie die von Schritt 1 (Ausführung ohne --print-image-prompts) ausgegebene 📋 Materialanforderung vom Agenten (benötigte Foto-Komposition, empfohlene Größe, KI-Prompt-Vorschläge) unverändert an den Benutzer weiter.

Schritt 3: Mit einem einzigen Befehl alle Designs & Werbevideos auf einmal ausgeben

Führen Sie danach einfach den folgenden einen Befehl aus, und alles ist fertig: 3 HTML-Dateien, in denen Sie Bilder, Texte, Elemente und Layouts wie in WordPress frei im Browser bearbeiten können, hochauflösende PNGs/PDFs/SVGs und ein komplettes Werbevideo-Paket, dessen Untertitel und Video später frei editierbar sind:

# Codex (mit --auto-codex-images werden die in Schritt 2 generierten Bilder automatisch eingebunden)
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 "Ohrringe, Feinschmuck" \
  --headline "Luminous Craft," \
  --subcopy "Eine organische Ohrring-Kollektion aus 18K recyceltem Gold und Akoya-Perlen" \
  --out-dir ~/Downloads/omni_output_pack

# Antigravity / Claude Code oder bei Angabe einzelner Bildpfade
python3 "$HOME/.codex/skills/omni-design-studio/scripts/build_omni_design.py" \
  --target all \
  --with-promo-video \
  --brand "LUMIÈRE & CO." \
  --category "Ohrringe, Feinschmuck" \
  --headline "Luminous Craft," \
  --subcopy "Eine organische Ohrring-Kollektion aus 18K recyceltem Gold und Akoya-Perlen" \
  --hero-image /pfad/zu/hero.jpg \
  --poster-image /pfad/zu/poster.jpg \
  --pack-image /pfad/zu/pack.jpg \
  --out-dir ~/Downloads/omni_output_pack

🎨 WordPress-ähnliche visuelle Bearbeitung & Video-Untertitel-Bearbeitung (standardmäßig integriert)

Die 3 generierten Design-Dateien (website.html, poster.html, packaging_mockup.html) und die Video-Studio-Dateien (promo_video_studio_9x16.html, promo_video_studio_16x9.html) enthalten automatisch einen WordPress (Gutenberg) / Studio-ähnlichen visuellen Editor (✦ OMNI WP-STUDIO), der durch cms_editor_runtime.py bereitgestellt wird. Mit einem einfachen Öffnen im Browser sind folgende Bearbeitungen möglich:

  1. Direkte Textbearbeitung (Inline WYSIWYG): Klicken Sie auf Überschriften, Fließtext, Badges oder vertikale Kopien, um sie direkt zu korrigieren. Schriftgröße (A+/A-), Schriftfarbe und Schriftfamilie (Mincho / Wa-Modern / Gothic / Brutalismus / Swiss Grid) mit einem Klick ändern.
  2. Bild ersetzen & Rahmenform ändern: Doppelklicken Sie auf ein Bild (oder ziehen Sie es per Drag & Drop vom PC), um es sofort durch ein anderes Foto zu ersetzen. Die Rahmenform kann frei zwischen "Bogenfenster (Arch)", "Abgerundete Karte (Bento)", "Rechtwinklig (Sharp)" und "Kreis (Circle)" umgeschaltet werden.
  3. Elemente, Blöcke, Layouts frei verschieben: Ausgewählte Elemente mit ↑/↓/←/→ verschieben, Blöcke duplizieren (⧉), löschen (🗑️), neue Text-/Bildblöcke hinzufügen (+ Text hinzufügen / 🖼️ Bild hinzufügen), und zweispaltige Layouts mit einem Klick spiegeln (⇄ Layout umkehren).
  4. Bearbeitetes HTML speichern & PDF exportieren: Speichern Sie den bearbeiteten Zustand als einzelne HTML-Datei mit 💻 HTML speichern in der Symbolleiste. Erstellen Sie mit 🖨️ PDF ausgeben ein hochauflösendes PDF zum Drucken (die Symbolleiste wird automatisch ausgeblendet).
  5. Nachträgliche Videobearbeitung & Untertitel-Editierung (Post-Production Ready):
    • promo_video_studio_9x16.html / 16x9.html: Navigieren Sie in der unteren Timeline-Leiste durch die Szenen Scene 1∼4, um sie zu suchen und abzuspielen. Bearbeiten Sie Untertitel, Überschriften und Bilder direkt im Video. Exportieren Sie die bearbeiteten Untertitel sofort als SRT-Datei mit dem Button 📝 SRT-Untertitel speichern.
    • promo_captions.srt / promo_captions.vtt / promo_audio_track.wav: Können direkt in Premiere Pro, CapCut, DaVinci Resolve oder Final Cut Pro geladen werden, um Untertitel auszutauschen oder Hintergrundmusik/Sprache neu zu bearbeiten.

🛠️ Referenz der optionalen Funktionen (nur bei Bedarf verwenden)

Gewünschte AktionZusätzliches Flag / Befehl
Copy automatisch aus ausgefülltem Konzeptfragebogen übernehmen--concept-sheet /pfad/zu/CONCEPT_QUESTION_SHEET.md
Farben, Stil und Schriftart eines Referenzbildes / einer Referenz-URL vollständig reproduzieren--ref-image /pfad/zu/muster.jpg oder --ref-url https://...
Design-Stil manuell festlegen (Standard ist organic_editorial)`--trend [organic_editorial
Kontaktbogen mit 100 menschlichen Designern generierenpython3 .../scripts/curate_human_designs.py --out-dir ~/Downloads/curation_100
Massenproduktionsmodus (Plan B: DeepSeek + Flux ca. 0,6 Yen/Punkt)--plan plan_b (Standard --plan plan_a = abofrei)`

Verwandte Skills