Riassunto

Questo generatore di temi IA per WordPress crea un theme.json partendo da un solo colore brand. Calcola la tavolozza, verifica il contrasto WCAG per testo, link e pulsanti e imposta una scala tipografica modulare. Le regole sono fisse, quindi l'output è prevedibile e testabile. Copia il file in un block theme e rifinisci tutto nel Site Editor.

Generatore di temi WordPress IA: palette theme.json e scala tipografica in pochi secondi

Un generatore di temi IA per WordPress di solito promette un intero sito. Questo fa la parte che puoi verificare: una tavolozza controllata sul contrasto, una scala tipografica modulare e un theme.json pronto per il tuo block theme.

Genera il theme.json

Generatore di starter per block theme

Scegli un colore brand, una base e un abbinamento di font. Tavolozza, report sul contrasto e theme.json si aggiornano a ogni modifica.

Tavolozza

Base
Superficie
Contrasto
Primario
Accento

Verifica del contrasto (WCAG 2.x)

Testo su base
Link su base
Testo pulsante su primario
Accento su base

Anteprima

Un titolo nella tua scala

Il testo corrente poggia sul colore base. Un link nel colore link segue il testo.

theme.json

Come funziona

Cosa calcola davvero il generatore

Una tavolozza da un solo colore

Il tuo colore brand diventa Primario. Lo strumento ne legge la tonalità e costruisce Base, Superficie e Contrasto in HSL, con luminosità del 97, 93 e 11 per cento su una base chiara, oppure 9, 14 e 92 su una scura. Accento si trova a 150 gradi sulla ruota dei colori.

Contrasto che puoi controllare

Quattro coppie vengono misurate con la formula di luminanza WCAG 2.x: testo su base, link, testo del pulsante e accento. Ognuna riceve un rapporto e un voto. Se il link non supera AA, la sua luminosità si sposta un passo alla volta finché non lo supera.

Una scala tipografica modulare

Medio vale 1rem. Grande, extra grande ed enorme moltiplicano per il tuo rapporto una, due e tre volte, mentre piccolo lo divide. Con il rapporto 1.2 ottieni 0.833, 1, 1.2, 1.44 e 1.728 rem.

A margine

Perché i design token vengono prima dei pattern

Un pattern hero, una griglia di card e un footer leggono tutti le stesse etichette di colore. Se quelle etichette contengono valori che non superano il contrasto, ogni pattern eredita il problema e lo scopri sul telefono del cliente. Sistemare prima i token significa che i pattern che costruisci, o generi con Pattern Forge, partono da colori già conformi. Prova il risultato con un sito reale del cliente, non con un ambiente di prova.

  • Gli slug dei colori sono condivisi da ogni blocco e pattern
  • Gli slug delle dimensioni mantengono coerenti i titoli in tutti i template
  • Una sola modifica a theme.json aggiorna l'intero sito
Campione tipografico e piccoli chip di colore di carta su un tavolo di legno
In pratica

Dal file generato al tema online

  1. 1

    Scegli gli input

    Parti dal colore brand del logo del cliente. Scegli una base chiara, a meno che il brand non sia scuro per natura, poi l'abbinamento di font che si adatta al tono.

  2. 2

    Leggi il report sul contrasto

    Cerca le righe marcate Non superato o Solo testo grande. Cambia la base o la tinta neutra finché testo, link e testo dei pulsanti superano tutti AA.

  3. 3

    Copia il file nel tuo tema

    Premi Copia theme.json, incollalo nella radice del tuo block theme, poi apri il Site Editor e verifica che la tavolozza compaia nel selettore colori.

  4. 4

    Rifinisci a mano

    L'output è un punto di partenza. Rinomina gli slug per adattarli al tuo design system, aggiungi impostazioni di spaziatura e layout e salva il file insieme al resto del tema.

Limiti

Cosa non fa questo strumento

Nessun layout di pagina

Produce token, non template. Header, footer e struttura delle pagine arrivano ancora dal tuo block theme o dai pattern che costruisci nel Site Editor.

Nessun web font

Entrambi gli abbinamenti usano stack di sistema per evitare richieste di font. I caratteri di marca richiedono un variable font self-hosted e una voce fontFace, che aggiungi tu.

Nessuna garanzia di gusto

Una tavolozza può superare ogni controllo di contrasto e avere un aspetto piatto. Consideralo una base sicura, poi regola Accento e i neutri a occhio su una pagina reale.

Domande sul generatore

È davvero un generatore di temi IA?
No, e lo dice subito. Tavolozza, controlli del contrasto e scala tipografica derivano da regole fisse: matematica dei colori in HSL, formula del contrasto WCAG e una scala modulare. Così l'output è prevedibile e testabile. Se vuoi un modello linguistico nel processo, Pattern Forge genera pattern Gutenberg a partire da un prompt; questo strumento copre i design token che stanno sotto di essi.
È gratuito e salva i miei colori?
È gratuito e non richiede un account. Tutto gira nel tuo browser. L'unica cosa inviata è un contatore anonimo che registra l'uso dello strumento, senza valori di colore ne testo del modulo.
Da dove viene il rapporto di contrasto?
Dalla formula di luminanza relativa WCAG 2.x: ogni canale sRGB viene linearizzato, pesato con 0.2126, 0.7152 e 0.0722, e il rapporto è (più chiaro + 0.05) diviso (più scuro + 0.05). 4.5 a 1 è la soglia AA per il testo normale, 7 a 1 è AAA e 3 a 1 è la soglia AA per il testo grande.
Perché il colore del link e diverso dal mio colore brand?
Un colore brand spesso non supera 4.5 a 1 su una base quasi bianca o quasi nera. Lo strumento mantiene il tuo colore brand come Primario, per pulsanti e riempimenti, e sposta la sua luminosità di un passo alla volta finché la variante Link non supera AA sulla base scelta.
Quale versione di WordPress supporta l'output?
Il file usa theme.json versione 3, introdotta con WordPress 6.6 (luglio 2024). Le installazioni più vecchie potrebbero richiedere la versione 2, che ha la stessa struttura di tavolozza e tipografia, quindi puoi cambiare il numero e mantenere il resto.
Le font stack caricano qualcosa dal web?
No. Entrambi gli abbinamenti usano stack di sistema in stile Georgia, quindi non c'è nessuna richiesta di font e nessuno spostamento del layout causato da un web font in ritardo. Se in seguito ospiti un variable font, sostituisci i valori fontFamily e mantieni gli slug.
Funziona per i siti da destra a sinistra?
L'output non contiene valori left o right: colori, dimensioni e famiglie dei font sono indipendenti dalla direzione. Verifica separatamente il fallback dei font per arabo o ebraico, perché gli stack di sistema cambiano da piattaforma a piattaforma.
Dove va il file nel mio tema?
Salvalo come theme.json nella radice di un block theme e apri il Site Editor. Le voci della tavolozza compaiono nel selettore colori, le dimensioni nel pannello tipografia e la sezione stili imposta i valori predefiniti per tutto il sito.

Passa i token a un pattern, non a una pagina bianca

Quando il theme.json è pronto, Pattern Forge prepara pattern Gutenberg che usano la tua tavolozza e la tua scala tipografica. Monk e gratuito; Scribe costa $12/mese.

Illumina il tuo sito
Noon