Zusammenfassung

Dieser KI WordPress Theme Generator erstellt aus einer Markenfarbe eine theme.json. Er berechnet eine Farbpalette, prüft den WCAG-Kontrast für Text, Links und Buttons und legt eine modulare Typo-Skala fest. Die Regeln sind festgelegt, daher ist das Ergebnis vorhersagbar und testbar. Kopieren Sie die Datei in ein Block-Theme und verfeinern Sie sie im Site Editor.

Eine theme.json-Palette und Typo-Skala in Sekunden erzeugen

Ein KI WordPress Theme Generator verspricht meist eine ganze Website. Dieser hier liefert den Teil, den Sie prüfen können: eine kontrastgeprüfte Palette, eine modulare Typo-Skala und eine fertige theme.json für Ihr Block-Theme.

Set the folio

Block-Theme-Starter-Generator

Wählen Sie eine Markenfarbe, eine Grundlage und eine Schriftkombination. Palette, Kontrastbericht und theme.json aktualisieren sich bei jeder Änderung.

Farbpalette

Basis
Fläche
Kontrast
Primär
Akzent

Kontrastprüfung (WCAG 2.x)

Fließtext auf Basis
Link auf Basis
Button-Text auf Primär
Akzent auf Basis

Vorschau

Eine Überschrift in Ihrer Skala

Der Fließtext liegt auf der Basisfarbe. Ein Link in der Linkfarbe folgt im Text.

theme.json

So funktioniert es

Was der Generator tatsächlich berechnet

Eine Palette aus einer Farbe

Ihre Markenfarbe wird zur Primärfarbe. Das Tool liest ihren Farbton und baut daraus in HSL Basis, Fläche und Kontrast auf, bei hellem Grund mit 97, 93 und 11 Prozent Helligkeit, bei dunklem mit 9, 14 und 92 Prozent. Die Akzentfarbe liegt 150 Grad im Farbkreis daneben.

Kontrast, den Sie prüfen können

Vier Paare werden mit der Luminanzformel nach WCAG 2.x gemessen: Fließtext, Link, Button-Text und Akzent. Jedes erhält ein Verhältnis und eine Note. Besteht der Link AA nicht, wandert seine Helligkeit Schritt für Schritt, bis er besteht.

Eine modulare Typo-Skala

Mittel ist 1rem. Groß, Extra groß und Riesig multiplizieren mit Ihrem Verhältnis einmal, zweimal und dreimal, Klein teilt durch das Verhältnis. Mit dem Verhältnis 1.2 ergeben sich 0.833, 1, 1.2, 1.44 und 1.728 rem.

Randnotiz

Warum Design-Tokens vor den Patterns kommen

Ein Hero-Pattern, ein Kartenraster und ein Footer lesen alle dieselben Palette-Slugs. Enthalten diese Slugs Werte, die den Kontrast nicht erfüllen, erbt jedes Pattern den Fehler, und Sie bemerken ihn auf dem Telefon des Kunden. Erst die Tokens zu korrigieren bedeutet, dass die Patterns, die Sie bauen oder mit Pattern Forge generieren, schon von Farben ausgehen, die bestehen. Testen Sie das Ergebnis mit einer echten Kundenseite, nicht in einer Sandbox.

  • Palette-Slugs werden von jedem Block und jedem Pattern geteilt
  • Schriftgrößen-Slugs halten Überschriften über alle Templates hinweg konsistent
  • Eine Änderung an theme.json aktualisiert die ganze Website
Schriftmusterblatt und kleine Papierfarbchips auf einem Holztisch
In der Praxis

Von der generierten Datei zum fertigen Theme

  1. 1

    Eingaben wählen

    Beginnen Sie mit der Markenfarbe aus dem Logo des Kunden. Wählen Sie eine helle Basis, außer die Marke ist von Natur aus dunkel, und dann die Schriftkombination, die zum Ton passt.

  2. 2

    Den Kontrastbericht lesen

    Achten Sie auf Zeilen mit Nicht bestanden oder Nur großer Text. Ändern Sie Basis oder neutrale Tönung, bis Fließtext, Link und Button-Text alle AA bestehen.

  3. 3

    Die Datei in Ihr Theme kopieren

    Klicken Sie auf theme.json kopieren, fügen Sie die Datei im Stammverzeichnis Ihres Block-Themes ein und öffnen Sie dann den Site Editor. Prüfen Sie, ob die Palette im Farbwähler erscheint.

  4. 4

    Von Hand verfeinern

    Das Ergebnis ist ein Ausgangspunkt. Benennen Sie Slugs so um, dass sie zu Ihrem Designsystem passen, ergänzen Sie Abstände und Layout-Einstellungen und committen Sie die Datei zusammen mit dem übrigen Theme.

Grenzen

Was dieses Tool nicht leistet

Keine Seitenlayouts

Es erzeugt Tokens, keine Templates. Header, Footer und Seitenstruktur kommen weiterhin aus Ihrem Block-Theme oder aus Patterns, die Sie im Site Editor bauen.

Keine Webfonts

Beide Kombinationen nutzen Systemschriften, um jede Schriftanfrage zu vermeiden. Markenschriften brauchen eine selbst gehostete Variable Font und einen fontFace-Eintrag, den Sie selbst ergänzen.

Keine Garantie für den Geschmack

Eine Palette kann jede Kontrastprüfung bestehen und trotzdem flach wirken. Behandeln Sie das Ergebnis als sichere Grundlage und passen Sie Akzent und Neutraltöne auf einer echten Seite nach Augenmaß an.

Fragen zum Generator

Ist das wirklich ein KI-Theme-Generator?
Nein, und das sagt das Tool gleich vorweg. Palette, Kontrastprüfungen und Typo-Skala entstehen aus festen Regeln: Farbrechnung in HSL, die WCAG-Kontrastformel und eine modulare Skala. Das macht das Ergebnis vorhersagbar und testbar. Wenn Sie ein Sprachmodell im Spiel haben wollen, erzeugt Pattern Forge Gutenberg-Patterns aus einem Prompt. Dieses Tool liefert die Design-Tokens, die darunter liegen.
Ist es kostenlos, und werden meine Farben gespeichert?
Es ist kostenlos und benötigt kein Konto. Alles läuft in Ihrem Browser. Gesendet wird nur ein anonymer Zähler, der festhält, dass das Tool benutzt wurde, ohne Farbwerte oder Texte aus dem Formular.
Woher stammt das Kontrastverhältnis?
Aus der Luminanzformel nach WCAG 2.x: Jeder sRGB-Kanal wird linearisiert, mit 0.2126, 0.7152 und 0.0722 gewichtet, und das Verhältnis ist (Heller + 0.05) geteilt durch (Dunkler + 0.05). 4.5 zu 1 ist die AA-Schwelle für Fließtext, 7 zu 1 die AAA-Schwelle und 3 zu 1 die AA-Schwelle für großen Text.
Warum weicht die Linkfarbe von meiner Markenfarbe ab?
Eine Markenfarbe scheitert oft an 4.5 zu 1 gegen eine fast weiße oder fast schwarze Basis. Der Generator behält Ihre Markenfarbe als Primärfarbe für Buttons und Flächen und verschiebt ihre Helligkeit Schritt für Schritt, bis die Linkvariante auf der gewählten Basis AA besteht.
Auf welche WordPress-Version zielt die Ausgabe?
Die Datei nutzt theme.json in Version 3, die mit WordPress 6.6 (Juli 2024) eingeführt wurde. Ältere Installationen brauchen eventuell Version 2, die dieselbe Palette- und Typografiestruktur hat. Dann ändern Sie nur die Zahl und behalten den Rest.
Lädt der Schriftstapel etwas aus dem Netz?
Nein. Beide Kombinationen nutzen Systemschriften im Stil von Georgia, es gibt also keine Schriftanfrage und keinen Layoutsprung durch eine verspätete Webfont. Wenn Sie später eine Variable Font selbst hosten, ersetzen Sie die fontFamily-Werte und behalten die Slugs bei.
Funktioniert es für rechtsläufige Websites?
Die Ausgabe enthält keine Links- oder Rechts-Werte: Farben, Schriftgrößen und Familien sind richtungsunabhängig. Prüfen Sie Ihre Schrift-Fallbacks für Arabisch oder Hebräisch separat, denn Systemschriften unterscheiden sich je nach Plattform.
Wohin kommt die Datei in meinem Theme?
Speichern Sie sie als theme.json im Stammverzeichnis eines Block-Themes und öffnen Sie den Site Editor. Palette-Einträge erscheinen im Farbwähler, Größen im Typografie-Panel, und der Abschnitt Stile setzt die Standardwerte für die ganze Website.

Die Tokens an ein Pattern übergeben, nicht an eine leere Seite

Sobald die theme.json steht, entwirft Pattern Forge Gutenberg-Patterns, die Ihre Palette und Typo-Skala nutzen. Monk ist kostenlos, Scribe kostet $12/mo.

Illuminate your site
Noon