Vibetiles Design-Panel

Vibetiles ist ein Design-Panel für WordPress. Es öffnet sich direkt auf deiner Website, und du änderst Farben, Schriften, Größen und Abstände, während du die echte Seite vor dir hast. Es ist kostenlos, Open Source und noch in der Beta.

Kurz gesagt

• Ein Panel für dich. Farbe, Schrift, Layout, Ecken, Buttons und Bilder, jeweils mit eigenen Reglern. Wenn dir ein Look gefällt, speicherst du ihn als Stil.
• Ein kleines Panel für deine Leser:innen. Schriftgröße, hell oder dunkel und die Stile, die du ihnen zeigen möchtest.
• Stile als Links. Kopier einen Stil als Link und füg ihn auf einer anderen Website in Vibetiles ein. Oder nimm einen aus der Stil-Bibliothek.
• KI, wenn du magst. Mit dem Vibetiles Connector kann ein Assistent wie Claude dieselben Regler lesen und bewegen, über MCP. Jede Änderung lässt sich zurücknehmen, und nichts geht live, solange du es nicht sagst.
• Nicht nur für WordPress. Es gibt auch eine Version für einfache HTML-Websites: ein Ordner, den deine KI zur Website hinzufügt.

Dein Theme bleibt, wie es ist. Solange niemand an einem Regler dreht, sieht deine Seite genauso aus wie vorher, und mit der Kachel Original kommst du jederzeit dorthin zurück. Auch dieser Blog läuft mit Vibetiles. Klick also ruhig auf das Regler-Symbol und probier es beim Lesen aus.

Warum Regler?

Eine KI baut dir in ein paar Minuten eine Website. Was ewig dauert, ist das Feintuning: „etwas wärmer“, „die Überschriften eine Spur kleiner“, „weniger Abstand oben“. Für die großen Schritte sind Worte super. Aber die letzten zehn Prozent entscheidet dein Auge, und jedes Mal, wenn die KI deinen Code neu schreibt, kann woanders etwas kaputtgehen.

Deshalb schreibt bei Vibetiles niemand Code um. Du drehst an den Reglern, und wenn du eine KI verbindest, dreht sie an denselben. Jede Änderung ist ein Schritt, den du zurücknehmen kannst.

Das Panel

Das Panel ist ein kleines Fenster auf deiner Seite. Links sind die Bereiche, rechts die Regler:

• Styles: deine Looks als Kacheln.
• Colour: Seite, Text und Akzent, getrennt für hell und dunkel.
• Type: über 80 frei lizenzierte Schriften, Größen und Zeilenabstand, mit Reglern für Überschriften, Lesetext, Zitate, Kleingedrucktes und die Bedienelemente.
• Layout: wie breit die Seite ist und wie lang die Zeilen sind.
• Corners & Lines: wie rund die Ecken sind und wo Linien hinkommen.
• Buttons: Farbe, Form und Stil, vom Haupt-Button bis zum ruhigen Text-Button.
• Pictures: wie deine Bilder gerahmt und gezeigt werden.

Du weißt nicht, wie etwas heißt? Kein Problem. Klick oben im Panel auf den Zeiger und dann auf eine Überschrift oder ein Datum auf deiner Seite, und das Panel öffnet genau den passenden Regler.

Stile

Ein Stil ist ein ganzer Look: Farben, Schriften, Größen und Abstände, zusammen gespeichert. Vibetiles bringt sechs davon mit. Original ist einfach dein Theme, so wie es ist, und dazu kommen fünf ruhige Lesestile: Soft, Still, Book, Essay und Clear.

Jeden Stand der Regler kannst du als eigenen Stil speichern. Wenn du bei Original an einem Regler drehst, legt Vibetiles für dich eine Kopie an, denn Original bleibt immer dein Theme.

Die Stile unter „Shown to Readers“ können deine Leser:innen auswählen. Die anderen siehst nur du. Zieh eine Kachel von einer Gruppe in die andere, um sie zu zeigen oder zu verstecken, und mach über das ••• Menü einen Stil zum Standard deiner Website.

Gut zu wissen: Ein Stil, den du zeigst, speichert sich selbst. Deine Leser:innen sehen deine Änderungen also einen Moment später. Wenn du in Ruhe ausprobieren möchtest, arbeite an einer Kopie, die du noch nicht zeigst.

Was bekommen deine Leser:innen?

Deine Leser:innen bekommen ein kleineres Panel: Schriftgröße, hell oder dunkel und die Stile, die du ihnen zeigst. Was sie auswählen, bleibt in ihrem eigenen Browser und wird nirgendwohin geschickt. Du entscheidest, wie viel sie davon sehen, oder du blendest ihren Button ganz aus.

Stile reisen als Links

Kopier einen Stil als Link, und alle, die Vibetiles haben, können ihn in ihr eigenes Panel einfügen. Der ganze Look kommt an, bereit zum Weiterbasteln, mit jedem Block-Theme. Es gibt kein Konto und keinen Marktplatz. Ein Link in einer E-Mail oder im Chat reicht. Und wenn du „Everyone can copy styles“ einschaltest, bekommen auch deine Besucher:innen einen Kopieren-Button. Fertige Stile zum Kopieren und Ausprobieren findest du in der Stil-Bibliothek.

Ein Stil enthält nur Design-Einstellungen, sonst nichts. Wenn du einen einfügst, gleicht Vibetiles ihn mit einer Liste erlaubter Einstellungen ab und wirft alles andere raus, auch alles, was Code enthalten könnte. Ein eingefügter Stil bleibt privat, bis du dich entscheidest, ihn zu zeigen.

Was wir planen: eine kleine Stil-Bibliothek hier auf elmastudio.de. Du teilst einen Stil, den du gemacht hast, und andere übernehmen ihn in ihr eigenes Vibetiles. Wahrscheinlich fangen wir mit einer einfachen Seite hier auf der Website an.

Wie fange ich an?

1. Das Plugin installieren

Vibetiles funktioniert mit Block-Themes. Es ist in Architrave groß geworden, und wir testen es auch mit Twenty Twenty-Five.

• Geh in WordPress auf Plugins → Neues Plugin hinzufügen, such nach „Vibetiles“, installiere und aktiviere es. Es ist auf wordpress.org, Updates kommen also wie bei jedem anderen Plugin.
• Lieber eine Datei? Dieselbe Version liegt auf GitHub: Code → Download ZIP, dann Plugins → Neues Plugin hinzufügen → Plugin hochladen.
• Öffne deine Website, während du eingeloggt bist. Klick auf den kleinen Button auf der Seite oder drück Alt+D, und das Panel geht auf.

Ein schöner Anfang: Klick dich unter Styles durch die sechs Kacheln und spiel dann unter Colour mit dem Akzent. Der Pfeil oben nimmt jeden Schritt zurück, du kannst also nichts kaputtmachen.

2. Deine KI verbinden

Der Vibetiles Connector funktioniert mit Assistenten, die MCP sprechen, zum Beispiel Claude Code oder Claude Desktop. Die KI öffnet deine Website in einem eigenen Chrome-Fenster, und du kannst zusehen, wie sie an den Reglern dreht.

Du brauchst eine Website mit Vibetiles und einen Admin-Zugang, Node.js 18 oder neuer und Google Chrome. Such dir einen Beitrag auf deiner Website aus: Die KI prüft an seinem Text, wie gut sich die Seite liest. In Claude Code ist es eine Zeile, mit der Adresse deines Beitrags am Ende:

claude mcp add vibetiles -e VIBETILES_URL=https://example.com/hello-world/ -- npx -y github:manuelesposito/vibetiles-connector

Für andere Apps stehen die Schritte auf GitHub. Beim ersten Mal öffnet sich ein Chrome-Fenster mit deinem Beitrag. Log dich dort einmal ein, der Login bleibt dann in einem eigenen Chrome-Profil. Danach sprichst du einfach mit ihr, zum Beispiel so:

• „Beschreib das Design meiner Seite und mach es dann ruhiger.“
• „Mach die Überschriften fetter und eine Stufe größer.“
• „Probier auf der dunklen Seite einen dunkleren Akzent und behalt ihn nur, wenn die Links gut lesbar bleiben.“
• „Nimm das zurück.“

Die KI kann jede Einstellung lesen und weiß, was sie bedeutet. Sie ändert Einstellungen Schritt für Schritt (jeder lässt sich zurücknehmen), probiert eine Änderung aus, bevor sie sie behält, schaut sich die Seite an und prüft Kontrast, Schriftgröße, Zeilenlänge und Zeilenabstand. Was sie nicht kann: von sich aus veröffentlichen. Erst wenn du „Publish my design“ sagst, wird der Look zu einem Stil, den deine Besucher:innen sehen. Sie kommt nur an die Design-Einstellungen heran und spricht nur mit deiner eigenen Website.

3. Ohne WordPress

Vibetiles läuft auch auf einer einfachen HTML-Website. Das ganze Panel ist ein Ordner: kein Server, kein Build-Schritt, kein Konto. Die Anleitung ist für deine KI geschrieben, du kopierst also nur einen Satz hinein.

Für eine neue Website:

Build my website with Vibetiles inside. Instructions: https://github.com/manuelesposito/vibetiles-html

Für eine Website, die du schon hast:

Add Vibetiles to my website. It must look exactly as before until someone turns a dial. Instructions: https://github.com/manuelesposito/vibetiles-html

Deine Website sieht danach genauso aus wie vorher. Öffne sie einmal mit ?design am Ende der Adresse, dann bekommst du das große Panel, deine Besucher:innen das kleine. Wenn du zufrieden bist, sag deiner KI „Publish my design“, und sie schreibt den Stil in vibetiles/site.js.

Und der Datenschutz?

Keine Statistik, keine Konten, nichts wird nach Hause geschickt. Die Schriften sind nicht im Plugin enthalten: Wenn du eine zum ersten Mal auswählst, holt dein Server sie einmal von jsDelivr und legt sie in deinen Uploads ab. Deine Besucher:innen verbinden sich also nie mit einem Schriftendienst. Vibetiles speichert nur die Stile, die du zeigst. Wenn du das Plugin löschst, verschwinden Schriften und Stile mit, und dein Theme ist genau wie vorher.

Noch in der Beta

Wir nutzen Vibetiles hier jeden Tag, und es wird laufend besser. Es ist kostenlos unter der GPL, auf wordpress.org und auf GitHub. Natürlich ist noch nicht alles perfekt. Wenn dir mit deinem Theme etwas komisch vorkommt, sag mir bitte auf GitHub Bescheid. Hinweise zu einem bestimmten Theme helfen am meisten. Alle Links findest du auf der Vibetiles-Seite.

Vibetiles ist in Architrave groß geworden, und das gibt es jetzt auch auf wordpress.org. Mehr dazu auf der Architrave-Seite und im Release-Beitrag. Danke fürs Ausprobieren, ich freue mich auf dein Feedback!