Website yang dulu butuh berminggu-minggu untuk dibangun, kini bisa selesai dalam hitungan menit.
Dengan Claude AI, siapapun termasuk yang tidak punya latar belakang programming sama sekali bisa membuat website profesional.
Cukup mendeskripsikan apa yang diinginkan dalam bahasa natural dan Claude akan execute-nya.
Artikel ini akan kasih penjelasan dua metode utama membuat website dengan Claude, prompt siap pakai untuk berbagai jenis website, cara mempersonalisasi desain, dan langkah deploy ke internet secara gratis.
Dua Metode Membuat Website dengan Claude
Ada dua jalur utama yang tersedia tergantung level pengguna dan kompleksitas proyek Anda.
Metode 1: Claude Artifacts (Pemula, Tanpa Install)
Langsung di browser via claude.ai tanpa perlu install apapun di komputer.
Claude menghasilkan kode HTML, CSS, JavaScript dan menampilkan preview website secara real-time di panel Artifacts.
Tidak perlu setup teknis sama sekali, paling cocok untuk landing page, portofolio, atau website statis.
Hasilnya bisa langsung dilihat preview-nya di screen sebelum publish ke internet.
Metode 2: Claude Code (Developer, CLI)
Tools CLI yang bekerja langsung di terminal dan terintegrasi dengan VS Code editor.
Cocok untuk proyek yang lebih kompleks seperti web app, e-commerce, atau dashboard interaktif.
Claude Code bisa manage multiple files, libraries, dan dependencies secara agentic.
Lebih powerful tapi memerlukan setup teknis tertentu di computer Anda.
Rekomendasi Metode
Untuk mayoritas pembaca yang ingin hasil cepat tanpa setup teknis, gunakan Metode 1.
Metode ini paling mudah dan bisa langsung lihat hasilnya tanpa perlu install apapun.
Persiapan: Aktifkan Fitur Artifacts di Claude.ai
Langkah pertama dan wajib sebelum memulai membuat website via claude.ai adalah aktifkan fitur Artifacts.
Langkah 1: Buka Claude.ai
Buka claude.ai di browser Anda dan login dengan akun Google atau email yang Anda punya.
Pastikan Anda sudah login sebelum lanjut ke step berikutnya.
Langkah 2: Akses Feature Preview
Klik foto profil yang ada di pojok kanan atas layar Anda.
Dari menu dropdown yang muncul, pilih opsi “Feature Preview” untuk akses fitur experimental.
Langkah 3: Aktifkan Artifacts Toggle
Di halaman Feature Preview, cari toggle untuk “Artifacts” dan aktifkan ke posisi ON.
Artifacts adalah fitur yang menampilkan preview code Anda secara real-time di panel terpisah.
Langkah 4: Kembali ke Chat
Kembali ke halaman chat utama Claude dan refresh browser Anda.
Sekarang setiap kali Claude menghasilkan kode website, tampilan preview langsung muncul di panel kanan secara real-time.
Anda bisa lihat hasil website langsung tanpa perlu copy-paste kode ke editor lain.
Prompt untuk Landing Page Bisnis
Jenis website paling banyak dibutuhkan mulai dari UMKM, freelancer, hingga startup.
Template Prompt Landing Page
Buatkan landing page profesional untuk [nama bisnis] yang bergerak di bidang [deskripsi].
Target pelanggan saya adalah [deskripsi target audience].
Sertakan: header dengan logo placeholder, hero section dengan headline yang menarik, section keunggulan dengan tiga poin utama, section testimoni dari pelanggan, form kontak yang berfungsi, dan footer yang profesional.
Gunakan warna [preferensi warna Anda] dengan desain yang modern dan fully responsive untuk mobile.
Contoh Konkret untuk Jasa Desain Grafis
Buatkan landing page untuk studio desain grafis bernama PixelCraft.
Target audience adalah UMKM dan startup yang butuh jasa desain.
Sertakan: hero section dengan tagline yang keren dan eye-catching, galeri portofolio enam karya menggunakan placeholder images, paket harga dengan tiga tier pilihan, testimonial dari tiga klien satisfied, dan tombol WhatsApp di pojok kanan bawah untuk quick contact.
Warna dominan biru dongker dan emas untuk terlihat premium.
Refine Output Claude
Setelah output muncul di Artifacts, Anda bisa refine dengan permintaan tambahan.
Coba ketik: “Ganti font heading ke sans-serif yang lebih modern” atau “Perbesar tombol CTA dan beri efek hover yang menarik.”
Claude akan update code dan preview-nya langsung tanpa perlu buat ulang dari nol.
Prompt untuk Website Portofolio Pribadi
Sangat dibutuhkan oleh freelancer, designer, developer, dan fresh graduate yang cari kerja.
Prompt Portofolio Minimalis
Buatkan website portofolio pribadi satu halaman untuk [nama Anda].
Profesi saya adalah [profesi: designer, developer, fotografer, dll].
Sertakan: navigation bar yang sticky di atas, section About dengan foto placeholder profil, section Skills dengan progress bar visual untuk setiap skill, section Projects dengan enam kartu proyek, section Experience timeline, dan section Contact dengan ikon media sosial.
Desain minimalis dengan warna hitam-putih dan aksen [warna pilihan Anda].
Prompt Portofolio Kreatif
Buatkan portfolio website untuk fotografer profesional dengan style yang kreatif.
Tampilkan portfolio dengan masonry gallery layout dan efek hover zoom yang smooth saat mouse over.
Tambahkan section about yang storytelling dan engaging, plus form booking untuk klien yang ingin hire.
Desain dark mode dengan aksen merah dramatis untuk terlihat bold dan memorable.
Tips Responsive Design
Selalu tambahkan permintaan: “Buat fully responsive untuk tampilan mobile” agar website Anda terlihat bagus di semua perangkat dan ukuran screen.
Ini very important untuk SEO dan user experience karena mayoritas users sekarang browsing dari smartphone.
Prompt untuk Web App Sederhana
Untuk yang ingin lebih dari sekadar halaman statis, Claude bisa buat aplikasi web interaktif yang functional.
Prompt Aplikasi Kalkulator
Buatkan web app kalkulator dengan fitur: operasi dasar seperti plus, minus, kali, bagi.
Tampilkan history perhitungan di panel samping agar user bisa lihat riwayat operasi.
Tambahkan toggle untuk mode dark dan light sesuai preferensi user.
Desain modern yang mirip dengan iOS agar terlihat polished dan professional.
Gunakan HTML, CSS, dan JavaScript murni tanpa library external.
Prompt Aplikasi To-Do List
Buatkan web app to-do list dengan fitur: tambah tugas baru, hapus tugas yang sudah done, edit tugas yang ada.
Tambahkan kategorisasi dengan label warna berbeda untuk setiap kategori.
Implementasikan filter berdasarkan status (selesai atau belum selesai).
Data harus tersimpan di localStorage sehingga tetap ada meski user refresh browser.
Desain bersih dan minimalis yang tidak overwhelming.
Prompt Website Menu Resto
Buatkan website menu restoran digital yang bisa dibuka di smartphone dan desktop.
Tampilkan kategori makanan dengan fitur filter untuk navigasi mudah.
Buat kartu menu untuk setiap dish dengan foto placeholder, deskripsi, harga, dan rating.
Implementasikan keranjang pesanan agar customer bisa kumpulkan items.
Tambahkan tombol order via WhatsApp di bawah untuk seamless transaction.
Warna dominan harus hangat sesuai dengan branding restoran Anda.
Cara Mempersonalisasi dan Menyempurnakan Website
Membuat website dengan Claude adalah proses iteratif, bukan sekali jadi dan langsung perfect.
Anda bisa terus refine dan improve dengan prompt tambahan.
Prompt Refinement Desain
Ubah skema warna website menjadi nuansa earth tone seperti coklat, krem, dan hijau sage.
Pertahankan semua konten dan struktur yang sudah ada, jangan rubah fundamental layout-nya.
Hanya styling dan color scheme yang berubah.
Prompt Tambah Animasi
Tambahkan animasi scroll reveal pada semua section menggunakan CSS.
Setiap section harus muncul dengan efek fade-in dari bawah saat user scroll ke bawah.
Ini membuat website terlihat lebih modern dan interactive.
Prompt Perbaikan Mobile
Cek dan perbaiki semua elemen yang tidak responsive di tampilan mobile dengan lebar layar 375 piksel.
Pastikan navigation bar berubah menjadi hamburger menu di mobile.
Sesuaikan font size dan spacing agar readable di screen kecil.
Prompt Tambah Fitur
Tambahkan fitur dark mode toggle di navigation bar yang berfungsi dan menyimpan preferensi user di localStorage.
Ini membuat user experience lebih baik dan modern.
Kunci Iterasi Sukses
Kunci iterasi yang sukses adalah selalu sertakan “pertahankan kode yang ada” atau “jangan ubah struktur lainnya” agar Claude tidak reset ulang keseluruhan website saat Anda request perubahan.
Claude akan fokus pada perubahan spesifik yang Anda minta tanpa mengganti yang sudah berjalan baik.
Cara Deploy Website ke Internet (Gratis)
Setelah website selesai dan sempurna, langkah berikutnya adalah publish ke internet agar bisa diakses oleh orang lain.
Ada beberapa opsi gratis yang tersedia tergantung kebutuhan Anda.
Opsi 1: Langsung dari Claude Artifacts
Klik tombol “Publish” di panel Artifacts untuk mendapatkan link publik yang bisa langsung dibagikan.
Paling cepat untuk demo atau sharing sementara tanpa setup.
Link akan langsung live dan bisa diakses orang dalam beberapa detik.
Opsi 2: Netlify Drop (Gratis, Permanen)
Download kode HTML, CSS, JavaScript dari Claude Artifacts terlebih dahulu.
Buka website netlify.com slash drop di browser Anda.
Drag and drop folder berisi semua file ke halaman tersebut.
Website akan langsung live dengan URL gratis dalam hitungan 30 detik, bahkan dengan custom domain bisa ditambahkan nanti.
Opsi 3: GitHub Pages (Gratis, untuk Developer)
Upload kode ke repository GitHub yang Anda buat.
Di pengaturan repository, cari dan aktifkan GitHub Pages.
Website akan live dengan URL gratis format username.github.io slash namaproyek.
Ini cocok untuk yang sudah familiar dengan Git dan GitHub.
Opsi 4: Vercel (Gratis, untuk Web App)
Vercel adalah pilihan terbaik untuk web app dengan framework modern seperti Next.js.
Koneksikan repository GitHub Anda ke Vercel.
Deploy otomatis terjadi setiap kali Anda push kode ke GitHub.
Sangat convenient untuk development dan production deployment.
Claude Code: Membuat Website Lebih Kompleks
Untuk developer yang ingin membuat web app fullstack dengan framework modern seperti Next.js, TypeScript, dan Tailwind.
Instalasi Claude Code
Instalasi Claude Code via NPM dengan command:
npm install -g @anthropic-ai/claude-code
Setelah install selesai, Anda bisa jalankan claude command di terminal proyek manapun.
Cara Menggunakan
Jalankan claude di terminal direktori proyek Anda.
Deskripsikan website atau app yang ingin dibangun dalam bahasa natural.
Claude Code akan membuat seluruh struktur file, komponen, dan konfigurasi secara agentic.
Tidak perlu copy-paste manual, semuanya automated dan terintegrasi langsung.
Tech Stack yang Powerful
Claude Code cocok untuk membangun dengan stack profesional seperti Next.js plus TypeScript plus Tailwind CSS, kemudian deploy ke Vercel dengan database Supabase.
Ini kombinasi yang powerful untuk production-ready applications.
Tips dan Kesalahan Umum
Berikut panduan praktis berdasarkan pengalaman nyata pengguna membuat website dengan Claude.
Tip 1: Mulai dari Prompt Spesifik
Semakin detail deskripsi Anda (tujuan website, preferensi warna, konten yang ingin dimuat, fitur spesifik), semakin presisi hasilnya dari Claude.
Prompt vague akan menghasilkan website generic yang tidak sesuai ekspektasi.
Tip 2: Iterasi Bertahap
Jangan minta semua fitur sekaligus di satu prompt besar.
Bangun fitur per fitur dan refine seiring berjalan.
Ini lebih efficient dan hasilnya lebih baik daripada minta everything sekaligus.
Tip 3: Selalu Minta Responsive
Tambahkan “mobile-friendly dan responsive” di setiap prompt website yang Anda buat.
Ini ensure website terlihat bagus di semua ukuran screen dari smartphone sampai desktop.
Tip 4: Gunakan Plan Mode di Claude Code
Saat pakai Claude Code, review rencana perubahan sebelum Claude mengeksekusi.
Ini prevent mistakes dan ensure changes sesuai harapan Anda sebelum applied.
Tip 5: Simpan Versi Kerja
Download kode sebelum meminta perubahan besar sebagai backup.
Ini safety net kalau ada yang salah dan Anda butuh revert ke versi sebelumnya.
Penutup
Claude AI telah mengdemokratisasi pembuatan website.
Siapapun kini bisa membuat website profesional tanpa harus belajar coding selama bertahun-tahun.
Dengan Claude Artifacts untuk proyek cepat dan Claude Code untuk proyek kompleks, prosesnya tinggal mendeskripsikan apa yang ingin dan membiarkan AI execute-nya.
Coba buat website pertama Anda sekarang dengan buka claude.ai dan mulai dengan prompt landing page di atas.
Simpan artikel ini sebagai panduan referensi membuat website dengan Claude kapanpun Anda butuh.
Baca juga artikel kami tentang cara menggunakan Claude untuk debugging code atau perbandingan Claude vs ChatGPT untuk membuat website.
