Summary

Generator tema AI untuk WordPress ini membuat theme.json dari satu warna merek. Alat ini menghitung palet, memeriksa kontras WCAG untuk teks, tautan, dan tombol, lalu menetapkan skala tipografi modular. Aturannya tetap, jadi hasilnya bisa diprediksi dan diuji. Salin file ke block theme dan sempurnakan di Site Editor.

Generator tema WordPress AI untuk palet dan skala tipografi dalam hitungan detik

Generator tema AI untuk WordPress biasanya menjanjikan satu situs utuh. Alat ini mengerjakan bagian yang bisa Anda periksa sendiri: palet yang diuji kontrasnya, skala tipografi modular, dan theme.json siap pakai untuk block theme Anda.

Atur folio Anda

Generator starter block theme

Pilih warna merek, dasar, dan pasangan font. Palet, laporan kontras, dan theme.json ikut berubah setiap kali Anda mengubah input.

Palet

Dasar
Permukaan
Kontras
Primer
Aksen

Pemeriksaan kontras (WCAG 2.x)

Teks isi di atas dasar
Tautan di atas dasar
Teks tombol di atas primer
Aksen di atas dasar

Pratinjau

Judul dalam skala Anda

Teks isi berada di atas warna dasar. Tautan dalam warna tautan mengikuti teks.

theme.json

Cara kerja

Apa yang sebenarnya dihitung generator ini

Palet dari satu warna

Warna merek Anda menjadi Primer. Alat ini membaca rona warnanya dan membangun Dasar, Permukaan, dan Kontras darinya dalam HSL, pada kecerahan 97, 93, dan 11 persen untuk dasar terang, atau 9, 14, dan 92 persen untuk dasar gelap. Aksen berada 150 derajat di sekitar roda warna.

Kontras yang bisa Anda periksa

Empat pasangan diukur dengan rumus luminansi WCAG 2.x: teks isi, tautan, teks tombol, dan aksen. Setiap pasangan mendapat rasio dan nilai. Jika tautan gagal AA, kecerahannya bergeser satu langkah demi satu sampai lulus.

Skala tipografi modular

Sedang adalah 1rem. Besar, sangat besar, dan raksasa dikalikan rasio Anda satu, dua, dan tiga kali, sedangkan kecil dibagi dengan rasio itu. Dengan rasio 1.2, Anda mendapat 0.833, 1, 1.2, 1.44, dan 1.728 rem.

Catatan pinggir

Mengapa token desain didahulukan sebelum pola

Pola hero, grid kartu, dan footer semuanya membaca slug palet yang sama. Jika slug itu menyimpan nilai yang gagal kontras, setiap pola ikut mewarisi kegagalan itu, dan Anda baru tahu saat tampil di ponsel klien. Membereskan token lebih dulu berarti pola yang Anda buat, atau yang dihasilkan dengan Pattern Forge, berangkat dari warna yang sudah lulus. Uji hasilnya di situs klien sungguhan, bukan di kotak pasir.

  • Slug palet dipakai bersama oleh setiap blok dan pola
  • Slug ukuran font menjaga judul tetap konsisten di seluruh templat
  • Satu suntingan theme.json memperbarui seluruh situs
Lembar contoh huruf dan chip warna kertas kecil di atas meja kayu
Dalam praktik

Dari file yang dihasilkan ke tema yang tayang

  1. 1

    Pilih input

    Mulai dari warna merek di logo klien. Pilih dasar terang kecuali merek itu memang gelap, lalu pilih pasangan font yang sesuai dengan nada merek.

  2. 2

    Baca laporan kontras

    Cari baris bertanda Gagal atau Hanya teks besar. Ubah dasar atau nuansa netral sampai teks isi, tautan, dan teks tombol lulus AA.

  3. 3

    Salin file ke tema Anda

    Tekan Salin theme.json, tempel di root block theme Anda, lalu buka Site Editor dan pastikan palet muncul di pemilih warna.

  4. 4

    Sempurnakan secara manual

    Hasilnya adalah titik awal. Ganti nama slug agar sesuai sistem desain Anda, tambahkan pengaturan spasi dan tata letak, lalu commit file ini bersama sisa tema Anda.

Batasan

Apa yang tidak dilakukan alat ini

Tanpa tata letak halaman

Alat ini menghasilkan token, bukan templat. Struktur header, footer, dan halaman tetap berasal dari block theme Anda atau dari pola yang Anda buat di Site Editor.

Tanpa web font

Kedua pasangan memakai stack font sistem agar tidak ada permintaan font. Tipografi merek membutuhkan variable font yang di-host sendiri dan entri fontFace, yang Anda tambahkan sendiri.

Tanpa jaminan selera

Sebuah palet bisa lulus semua pemeriksaan kontras dan tetap terlihat datar. Anggap hasilnya sebagai dasar yang aman, lalu sesuaikan Aksen dan warna netral dengan mata Anda di halaman sungguhan.

Pertanyaan tentang generator ini

Apakah ini benar-benar generator tema AI?
Bukan, dan alat ini mengatakannya sejak awal. Palet, pemeriksaan kontras, dan skala tipografi berasal dari aturan tetap: perhitungan warna dalam HSL, rumus kontras WCAG, dan skala modular. Itu membuat hasilnya bisa diprediksi dan diuji. Jika Anda ingin model bahasa ikut dalam alur, Pattern Forge menghasilkan pola Gutenberg dari sebuah prompt; alat ini mengurus token desain yang ada di bawahnya.
Apakah gratis, dan apakah warna saya disimpan?
Gratis dan tidak butuh akun. Semuanya berjalan di browser Anda. Satu-satunya data yang dikirim adalah penghitung anonim yang mencatat bahwa alat ini dipakai, tanpa nilai warna atau teks dari formulir.
Dari mana rasio kontras berasal?
Dari rumus luminansi relatif WCAG 2.x: setiap kanal sRGB dilinearisasi, dibobot 0.2126, 0.7152, dan 0.0722, lalu rasionya adalah (yang lebih terang + 0.05) dibagi (yang lebih gelap + 0.05). 4.5 banding 1 adalah ambang AA untuk teks isi, 7 banding 1 untuk AAA, dan 3 banding 1 untuk ambang AA teks besar.
Mengapa warna Tautan berbeda dari warna merek saya?
Warna merek sering gagal 4.5 banding 1 terhadap dasar yang hampir putih atau hampir hitam. Generator tetap menjadikan warna merek sebagai Primer, untuk tombol dan area isi, lalu menggeser kecerahannya selangkah demi selangkah sampai varian Tautan lulus AA pada dasar yang dipilih.
Versi WordPress mana yang dituju hasilnya?
File memakai theme.json versi 3, yang hadir bersama WordPress 6.6 (Juli 2024). Instalasi yang lebih lama mungkin membutuhkan versi 2, yang memiliki struktur palet dan tipografi yang sama, jadi Anda cukup mengubah angkanya dan mempertahankan sisanya.
Apakah stack font akan memuat sesuatu dari web?
Tidak. Kedua pasangan memakai stack sistem dan gaya Georgia, jadi tidak ada permintaan font dan tidak ada pergeseran tata letak akibat web font yang terlambat. Jika nanti Anda meng-host variable font sendiri, ganti nilai fontFamily dan pertahankan slug-nya.
Apakah bekerja untuk situs right-to-left?
Hasilnya tidak memuat nilai kiri atau kanan: warna, ukuran font, dan keluarga font tidak bergantung arah. Periksa sendiri fallback font Arab atau Ibrani Anda, karena stack font sistem berbeda di tiap platform.
Di mana file ditaruh dalam tema saya?
Simpan sebagai theme.json di root block theme, lalu buka Site Editor. Entri palet muncul di pemilih warna, ukuran di panel tipografi, dan bagian styles menetapkan default untuk seluruh situs.

Berikan token ke sebuah pola, bukan halaman kosong

Setelah theme.json terpasang, Pattern Forge menyusun pola Gutenberg yang memakai palet dan skala tipografi Anda. Monk gratis; Scribe $12/bln.

Terangi situs Anda
Noon