MACH ES ZU DEINEM

Erstelle dein eigenes Design.

Ein PixelyChat-Design besteht aus einer kleinen Datei. Du musst nicht programmieren: Beschreibe den gewünschten Look, lass einen KI-Assistenten wie Claude oder ChatGPT ein vorhandenes Design für dich anpassen und importiere anschließend das Ergebnis.

Möchtest du stattdessen das Aussehen des Chats ändern? Chat-Stil erstellen ↓

1. Ausgangspunkt wählen

Lade ein beliebiges Design aus der Design-Bibliothek herunter — zum Beispiel eines, das deinem gewünschten Look bereits nahekommt.
Oder öffne in PixelyChat Szenen-Design, wähle ein Design und anschließend Zur Bearbeitung exportieren unter Creator-Tools.

Eine .pixelytheme -Datei ist ein normales ZIP-Archiv mit einem anderen Dateinamen. Wenn dein KI-Chat den Upload ablehnt, benenne die Datei in .zipum. Jedes Paket enthält eine README.md , die der KI das Format erklärt.

2. Die KI fragen

Verwende einen Assistenten, der hochgeladene Dateien lesen kann und dir wieder eine Datei zurückgeben kann (Claude mit Dateierstellung oder ChatGPT mit Datei-Uploads und Codeausführung). Hänge die Design-Datei an, füge diesen Prompt ein und fülle den markierten Teil aus:

Ich habe ein PixelyChat-Design angehängt (eine .pixelytheme-Datei, also ein ZIP-Archiv; falls du sie nicht öffnen kannst, behandle sie als .zip). Bitte verwandle es in mein eigenes neues Design.

ZUERST entpackst du es und liest README.md — das ist die offizielle Anleitung zum PixelyChat-Design-Format und sie listet alle CSS-Hooks auf. Lies danach theme.json, theme.css und fields.json.

DER LOOK, DEN ICH MÖCHTE:
[Beschreibe dein Design hier: Stimmung, Farben, Formen, Schriften, Animationen. Beispiel: „Neon-Synthwave – dunkelviolette Panels, pinke und cyanfarbene Akzente, leuchtende Rahmen und ein langsam pulsierender Glow bei Alerts.“]

REGELN
- theme.json: Gib dem Design eine neue, eindeutige „id“ (Kleinbuchstaben, Ziffern und Bindestriche) und einen neuen „name“. Setze „author“ auf {"name": "[DEIN NAME]", "type": "creator"}, „version“ auf „1.0.0“ und füge „released“ mit dem heutigen Datum im Format YYYY-MM-DD hinzu. Behalte die anderen Felder einschließlich „basedOn“ und „supports“ bei.
- Designs verändern nur das Aussehen: CSS, JSON und mitgelieferte Dateien. Kein JavaScript, kein @import und keine externen URLs. Bilder und Schriften müssen in assets/ liegen und über relative Pfade referenziert werden.
- Style jeden in „supports“ aufgeführten Bereich (Alerts, Prämien, Widgets sowie Starting Soon / Be Right Back / Shoutout). Der Text muss auf jedem Stream-Hintergrund lesbar bleiben, und das Design muss in horizontalen und vertikalen Layouts funktionieren.
- Halte das Paket klein. Verwende nur Bilder, Schriften und Sounds, die ich verwenden darf. Wenn die alte preview.webp nicht mehr zum neuen Look passt und du keine neue rendern kannst (kleines WebP, etwa 1280x720, unter 150 KB), lösche sie.
- Paketieren: ZIPPE DEN INHALT des Design-Ordners, sodass theme.json auf oberster Ebene des Archivs liegt (nicht in einem Unterordner), und benenne die Datei [id].pixelytheme.

Wenn du fertig bist, gib mir die fertige .pixelytheme-Datei zum Herunterladen und liste auf, was du geändert hast und was du nicht prüfen konntest.

3. Importieren und testen

Lade die Datei herunter, die dir die KI gibt.
Öffne in PixelyChat Szenen-Design und klicke auf Design importieren.
Prüfe die Vorschau und danach deine Alerts, Widgets und Screens. Noch nicht richtig? Sag der KI, was geändert werden soll — Screenshots helfen — und importiere die neue Datei. PixelyChat bietet dir an, das bereits installierte Design zu aktualisieren.
Importierte Designs kannst du jederzeit wieder löschen; die integrierten Designs bleiben erhalten.

4. Teilen (optional)

Zufrieden mit dem Ergebnis? Sende die .pixelytheme -Datei an [email protected] und nenne den Namen, der als Autor angezeigt werden soll. Wir führen eine Teilprüfung durch und nehmen das Design, wenn es passt, in die Design-Bibliothek für alle auf.

Reiche nur Inhalte ein, die du teilen darfst. Mit dem Einsenden eines Designs bestätigst du, dass du es selbst erstellt hast oder das Recht hast, es zu verbreiten, und dass es ohne Erlaubnis kein urheberrechtlich geschütztes Material Dritter enthält (Bilder, Schriften, Sounds, Logos, Figuren). Eingereichte Designs sind nutzergenerierte Inhalte und werden von PixelyChat nur teilweise geprüft; der Autor bleibt für den Inhalt verantwortlich, und wir können ein Design jederzeit entfernen.

CHAT-STILE

Erstelle deinen eigenen Chat-Stil.

Ein Chat-Stil verändert, wie Nachrichten im Chat-Overlay aussehen: Namensschilder, Karten, Rahmen, Abzeichen und Verzierungen. Er funktioniert wie ein Design: eine kleine .pixelystyle-Datei, und ein KI-Assistent kann sie für dich erstellen.

1. Ausgangspunkt wählen

Lade einen beliebigen Stil aus der Chat-Stil-Bibliothek herunter.
Oder öffne in PixelyChat Chat → Stil, wähle einen installierten Chat-Stil aus und klicke unter Stil-Optionen auf Zum Bearbeiten exportieren. Diese Kopie enthält zusätzlich eine Testseite (dev/test.html), die jede Art von Nachricht zeigt.

Eine .pixelystyle-Datei ist ein normales ZIP-Archiv mit einem anderen Dateinamen. Wenn dein KI-Chat den Upload ablehnt, benenne die Datei in .zip um. Jedes Paket enthält eine README.md, die der KI das Format erklärt.

2. Die KI fragen

Hänge die Stil-Datei an, füge diesen Prompt ein und fülle den markierten Teil aus:

Ich habe einen PixelyChat-Chat-Stil angehängt (eine .pixelystyle-Datei, also ein ZIP-Archiv; falls du sie nicht öffnen kannst, behandle sie als .zip). Bitte verwandle ihn in meinen eigenen neuen Chat-Stil.

ZUERST entpackst du ihn und liest README.md - das ist die offizielle Anleitung zum PixelyChat-Chat-Stil-Format: der Aufbau der Nachrichten, alle Klassen und data-Attribute und die CSS-Variablen. Lies danach chat-style.json, style.css und fields.json.

DER LOOK, DEN ICH MÖCHTE:
[Beschreibe deinen Chat-Stil hier: Stimmung, Farben, Formen, Namensschilder, Abzeichen, Verzierungen. Beispiel: „Gemütlicher Herbst - warme braune Karten, orange Namensschilder, ein kleines Blatt in der Ecke jeder Nachricht, ein Ahornblatt-Symbol für Mods.“]

REGELN
- chat-style.json: Gib dem Stil eine neue, eindeutige "id" (Kleinbuchstaben, Ziffern und Bindestriche) und einen neuen "name". Setze "author" auf {"name": "[DEIN NAME]"}, "version" auf "1.0.0" und füge "released" mit dem heutigen Datum im Format YYYY-MM-DD hinzu. Behalte "format", "schemaVersion" und "styleApiVersion" bei.
- Chat-Stile verändern nur das Aussehen: CSS, JSON und mitgelieferte Dateien. Kein JavaScript, kein @import und keine externen URLs. Bilder und Schriften müssen in assets/ liegen und über relative Pfade referenziert werden.
- Verwende die CSS-Variablen für Hintergrund, Ecken, Rand und Akzent (in README.md aufgeführt), wo immer es sinnvoll ist, damit die Stil-Einstellungen in PixelyChat weiter funktionieren. Färbe Verzierungen mit der Akzentfarbe ein (einfarbige SVGs als Maske), damit sie der Farbe des Streamers folgen.
- Gestalte jede Art von Nachricht: normale Nachrichten für jede Rolle (Streamer, Mod, VIP, Sub, Zuschauer), reine Emote-Nachrichten und Events (Follows, Subs, Geschenke, Raids ...). Der Text muss auf jedem Stream-Hintergrund lesbar bleiben.
- Halte ihn leicht: keine Endlos-Animationen, kein backdrop-filter, kein Blur, höchstens eine kurze Einblend-Animation. Halte das Paket klein (höchstens 5 MB). Verwende nur Bilder und Schriften, die ich verwenden darf. Wenn die alte preview.webp nicht mehr zum neuen Look passt und du keine neue rendern kannst (kleines WebP, etwa 960x540, unter 150 KB), lösche sie.
- Paketieren: ZIPPE DEN INHALT des Stil-Ordners, sodass chat-style.json auf oberster Ebene des Archivs liegt (nicht in einem Unterordner), lass den Ordner dev/ weg und benenne die Datei [id].pixelystyle.

Wenn du fertig bist, gib mir die fertige .pixelystyle-Datei zum Herunterladen und liste auf, was du geändert hast und was du nicht prüfen konntest.

3. Importieren und testen

Lade die Datei herunter, die dir die KI gibt.
Öffne in PixelyChat Chat → Stil → Stil-Bibliothek und klicke auf Stil importieren.
Wähle den Stil unter Overlay aus und prüfe die Vorschau. Die Einstellungen für Hintergrund, Ecken, Rand und Akzent funktionieren auch damit. Noch nicht richtig? Sag der KI, was geändert werden soll — Screenshots helfen — und importiere die neue Datei. PixelyChat bietet dir an, den bereits installierten Stil zu aktualisieren.
Halte ihn leicht: Nachrichten bleiben während deines ganzen Streams auf dem Bildschirm, daher kosten Endlos-Animationen und Blur in OBS Leistung.

4. Teilen (optional)

Zufrieden mit dem Ergebnis? Sende die .pixelystyle-Datei (höchstens 5 MB) an [email protected] und nenne den Namen, der als Autor angezeigt werden soll. Wir führen eine Teilprüfung durch und nehmen den Stil, wenn er passt, in die Chat-Stil-Bibliothek für alle auf.

Reiche nur Inhalte ein, die du teilen darfst. Mit dem Einsenden eines Chat-Stils bestätigst du, dass du ihn selbst erstellt hast oder das Recht hast, ihn zu verbreiten, und dass er ohne Erlaubnis kein urheberrechtlich geschütztes Material Dritter enthält (Bilder, Schriften, Logos, Figuren). Eingereichte Chat-Stile sind nutzergenerierte Inhalte und werden von PixelyChat nur teilweise geprüft; der Autor bleibt für den Inhalt verantwortlich, und wir können einen Stil jederzeit entfernen.