Periksa secara visual dan perbaiki HTML dan Markdown yang dihasilkan AI
Buka kode jadi di editor visual gratis, lihat hasil dari sudut pandang pengguna, dan edit tanpa pemrograman
- 1.Buka ChatGPT atau Claude dan hasilkan kode HTML menggunakan prompt. Salin hasilnya.
Jika layanan tidak tersedia di wilayah Anda, gunakan VPN atau model lokal melalui Ollama.
ChatGPT ↗Tentang alat iniPromptHasilkan template email HTML responsif untuk [occasion: misalnya email sambutan, newsletter, pengumuman diskon]. Sertakan inline CSS, header dengan placeholder logo, bagian konten utama dengan [main message], dan footer dengan tautan berhenti berlangganan. Buat ramah mobile dengan lebar maksimal 600px.
Apa fungsi prompt iniPrompt meminta AI membuat template email HTML. Ganti [occasion] dengan jenis email (misalnya welcome email), dan [main message] dengan teks Anda. AI akan mengembalikan kode HTML siap pakai dengan gaya tersemat. - 2.Buka CodePen - editor HTML online gratis dengan pratinjau langsung. Klik tombol 'Pen' di pojok kiri atas.
Pendaftaran tidak wajib untuk melihat, tapi diperlukan untuk menyimpan. Paket gratis memungkinkan membuat pen tanpa batas.
CodePen ↗ - 3.Tempel kode HTML yang dihasilkan ke panel HTML (kolom kiri). Jika kode berisi CSS, pindahkan ke panel CSS (kolom tengah). Pratinjau akan muncul otomatis di kolom kanan.
Jika HTML sudah memiliki inline styles, seluruh kode bisa ditempel di panel HTML - panel CSS tidak diperlukan.
CodePen ↗ - 4.Periksa hasil secara visual: bagaimana tampilan header, teks, tombol. Beralih ke mode tampilan mobile dengan menekan tombol ubah ukuran di panel atas pratinjau.
Perhatikan keterbacaan teks, jarak, dan perataan elemen.
CodePen ↗ - 5.Jika perlu mengedit, ubah kode di panel kiri. Perubahan langsung tampil di pratinjau. Untuk dokumen Markdown gunakan StackEdit (stackedit.io) - tempel teks di panel kiri dan periksa hasilnya di panel kanan.
StackEdit mendukung pratinjau real-time dan ekspor ke HTML, PDF, dan format lainnya.
StackEdit ↗ - 6.Saat hasil sudah memuaskan, salin kode akhir dari editor dan gunakan di proyek Anda. Untuk HTML, klik tombol 'Copy' di pojok kanan atas panel HTML di CodePen.
Simpan pen di CodePen jika ingin kembali lagi nanti - diperlukan pendaftaran gratis untuk ini.
CodePen ↗
- gratisChatGPT FreePaket gratis memberikan akses ke GPT-4o mini dengan batasan jumlah pesan per jam.
- gratisCodePen FreePaket gratis memungkinkan membuat jumlah proyek tanpa batas dengan pratinjau langsung, tanpa perlu pendaftaran untuk melihat.
- gratisStackEditEditor Markdown online yang sepenuhnya gratis dengan pratinjau real-time dan ekspor ke berbagai format.
Layanan AI berubah cepat - antarmuka dan batas gratis bisa berbeda dari yang dijelaskan.