Apa Itu Claude Artifacts?
Artifacts adalah panel yang muncul di sebelah kanan layar saat kamu chat di claude.ai. Panel ini menampilkan output Claude yang sudah terstruktur (dokumen, kode, grafik, kuis interaktif, kalkulator), bukan sekadar teks di jendela chat. Kebanyakan orang pakai Claude kayak chatbot biasa: tanya → dapat jawaban teks → copy paste. Padahal dengan Artifacts, Claude bisa bangun alat kerja yang langsung bisa kamu pakai.
Apakah Perlu Setup Dulu?
Tidak. Artifacts sudah aktif secara default untuk semua akun Claude, termasuk free plan. Panel muncul otomatis setiap kali Claude menghasilkan output yang cukup panjang dan terstruktur (biasanya lebih dari 15 baris). Kamu tidak perlu setting apapun. Kalau panel tidak muncul, kamu bisa minta Claude secara eksplisit:
"Tampilkan hasilnya sebagai Artifact"
Apa Saja yang Bisa Dibuat?
Artifacts mendukung beberapa tipe output:
- Dokumen Markdown: laporan, proposal, notulen rapat
- HTML/CSS: halaman web sederhana, template email
- React component: aplikasi mini interaktif (kalkulator, kuis, dashboard, tabel dengan filter)
- SVG: grafik vektor, diagram, ilustrasi
- Mermaid diagram: flowchart, mindmap, diagram alur
- Kode: Python, JavaScript, dan bahasa lainnya dengan preview
Step-by-Step: Dari Teks Biasa ke Artifact Interaktif
Step 1 — Buka claude.ai
Daftar gratis pakai akun Google di claude.ai. Free plan sudah bisa pakai Artifacts.
Step 2 — Ketik prompt yang spesifik
Bedanya ada di cara kamu meminta. Contoh: ❌ Prompt biasa:
Buatkan laporan penjualan bulan ini.
✅ Prompt untuk Artifact:
Buatkan laporan penjualan bulan Juni 2026 sebagai dokumen terstruktur.
Format: judul, ringkasan eksekutif, tabel data per kategori produk,
kesimpulan dan rekomendasi. Tampilkan rapi dengan heading dan tabel.
Hasilnya: dokumen terformat muncul di panel kanan. Bukan teks mentah di chat.
Step 3 — Minta output interaktif (opsional, tapi powerful)
Kalau kamu mau output yang bisa diklik dan berinteraksi, tambahkan kata "React artifact" di prompt:
Buatkan kalkulator margin keuntungan sebagai React artifact.
Input: harga beli, biaya operasional, target margin.
Output: harga jual yang disarankan.
Yang muncul: kalkulator yang bisa langsung kamu isi angka, bukan instruksi cara hitung.
Step 4 — Iterasi dan revisi
Kalau hasilnya belum sesuai, langsung minta revisi di chat. Artifact akan diperbarui di panel yang sama:
"Tambahkan kolom persentase perubahan di tabel" "Ubah warna tabel jadi lebih gelap" "Perbesar font angka di kalkulator"
Step 5 — Simpan atau bagikan
Di pojok kanan panel Artifacts, ada beberapa opsi:
- Copy → salin isi artifact ke clipboard
- Download → unduh sebagai file mentah (Markdown/HTML)
- Share/Publish → bagikan lewat link publik
- Save as PDF → Print di browser → pilih "Save as PDF" (workaround)
💡 Catatan: tombol Download mengunduh file dalam format Markdown atau HTML, bukan langsung .docx. Kalau butuh format Word, minta Claude via fitur Code Execution: "Buatkan file Word dari konten ini."
Contoh Prompt per Profesi
Untuk laporan dan dokumen (akuntan, PNS, admin, dosen)
Buatkan laporan [jenis laporan] untuk periode [bulan/tahun].
Data: [paste data kamu].
Format: judul, ringkasan eksekutif, tabel per kategori,
kesimpulan. Tampilkan sebagai dokumen terstruktur.
Untuk data dan grafik interaktif (finance, analis, researcher)
Aku upload data [jenis data]. Buatkan sebagai React artifact
menggunakan Recharts: grafik batang per kategori + grafik tren bulanan.
Buat interaktif — bisa di-hover untuk lihat detail angka.
⚠️ Penting: tanpa kata "React artifact" dan "Recharts", Claude mungkin menghasilkan grafik statis (gambar), bukan grafik interaktif.
Untuk konten dan perencanaan (kreator, coach, pemilik bisnis)
Buatkan content calendar 1 bulan untuk akun [niche] sebagai React artifact.
Tabel interaktif: kolom tanggal, topik, format konten, hook, CTA.
Bisa difilter per minggu.
Untuk materi belajar (guru, dosen, trainer)
Buatkan kuis interaktif sebagai React artifact untuk topik [topik],
level [SMA/kuliah/pelatihan]. 20 soal pilihan ganda, 4 opsi.
Kalau salah, tampilkan penjelasan. Di akhir, tampilkan skor total.
Batasan yang Perlu Kamu Tahu
- Artifacts tidak bisa akses internet secara real-time
- Tidak ada backend atau database: data hanya ada selama sesi chat
- Untuk output yang sangat kompleks, mungkin butuh 2–3 iterasi prompt
- Free plan punya limit pesan sekitar 15–40 pesan per 5 jam
Ringkasan
| Tipe Output | Cara Minta |
|---|---|
| Dokumen terformat | "Tampilkan sebagai dokumen terstruktur" |
| Aplikasi/tool interaktif | "Buatkan sebagai React artifact" |
| Grafik interaktif | "React artifact menggunakan Recharts" |
| Kuis dengan skor | "Kuis interaktif sebagai React artifact" |
| Diagram/flowchart | "Tampilkan sebagai diagram Mermaid" |
Kunci utamanya: Claude nggak cuma bisa jawab pertanyaan. Dengan prompt yang tepat, dia bisa bangun alat kerja yang langsung bisa kamu pakai.
Tutorial ini bagian dari seri @kayadigital.ai. Panduan praktis Claude AI untuk profesional Indonesia.