Mulai dengan Claude Design

Claude Design memungkinkan Anda membuat desain, prototipe interaktif, one-pager, dan karya visual lainnya dengan mengobrol dengan Claude. Ini adalah salah satu template yang dapat Anda mulai dari artefak, sehingga Anda dapat menggunakannya di chat apa pun, di Claude Code, dan dari tab Artifacts, dengan pengeditan on-canvas dan sistem desain Anda disertakan. Panduan ini memandu Anda membuat desain pertama, melakukan iterasi, dan memaksimalkan penggunaannya. Pelajari lebih lanjut tentang apa itu artefak dan cara menggunakannya.

Panduan ini mengasumsikan sistem desain organisasi Anda sudah diatur, sehingga semua yang Anda buat akan secara otomatis menggunakan warna, tipografi, dan pola komponen merek Anda. Jika Anda adalah pemimpin desain yang perlu mengatur atau memodifikasi sistem desain itu sendiri, lihat Set up your design system in Claude Design.

Buat artefak dengan Claude

Claude Design menggabungkan percakapan dengan kanvas. Anda mendeskripsikan apa yang Anda inginkan, dan Claude menghasilkan desain yang berfungsi di kanvas di samping percakapan. Dari sana, Anda melakukan iterasi—menyempurnakan melalui percakapan, komentar inline, dan langsung di kanvas sampai sempurna.

Alur khas adalah:

Anda dapat berpindah antara bekerja di Claude Design dan Claude Code sambil menjaga pekerjaan Anda tetap tersinkronisasi. Gunakan /design-sync untuk menarik sistem desain Anda, sehingga semua yang Anda bangun di Claude Design dimulai dari komponen yang sudah ada. Ketika desain siap menjadi perangkat lunak, Anda dapat menyerahkannya ke Claude Code, yang melanjutkan dari pekerjaan yang sudah ada daripada memulai dari awal dari tangkapan layar.

Dari Claude Code, gunakan /design untuk mengimpor desain ke basis kode Anda, ekspor kode Anda sebagai prototipe langsung, atau biarkan Claude membangun semuanya dari awal hingga akhir.

Ketika Anda membuat proyek, proyek secara otomatis mewarisi sistem desain organisasi Anda. Anda tidak perlu mengunggah aset merek atau mengonfigurasi apa pun—warna merek, font, dan komponen Anda sudah ada.

Bawa satu atau beberapa sistem desain dari repo GitHub, file desain, unggahan mentah, atau basis kode lokal Anda menggunakan perintah /design-sync di Claude Code. Claude membangun dengan komponen sistem desain nyata Anda, memeriksa outputnya sendiri terhadap sistem desain Anda, dan membuat koreksi sebelum Anda melihatnya.

Di paket Enterprise, admin dapat memesan penerbitan, menetapkan default, dan menghapus sistem desain untuk pengguna tertentu. Pelajari lebih lanjut di Artifacts admin guide for Team and Enterprise plans.

Sistem desain yang Anda buat di versi standalone di claude.ai/design dapat dipindahkan, sehingga Claude dapat menggunakannya di chat apa pun, termasuk di Claude Code. Migrasikan sebelum versi standalone ditutup pada 14 Desember 2026. Pelajari lebih lanjut di Migrate from standalone Claude Design to Claude.

Semakin banyak konteks yang Anda berikan kepada Claude, semakin baik output Anda. Anda dapat melampirkan materi referensi kapan saja selama proyek.

Anda tidak perlu menjadi desainer untuk mendapatkan hasil yang luar biasa. Jadilah spesifik tentang apa yang Anda bangun, untuk siapa, dan apa yang paling penting.

Prompt yang baik mencakup tujuan (apa yang Anda bangun), tata letak (bagaimana hal-hal harus diatur), konten (informasi apa yang akan ditampilkan), dan audiens (siapa yang akan menggunakannya). Claude juga akan mengajukan pertanyaan klarifikasi jika memerlukan informasi lebih lanjut.

Berikut adalah beberapa contoh prompt yang berfungsi dengan baik:

Generasi pertama adalah titik awal. Nilai sebenarnya datang dari iterasi.

Chat paling baik untuk perubahan luas yang mempengaruhi desain keseluruhan:

Anda juga dapat meminta Claude untuk menjelaskan keputusan desainnya, menyarankan perbaikan, atau meninjau desain untuk aksesibilitas.

Komentar sebaris memungkinkan Anda mengklik langsung pada bagian tertentu kanvas dan meminta perubahan yang ditargetkan. Ini lebih cepat daripada mendeskripsikan lokasi dalam obrolan.

Contoh komentar sebaris yang baik:

Gunakan kontrol tata letak kaya untuk perubahan visual dan estetika yang cepat, khususnya untuk menyeret, mengubah ukuran, dan menyelaraskan elemen secara langsung.

Gunakan komentar untuk perubahan yang ditargetkan pada tingkat komponen ("perbaiki tombol ini," "sesuaikan spasi ini"). Gunakan obrolan untuk perubahan struktural, bagian baru, atau apa pun yang memerlukan penjelasan atau konteks. Edit langsung untuk perubahan visual dan estetika yang cepat.

Untuk masuk dan keluar dari panel artefak, dan untuk berkomentar dari header panel, lihat Gunakan artefak dengan keyboard atau pembaca layar. Artikel itu juga menjelaskan apa arti fokus, apa yang harus dilakukan di laptop Mac atau di Safari, dan bagaimana tabel menampilkan kunci.

Desain adalah kanvas papan seni. Setiap papan seni menyimpan lapisan, seperti teks, bentuk, dan gambar, dan lapisan dapat menyimpan lapisan lain di dalamnya.

Tekan F6 untuk berpindah ke area berikutnya dan Shift+F6 untuk berpindah ke area sebelumnya. Cmd+F6 (Ctrl+F6 di Windows) berfungsi sebagai pengganti F6, dengan atau tanpa Shift. Area-areanya adalah bilah atas, kanvas, dan panel properti. Ketika sesuatu dipilih dan panel properti ditutup, F6 juga berhenti di toolbar yang mengapung di atas pilihan.

Tekan Tab sampai Anda mencapai judul papan seni. Namanya mencakup posisinya, seperti papan seni 1 dari 7. Dari judul, Space memilih papan seni, dan Return masuk ke dalamnya, ke lapisannya. Setelah masuk:

Ketika Anda mengedit lapisan teks, tekan Escape atau Tab ketika selesai. Saat Anda bergerak, editor memberi tahu pembaca layar apa yang dipilih dan posisinya, seperti 1 dari 5.

Untuk memindahkan papan seni, pilih (Space pada judulnya) dan tekan tombol panah. Ini bergerak satu piksel pada satu waktu, atau 10 dengan Shift. Di dalam papan seni, tombol panah melakukan sesuatu yang lain: dengan atau tanpa Shift, mereka memindahkan Anda ke lapisan berikutnya atau sebelumnya dan tidak pernah memindahkan lapisan itu sendiri. Untuk memindahkan lapisan yang Anda gunakan, tahan Option (Alt di Windows) dan tekan tombol panah. Lapisan yang ditempatkan dengan bebas bergerak satu piksel, atau 10 dengan Shift. Lapisan yang merupakan bagian dari baris, kolom, atau kisi menukar tempat dengan tetangganya: Atas atau Kiri memindahkannya lebih awal, dan Bawah atau Kanan memindahkannya lebih lambat. Editor mengirimkan konfirmasi singkat tentang perpindahan ke pembaca layar.

Dengan papan seni atau lapisan yang dipilih, tekan Cmd+D (Ctrl+D di Windows) untuk menduplikatnya, dan Delete atau Backspace untuk menghapusnya. Tekan Cmd+Z (Ctrl+Z di Windows) untuk membatalkan. Editor mengirimkan konfirmasi singkat untuk masing-masing ke pembaca layar.

Toolbar yang mengapung di atas pilihan hanya ada saat panel properti ditutup, dan F6 mencapainya. Di dalamnya, tombol panah berpindah di antara kontrolnya, Home dan End berpindah ke yang pertama dan terakhir, dan Escape kembali ke kanvas dengan pilihan Anda tetap terjaga. Anda juga dapat mencapai setiap kontrol dengan Tab.

Cmd+\ (Ctrl+\ di Windows) membuka panel properti dan memindahkan fokus ke dalamnya. Menekannya lagi menutup panel, dan fokus kembali ke tombol "Properti" di bilah atas. Pop-up warna, font, dan lainnya di panel mengambil fokus saat terbuka, dan Escape menutupnya. Ketika Anda memilih warna teks, pemilih warna memberi tahu Anda apakah kontrasnya terhadap latar belakang baik atau buruk.

Dalam daftar lapisan panel properti: tombol panah Atas dan Bawah berpindah di antara baris, tombol panah Kanan memperluas baris dan kemudian masuk ke dalamnya, tombol panah Kiri menutupnya dan kemudian keluar, Return atau Space memilih lapisan itu di kanvas, dan Return lagi pada lapisan teks mengeditnya.

Jika Anda ingin menjelajahi arah berbeda tanpa kehilangan pekerjaan saat ini, katakan kepada Claude: "Simpan apa yang kami miliki dan coba pendekatan yang sama sekali berbeda." Claude akan menyimpan proyek Anda saat ini dan mengonfirmasi tempat penyimpanannya, sehingga Anda dapat dengan mudah mereferensikan iterasi sebelumnya dalam percakapan.

Setelah desain Anda siap, Anda dapat membagikannya dengan rekan kerja atau mengekspornya untuk digunakan di tempat lain. Format yang tepat tergantung pada kasus penggunaan Anda—apakah Anda mendapatkan umpan balik pemangku kepentingan, menyerahkan kepada teknik, atau mempresentasikan kepada grup.

Gunakan tombol "Ekspor" di sudut kanan atas saat melihat proyek Anda untuk memilih dari format ekspor berikut.

Desain dimulai pribadi untuk Anda. Untuk membagikan satu, klik "Bagikan" dan pilih siapa yang dapat membukanya dan apa yang dapat mereka lakukan. Orang yang Anda bagikan desain dengannya dapat melihat, berkomentar, atau mengeditnya. Pelajari lebih lanjut tentang berbagi artefak.

Claude Design dihitung terhadap batas penggunaan yang sama dengan sisa Claude. Aktivitas Desain ditarik dari kumpulan yang sama dengan sisa pekerjaan Anda dengan Claude, termasuk Claude Code, jadi tidak ada tunjangan Claude Design terpisah untuk dilacak. Proyek kompleks dengan basis kode besar atau banyak iterasi menggunakan lebih banyak penggunaan.

Jika Anda mencapai batas penggunaan Anda, Claude Design tidak tersedia sampai batas Anda disetel ulang. Jika Anda telah mengaktifkan kredit penggunaan, Anda dapat terus bekerja setelah mencapai batas yang disertakan. Pelajari lebih lanjut tentang cara kerja batas penggunaan dan panjang.

Beberapa hal yang perlu diperhatikan: