Poveku
Produk Digital
Kelas Claude Materi 7 dari 24 Tingkat: dasar Status: Siap

Artifacts di Claude

Progres Kelas Claude: Materi 7 dari 24 (29%)
Status: SIAP Dicek: 2026-10-21 Paket: Semua paket (Gratis, Pro, Team)
Gambar Pendukung: Ekosistem Claude 5.5: Sonnet, Opus & MCP (Artifacts di Claude)
Infografis Ekosistem Anthropic
Visual antarmuka kerja Claude 5.5 (Sonnet & Opus 5.5) yang menampilkan panel Artifacts interaktif untuk preview kode/SVG/HTML live dan integrasi alat eksternal Model Context Protocol (MCP).
Visual Materi: Visual antarmuka kerja Claude 5.5 (Sonnet & Opus 5.5) yang menampilkan panel Artifacts interaktif untuk preview kode/SVG/HTML live dan integrasi alat eksternal Model Context Protocol (MCP). Klik gambar untuk membuka tampilan resolusi penuh di tab baru.

3.7 Artifacts di Claude

Tujuan belajar

  • Memahami konsep dan fungsi panel kerja Artifacts.
  • Menghasilkan komponen React, visualisasi HTML/SVG, dan diagram Mermaid.
  • Menyalin, mengedit, dan membagikan Artifacts interaktif.

Yang perlu disiapkan

  • Akses ke claude.ai di desktop atau tablet.

Apa fitur ini dan untuk apa

Artifacts adalah fitur unggulan Claude yang membuka jendela panel kerja khusus di sebelah kanan percakapan ketika model menghasilkan konten mandiri yang substansial (seperti kode program di atas 15 baris, dokumen mandiri, SVG, komponen React, atau diagram Mermaid).

Di dalam panel Artifacts, kode HTML, CSS, JavaScript, dan React langsung dirender secara langsung (live preview). Anda dapat berinteraksi dengan tombol-tombol aplikasi, melihat animasi diagram, menyalin kode, mengunduh file, atau meminta Claude merevisi bagian tertentu tanpa memenuhi alur obrolan chat utama.

Cara memakai

  1. Minta Claude membuat komponen visual (misal: "Buatkan kalkulator cicilan motor interaktif menggunakan HTML dan JavaScript").
  1. Perhatikan panel Artifacts yang otomatis terbuka di sisi kanan.
  1. Klik tab "Preview" untuk mencoba kalkulator secara langsung di browser.
  1. Klik tab "Code" untuk melihat atau menyalin kode sumbernya.
  1. Minta revisi di chat (misal: "Ubah tombol menjadi warna biru dongker"): Artifacts akan langsung terbarui secara live.

Contoh nyata

Skenario: Membuat diagram alur (flowchart) proses pengajuan cuti karyawan menggunakan diagram Mermaid.

Prompt:

Buatkan diagram Mermaid flowchart proses pengajuan cuti tahunan dari pengajuan staf, review atasan, approval HRD, hingga penerbitan form izin.

Hasil Analisis Model:
Artifacts langsung menampilkan diagram grafis alur kerja yang interaktif dan mudah dibaca oleh seluruh divisi kantor.

Analisis Efektivitas:
Menghemat waktu berjam-jam menggambar diagram alur secara manual di software grafis.

Panduan Praktik Terbaik & Rekomendasi Alur Kerja

Untuk memaksimalkan nilai tambah dari materi "Artifacts di Claude", terapkan tiga prinsip kerja profesional berikut:

  1. Penyaringan Konteks yang Bersih: Selalu pastikan dokumen atau prompt yang Anda masukkan bebas dari informasi rahasia yang terikat perjanjian kerahasiaan ketat, kecuali Anda telah mengonfigurasi lingkungan akun berbayar dengan jaminan zero data training.

  1. Pengujian Output Bertahap: Jangan langsung menyalin hasil generasi mentah ke dokumen final. Lakukan evaluasi cepat pada aspek logika kalimat, keabsahan angka statistik, dan kesesuaian gaya bahasa dengan audiens penerima di Indonesia.

  1. Dokumentasi Prosedur Kerja: Catat pola prompt, parameter instruksi, dan berkas rujukan yang terbukti menghasilkan keluaran paling memuaskan sebagai standar operasional prosedur (SOP) internal Anda atau tim kerja Anda.

Batasan fitur ini

  • Peramban seluler dengan layar sempit akan menampilkan Artifacts secara bertumpuk alih-alih berdampingan.
  • Pustaka JavaScript eksternal yang diizinkan di panel preview dibatasi untuk alasan keamanan sandbox.

Latihan

Minta Claude membuatkan kartu nama digital interaktif dengan tombol media sosial di panel Artifacts, lalu uji coba tampilannya.

Cek pemahaman

Pertanyaan 1

Apa keuntungan utama melihat kode program di panel Artifacts dibanding di gelembung chat biasa?

A. Kode dapat langsung diuji dan dirender secara live preview interaktif di jendela samping
B. Komputer menjadi lebih dingin
C. Menghapus riwayat browsing
D. Mengubah bahasa laptop

Kunci Jawaban & Penjelasan

Jawaban Benar: A

Penjelasan: Panel Artifacts merender live preview visual dari kode web, SVG, React, dan diagram secara langsung.

Pertanyaan 2

Apa manfaat utama dari menerapkan pemahaman Artifacts di Claude dalam produktivitas kerja harian?

A. Mempercepat penyelesaian pekerjaan secara akurat dan meminimalkan kesalahan manual
B. Menghapus data kantor
C. Mematikan komputer
D. Mengabaikan tanggung jawab profesional

Kunci Jawaban & Penjelasan

Jawaban Benar: A

Penjelasan: Penerapan Artifacts di Claude yang benar membantu standarisasi mutu dan efisiensi waktu kerja.

Pertanyaan 3

Faktor apa yang paling krusial untuk diverifikasi manusia saat menggunakan Artifacts di Claude?

A. Kesesuaian fakta angka dan kepatuhan terhadap regulasi hukum/etika lokal yang berlaku
B. Kecepatan kipas laptop
C. Warna casing komputer
D. Jumlah baris kalimat di monitor

Kunci Jawaban & Penjelasan

Jawaban Benar: A

Penjelasan: Verifikasi manusia tetap menjadi jangkar utama akurasi faktual dan kepatuhan etika.

Kesalahan umum

  • Menutup panel Artifacts tanpa mengunduh file kode yang sudah disempurnakan.

Sumber yang dicek

  • https://support.claude.com/en/articles/12138966-release-notes
  • https://claude.com/product/overview
  • https://support.claude.com/en/articles/11176164-use-connectors-to-extend-claude-s-capabilities
  • https://www.anthropic.com/news/claude-design-anthropic-labs

Selesai mempelajari materi ini?

Lanjutkan ke materi berikutnya untuk menyelesaikan silabus Kelas Claude.

← Pencarian web di Claude Lanjut Materi Berikutnya: Membuat dan mengedit file (spreadsheet, slide, dokumen, PDF) →
← Kurikulum Kelas Claude (24 Materi) Semua Kelas AI (73 Materi) →