# Desain website dengan AI: lima gerbang sebelum situs dirilis URL: https://noonwp.com/id/journal/desain-website-dengan-ai Type: blog Locale: id Published: 2026-11-10 Updated: 2026-11-11 --- > Lima gerbang berurutan untuk memakai desain website dengan AI tanpa kehilangan kontrol: brief, arahan, theme.json, blok native, serta audit aksesibilitas dan RTL. Desain website dengan AI sekarang bisa menghasilkan halaman beranda yang layak dalam waktu yang kira-kira sama dengan menuang kopi. Kecepatan itu nyata, dan di situlah jebakannya. Halaman yang dihasilkan tampak selesai jauh sebelum benar-benar selesai. Bagian yang belum beres, seperti kontras, urutan heading, tata letak yang tidak dicerminkan untuk RTL, dan disiplin token, justru bagian yang baru ketahuan klien tiga minggu setelah peluncuran. Berikut urutan yang kami pakai untuk mempertahankan kecepatan sambil menghindari kejutan: lima gerbang, berurutan, masing-masing dengan kriteria lulus atau gagal yang jelas. ## Mengapa halaman buatan AI tampak selesai padahal belum? Karena model mengoptimalkan apa yang terlihat di tangkapan layar. Hero, tiga kartu fitur, deretan testimoni, footer. Setiap elemen itu sudah sangat familiar secara statistik, sehingga seluruh halaman terbaca profesional sekilas pandang. Hal-hal yang tidak terlihat di tangkapan layar justru yang menentukan apakah situs bertahan saat diserahkan ke klien. Ambil contoh aksesibilitas. [Laporan WebAIM Million 2026](https://webaim.org/projects/million/) menemukan kegagalan WCAG 2 yang terdeteksi pada 95.9% halaman beranda dari sejuta situs teratas, dan teks berkontras rendah pada 83.9% di antaranya. Model yang dilatih dari web seperti itu akan mereproduksi web seperti itu. Ia akan memberi Anda teks abu-abu pucat di atas latar krem dengan penuh keyakinan. Masalah tak kasatmata kedua adalah di mana keputusan desain tinggal. Halaman buatan AI cenderung menaruh warna, ukuran, dan spasi sebagai nilai literal yang tersebar di markup. Ganti warna biru brand kuartal depan, dan Anda harus memburu lebih dari empat puluh blok. Itu tagihan pemeliharaan, dan yang membayarnya adalah freelancer, bukan model. Jadi pertanyaan yang berguna bukan "bisakah AI mendesain situs ini?". Jawabannya, AI bisa menghasilkan draf. Pertanyaan yang berguna adalah "keputusan mana yang saya biarkan AI buat, dan di mana saya memeriksa hasilnya?". Lima gerbang berikut menjawab pertanyaan itu. ## Gerbang pertama: tulis brief sebelum membuka alat Sebagian besar hasil AI yang mengecewakan bisa ditelusuri ke prompt satu baris. "Website untuk toko roti di Bandung" memberi model izin untuk mengarang semuanya: audiens, nada, daftar halaman, ajakan bertindak. Ia akan mengarangnya dari rata-rata semua situs toko roti yang pernah ia lihat. Brief yang berhasil muat dalam setengah halaman. Siapa yang berkunjung, dan apa yang ingin mereka lakukan dalam sepuluh detik pertama. Tiga halaman yang wajib ada. Satu tindakan utama yang menjadi tujuan situs, misalnya pesan, hubungi, atau beli. Dua situs yang dikagumi klien dan satu yang dibenci. Bahasa yang dipakai, termasuk arah tulisnya: jika situs akan tayang dalam bahasa Arab atau Ibrani, sebutkan sekarang, bukan setelah tata letak disetujui. Baris terakhir itu lebih penting dari kelihatannya. RTL adalah sifat tata letak, bukan tugas terjemahan, dan model yang tidak diberi tahu apa pun soal itu akan menghasilkan desain rata kiri dengan teks Arab yang ditempel begitu saja. Menaruh arah tulisan dalam brief mengubah tata letak apa yang diusulkan alat. Biayanya satu kalimat. Lewati kata sifat seperti "modern dan bersih". Kata-kata itu tidak membawa informasi. "Padat dan editorial, seperti halaman depan rubrik koran" membawa banyak informasi. ## Gerbang kedua: minta arahan, jangan minta halaman Penggunaan AI yang paling murah dalam pekerjaan ini adalah eksplorasi. Minta tiga sampai lima arah berbeda dalam bentuk tata letak kasar dan pasangan tipografi, lalu pilih sebelum ada yang dibangun. Enam sketsa memakan beberapa menit. Membangun ulang halaman yang ditolak klien memakan satu sore penuh. ![Beberapa sketsa tata letak pensil yang ditempel di papan gabus, membandingkan arah desain](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/d70243-i1.webp) Disiplinnya adalah menjaga agar eksplorasi tetap murah. Jangan biarkan alat merender halaman lengkap dengan foto hasil AI untuk setiap arah. Klien akan jatuh cinta pada fotonya, lalu tidak bisa lagi memisahkan tata letak dari gambarnya. Kotak abu-abu dan judul asli sudah cukup. Jika klien tidak bisa memilih dari tiga tata letak kotak abu-abu, berarti brief-nya yang bermasalah, dan Anda sudah mempelajarinya tanpa biaya. Kategori alat penting di sini, dan perlu jujur soal itu. Generator situs lengkap seperti 10Web membangun situs WordPress utuh dari prompt, URL, atau berkas Figma, dengan paket mulai dari $10 per bulan jika dibayar tahunan untuk satu situs. Pembuat situs hosted seperti Durable beralih dari beberapa jawaban ke situs bisnis kecil yang siap dalam sekitar setengah menit. Keduanya bagus untuk gerbang kedua dan lemah untuk gerbang keempat, karena keduanya memiliki keputusan desain alih-alih memperlihatkannya kepada Anda. Gunakan untuk melihat opsi. Waspadai jika menjadikannya build final untuk situs yang akan Anda pelihara bertahun-tahun. ## Gerbang ketiga: kunci desain ke theme.json sebelum membangun Ini gerbang yang paling sering dilewati alur kerja, dan justru gerbang inilah yang memisahkan situs yang bisa dipelihara dari situs yang hanya bisa didemokan. Setelah satu arah dipilih, pindahkan keputusannya ke dalam token dan tulis ke `theme.json`: palet warna, keluarga dan ukuran font, skala spasi, lebar konten. Sejak saat itu, setiap blok merujuk token berdasarkan slug, bukan nilai literal. [Referensi theme.json](https://developer.wordpress.org/themes/global-settings-and-styles/) ada persis untuk tujuan ini. Ia memberi block theme satu tempat untuk mendeklarasikan palet dan skala yang kemudian ditawarkan editor sebagai kontrol. Ketika biru brand berubah, Anda mengubah satu baris. Saat klien membuka Site Editor, mereka memilih dari palet Anda, bukan dari roda warna bebas, dan itu diam-diam mencegah satu kategori suntingan yang keluar dari brand. ![Kipas kartu sampel warna yang redup di atas meja kayu ek dengan penggaris dan pensil](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/17c64c-i2.webp) Di sini AI tetap berguna, dengan cara yang berbeda. Berikan arah yang sudah dipilih dan minta satu set token, lalu periksa dengan dua aturan. Setiap pasangan teks dan latar harus mencapai 4.5:1 untuk teks normal, yaitu ambang WCAG AA, jadi hitung rasionya sendiri alih-alih mempercayai klaim model. Dan skalanya harus kecil: lima atau enam langkah spasi, serta skala tipografi enam ukuran. Model suka memberi empat belas abu-abu yang hampir sama. Hapus sebelas di antaranya. Cara praktis untuk mengecek apakah gerbang ini berhasil: buka tema yang sudah jadi dan cari kode heks di template mana pun. Jika Anda menemukannya, berarti ada keputusan yang lolos dari sistem. ## Gerbang keempat: bangun dengan blok native dan jauhkan generator dari alur Sekarang bangun. Struktur yang diusulkan model biasanya layak dipertahankan: urutan seksi, logika kolom, ritme antara area padat dan lapang. Markup yang dihasilkannya biasanya tidak. Bangun ulang struktur yang sudah disetujui memakai blok core (Group, Columns, Cover, Query Loop) dengan token Anda, dan perlakukan keluaran generator sebagai gambar acuan, bukan berkas sumber. Ini terdengar lebih lambat. Pengalaman kami, justru lebih cepat sejak halaman kedua, karena blok native mewarisi token, merespons Site Editor, dan berfungsi ketika klien menyuntingnya. Markup yang gayanya di-hardcode akan bertabrakan dengan semua itu. Page builder berada di ujung lain dari pertukaran yang sama. Divi, yang dirilis ulang sebagai Divi 5 pada Februari 2026, menyertakan Divi AI di paket Pro seharga $277 per tahun, dan keluarannya tetap berada di dalam sistem modul Divi. Itu pilihan yang sah untuk agensi yang sudah standar pada Divi. Tapi itu produk yang berbeda dari block theme, dengan biaya keluar yang berbeda, dan biaya keluar itu sebaiknya masuk ke penawaran Anda. Tempat AI generatif masih layak di dalam proses build adalah lapisan yang repetitif: variasi bagian harga, teks contoh yang berbentuk seperti teks asli, susunan hero alternatif untuk dibandingkan klien. Perlakukan setiap hasil sebagai pola draf yang harus dirapikan dan didaftarkan, bukan pekerjaan final. Satu batasan yang jujur. Jika proyek membutuhkan interaksi nyata, seperti arsip yang difilter, logika query khusus, atau apa pun dengan perilaku JavaScript, generator mana pun tidak akan sanggup membawanya. Developer yang menulis bagian itu, dan kontribusi AI tetap di pinggiran. ## Gerbang kelima: audit apa yang tidak bisa diperlihatkan tangkapan layar Jalankan audit singkat yang sama pada setiap situs, dengan urutan yang sama, supaya menjadi kebiasaan dan bukan suasana hati. Pertama, kontras. Periksa pasangan yang benar-benar dirender, termasuk teks di atas gambar serta status nonaktif dan hover yang tidak pernah dipertimbangkan model. Kedua, struktur heading: satu H1, heading yang menurun tanpa melompat, dan tidak ada heading yang dipilih hanya karena ukurannya besar. Ketiga, keyboard: telusuri seluruh halaman dengan Tab dan pastikan fokus terlihat serta urutannya mengikuti urutan baca. Keempat, teks alternatif untuk setiap gambar yang membawa makna, dan alt kosong untuk yang tidak. Pemeriksaan kelima adalah yang membedakan audit ini dari daftar periksa generik: arah. Jika situs punya versi bahasa Arab atau Ibrani, lihat dalam RTL dan cari apa yang tidak ikut tercermin. Ikon yang menunjuk ke arah yang salah, gambar hero yang subjek utamanya kini berada di seberang teks, atau padding yang ditulis sebagai margin-left alih-alih properti logis seperti margin-inline-start. Semua ini murah diperbaiki saat ditemukan di gerbang ini, dan memalukan jika ditemukan di tangkapan layar klien. ![Dua laptop berdampingan menampilkan tata letak abstrak yang sama untuk perbandingan sebelum dan sesudah](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/6b5736-i3.webp) Simpan bukti audit. Pasangan sebelum dan sesudah untuk setiap halaman, catatan apa yang gagal, dan catatan apa yang Anda ubah. Ini mengubah "dibantu AI" dari klaim samar menjadi hasil kerja yang bisa diserahkan, dan itulah paragraf di dokumen serah terima Anda yang membenarkan tarif Anda kepada klien yang sudah mencoba generator sendiri akhir pekan lalu. ## Bagaimana dengan pembuat situs satu prompt? Mereka punya tempat, dan tempatnya sempit. Pembuat satu prompt adalah cara yang baik untuk membuat prototipe sekali pakai untuk presentasi, landing page untuk acara akhir pekan, atau titik awal visual bagi klien yang belum bisa menjelaskan apa yang ia mau. Framer memadukan generator situs AI dengan kanvas bebas dan paket gratis, sehingga cocok untuk pekerjaan visual cepat yang bisa dibuang, dan paket Basic-nya mulai dari $10 per bulan. Lewati mereka jika situs harus berjalan di WordPress, harus disunting oleh klien yang tidak teknis, atau melayani audiens RTL, karena Anda akan membangun ulang keluarannya dengan blok juga. Prototipenya tetap berharga; halamannya tidak layak dikirim. Mengetahui mana dari keduanya yang sedang Anda pegang menghemat waktu paling banyak. ## Yang bisa dicoba pada brief berikutnya Pilih satu proyek yang sedang berjalan dan jalankan hanya gerbang satu dan tiga. Tulis brief setengah halaman, lalu kunci palet dan skala ke `theme.json` sebelum ada satu halaman pun. Ukur waktunya, dan bandingkan dengan berapa lama situs terakhir Anda butuh untuk mencapai desain yang stabil. Jika hasilnya bertahan, tambahkan tiga gerbang lainnya satu per satu. Gerbang mana yang paling akan menyelamatkan Anda dari masalah di situs terakhir yang Anda kirim? ## FAQ ### Apakah AI bisa mendesain website tanpa developer? AI bisa menghasilkan draf. Untuk situs yang akan dipelihara jangka panjang, struktur dan token tetap perlu diperiksa, lalu dibangun ulang dengan blok native. ### Apa fungsi theme.json dalam desain website? theme.json adalah berkas konfigurasi block theme WordPress yang mendeklarasikan palet warna, tipografi, dan skala spasi. Blok dan editor kemudian memakai nilai yang sama. ### Berapa rasio kontras minimum untuk teks normal? Untuk teks normal, WCAG AA menetapkan 4.5:1. Hitung rasio setiap pasangan teks dan latar sendiri, jangan hanya mempercayai klaim model. ### Mengapa audit RTL penting untuk situs berbahasa Arab atau Ibrani? Tata letak yang tidak dicerminkan bisa membuat ikon menunjuk arah yang salah dan gambar kehilangan fokus. Gunakan properti logis seperti margin-inline-start agar padding ikut berbalik. ### Apakah pembuat situs satu prompt cocok untuk situs klien? Cocok untuk prototipe atau landing page sekali pakai. Untuk situs WordPress yang harus bisa disunting klien dan melayani RTL, biasanya perlu dibangun ulang dengan blok. ### Apa yang harus ada dalam brief desain sebelum memakai AI? Siapa pengunjungnya, tindakan yang diharapkan dalam sepuluh detik pertama, tiga halaman wajib, satu tindakan utama, contoh situs yang disukai dan dibenci, serta bahasa dan arah tulisnya.