From e4f553edd5bcddd2eba365aa9ca40abdda837be3 Mon Sep 17 00:00:00 2001 From: root Date: Tue, 21 Jul 2026 14:02:08 +0000 Subject: [PATCH] Prototyp: Explore-Redesign aus BrandLoop.dc.html + Navbar-Umbau - Neuer Look aus dem Claude-Design-Projekt (BrandLoop.dc.html): dunkles Explore-Konzept mit Swipe-Feed (Like/Skip, Bild-Ketten, Tab-Hood), Post-Detail (Prompt uebernehmen, eigenes Modell einsetzen) und Create-Screen (Kette, Format, Vorschau) - Navbar: schwebende Pill-Navigation Feed / Profil (Menschlein) / Plus / Dev - Home ersetzt durch Profil-Tab (Menschlein) - Tabs Erstellen + Verbessern entfernt (Plus-Button bzw. Profil) - Knowledge Base komplett in den Profil-Screen integriert - Alte Flows (Szene->Script->Vote, Modell, Verbessern, Dev-Modus, Onboarding) bleiben erhalten und sind ueber Create/Profil erreichbar Co-Authored-By: Claude Fable 5 --- prototyp-app.html | 1214 ++++++++++++++++++++++++++++++--------------- 1 file changed, 809 insertions(+), 405 deletions(-) diff --git a/prototyp-app.html b/prototyp-app.html index 57f0445..cce03a9 100644 --- a/prototyp-app.html +++ b/prototyp-app.html @@ -3,23 +3,21 @@ - + BrandLoop – Prototyp - + -
-
- -
-
- - -

Deine Ads lernen aus jedem Euro.

+ +
+
+
+ +
-
-
-
-

Erstellen

Neue Szene (Video) oder neues Modell (Person / Produkt)

- -
+ +
+
Videos
+
Folge ich
+
Posts
-
-
-
-

Verbessern

Ein Asset deiner Brand weiterentwickeln – jederzeit

- -
+
+
+
✕
+
+
-

Zuletzt

-
-
-
-

Szene: „Roter Lippenstift – Close-up"

3 Videos generiert · Vote offen

- -
-
-
Bewusst leer gehalten: Beim App-Start keine Fragen, kein Formular. Das Unternehmensprofil kommt erst beim ersten Klick auf „Erstellen".
- -
-

Erstellen

+ +
+
+ +
+
M
+
Mara S.
1.2k Remakes
+
+
+
+
[ki-bild 1/3: serum auf stein]1/3
+
[ki-bild 2/3: anwendung]2/3
+
[ki-bild 3/3: close-up haut]3/3
+
+
Skincare Routine – 3er Kette
+
Bild-Kette · Produkt-Modell · Format 4:5
+
+
PROMPT
+
Serum-Flasche auf nassem Stein, weiches Morgenlicht, Wassertropfen, Editorial-Look, cleaner Hintergrund in Salbeigrün — Kette: Produkt solo → Anwendung → Ergebnis-Close-up
+
+
+ Modell · Glow Serum v34:5Editorial3 Bilder +
+
Mit deinem Modell nachmachen
+
+ +
Prompt + Einstellungen werden übernommen, dein Modell wird eingesetzt
+
+ + +
+
+ +

Neuer KI-Post

+
+ + + +
+
+
+ +
+
1 Bild
+
3er
+
5er
+
+
+
+ +
+
1:1
+
4:5
+
9:16
+
+
+
+ +
+ + +

Mehr erstellen

-

Szene

Video aus einem Prompt – mit deiner Brand Knowledge angereichert. Mehrere KI-Modelle parallel.

+

Szene (Video)

Video aus Prompt mit Script-Bestätigung – mehrere KI-Modelle parallel.

-

Modell

Person oder Produkt als festes Brand-Asset erstellen – bleibt in jedem Video 1:1 gleich.

+

Modell

Person oder Produkt als festes Brand-Asset – bleibt in jedem Video 1:1 gleich.

-
Beim allerersten Erstellen erscheint einmalig das Unternehmensprofil (nächster Screen). Danach geht's immer direkt zur Szene.
- -
-
-
👋
-

Bevor's losgeht

-

Damit deine Videos nach deiner Brand aussehen, stellen wir dir einmalig 5 kurze Fragen.

Danach nie wieder – ab dann lernt die App von selbst, mit jedem Video.

- + +
+
+
V
+

Velvet Rouge

+

Brand-Profil · seit 2021 · mutig, clean, luxuriös

-
- - -
-

Dein Unternehmen

-
- - - - - - - - - - - -
- - -
-
-
📸
-

Zeig uns deine Brand

-

Logo, Produktbilder, deine besten bisherigen Ads – alles optional.

Aber: Je mehr du hochlädst, desto besser sieht schon dein allererstes Video aus.

- -
-
- - -
-

Uploads

-
-

Optional, aber empfohlen – füttert deine Knowledge Base von Tag 1.

-
[Upload: Logo]
-
[Upload: Produktbilder – z. B. Lippenstift „Rouge No. 5" aus 3 Winkeln]
-
[Upload: Deine bisher besten Ads (Video/Bild) – das System lernt daraus deine Startattribute]
- - -
- - -
-

Szene erstellen

- - -

Anzahl Videos

-
-
3
-
4
-
5
-
6
-
-
Jedes Video von einem anderen Top-KI-Modell. Mehr Videos = mehr Vergleichssignal, Preis pro Video.
-

Automatisch eingebaut (Brand Knowledge)

-
- Regel: cleaner Hintergrund - Gesicht: „Mara" v3 6120 - Produkt: Rouge No. 5 v2 6480 - Location: Kaiserslautern 5240 - Voice: warm-weiblich 5890 -

Dein Prompt wird automatisch überarbeitet und mit den Top-Attributen & freigegebenen Assets angereichert.

-
- -
- - -
-

Dein Script

-

Aus deinem Prompt + Brand Knowledge erstellt. Lies es, ändere was du willst – generiert wird erst nach deiner Bestätigung.

- -
Erst nach Bestätigung werden die Videos generiert – Kosten entstehen erst dann. Änderungen am Script fließen als Signal in die Knowledge Base.
- - -
- - -
-

Wähle das Beste

-

Tippe auf dein Favoriten-Video. Die goldene Umrandung ist die System-Vorhersage.

- -
- SYSTEM-FAVORIT -

Video 1 · Modell A

-
[VIDEO: Mara (Gesicht v3) hält Rouge No. 5 frontal in die Kamera, Close-up, warmes Abendlicht, Kaiserslautern-Kulisse unscharf im Hintergrund, warme weibliche Stimme: „Dein Rot. Dein Statement."]
- warm-rotClose-upKaiserslautern +
+

Videos

31

+

Vote-Match

78 %

+

Follower

+218

-
-

Video 2 · Modell B

-
[VIDEO: Gleiche Szene, aber kühles Studiolicht, langsamer Schwenk von der Hand zum Gesicht, Text-Overlay statt Stimme]
- StudioSchwenkText-Overlay -
- -
-

Video 3 · Modell C

-
[VIDEO: Outdoor Köln, Mara läuft auf Kamera zu, hält Lippenstift hoch, Upbeat-Musik, schnelle Schnitte]
- KölnBewegungUpbeat -
- -
-

Video 4 · Modell D

-
[VIDEO: Extreme Makro-Aufnahme nur vom Lippenstift, der sich dreht, ASMR-Sound beim Öffnen]
- MakroASMRohne Gesicht -
- -
Bestätigst du den markierten Favoriten → wenig Elo-Punkte. Weichst du ab → volle Punkte (stärkeres Signal).
-
- - -
-

Danke!

-
-

GESPEICHERT

-

Dein Vote fließt in die Knowledge Base. Übereinstimmung mit System-Vorhersage: 78 % (letzte 30 Votes).

-
-

Kurze Frage (optional)

-
-

Welche Location war besser?

-
-
Kaiserslautern
-
Köln
-
Egal
-
-
Gezielte Fragen wirken nur auf dieses eine Attribut – das schnellste Signal gegen das Zuordnungsproblem.
-
-

Video verwenden

- - -
- - -
-

Ad läuft

-
-

„Roter Lippenstift – Close-up" · Video 1

-
[Gewähltes Video – veröffentlicht auf TikTok & Instagram via Ads-API]
-
-

Live-Performance (Meta / TikTok API)

-
-

CTR

2,4 %

-

Thumbstop

41 %

-

ROAS

3,1×

-
-
-

+218 neue Follower seit Schaltung

-
-
Performance-Daten fließen automatisch und höher gewichtet als Votes in die Scores – der Markt entscheidet, keine Bestätigung nötig. Jedes Video loggt, welche Asset-Versionen es nutzte.
- -
- - -
-

Modell erstellen

-
-
Person
-
Produkt
-
- - - -
[Upload: 3–10 Referenzbilder der gewünschten Person / des Looks]
-
Rechte-Regel: Gesichter echter Personen nur mit dokumentierter Einwilligung. Rein KI-generierte Gesichter sind der sichere Standard.
- -
- - -
-

Dein Modell

-
-

„Mara" v1 · ENTWURF

-
[BILD: Generierte Frau, Ende 20, dunkle schulterlange Haare, natürliches Lächeln, cleaner Studiohintergrund – aus 4 Blickwinkeln]
- Ende 20dunkle Haarenahbar-edel -
- - -
Nur freigegebene Versionen werden in Videos verwendet. Verbessern erzeugt neue Versionen (v2, v3 …) – ein neues Gesicht ist ein bewusster Release, kein schleichender Drift.
-
- - -
-

Verbessern

-

Wähle das Asset, das du weiterentwickeln willst.

-
+
-
-

Gesicht „Mara" v3 · FREIGEGEBEN

Verwendet in 12 Videos · Score 6120

+
+

Asset verbessern

Gesicht, Produkt oder Szene weiterentwickeln – jederzeit.

-
-
-
-

Produkt „Rouge No. 5" v2 · FREIGEGEBEN

Verwendet in 18 Videos · Score 6480

- -
-
-
+
-

Szene „Lippenstift Close-up"

Video-Iteration: Licht, Schnitt, Tempo anpassen

+

Zuletzt: „Roter Lippenstift – Close-up"

3 Videos generiert · Vote offen

-
- -
-

„Mara" verbessern

-
-
Text-Feedback
-
Referenz hochladen
-
- - -
-

Bei Referenz-Upload:

-
[Upload: Referenzbild]
- - -
Ohne Beschreibung rät das System, was gemeint ist, und kopiert das Falsche. Aus fremden Referenzen wird gelernt, nie 1:1 kopiert.
-
- -
- - -
-

Vorher / Nachher

-

Vorher (v3 – aktuell freigegeben)

-
[BILD: Mara v3 – schulterlange dunkle Haare, Studio-Look]
-

Wähle die neue Version

-

Jede Version zieht andere Vorlieben aus deiner Knowledge Base.

- -
-

Version A

-
[BILD: Haare fast schwarz, Tageslicht statt Studio, dezentes Lächeln]
- Tageslicht 5210dezent -
-
-

Version B

-
[BILD: Dunkelbraune Haare, warmes Abendlicht (Top-Attribut!), offenes Lachen]
- warmes Abendlicht 6350offen -
-
-

Version C

-
[BILD: Wie v3, aber Outdoor-Hintergrund unscharf, natürlichere Haut-Textur]
- Outdoor 5580natürliche Haut NEU · Start 5720 (Ø Kategorie) -
-
Gewinner-Merkmale steigen in der Elo gegenüber der ersetzten Version – aber nur Merkmale, in denen sich die Versionen unterscheiden. Neue Merkmale starten beim Kategorie-Durchschnitt (nicht bei 5000) mit hohem K-Faktor.
-
- - -
-

Version gewählt

-
-

MARA v4 ERSTELLT

-

Versionskette geloggt: v3 → v4 · Grund: „Haare dunkler, natürlicher" · Gewinner: Version B

-

Elo-Update: warmes Abendlicht +14 · Studio-Look −14

-
- - -
Bis zur Freigabe nutzen alle Videos weiterhin v3 – Wiedererkennung bleibt erhalten, und es bleibt messbar, welche Version performt.
-
- - -
-

Knowledge Base

- -

Feste Regeln (kein Score, gelten immer)

+

Knowledge Base · Feste Regeln (kein Score, gelten immer)

Cleaner Hintergrund

Nur zeigen, was verlangt ist

@@ -609,7 +475,7 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)
-

Kaiserslautern

+

Kaiserslautern

Score: 5240 · 12 Videos · 8 Siege

Was diese Location ausmacht:
Urban, aber nahbar; Stadion als Wiedererkennungspunkt. Warmes Abendlicht funktioniert besser als Tageslicht.

@@ -620,13 +486,299 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)
Vollständige Historie pro Attribut: jeder Vote mit Datum, Vergleichspartner, Punktänderung und Grund. Ablesbar, was besser und was schlechter geworden ist.
+ +
+
+
👋
+

Bevor's losgeht

+

Damit deine Videos nach deiner Brand aussehen, stellen wir dir einmalig 5 kurze Fragen.

Danach nie wieder – ab dann lernt die App von selbst, mit jedem Video.

+ + +
+
+ + +
+

Dein Unternehmen

+
+ + + + + + + + + + + +
+ + +
+
+
📸
+

Zeig uns deine Brand

+

Logo, Produktbilder, deine besten bisherigen Ads – alles optional.

Aber: Je mehr du hochlädst, desto besser sieht schon dein allererstes Video aus.

+ +
+
+ + +
+

Uploads

+
+

Optional, aber empfohlen – füttert deine Knowledge Base von Tag 1.

+
[Upload: Logo]
+
[Upload: Produktbilder – z. B. Lippenstift „Rouge No. 5" aus 3 Winkeln]
+
[Upload: Deine bisher besten Ads (Video/Bild) – das System lernt daraus deine Startattribute]
+ + +
+ + +
+

Szene erstellen

+ + +

Anzahl Videos

+
+
3
+
4
+
5
+
6
+
+
Jedes Video von einem anderen Top-KI-Modell. Mehr Videos = mehr Vergleichssignal, Preis pro Video.
+

Automatisch eingebaut (Brand Knowledge)

+
+ Regel: cleaner Hintergrund + Gesicht: „Mara" v3 6120 + Produkt: Rouge No. 5 v2 6480 + Location: Kaiserslautern 5240 + Voice: warm-weiblich 5890 +

Dein Prompt wird automatisch überarbeitet und mit den Top-Attributen & freigegebenen Assets angereichert.

+
+ +
+ + +
+

Dein Script

+

Aus deinem Prompt + Brand Knowledge erstellt. Lies es, ändere was du willst – generiert wird erst nach deiner Bestätigung.

+ +
Erst nach Bestätigung werden die Videos generiert – Kosten entstehen erst dann. Änderungen am Script fließen als Signal in die Knowledge Base.
+ + +
+ + +
+

Wähle das Beste

+

Tippe auf dein Favoriten-Video. Die goldene Umrandung ist die System-Vorhersage.

+ +
+ SYSTEM-FAVORIT +

Video 1 · Modell A

+
[VIDEO: Mara (Gesicht v3) hält Rouge No. 5 frontal in die Kamera, Close-up, warmes Abendlicht, Kaiserslautern-Kulisse unscharf im Hintergrund, warme weibliche Stimme: „Dein Rot. Dein Statement."]
+ warm-rotClose-upKaiserslautern +
+ +
+

Video 2 · Modell B

+
[VIDEO: Gleiche Szene, aber kühles Studiolicht, langsamer Schwenk von der Hand zum Gesicht, Text-Overlay statt Stimme]
+ StudioSchwenkText-Overlay +
+ +
+

Video 3 · Modell C

+
[VIDEO: Outdoor Köln, Mara läuft auf Kamera zu, hält Lippenstift hoch, Upbeat-Musik, schnelle Schnitte]
+ KölnBewegungUpbeat +
+ +
+

Video 4 · Modell D

+
[VIDEO: Extreme Makro-Aufnahme nur vom Lippenstift, der sich dreht, ASMR-Sound beim Öffnen]
+ MakroASMRohne Gesicht +
+ +
Bestätigst du den markierten Favoriten → wenig Elo-Punkte. Weichst du ab → volle Punkte (stärkeres Signal).
+
+ + +
+

Danke!

+
+

GESPEICHERT

+

Dein Vote fließt in die Knowledge Base. Übereinstimmung mit System-Vorhersage: 78 % (letzte 30 Votes).

+
+

Kurze Frage (optional)

+
+

Welche Location war besser?

+
+
Kaiserslautern
+
Köln
+
Egal
+
+
Gezielte Fragen wirken nur auf dieses eine Attribut – das schnellste Signal gegen das Zuordnungsproblem.
+
+

Video verwenden

+ + +
+ + +
+

Ad läuft

+
+

„Roter Lippenstift – Close-up" · Video 1

+
[Gewähltes Video – veröffentlicht auf TikTok & Instagram via Ads-API]
+
+

Live-Performance (Meta / TikTok API)

+
+

CTR

2,4 %

+

Thumbstop

41 %

+

ROAS

3,1×

+
+
+

+218 neue Follower seit Schaltung

+
+
Performance-Daten fließen automatisch und höher gewichtet als Votes in die Scores – der Markt entscheidet, keine Bestätigung nötig. Jedes Video loggt, welche Asset-Versionen es nutzte.
+ +
+ + +
+

Modell erstellen

+
+
Person
+
Produkt
+
+ + + +
[Upload: 3–10 Referenzbilder der gewünschten Person / des Looks]
+
Rechte-Regel: Gesichter echter Personen nur mit dokumentierter Einwilligung. Rein KI-generierte Gesichter sind der sichere Standard.
+ +
+ + +
+

Dein Modell

+
+

„Mara" v1 · ENTWURF

+
[BILD: Generierte Frau, Ende 20, dunkle schulterlange Haare, natürliches Lächeln, cleaner Studiohintergrund – aus 4 Blickwinkeln]
+ Ende 20dunkle Haarenahbar-edel +
+ + +
Nur freigegebene Versionen werden in Videos verwendet. Verbessern erzeugt neue Versionen (v2, v3 …) – ein neues Gesicht ist ein bewusster Release, kein schleichender Drift.
+
+ + +
+

Verbessern

+

Wähle das Asset, das du weiterentwickeln willst.

+
+
+
+

Gesicht „Mara" v3 · FREIGEGEBEN

Verwendet in 12 Videos · Score 6120

+ +
+
+
+
+
+

Produkt „Rouge No. 5" v2 · FREIGEGEBEN

Verwendet in 18 Videos · Score 6480

+ +
+
+
+
+
+

Szene „Lippenstift Close-up"

Video-Iteration: Licht, Schnitt, Tempo anpassen

+ +
+
+
+ + +
+

„Mara" verbessern

+
+
Text-Feedback
+
Referenz hochladen
+
+ + +
+

Bei Referenz-Upload:

+
[Upload: Referenzbild]
+ + +
Ohne Beschreibung rät das System, was gemeint ist, und kopiert das Falsche. Aus fremden Referenzen wird gelernt, nie 1:1 kopiert.
+
+ +
+ + +
+

Vorher / Nachher

+

Vorher (v3 – aktuell freigegeben)

+
[BILD: Mara v3 – schulterlange dunkle Haare, Studio-Look]
+

Wähle die neue Version

+

Jede Version zieht andere Vorlieben aus deiner Knowledge Base.

+ +
+

Version A

+
[BILD: Haare fast schwarz, Tageslicht statt Studio, dezentes Lächeln]
+ Tageslicht 5210dezent +
+
+

Version B

+
[BILD: Dunkelbraune Haare, warmes Abendlicht (Top-Attribut!), offenes Lachen]
+ warmes Abendlicht 6350offen +
+
+

Version C

+
[BILD: Wie v3, aber Outdoor-Hintergrund unscharf, natürlichere Haut-Textur]
+ Outdoor 5580natürliche Haut NEU · Start 5720 (Ø Kategorie) +
+
Gewinner-Merkmale steigen in der Elo gegenüber der ersetzten Version – aber nur Merkmale, in denen sich die Versionen unterscheiden. Neue Merkmale starten beim Kategorie-Durchschnitt (nicht bei 5000) mit hohem K-Faktor.
+
+ + +
+

Version gewählt

+
+

MARA v4 ERSTELLT

+

Versionskette geloggt: v3 → v4 · Grund: „Haare dunkler, natürlicher" · Gewinner: Version B

+

Elo-Update: warmes Abendlicht +14 · Studio-Look −14

+
+ + +
Bis zur Freigabe nutzen alle Videos weiterhin v3 – Wiedererkennung bleibt erhalten, und es bleibt messbar, welche Version performt.
+
+
-

Developer-Modus

-
+

Developer-Modus

+
-

Nur intern. Dieser Bereich ist für Nutzer unsichtbar – hier liegt das Feintuning, das die App ausmacht. Im Prototyp zur Präsentation sichtbar geschaltet.

+

Nur intern. Dieser Bereich ist für Nutzer unsichtbar – hier liegt das Feintuning, das die App ausmacht. Im Prototyp zur Präsentation sichtbar geschaltet.

@@ -657,13 +809,12 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)
- + @@ -671,25 +822,33 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)

BrandLoop – Prototyp

-

Textversion: Alle Bilder & Videos sind durch Beschreibungen (gestrichelte Boxen) ersetzt. Alles ist klickbar.

-

Prinzipien:

+

Textversion: Alle Bilder & Videos sind durch Beschreibungen / Dummy-Verläufe ersetzt. Alles ist klickbar, Karten sind swipebar.

+

Neu (Explore-Konzept):

    -
  • Start ohne Fragen – Profil erst beim ersten „Erstellen", tutorial-artig
    • -
  • Script mit Bestätigung vor jeder Generierung
    • -
  • Favorit dezent umrandet (gold)
    • -
  • Verbessern jederzeit auf jedes Asset
    • -
  • Feste Regeln + Prompt-Einblick + Elo-Parameter im versteckten Developer-Modus (das App-Geheimnis)
    • +
  • Feed: swipen wie Tinder – rechts = Like, links = Skip, Tippen blättert die Bild-Kette
    • +
  • Detail (↺-Button): Prompt übernehmen, eigenes Modell einsetzen → landet vorausgefüllt im Editor
    • +
  • Plus: neuer KI-Post mit Bild-Kette & Format – Szene- und Modell-Flow von dort erreichbar
    • +
  • Menschlein (Profil): Brand-Profil inkl. kompletter Knowledge Base & Verbessern
    • +
  • Navbar verschlankt: Home → Profil, „Erstellen"/„Verbessern" raus, Knowledge im Profil
-

Klickpfad zum Präsentieren:
Home → Erstellen → Tutorial/Profil → Szene → Script → Auswahl → Frage → Knowledge Base → Verbessern → Dev-Modus

+

Klickpfad zum Präsentieren:
Feed (swipen) → ↺ Detail → Nachmachen → Editor → Profil (Knowledge) → Verbessern → Dev-Modus