Was macht carouso?

Zweck

Erstelle Karussell-Beiträge in zwei Phasen. Phase 1 legt ein Designsystem mit dem Benutzer fest: Markentoken plus eine Bibliothek von Layoutmustern. Phase 2 komponiert jedes Karussell aus diesen Mustern: Muster pro Folie auswählen, Texte schreiben, Bilder platzieren, durch Qualitätsgates rendern.

Sperre die Token. Befreie die Komposition. Das hält jedes Karussell markenkonform, ohne wie eine Vorlage auszusehen.

Verwenden einer Vorlage (Standardpfad)

Sechs fertige Vorlagen befinden sich in templates/. Jede ist ein festgelegtes Aussehen (Farben, Schriftarten, helle und dunkle Token) plus ein Foliengerüst, sodass keine Einarbeitung nötig ist. Die Vorschau-Galerie findet sich in README.md.

Auslöser: „Vorlage 3“, „Vorlage Nr. 3“, „pakai Vorlage 3“, „verwende Vorlage 2 für …“ oder ein Vorlagenname („morning cup“). Gleiche die Nummer oder den Namen mit templates/NN-slug/template.json ab.

Dateien pro Vorlage: tokens.css (das Skin), template.json (Name, Schriftarten, Größe, Folienabfolge mit Mustern und Modi), sample.html (das fertige Beispiel-Karussell zum Kopieren).

Vorlage auflösen. Lese templates/NN-slug/template.json. Wenn die Person keine Nummer und kein benutzerdefiniertes System angegeben hat, liste jede Vorlage (Nummer, Name, Stimmung) aus den template.json-Dateien auf und frage, welche verwendet werden soll. Eine unbekannte Nummer erhält dieselbe Liste.
Briefing sammeln. Frage einmal, in einer Nachricht, nach dem, was fehlt: Thema und Blickwinkel (erforderlich), Markenname und Handle (die Vorlagen-Platzhalter werden verwendet, wenn sie abgelehnt werden), Folienanzahl (Standard ist die Länge der Abfolge, erlaubt 5 bis 10), Bilder mit einem Platzierungsplan (optional, siehe Schritt 6). Die Karussellsprache folgt der Sprache des Briefings. Übersetze auch jede feste Zeichenkette im Markup: „Mythos“, „Fakt“, „Speichern“ und der NN / TT-Footer bleiben, die Wörter ändern sich.
Aus der Abfolge planen. Beginne mit der Vorlagen-sequence. Behalte das Cover zuerst, den Abschluss zuletzt und den Modus jeder Folie wie aufgelistet. Für eine andere Folienanzahl entferne oder wiederhole mittlere Folien in der Reihenfolge der Abfolge, wobei die Modi abwechseln und keine zwei benachbarten Folien dasselbe Muster haben. Tausche ein mittleres Muster aus, wenn der Inhalt besser zu einem anderen passt (Zahlen zu stat-band oder big-number, Schritte zu process-steps, eine Zeile zu quote), wobei der Modus dieser Folie erhalten bleibt. Verwende cover-split nur, wenn ein verifiziertes Cover-Bild bereitgestellt wird. Ein platziertes Bild kommt auf die Folie als .photo-Slot (siehe unten) oder auf eine image-hero-Folie, wenn das Foto im Mittelpunkt steht. Schreibe den Plan als Liste (Foliennummer, Muster, Modus, einzeiliger Inhalt), bevor du baust.
Text schreiben gemäß den Textstandards unten. Ersetze jede Beispielzeile. Nichts aus dem Beispielthema darf bleiben.
HTML erstellen. Erstelle carousels/<slug>/index.html, indem du das sample.html der gewählten Vorlage kopierst. Ändere nur den tokens.css-Link zu ../../templates/NN-slug/tokens.css. Die fonts.css- und system.css-Links funktionieren bereits aus dieser Tiefe. Behalte oder entferne <section>-Blöcke gemäß dem Plan, kopiere Musterblöcke aus design-system/patterns.html für hinzugefügte Folien, wende die mode-dark-Klasse gemäß dem Plan an, fülle Marke, Handle und die NN / TT-Zähler ein.
Bilder bestehen das harte Gate in Phase 2, Schritt 4 unten. Lege lokale Kopien in carousels/<slug>/images/ ab und protokolliere die Herkunft in carousels/<slug>/provenance.log.
Rendern mit der Größe und den Schriftarten der Vorlage aus template.json:

python3 scripts/render_carousel.py --html carousels/<slug>/index.html --out carousels/<slug>/ \
    --width 1080 --height 1440 --slides <N> --check-fonts "<Schriftarten aus template.json, kommasepariert>"

Korrigiere das HTML, bis jedes Gate bestanden ist. Gib niemals ein Gate auf. 8. Abschließende visuelle Prüfung wie in Phase 2, Schritt 7, dann liefere slide_01.jpg bis slide_NN.jpg aus. Vorlagen benötigen keine last-used.json, da die Modi aus der Vorlage stammen.

Schriftarten sind in fonts/ gebündelt, sodass außer Playwright nichts installiert werden muss.

Eine Person, die ein eigenes Aussehen wünscht, anstatt die sechs Vorlagen zu verwenden, nutzt den benutzerdefinierten Pfad unten.

Benutzerdefiniertes Designsystem (optionaler Pfad)

Verwende diesen Pfad nur, wenn die Person nach einem eigenen Aussehen fragt oder einen Referenz-Screenshot oder HTML sendet, anstatt eine Vorlage zu wählen. Wenn keine Vorlage gewählt wurde und noch kein gesperrtes Designsystem existiert, biete zuerst die Vorlagen an und führe das Onboarding unten nur durch, wenn sie ein benutzerdefiniertes wünschen. Wenn dieser Pfad läuft, beginne nicht mit dem Design. Öffne zuerst den Onboarding-Dialog. Stelle eine Frage nach der anderen, in dieser Reihenfolge, jeweils mit den aufgelisteten Auswahlmöglichkeiten. Akzeptiere jederzeit eine benutzerdefinierte Antwort. Sieben Fragen, dann Design. Wenn der Benutzer stattdessen einen Screenshot oder HTML-Referenz sendet, überspringe den Dialog und gehe zu Phase 1, Option B.

Stil. „Welche Stimmung soll das Karussell haben?“ Auswahl: Verspielt und freundlich / Sauber und minimalistisch / Kühn und auffällig / Warm und elegant / Dunkel und hochwertig.
Farben. „Wähle eine Farbstimmung.“ Auswahl: Warme Erde (Brauntöne, Creme, Orange) / Frisch natürlich (Grüntöne, Creme) / Ozean ruhig (Blau, Weiß) / Kühner Kontrast (Schwarz, Weiß, ein starker Akzent) / Sanftes Pastell.
Schriftarten. „Wähle einen Schriftstil. Keine Notwendigkeit, Schriftarten zu nennen.“ Auswahl: Abgerundet und verspielt / Elegante Serife / Kühn und modern / Sauber und einfach. Interne Zuordnung, niemals Schriftartnamen zeigen: abgerundet-verspielt zu Baloo 2 + Quicksand; elegant-serife zu Playfair Display + Plus Jakarta Sans; kühn-modern zu Albert Sans + Plus Jakarta Sans; sauber-einfach zu Plus Jakarta Sans + Quicksand. Alle fünf Familien sind in fonts/ gebündelt: verlinke fonts/fonts.css vom Karussell-HTML aus.
Marke. „Markenname und Handle für das Wasserzeichen?“ Freitext, eine Nachricht. Beispiel: „Morning Cup / @morningcup“.
Thema. „Worum geht es in den Karussells normalerweise?“ Freitext, eine Zeile. Dies setzt den Textton und den Beispielinhalt.
Sprache. „Indonesisch oder Englisch?“ Zwei Auswahlmöglichkeiten. Dies setzt jede feste Zeichenkette: Kicker, CTA, Footer.
Systemname. „Wie sollen wir dieses Designsystem nennen?“ Freitext, eine Nachricht. Schlage einen Standardnamen aus Marke und Stil vor, z. B. „morningcup-playful“. Der Name ist wichtig, da der Benutzer mehrere Systeme behalten und pro Karussell eines auswählen kann.

Nach der siebten Antwort fasse die gesperrten Auswahlmöglichkeiten in einer kurzen Nachricht zusammen und fahre dann mit Phase 1 fort.

Phase 1: Designsystem sperren

Zwei Möglichkeiten. Wähle eine.

A. Aus den Onboarding-Antworten generieren. Setze die :root-Token in design-system/system.css auf die Marke (Farben, Schriftarten, Radius). Rendere drei Beispielmuster mit diesen Token (ein Cover, einen Körper, einen Abschluss) und zeige sie dem Benutzer. Iteriere, bis sie genehmigt sind.

B. Von einer Referenz anpassen. Der Benutzer sendet einen Screenshot oder eine HTML-Datei eines Karussells, das ihm gefällt. Studiere es: Farbrollen, Schriftskala, Abstandsrhythmus, wiederkehrende Elemente. Kodiere das Gelernte als :root-Token, rendere dann die Beispielmuster. Iteriere, bis genehmigt.

Genehmigungsgate. Das System geht erst in Produktion, nachdem der Benutzer die gerenderten Beispiele genehmigt hat. Speichere es unter seinem Systemnamen (z. B. design-systems/morningcup-playful/, mit system.css, patterns.html und last-used.json). Um später ein weiteres System zu erstellen, führe den Onboarding-Dialog erneut ab Frage 1.

Phase 2: Ein Karussell komponieren

1. Briefing sammeln

Kläre dies vor dem Start. Frage nach allem, was fehlt. Rate nicht.

Thema und Blickwinkel, als ein Hooksatz.
Designsystem: welches gesperrte System verwendet werden soll. Standardmäßig das zuletzt genehmigte. Frage, wenn mehrere existieren. (Beim Vorlagenpfad ist die Vorlage das Designsystem.)
Folienanzahl (Standard 6–10) und Größe (Standard 1080×1440, das system.css rendert; eine andere Höhe benötigt eine passende .slide-Höhenüberschreibung).
Bilder. Für jedes Bild: die Quelle (hochgeladener Dateipfad, direkte URL oder Artikel-URL), die Zielfolie und die Rolle (Hero, Split oder Inline). Ohne einen expliziten Platzierungsplan verwende keine Bilder.

2. Komposition planen

Lese die last-used.json des Systems und den Musterkatalog in design-system/PATTERNS.md. Weise jeder Folie ein Muster zu:

Öffne mit einem Cover-Muster, schließe mit einem Abschluss-Muster.
Keine zwei benachbarten Folien teilen ein Muster.
Wiederhole niemals das Cover-Muster des vorherigen Karussells für dieselbe Marke.
Passe das Muster an den Inhalt an: Zahlen zu stat-band oder big-number, Sequenzen zu process-steps, eine einzelne Zeile zu quote. Erzwinge keinen Inhalt in ein unpassendes Muster.
Wechsle die beiden Modi über die Folien hinweg ab: Weise einer Folie mode-dark zu oder lasse sie hell, sodass keine zwei benachbarten Folien denselben Modus haben. Beginne mit dem entgegengesetzten Modus der ersten Folie des vorherigen Karussells (lese last-used.json). Ein Karussell könnte hell beginnen, das nächste dunkel. Lasse den Inhalt leiten, welche Folien dunkel werden: Kontrastpaare (Mythos vs. Fakt, Problem vs. Lösung) sind natürliche dunkle Folien. Schreibe den Plan als einfache Liste (Foliennummer, Mustername, Modus, einzeiliger Inhalt), bevor du irgendetwas baust.

3. Text schreiben

Eine Idee pro Folie. Überschriften bleiben unter 8 Wörtern. Fließtext bleibt unter 25 Wörtern pro Folie. Folge den Textstandards unten.

4. Bilder aufnehmen und verifizieren (hartes Gate)

Lade jedes Bild herunter oder kopiere es in den lokalen Ordner images/. Verlinke niemals während des Renderings direkt.
Betrachte jedes Bild vor der Verwendung. Lehne es ab, wenn der Inhalt nicht zum Folienthema passt, wenn es ein Wasserzeichen oder fremdes Logo trägt, wenn es unscharf ist oder wenn seine kürzeste Seite für eine große Verwendung unter 900px liegt.
Protokolliere die Herkunft (Quell-URL oder hochgeladener Dateiname) in provenance.log.
Verwende niemals generative KI-Bilder. Dieser Skill generiert ausnahmslos keine Bilder.

Foto-Slot. Um ein Bild zu einem beliebigen Körper-Muster hinzuzufügen, füge <figure class="photo"><img src="images/<datei>.jpg" alt="..."></figure> als letztes Kind des .content dieser Folie ein. Es skaliert auf die Inhaltsbreite im Verhältnis 16:10 und übernimmt den Radius und die Farben der Vorlage. Verwende class="photo wide" (5:2) oder class="photo band" (3:1) auf dichten Folien wie myth-fact oder big-number, style="--focus:50% 40%" um den Ausschnittspunkt zu setzen, und ein <figcaption> für eine Bildunterschrift auf einer Schattierung. Für zwei Fotos verwende <div class="photos"> mit zwei <figure class="photo"> (quadratisch, nebeneinander, gleicher Abstand wie bei two-cards), oder class="photos short" (4:3) auf dichten Folien. Für eine Hero-Folie platziere das Foto randlos oben: füge photo-top zu den <section>-Klassen hinzu, style="--bleed-h:600px" darauf und <figure class="photo-bleed"><img ...></figure> als erstes Kind. Die obere Leiste wird auf einer Schattierung weiß und der Inhalt beginnt unterhalb des Fotos. Verwende etwa --bleed-h:440px auf dichten Folien (myth-fact, big-number). Wähle ein Foto mit einer ruhigen Oberkante, da die obere Leiste darauf sitzt. Überprüfe, ob die Folie noch das Überlauf-Gate besteht und mindestens 40px Luft ober- und unterhalb des Inhalts hat.

5. HTML erstellen

Beginne mit dem gesperrten system.css (kopiere den <style>-Inhalt oder verlinke die Datei) und kopiere die ausgewählten <section>-Blöcke aus patterns.html. Fülle Text- und Bild-Slots. Referenziere Bilder mit lokalen Pfaden relativ zum HTML. Erfinde keine neuen Layouts pro Karussell. Wenn das Briefing eine Struktur benötigt, die kein Muster abdeckt, ist das eine Diskussion für Phase 1, keine Improvisation in Phase 2.

6. Mit dem Qualitätsgate rendern

Führe scripts/render_carousel.py aus:

python3 scripts/render_carousel.py --html <datei.html> --out <verz-ausgabe> \
    --width 1080 --height 1440 --slides 6 \
    --check-fonts "Plus Jakarta Sans"

(Passe Breite, Höhe, Folien und Schriftarten an das Briefing und die System-Token an.) Das Skript beendet sich mit Code 1, wenn die .slide-Anzahl von der Anfrage abweicht, wenn Inhalt seinen Bereich überläuft, wenn die Begrenzungsbox einer Folie von der angeforderten Größe abweicht, wenn Text kleiner als 20px ist oder wenn eine geprüfte Schriftart nicht geladen werden konnte. Korrigiere das HTML und rendere erneut, bis es besteht. Gib niemals das Gate manuell auf.

7. Abschließende visuelle Prüfung und Aufzeichnung

Öffne Folie 1, eine mittlere Folie und die letzte Folie. Bestätige, dass die Anzeigeschriftart gerendert wurde, kein Text abgeschnitten ist, keine Elemente überlappen, Bilder unverzerrt mit intakten Motiven sind und Marke, Handle und CTA konsistent bleiben. Aktualisiere dann die last-used.json des Systems mit dem Cover-Muster dieses Karussells, der vollständigen Musterabfolge und dem Modus jeder Folie (z. B. {"cover": "cover-big-type", "sequence": ["cover-big-type", "two-cards", "takeaway"], "modes": ["light", "dark", "light"]}).

Design-Denken

Wende diese Überlegungen bei jedem Schritt an. Das verhindert, dass die Ausgabe wie KI-Schrott wirkt.

Bevor du Text schreibst

Benenne die einzelne Idee der Folie in einem Satz. Wenn du das nicht kannst, existiert die Folie noch nicht.
Schreibe zuerst die Überschrift, kürze sie dann auf unter 8 Wörter, ohne die Bedeutung zu verlieren.
Bevorzuge konkrete Nomen und starke Verben gegenüber Adjektiven. Nenne die Zeit, die Temperatur, die Menge.
Lies jede Zeile zurück. Wenn sie zu jeder beliebigen Marke passen könnte, schreibe sie für diese um.

Bevor du Elemente platzierst

Entscheide zuerst die Lesereihenfolge: was wird zuerst gesehen, als zweites, drittes. Größe und Gewicht müssen sie erzwingen.
Jedes Element braucht einen Grund für seine Position. Richte es am Grid aus oder brich es bewusst (nur Cover).
Behandle Weißraum als Gestaltungselement. Wenn sich eine Folie überladen anfühlt, reduziere den Inhalt. Verkleinere niemals die Schrift unter das Minimum.

Textstandards (Anti-Schrott)

Kurze Aussagesätze. Eine Idee pro Satz.
Keine Gedankenstriche. Keine „nicht nur X, sondern auch Y“-Konstruktionen. Keine erzwungenen Dreiergruppen.
Keine Füllwörter am Satzanfang und kein KI-Vokabular: „eintauchen“, „freischalten“, „aufwerten“, „Gobelin“, „Game-Changer“, „in der heutigen schnelllebigen Welt“.
Aktive Formulierung. Einfache Wörter: „nutzen“, nicht „verwenden“.
Hooks nutzen eines von drei Mustern: eine Wissenslücke, eine konkrete Zahl oder direkte Ansprache.
Der Untertitel macht ein Versprechen, keine Zusammenfassung. Er sagt, was der Leser durch Wischen bekommt.
Keine dekorativen Emojis in Überschriften. Keine Überschriften in Großbuchstaben.

Layout-Grundlagen

Hierarchie: Die Überschrift ist das größte, fetteste Element. Ein akzentfarbenes Wort oder eine Phrase pro Überschrift, nicht mehr.
Kontrast: Text über Fotos sitzt auf einer Schattierung oder einer halbdeckenden Karte. Niemals direkt auf einem unruhigen Foto.
Ausrichtung: Ein einheitlicher Innenabstand überall. Standardmäßig linksbündig; Cover zentrieren bewusst.
Typografie: Maximal zwei Schriftfamilien. Jede Schriftart muss geladen werden. Das Rendergate lehnt nicht geladene Schriftarten ab.

Designsystem-Katalog

Enthaltene Muster (Auszug)

Jedes Muster lebt als <section> in patterns.html und unterliegt denselben Namensregeln.

cover-big-type: Große, zentrierte Überschrift mit kleinerem Untertitel darunter. Markenname oben links, CTA unten rechts. Modus: light/dark.
cover-split: Zweigeteiltes Cover. Linke Seite: Überschrift, Untertitel, Marke. Rechte Seite: Foto im .photo-Slot. Modus: light (dunkle Textseite bei dark).
two-cards: Zwei nebeneinanderliegende Karten. Linke Karte: Überschrift, Aufzählung. Rechte Karte: Zitat oder Statistik. Modus: light/dark.
stat-band: Eine horizontale Leiste mit drei Zahlen und Kennzeichnern. Überschrift darüber. Modus: light/dark.
big-number: Eine einzelne, große Zahl mit erklärender Zeile und Untertitel. Modus: dark (optisch wirkungsvoll).
myth-fact: Linke Spalte (Mythos, durchgestrichen), rechte Spalte (Fakt, fett). Modus: dark.
process-steps: Drei nummerierte Schritte mit Symbolen und Kurztext. Überschrift oben. Modus: light/dark.
quote: Ein zentriertes Zitat in großer Schrift, darunter der Autor und Titel. Modus: dark.
takeaway: Eine abschließende Zusammenfassung mit dem wichtigsten Punkt und einem klaren CTA. Modus: light.
image-hero: Ein großes, randloses Foto oben, Überschrift und Untertitel darunter. Modus: light (Schrift auf hellem Grund).
cta-full: Eine vollflächige Aufforderung mit Hintergrundfarbe, großer Überschrift und Button-Text. Modus: dark.

Jedes Muster kann die Klasse mode-dark erhalten, um das dunkle Token-Set zu aktivieren.

Wartung und Erweiterung

Neue Muster werden zuerst in patterns.html als <section>-Block hinzugefügt und dann in PATTERNS.md dokumentiert.
system.css enthält die :root-Token – diese werden pro Designsystem überschrieben, nicht direkt in der Datei geändert.
last-used.json wird nach jedem Rendervorgang aktualisiert, um die Konsistenz zwischen Karussells zu gewährleisten.
Neue Vorlagen werden mit einem eigenen Ordner templates/NN-slug/ und den erforderlichen Dateien erstellt.

Fehlerbehandlung

Wenn beim Rendern ein Gate fehlschlägt: Korrigiere das HTML gemäß der Fehlermeldung (Überlauf, nicht geladene Schriftart, falsche Folienanzahl) und führe den Befehl erneut aus.
Wenn ein Bild abgelehnt wird: Frage den Benutzer nach einem Ersatz oder lasse die Folie ohne Bild.
Wenn der Benutzer während des Onboardings abbricht: Kehre zum Standard-Vorlagenpfad zurück.
Wenn keine Vorlage und kein Designsystem ausgewählt wurden: Frage, ob eine der sechs Vorlagen verwendet werden soll, oder starte das benutzerdefinierte Onboarding.

Repository-Struktur (relevant für den Skill)

templates/
  NN-slug/
    template.json
    tokens.css
    sample.html
design-systems/
  <system-name>/
    system.css
    patterns.html
    last-used.json
design-system/
  PATTERNS.md
  patterns.html
fonts/
  fonts.css
  Baloo2-Variable.ttf
  ...
scripts/
  render_carousel.py
carousels/
  <slug>/
    index.html
    images/
      slide_01.jpg
    provenance.log

Einschränkungen

Dieser Skill generiert keine Bilder. Der Benutzer muss alle Bilder bereitstellen.
Nur die gebündelten Schriftarten sind verfügbar. Keine externen Schriftarten-Dienste.
Die Render-Engine benötigt Playwright und Python 3.8+.
Die maximale Folienanzahl ist auf 10 begrenzt.
Der Skill ist für quadratische (1080×1080) und Hochformat (1080×1440, 1080×1920) optimiert – andere Formate benötigen eine Überschreibung der system.css.

grafisify/carouso

Was ist carouso?

In Ihrer bevorzugten KI fragen

Vorschau

Dokumentation