Claude Design ke WordPress: cara mengonversi desain dari Claude Design

Output apa yang Anda dapat dari Claude Design?

Claude membuat dua jenis output, dan masing-masing menempuh jalur berbeda. Cek mana yang Anda punya sebelum mulai, karena itu menentukan berapa lama konversinya.

Yang diberikan Claude	Apa itu	Jalur
Artifact HTML	File .html yang mandiri: kode, style, dan script semuanya ada di dalamnya.	Artikel ini. Isinya sudah HTML datar, persis input yang dibutuhkan konverter.
Artifact React	Sebuah komponen. Halamannya baru muncul setelah JavaScript berjalan, dan HTML di sekitarnya hanya elemen kosong tempat aplikasi dipasang.	Panduan Lovable: jenis input yang sama, langkah tambahan yang sama.

Kalau ragu, buka file-nya dan lihat isi <body>. Jika di sana ada judul dan paragraf Anda, berarti Anda punya artifact HTML dan sudah berada di tempat yang tepat. Jika body hanya berisi satu <div> kosong dan tag script, Anda punya jenis yang lain.

Ekspor dari Claude Design ke folder, beserta gambarnya

Inputnya selalu folder di disk Anda. Alamat situs yang sudah online tidak didukung sebagai input, dan itu disengaja. Salinan halaman yang sudah terbit hanya menyimpan hasil render dan kehilangan apa yang diketahui file sumbernya.

Jadi ekspor desain dari Claude (unduh artifact-nya), buat folder, dan simpan file di dalamnya sebagai index.html. Jika desain merujuk ke gambar yang tidak ada di dalam file, taruh gambar di sebelahnya, di lokasi relatif yang sama seperti yang diharapkan kode.

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

Satu halaman atau lebih?

Satu artifact adalah satu halaman, dan situs satu halaman bisa dikonversi tanpa masalah. Halaman itu menjadi beranda tema. Jika Anda ingin situs dengan halaman About dan Contact, minta Claude membuatnya juga dan simpan masing-masing sebagai file .html tersendiri di folder yang sama. Nama file itu penting: analisis membacanya dan memahami file bernama blog.html atau about.html dari namanya.

Selama jumlahnya lima file atau kurang, seluruh konversi masuk paket gratis.

Kebutuhan komputer Anda untuk konversi Claude Design ke WordPress

Jalur yang lebih pendek ini juga berjalan di komputer Anda, dan kebutuhannya tidak berkurang. Browser dan WordPress sementara ada untuk memeriksa hasil, bukan untuk membuatnya:

• Node 20 atau lebih baru dan Python 3 dengan paket Playwright dan Pillow.
• Docker dengan perintah docker compose. Docker menyalakan WordPress sementara di komputer Anda, dan konverter memasang tema di sana sebelum Anda melihatnya.
• php-cli, karena setiap file PHP melewati pemeriksaan sintaks sebelum masuk ke ZIP.
• jq, curl, bash, dan tar. WordPress tujuan harus versi 6.6 atau lebih baru.

Langkah pertama memeriksa semua ini. Ia memisahkan apa yang bisa dipasangnya sendiri di dalam folder Anda dari apa yang harus Anda putuskan. Docker tidak akan dipasang kecuali Anda memintanya.

Jalankan konversi Claude Design ke WordPress

Claude Code

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

python3 -m playwright install chromium

Codex

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

Lalu, dari mana saja, ketik:

/html2wp:html2wp

convert ./my-site

Path folder itulah seluruh instruksinya. Anda tidak menulis file konfigurasi dan tidak memilih perintah build. Di Codex, ketik convert ./my-site with html2wp. Jika Anda tidak ingin bekerja di terminal, folder yang sama bisa dibuka di aplikasi html2wp untuk Mac (panduan dengan screenshot).

Flash butuh sekitar 30 menit dan Full sekitar satu jam, tergantung jumlah halaman dan kecepatan komputer Anda. Artifact satu halaman ada di ujung yang lebih singkat, tetapi pemeriksaan selalu berjalan penuh, sekecil apa pun inputnya.

Apa yang diputuskan untuk Anda, dan apa yang ditanyakan

Sebelum menghasilkan apa pun, konverter mengukur file Anda. Ia mendaftar halaman dan menentukan bagian kode mana yang dipakai bersama dan mana yang unik. Ia juga menemukan design token, apa pun yang mirip blog, dan halaman mana yang berdiri sendiri. Lalu ia mencatat rencananya dan mengonversi sesuai rencana itu.

Desain hasil generate sering menemui dua hal:

• Setiap varian desain dipertahankan. Jika halaman Anda tidak memakai header yang sama, konverter tidak memilih satu pemenang lalu menyeragamkan sisanya. Ia membuat template part untuk setiap varian dan menghubungkan tiap halaman dengan varian yang benar-benar dipakainya. Artifact dari chat Claude yang berbeda sering lebih berbeda daripada yang Anda ingat.
• Kurung kurawal di teks Anda tetap utuh. Langkah perantara memakai format mirip JSX. Tanpa penanganan khusus, contoh JSON atau CSS di teks Anda akan merusak build atau muncul di halaman sebagai {. Konverter menanganinya, jadi kurung kurawal tetap kurung kurawal di halaman.

Kelompok yang berulang, misalnya kartu, testimoni, atau FAQ, disimpan sebagai koleksi, bukan markup yang ditulis mati. Karena itu, nantinya Anda benar-benar bisa mengeditnya, bukan hanya tampak bisa diedit.

Pemeriksaan yang tidak boleh Anda lewati

Konverter menaruh setiap halaman dalam satu gambar di samping aslinya, dan Anda membaca semuanya dari atas sampai bawah.

Dalam satu konversi, sebuah section di bagian bawah halaman hilang, dan perbandingan piksel hanya menunjukkan selisih 0,4%, jadi halaman itu lolos pemeriksaan. Pada dasarnya, pemeriksaan berbasis angka tidak bisa melihat tiga jenis cacat. Pertama, kontrol yang tampak sempurna tetapi tidak berfungsi. Kedua, nilai yang ditulis mati dari satu halaman asal sebuah template. Ketiga, apa pun yang baru muncul setelah Anda scroll, klik, atau mengirim formulir.

Periksa juga apakah kontennya bisa diedit. Halaman bisa cocok sampai ke piksel, tetapi FAQ atau grid fiturnya tidak bisa diedit siapa pun dari wp-admin. Itu pernah terjadi, dan pemeriksaan inilah yang menangkapnya, bukan pemeriksaan otomatis.

Mengedit setelah konversi Claude Design ke WordPress: tema, Visual Edit, atau page builder

Dua file masuk ke folder Anda: ZIP tema dan, di sebelahnya, CONVERSION-REPORT.md. Laporan itu berisi apa yang dicakup konversi, apa yang ditemukan pemeriksaan, dan apa yang masih terbuka. Tema dipasang seperti tema WordPress lainnya (Tampilan → Tema → Tambah Baru → Unggah Tema).

Tema ini berdiri sendiri. Halaman, blog, formulir, menu, SEO, dan redirect semuanya kode tema itu sendiri. Tema tidak butuh plugin untuk berjalan dan tidak pernah menghubungi server kami. Postingan blog ditulis di editor blok, sedangkan teks halaman tetap ada di HTML. Untuk mengedit halaman tanpa kode ada dua pilihan: Visual Edit dan page builder.

Page builder adalah pilihan yang baik jika desain hanya titik awal. Pilihan itu buruk jika desain adalah hal yang Anda serahkan. Jika Anda mengonversi agar desain hasil generate bertahan di WordPress, membangunnya ulang sebagai widget membatalkan alasan Anda memulai. Tetapi jika orang lain akan merombak layout kuartal depan, pengalaman mereka dengan Elementor mungkin lebih berharga daripada desain yang setia.

Lite atau Pro, jika Anda memilih Visual Edit

Chat AI berjalan dengan API key Anda sendiri. Kami tidak menjual token kepada Anda, dan biayanya Anda bayar ke penyedia Anda.

Harga konversi Claude Design ke WordPress dan apa yang ditolaknya

Gratis untuk semua orang, tanpa kunci dan tanpa pendaftaran: tiga konversi, masing-masing lima halaman, dan total lima proses ulang. Kedua angka dihitung per alamat IP, jadi kantor dengan satu alamat mendapat satu jatah. Paket gratis ditujukan untuk mencoba alat ini, situs pribadi, dan pekerjaan nonkomersial.

Lisensi Pro menghapus batas halaman serta membuat konversi dan proses ulang tanpa batas. Lisensi ini juga membuka langkah yang mengubah toko online menjadi WooCommerce. Langkah itu tidak pernah gratis: aplikasi langsung menolak konversi gratis untuk situs yang punya toko, alih-alih mengerjakan separuhnya. Pro bisa dibeli bulanan atau tahunan di halaman harga, dan selama beta pembayaran pertama diskon 30%.

Satu catatan: ini masih beta. Pemeriksaan menangkap sebagian besar perbedaan, tidak semuanya. Karena itulah membaca setiap halaman di samping aslinya adalah bagian dari proses, bukan sentuhan akhir yang opsional. Itu juga alasan untuk lebih dulu mengonversi sesuatu milik Anda secara gratis, baru kemudian memercayainya.

Panduan langkah demi langkah untuk seluruh proses ada di dokumentasi aplikasi html2wp. Jika artifact Anda berupa React, panduan Lovable ke WordPress menjelaskan jalur tersebut.