Samenvatting

Deze AI-thema-generator voor WordPress bouwt een theme.json uit één merkkleur. Hij berekent een palet, controleert het WCAG-contrast voor tekst, links en knoppen, en stelt een modulaire typeschaal in. De regels liggen vast, dus de uitvoer is voorspelbaar en testbaar. Kopieer het bestand naar een block theme en verfijn het in de Site Editor.

Genereer een theme.json-palet en typeschaal in enkele seconden

Een AI WordPress thema generator belooft meestal een hele site. Deze doet het deel dat je zelf kunt controleren: een contrastgecontroleerd palet, een modulaire typeschaal en een klaar theme.json voor je block theme.

Zet de folio klaar

Startergenerator voor block themes

Kies een merkkleur, een basis en een lettertypecombinatie. Het palet, het contrastrapport en het theme.json werken bij zodra je elk veld wijzigt.

Palet

Basis
Oppervlak
Contrast
Primair
Accent

Contrastcontrole (WCAG 2.x)

Lopende tekst op basis
Link op basis
Knoptekst op primair
Accent op basis

Voorbeeld

Een kop in jouw schaal

De lopende tekst staat op de basiskleur. Een link in de linkkleur volgt de tekst.

theme.json

Zo werkt het

Wat de generator werkelijk berekent

Een palet uit één kleur

Je merkkleur wordt Primair. De tool leest de kleurtoon en bouwt Basis, Oppervlak en Contrast eruit in HSL, op 97, 93 en 11 procent helderheid bij een lichte basis, of op 9, 14 en 92 bij een donkere. Accent ligt 150 graden verder op het kleurenwiel.

Contrast dat je kunt controleren

Vier paren worden gemeten met de WCAG 2.x-luminantieformule: lopende tekst, link, knoptekst en accent. Elk krijgt een ratio en een beoordeling. Haalt de link AA niet, dan schuift de helderheid stap voor stap tot hij slaagt.

Een modulaire typeschaal

Middel is 1rem. Groot, extra groot en enorm vermenigvuldigen met je verhouding één, twee en drie keer, en klein deelt erdoor. Met de verhouding 1.2 krijg je 0.833, 1, 1.2, 1.44 en 1.728 rem.

Kanttekeningen

Waarom designtokens vóór patronen komen

Een hero-patroon, een kaartenraster en een footer lezen allemaal dezelfde palet-slugs. Als die slugs waarden bevatten die het contrast niet halen, erft elk patroon de fout, en merk je het op de telefoon van de klant. Eerst de tokens repareren betekent dat de patronen die je bouwt, of genereert met Pattern Forge, starten met kleuren die al slagen. Test het resultaat op een echte klantsite, niet in een sandbox.

  • Palet-slugs worden gedeeld door elk blok en elk patroon
  • Lettergrootte-slugs houden koppen consistent over sjablonen heen
  • Eén bewerking in theme.json werkt de hele site bij
Typespecimenblad en kleine papieren kleurchips op een houten tafel
In de praktijk

Van gegenereerd bestand naar live thema

  1. 1

    Kies de invoer

    Begin met de merkkleur uit het logo van de klant. Kies een lichte basis tenzij het merk van nature donker is, en kies dan de lettertypecombinatie die bij de toon past.

  2. 2

    Lees het contrastrapport

    Let op rijen met Niet geslaagd of Alleen grote tekst. Pas de basis of de neutrale kleurtoon aan tot lopende tekst, link en knoptekst allemaal AA halen.

  3. 3

    Kopieer het bestand naar je thema

    Klik op Kopieer theme.json, plak het in de root van je block theme, open daarna de Site Editor en controleer of het palet in de kleurkiezer verschijnt.

  4. 4

    Verfijn met de hand

    De uitvoer is een startpunt. Hernoem slugs zodat ze bij je designsysteem passen, voeg spacing- en layoutinstellingen toe en commit het bestand samen met de rest van het thema.

Grenzen

Wat deze tool niet doet

Geen paginalayouts

Het levert tokens, geen sjablonen. Header, footer en paginastructuur komen nog steeds uit je block theme of uit patronen die je in de Site Editor bouwt.

Geen webfonts

Beide combinaties gebruiken systeemstacks om een lettertypeverzoek te vermijden. Merklettertypen hebben een zelf gehoste variabele font en een fontFace-item nodig, dat je zelf toevoegt.

Geen garantie voor smaak

Een palet kan elke contrastcontrole halen en toch vlak ogen. Zie het resultaat als veilige basis en pas Accent en neutrale kleuren met het oog aan op een echte pagina.

Vragen over de generator

Is dit echt een AI-thema-generator?
Nee, en dat zegt de tool meteen. Het palet, de contrastcontroles en de typeschaal komen uit vaste regels: kleurberekening in HSL, de WCAG-contrastformule en een modulaire schaal. Dat maakt de uitvoer voorspelbaar en controleerbaar. Wil je een taalmodel in het proces, dan genereert Pattern Forge Gutenberg-patronen op basis van een prompt; deze tool levert de designtokens eronder.
Is het gratis, en slaat het mijn kleuren op?
Het is gratis en je hebt geen account nodig. Alles draait in je browser. Het enige dat wordt verstuurd is een anonieme teller die registreert dat de tool is gebruikt, zonder kleurwaarden of tekst uit het formulier.
Waar komt de contrastratio vandaan?
Uit de WCAG 2.x-formule voor relatieve luminantie: elk sRGB-kanaal wordt gelineariseerd, gewogen met 0.2126, 0.7152 en 0.0722, en de ratio is (lichter + 0.05) gedeeld door (donkerder + 0.05). 4.5 tot 1 is de AA-drempel voor lopende tekst, 7 tot 1 is AAA, en 3 tot 1 is de AA-drempel voor grote tekst.
Waarom verschilt de linkkleur van mijn merkkleur?
Een merkkleur haalt vaak niet 4.5 tot 1 tegen een bijna witte of bijna zwarte basis. De generator houdt je merkkleur als Primair, voor knoppen en vlakken, en verschuift de helderheid stap voor stap tot de linkvariant AA haalt op de gekozen basis.
Op welke WordPress-versie is de uitvoer gericht?
Het bestand gebruikt theme.json versie 3, die met WordPress 6.6 kwam (juli 2024). Oudere installaties hebben mogelijk versie 2 nodig, die dezelfde palet- en typografiestructuur heeft, dus je kunt het getal wijzigen en de rest laten staan.
Laden de lettertypestacks iets van het web?
Nee. Beide combinaties gebruiken systeem- en Georgia-achtige stacks, dus er is geen lettertypeverzoek en geen layoutverschuiving door een laat webfont. Als je later een variabel font zelf host, vervang dan de fontFamily-waarden en behoud de slugs.
Werkt het voor rechts-naar-links-sites?
De uitvoer bevat geen links- of rechtswaarden: kleuren, lettergroottes en families zijn richtingsonafhankelijk. Controleer je Arabische of Hebreeuwse font-fallback apart, want systeemstacks verschillen per platform.
Waar hoort het bestand in mijn thema?
Sla het op als theme.json in de root van een block theme en open de Site Editor. Palet-items verschijnen in de kleurkiezer, groottes in het typografiepaneel, en het stijlgedeelte stelt de standaarden voor de hele site in.

Geef de tokens door aan een patroon, niet aan een lege pagina

Zodra theme.json op zijn plek staat, maakt Pattern Forge Gutenberg-patronen die je palet en typeschaal gebruiken. Monk is gratis; Scribe kost $12 per maand.

Verlicht je site
Noon