TÜV-Projekt KI-Manager mit Projekt MVP 1.0 Stand: Sprint 13

Video Design Studio
Projektdokumentation

KI-gestütztes Design- und Video-Cockpit für Social-Media-Beiträge im Corporate Design von I BET MAX

Das Video Design Studio wurde entwickelt, um aus einer Idee innerhalb weniger Minuten einen Social-Media-Beitrag inklusive Thumbnail, Video und Begleittext vorzubereiten. Es entstand als Prüfungsprojekt im Rahmen der Weiterbildung KI-Manager mit Projekt bei der TÜV Rheinland Akademie. Vorstellungstermin: 07.07.2026.

01 Ausgangssituation

Vor dem Video Design Studio erforderte die Erstellung eines Social-Media-Beitrags für I BET MAX einen zeitaufwändigen, werkzeugübergreifenden Prozess.

Bisheriger Prozess
  • Idee entwickeln und strukturieren
  • LinkedIn-Text formulieren
  • HTML-/Designseite aufbauen lassen
  • Loom-Aufnahme vorbereiten und durchführen
  • Video exportieren und schneiden
  • Beitrag manuell veröffentlichen
Probleme
  • Viele separate Werkzeuge nötig
  • Medienbrüche zwischen den Schritten
  • Hoher Zeitaufwand je Beitrag
  • Keine einheitliche Gestaltung gesichert
  • Wenig Wiederverwendbarkeit von Inhalten
  • Kein zentrales Corporate-Design-Cockpit

02 Projektziel

Innerhalb von ca. 5 Minuten soll aus einer Idee ein professioneller Social-Media-Beitrag im I BET MAX Corporate Design entstehen.

Messbares Ziel

Reduzierung der Erstellungszeit von ca. 45–60 Minuten auf unter 5 Minuten pro Beitrag – bei gleichzeitig einheitlichem Corporate Design und kontrollierbarer Qualität.

Das System unterstützt dabei die gesamte Kette:

Design & Layout
Textstruktur
Animation & Timeline
Thumbnail-Export (PNG)
Video-Export-Prototyp
Spätere KI-Erweiterungen

03 MVP 1.0 – Funktionsumfang

Das Minimum Viable Product umfasst alle Kernfunktionen für einen vollständigen Design-und-Export-Workflow.

1200 × 1200 Stage
Dark / Light Mode
Asset Library
I BET MAX Logos & Hintergründe
Headline & Freitext
Bullet Reveal List
Farbsteuerung
Timeline & Element-Timing
Playback-Vorschau
PNG-/Thumbnail-Export
Video-Export-Prototyp
Lokaler KI-/Content-Assistent
Undo / Redo (20 Schritte)
Lokale Speicherung (localStorage)

04 Sprint-Übersicht

Das Projekt wurde in 13 iterativen Sprints entwickelt – von der ersten Grundstruktur bis zur Dokumentationsseite.

Sprint 01
Cockpit-Grundgerüst
Header, Stage, Panel-Grundlayout, Design-Tokens
Abgeschlossen
Sprint 02
Editor-Prototyp
Erste Element-Funktionen, Properties Panel
Abgeschlossen
Sprint 03
Drag & Drop
Layer-Steuerung, Grid-Snapping, localStorage
Abgeschlossen
Sprint 04
Thumbnail Export
PNG-Export (html2canvas), UI-Stabilisierung
Abgeschlossen
Sprint 05
Bullet & Farben
Bullet Reveal List, Farbsteuerung, Hintergründe
Abgeschlossen
Sprint 06
Animation & KI
Bullet Reveal Animation, lokale KI-Templates
Abgeschlossen
Sprint 07
Undo / Redo
20-Schritte-Verlauf, Strg+Z / Strg+Y
Abgeschlossen
Sprint 08
Timeline & Timing
Timeline-Spuren, Element-Zeitsteuerung
Abgeschlossen
Sprint 09
Playback-Vorschau
Play / Pause / Stop, Zeitvorschau-Slider
Abgeschlossen
Sprint 10
Video-Export
Browserbasierter Videoexport-Prototyp (WebM)
Abgeschlossen
Sprint 11
Asset Library
Modularisiert, echte I BET MAX Assets eingebunden
Abgeschlossen
Sprint 12
Asset-Pfade
Alle 5 Kernassets lokal zuverlässig verfügbar
Abgeschlossen
Sprint 13
Dokumentation
TÜV-Präsentationsseite, Projektnachweis
Aktuell

05 Technische Architektur

Das Video Design Studio ist als reine Frontend-Anwendung konzipiert – kein Backend, kein Build-Step, keine externe Abhängigkeit außer html2canvas.

Warum kein Framework? Ein schlanker Vanilla-JS-Ansatz ohne Build-Step reduziert die Komplexität, macht den Code leichter nachvollziehbar und ist ohne Installationsaufwand sofort lauffähig – auch lokal auf jedem Gerät.

06 KI-Einsatz im Projekt

KI wurde auf mehreren Ebenen eingesetzt: als Konzeptpartner, als Code-Assistent und als geplante zukünftige Erweiterung innerhalb des Tools.

KI-Ebene 01
Konzeptentwicklung
ChatGPT unterstützte beim Erarbeiten der Projektidee, der Anforderungsanalyse und der Sprint-Planung.
KI-Ebene 02
Code-Umsetzung
Claude Code (Anthropic) wurde für die iterative Implementierung aller Sprints eingesetzt – von der Grundstruktur bis zur Dokumentation.
KI-Ebene 03
Lokale KI-Templates
Im Tool selbst gibt es vorgefertigte Content-Templates (KI-Erfahrung, Toolvergleich, Projektfortschritt, Automation) – lokal, ohne API-Verbindung.
KI-Ebene 04
Geplante Erweiterungen
LinkedIn-Textgenerator, Storyboard-Generator, Voiceover, automatische Designvorschläge – noch nicht implementiert.
Wichtiger Hinweis: Im aktuellen MVP gibt es noch keine echte externe KI-API im Frontend. Es werden keine API-Keys im Browser gespeichert. Die vorhandenen Content-Templates sind vollständig lokal und ohne Datenübertragung nutzbar.

07 Human in the Loop

Der Nutzer bleibt jederzeit finaler Entscheider. Das System unterstützt mit Vorschlägen, Vorlagen und Automatisierung – veröffentlicht aber nichts automatisch.

Der Nutzer wählt die Vorlage aus dem KI-Assistenten – keine automatische Auswahl.
Der Nutzer bearbeitet alle Texte selbst – Vorlagen sind Ausgangspunkt, kein Endprodukt.
Der Nutzer positioniert Elemente per Drag & Drop auf der Stage.
Der Nutzer prüft den Playback vor dem Export.
Der Nutzer exportiert bewusst – PNG oder Video werden nur auf aktive Anforderung erzeugt.
Der Nutzer entscheidet über die Veröffentlichung – das System veröffentlicht nichts automatisch.
Keine automatische Veröffentlichung zu LinkedIn. Keine vollautomatische Content-Freigabe. Der Schritt von der Vorbereitung zur Veröffentlichung bleibt bewusst manuell und liegt ausschließlich beim Nutzer.

08 Datenschutz / DSGVO

Das aktuelle MVP ist so konzipiert, dass im normalen Betrieb keine personenbezogenen Daten erfasst, übertragen oder gespeichert werden.

Was NICHT stattfindet
  • Keine Nutzerkonten, kein Login
  • Keine Erfassung personenbezogener Daten Dritter
  • Keine Backend-Speicherung
  • Keine externen API-Calls im MVP
  • Keine Übertragung von Projektdaten
  • Keine Tracking- oder Analyse-Tools
Was lokal gespeichert wird
  • Projektdaten im localStorage des Browsers
  • Undo-Verlauf nur im Arbeitsspeicher (RAM)
  • Export erfolgt lokal im Browser
  • Kein automatischer Datei-Upload
Hinweis für spätere Entwicklung: Bei einer API-Anbindung, Upload-Funktion oder automatischen Veröffentlichung muss der Datenschutz erneut bewertet und ggf. eine Datenschutzerklärung ergänzt werden.

09 Urheberrecht / Assets

Das Projekt setzt bevorzugt auf eigene I BET MAX Assets – für maximalen Wiedererkennungswert und minimale Lizenzrisiken.

Asset Datei Typ Quelle
I BET MAX Logo ibetmax Logo mit Apfel.jpg Logo Eigenes Asset
I BET MAX Coin Coin am Laptop.png Produktbild Eigenes Asset
Kraken Motiv 1 Feuerrote Krake im dunklen Wasser2.png Hintergrund / Bildmotiv Eigenes Asset
Kraken Motiv 2 Feuriger Oktopus in dunkler Tiefe.png Hintergrund / Bildmotiv Eigenes Asset
Lampenmotiv / Quallen Leuchtende Quallen im tiefen Ozean.png Hintergrund / Bildmotiv Eigenes Asset
Vorteile eigener Assets
  • Hoher Wiedererkennungswert
  • Keine Lizenzrisiken
  • Einheitliches Branding
  • Kontrollierbare Nutzung
Hinweis für externe Inhalte

Externe Bilder, Musik, Schriften oder fremde Markenassets dürfen nur nach einer Lizenzprüfung verwendet werden. KI-generierte Bilder bedürfen ggf. einer eigenen Bewertung je nach Anbieter und Nutzungskontext.

10 Risiko- und Sicherheitsbewertung

Einstufung

Das Video Design Studio ist nach aktueller Einschätzung kein Hochrisiko-KI-System im Sinne des EU AI Acts. Es handelt sich um ein KI-gestütztes Kreativ- und Assistenzsystem ohne automatisierte Entscheidungen über Personen.

Begründung

  • Keine automatisierten Entscheidungen über Personen
  • Keine Bewerberbewertung
  • Keine Bonitätsprüfung
  • Keine biometrische Identifikation
  • Keine sicherheitskritische Steuerung
  • Keine automatische Veröffentlichung

Verbleibende Risiken

  • Fehlerhafte oder unpassende KI-Texte
  • Urheberrechtsfragen bei externen Assets
  • Fehlende Kennzeichnung KI-generierter Inhalte
  • Datenschutzrisiken bei späterer API-Nutzung
  • Technische Exportbeschränkungen im Browser

Gegenmaßnahmen

Human in the Loop
Keine Auto-Veröffentlichung
Nutzung eigener Assets
Lokale Speicherung im MVP
Keine API-Keys im Frontend
Nutzercheck vor Export

11 Transparenzpflichten / KI-Kennzeichnung

Bei öffentlich veröffentlichten Inhalten, die mit KI-Unterstützung erstellt wurden, wird im Einzelfall geprüft, ob eine Kennzeichnung sinnvoll oder erforderlich ist.

Mögliche Hinweisformulierungen
  • „KI-gestützt erstellt"
  • „Mit KI-Unterstützung gestaltet"
  • „Text und Gestaltung wurden KI-gestützt vorbereitet"
  • „Inhalte mit KI-Assistenz entwickelt"
Wann gilt die Prüfpflicht?
  • Bei öffentlichen LinkedIn-Beiträgen
  • Bei KI-generierten Texten ohne manuelle Überarbeitung
  • Bei automatisiert erzeugten Bildmotiven
  • Wenn zukünftig KI-APIs eingebunden werden
Die finale rechtliche Bewertung der Kennzeichnungspflichten obliegt dem Nutzer und ggf. einer Rechtsberatung – das Tool gibt Hinweise, übernimmt aber keine juristische Verantwortung.

12 Ergebnis / Aktueller Stand

Das Video Design Studio ist als vollständiges MVP lauffähig. Alle Kernfunktionen für den Design-Export-Workflow sind implementiert und lokal ohne Internetverbindung nutzbar.

Das System kann jetzt
Inhalte auf 1200 × 1200 Stage gestalten
Elemente platzieren & per Drag & Drop verschieben
Farben und Hintergründe wählen
Bullet-Listen erstellen und animieren
Timeline-Zeiten pro Element setzen
Playback abspielen und prüfen
Thumbnail als PNG exportieren (1200 × 1200)
Video als browserbasierten Prototyp exportieren (WebM)
Projektdaten lokal speichern und laden
Änderungen per Undo/Redo rückgängig machen
Eigene I BET MAX Assets nutzen
Lokale KI-Textvorlagen anwenden

13 Ausblick

Das MVP zeigt den funktionsfähigen Kern des Systems. Für eine produktionsreife Version sind folgende Erweiterungen geplant.

Technische Erweiterungen
  • Echter MP4-Export via FFmpeg-Backend
  • Clip-Drag in der Timeline
  • Multi-Select für Stage-Elemente
  • Asset-Upload-Funktion
  • Weitere Animationstypen
  • Multi-Plattform-Export-Profile
KI-Erweiterungen
  • LinkedIn-Textgenerator (KI-API)
  • Storyboard-Generator
  • OpenAI Voiceover-Integration
  • Automatische Designvorschläge
  • Veröffentlichungsvorbereitung
Leitprinzip bleibt erhalten: Automatische Veröffentlichung bleibt bewusst ausgeschlossen oder wird nur mit finaler Nutzerfreigabe umgesetzt. Human in the Loop ist kein optionales Feature, sondern ein Kernprinzip.

14 Nachweisbereich

Für die TÜV-Präsentation werden hier Screenshots und Nachweise des laufenden Systems abgelegt.

Screenshot Cockpit
Gesamtansicht Editor
Screenshot Asset Library
I BET MAX Assets
Screenshot Timeline
Spuren & Clips
Screenshot Export
PNG 1200 × 1200
Screenshot Dokumentation
Diese Seite
Beispiel-Thumbnail
Exportiertes PNG
Beispiel-Videoexport
WebM Prototyp
Hinweis: Aktuelle Screenshots können direkt aus dem Video Design Studio erzeugt und hier eingebunden werden. Für die TÜV-Präsentation empfiehlt sich eine Live-Demonstration des laufenden Systems.
↑ Nach oben