Summary

Den här AI-generatorn för WordPress bygger en theme.json utifrån en enda varumärkesfärg. Den beräknar en palett, kontrollerar WCAG-kontrasten för text, länkar och knappar och sätter en modulär typskala. Reglerna är fasta, så resultatet är förutsägbart och testbart. Kopiera filen till ett block theme och finjustera i Site Editor.

Generera en theme.json-palett och typskala på några sekunder

En AI WordPress tema generator lovar oftast en hel sajt. Den här gör den del du kan kontrollera: en palett kontrollerad mot kontrast, en modulär typskala och en färdig theme.json för ditt block theme.

Ställ in folion

Startgenerator för block theme

Välj en varumärkesfärg, en bas och en typsnittskombination. Paletten, kontrastrapporten och theme.json uppdateras när du ändrar varje värde.

Palett

Bas
Yta
Kontrast
Primär
Accent

Kontrollera kontrast (WCAG 2.x)

Brödtext på bas
Länk på bas
Knapptext på primär
Accent på bas

Förhandsvisning

En rubrik i din skala

Brödtexten ligger på basfärgen. En länk i länkfärgen följer texten.

theme.json

Så fungerar det

Vad generatorn faktiskt beräknar

En palett från en färg

Din varumärkesfärg blir Primär. Verktyget läser dess nyans och bygger Bas, Yta och Kontrast utifrån den i HSL, med 97, 93 och 11 procents ljushet på en ljus bas, eller 9, 14 och 92 på en mörk. Accent ligger 150 grader runt färghjulet.

Kontrast du kan kontrollera

Fyra par mäts med WCAG 2.x-formeln för luminans: brödtext, länk, knapptext och accent. Varje par får ett värde och ett betyg. Om länken underkänns mot AA flyttas dess ljushet ett steg i taget tills den godkänns.

En modulär typskala

Medel är 1rem. Stor, extra stor och enorm multipliceras med din kvot en, två respektive tre gånger, och liten delas med den. Med kvoten 1.2 får du 0.833, 1, 1.2, 1.44 och 1.728 rem.

Marginalia

Varför designtokens kommer före mönstren

Ett hero-mönster, ett kortrutnät och en sidfot läser alla samma palettnamn. När de värdena inte klarar kontrasten ärver varje mönster felet, och du upptäcker det i kundens telefon. Om du fixar tokens först börjar mönstren du bygger, eller genererar med Pattern Forge, från färger som redan klarar kraven. Testa resultatet på en riktig kundsajt, inte i en sandlåda.

  • Palettnamnen delas av varje block och mönster
  • Typskalans storlekar håller rubrikerna konsekventa i alla mallar
  • En ändring i theme.json uppdaterar hela sajten
Typprov och små papperskulörer på ett träbord
I praktiken

Från genererad fil till färdigt tema

  1. 1

    Välj värdena

    Börja med varumärkesfärgen från kundens logotyp. Välj en ljus bas om varumärket inte är mörkt till sin natur, och välj sedan den typsnittskombination som passar tonen.

  2. 2

    Läs kontrastrapporten

    Leta efter rader märkta Underkänd eller Endast stor text. Ändra basen eller den neutrala tonen tills brödtext, länk och knapptext alla klarar AA.

  3. 3

    Kopiera filen till ditt tema

    Tryck på Kopiera theme.json, klistra in den i roten av ditt block theme och öppna sedan Site Editor. Kontrollera att paletten syns i färgväljaren.

  4. 4

    Finjustera för hand

    Resultatet är en utgångspunkt. Byt namn på slugs så att de matchar ditt designsystem, lägg till mellanrum och layoutinställningar och checka in filen tillsammans med resten av temat.

Begränsningar

Det här verktyget gör inte

Inga sidlayouter

Det producerar tokens, inte mallar. Sidhuvud, sidfot och sidstruktur kommer fortfarande från ditt block theme eller från mönster du bygger i Site Editor.

Inga webbtypsnitt

Båda kombinationerna använder systemstackar för att undvika typsnittsanrop. Varumärkestypsnitt kräver ett självhostat variabelt typsnitt och en fontFace-post, som du lägger till själv.

Ingen smakgaranti

En palett kan klara varje kontrolltest och ändå se platt ut. Behandla resultatet som en säker utgångspunkt och justera Accent och neutrala toner med ögat på en riktig sida.

Frågor om generatorn

Är det verkligen en AI-generator för teman?
Nej, och det säger verktyget direkt. Paletten, kontrollerna och typskalan kommer från fasta regler: färgmatematik i HSL, WCAG-kontrastformeln och en modulär skala. Det gör resultatet förutsägbart och testbart. Om du vill ha en språkmodell i loopen genererar Pattern Forge Gutenberg-mönster från en prompt. Det här verktyget täcker de designtokens som ligger under dem.
Är den gratis, och sparas mina färger?
Den är gratis och kräver inget konto. Allt körs i din webbläsare. Det enda som skickas är en anonym räknare som registrerar att verktyget användes, utan några färgvärden eller text från formuläret.
Var kommer kontrastkvoten ifrån?
Från WCAG 2.x-formeln för relativ luminans: varje sRGB-kanal linjäriseras och viktas med 0.2126, 0.7152 och 0.0722, och kvoten är (ljusare + 0.05) delat med (mörkare + 0.05). 4.5 till 1 är AA-gränsen för brödtext, 7 till 1 är AAA och 3 till 1 är AA-gränsen för stor text.
Varför skiljer sig länkfärgen från min varumärkesfärg?
En varumärkesfärg underkänns ofta mot 4.5 till 1 mot en nästan vit eller nästan svart bas. Generatorn behåller din varumärkesfärg som Primär, till knappar och ytor, och justerar dess ljushet ett steg i taget tills länkvarianten klarar AA mot vald bas.
Vilken WordPress-version riktar sig utdata mot?
Filen använder theme.json version 3, som kom med WordPress 6.6 (juli 2024). Äldre installationer kan behöva version 2, som har samma palett- och typografistruktur, så du kan ändra siffran och behålla resten.
Hämtar typsnittsstackarna något från webben?
Nej. Båda kombinationerna använder system- och Georgia-liknande stackar, så det finns ingen typsnittsförfrågan och ingen layoutförskjutning från ett sent webbtypsnitt. Om du senare självhostar ett variabelt typsnitt byter du ut fontFamily-värdena och behåller slugs.
Fungerar det för högerställda sajter?
Utdata innehåller inga vänster- eller högervärden: färger, typstorlekar och familjer är riktningsoberoende. Kontrollera reservtypsnittet för arabiska eller hebreiska separat, eftersom systemstackar skiljer sig mellan plattformar.
Var hamnar filen i mitt tema?
Spara den som theme.json i roten av ett block theme och öppna Site Editor. Palettposterna visas i färgväljaren, storlekarna i typografipanelen, och stilsektionen sätter standardvärdena för hela sajten.

Ge tokens till ett mönster, inte en tom sida

När theme.json är på plats skissar Pattern Forge Gutenberg-mönster som använder din palett och typskala. Monk är gratis; Scribe är $12/mo.

Lys upp din sajt
Noon