Summary

Ten generator motywów WordPress AI tworzy theme.json na podstawie jednego koloru marki. Wylicza paletę, sprawdza kontrast WCAG dla tekstu, linków i przycisków oraz ustawia modularną skalę typograficzną. Reguły są stałe, więc wynik jest przewidywalny i testowalny. Skopiuj plik do motywu blokowego i dopracuj go w Site Editor.

Wygeneruj paletę theme.json i skalę typograficzną w kilka sekund

Generator motywów WordPress AI zwykle obiecuje całą stronę. Ten robi tę część, którą można sprawdzić: paletę z kontrolą kontrastu, modularną skalę typograficzną i gotowy theme.json dla motywu blokowego.

Ustaw folio

Generator startowego motywu blokowego

Wybierz kolor marki, tło i parę czcionek. Paleta, raport kontrastu i theme.json aktualizują się przy każdej zmianie pola.

Paleta

Tło
Powierzchnia
Kontrast
Główny
Akcent

Sprawdzenie kontrastu (WCAG 2.x)

Tekst główny na tle
Link na tle
Tekst przycisku na kolorze głównym
Akcent na tle

Podgląd

Nagłówek w wybranej skali

Tekst główny leży na kolorze tła. Link w kolorze linku wpisuje się w treść.

theme.json

Jak to działa

Co generator faktycznie wylicza

Paleta z jednego koloru

Kolor marki staje się kolorem głównym. Narzędzie odczytuje jego odcień i buduje z niego tło, powierzchnię i kontrast w modelu HSL, przy jasności 97, 93 i 11 procent dla jasnej bazy albo 9, 14 i 92 dla ciemnej. Akcent leży 150 stopni dalej na kole barw.

Kontrast, który można sprawdzić

Cztery pary są mierzone wzorem luminancji WCAG 2.x: tekst główny, link, tekst przycisku i akcent. Każda dostaje wynik i ocenę. Jeśli link nie przechodzi AA, jego jasność przesuwa się krok po kroku, aż spełni wymóg.

Modularna skala typograficzna

Rozmiar średni to 1rem. Duży, bardzo duży i ogromny mnożą go przez współczynnik odpowiednio raz, dwa i trzy razy, a mały go dzieli. Przy współczynniku 1.2 otrzymujesz 0.833, 1, 1.2, 1.44 i 1.728 rem.

Marginalia

Dlaczego tokeny projektu idą przed wzorcami

Wzorzec hero, siatka kart i stopka czytają te same slugi kolorów. Jeśli slugi zawierają wartości, które nie przechodzą kontrastu, każdy wzorzec dziedziczy ten błąd, a na telefonie klienta wychodzi dopiero wtedy, gdy już za późno. Najpierw napraw tokeny, dopiero potem buduj wzorce albo generuj je w Pattern Forge. Wynik testuj na prawdziwej stronie klienta, a nie w piaskownicy.

  • Slugi kolorów współdzielą wszystkie bloki i wzorce
  • Slugi rozmiarów czcionek utrzymują spójność nagłówków w szablonach
  • Jedna edycja theme.json aktualizuje całą stronę
Próbnik kroju pisma i małe papierowe próbki kolorów na drewnianym stole
W praktyce

Od wygenerowanego pliku do działającego motywu

  1. 1

    Wybierz dane wejściowe

    Zacznij od koloru marki z logo klienta. Wybierz jasne tło, chyba że marka jest z natury ciemna, a potem parę czcionek pasującą do tonu.

  2. 2

    Przeczytaj raport kontrastu

    Szukaj wierszy oznaczonych jako Niezaliczone albo Tylko duży tekst. Zmieniaj tło lub odcień neutralny, aż tekst główny, link i tekst przycisku zaliczą AA.

  3. 3

    Skopiuj plik do motywu

    Naciśnij Kopiuj theme.json, wklej plik w katalogu głównym motywu blokowego, a potem otwórz Site Editor i sprawdź, czy paleta pojawia się w selektorze kolorów.

  4. 4

    Dopracuj ręcznie

    Wynik to punkt wyjścia. Zmień nazwy slugów tak, by pasowały do systemu projektowego, dodaj ustawienia odstępów i układu, a plik zatwierdź razem z resztą motywu.

Ograniczenia

Czego to narzędzie nie robi

Brak układów stron

Narzędzie tworzy tokeny, a nie szablony. Nagłówek, stopka i struktura strony nadal pochodzą z motywu blokowego albo z wzorców zbudowanych w Site Editor.

Brak czcionek z sieci

Obie pary używają stosów systemowych, by uniknąć żądań czcionek. Firmowe kroje wymagają samodzielnie hostowanej zmiennej czcionki i wpisu fontFace, który trzeba dodać ręcznie.

Brak gwarancji dobrego smaku

Paleta może przejść każdy test kontrastu i mimo to wyglądać płasko. Traktuj wynik jako bezpieczną bazę i dopasuj akcent oraz neutralne kolory na oko, na prawdziwej stronie.

Pytania o generator

Czy to naprawdę generator motywów AI?
Nie i mówi o tym wprost. Paleta, sprawdzenie kontrastu i skala typograficzna wynikają ze stałych reguł: matematyki kolorów w HSL, wzoru kontrastu WCAG i modularnej skali. Dzięki temu wynik jest przewidywalny i testowalny. Jeśli chcesz mieć model językowy w procesie, Pattern Forge generuje wzorce Gutenberga z promptu, a to narzędzie obejmuje tokeny projektu, które leżą pod nimi.
Czy jest darmowy i czy zapisuje kolory?
Jest darmowy i nie wymaga konta. Wszystko działa w przeglądarce. Wysyłany jest tylko anonimowy licznik, który rejestruje użycie narzędzia, bez wartości kolorów i tekstu z formularza.
Skąd bierze się współczynnik kontrastu?
Ze wzoru luminancji względnej WCAG 2.x: każdy kanał sRGB jest linearyzowany, ważony wagami 0.2126, 0.7152 i 0.0722, a wynik to (jaśniejszy + 0.05) podzielone przez (ciemniejszy + 0.05). 4.5 do 1 to próg AA dla tekstu, 7 do 1 to AAA, a 3 do 1 to próg AA dla dużego tekstu.
Dlaczego kolor linku różni się od koloru marki?
Kolor marki często nie przechodzi progu 4.5 do 1 na prawie białym albo prawie czarnym tle. Generator zachowuje kolor marki jako główny, do przycisków i wypełnień, i zmienia jego jasność krok po kroku, aż wariant linku spełni AA na wybranej bazie.
Pod którą wersję WordPressa przygotowano plik?
Plik używa theme.json w wersji 3, która pojawiła się wraz z WordPressem 6.6 (lipiec 2024). Starsze instalacje mogą wymagać wersji 2, która ma tę samą strukturę palety i typografii, więc wystarczy zmienić numer i zostawić resztę.
Czy style czcionek coś ładują z sieci?
Nie. Obie pary używają stosów systemowych i stosów w stylu Georgia, więc nie ma żądania czcionki ani przesunięcia układu przez późno ładowaną czcionkę. Jeśli później zhostujesz zmienną czcionkę, zamień wartości fontFamily i zachowaj slugi.
Czy działa na stronach pisanych od prawej do lewej?
Wynik nie zawiera wartości lewo ani prawo: kolory, rozmiary i rodziny czcionek są niezależne od kierunku. Czcionkę zapasową dla arabskiego lub hebrajskiego sprawdź osobno, bo stosy systemowe różnią się między platformami.
Gdzie plik trafia w motywie?
Zapisz go jako theme.json w katalogu głównym motywu blokowego i otwórz Site Editor. Wpisy palety pojawią się w selektorze kolorów, rozmiary w panelu typografii, a sekcja stylów ustawi domyślne wartości dla całej strony.

Przekaż tokeny do wzorca, a nie zaczynaj od pustej strony

Gdy theme.json jest na miejscu, Pattern Forge przygotowuje wzorce Gutenberga, które używają palety i skali typograficznej z pliku. Monk jest darmowy; Scribe kosztuje $12 miesięcznie.

Oświetl swoją stronę
Noon