Claude Design oleh Anthropic Labs memungkinkan Anda membuat desain, prototipe interaktif, presentasi, dan lainnya dengan berbincang dengan Claude. Panduan ini memandu Anda membuat proyek pertama, mengiterasi desain, dan memaksimalkan penggunaan alat ini.
Claude Design oleh Anthropic Labs kini tersedia dalam pratinjau penelitian untuk paket Pro, Max, Team, dan Enterprise. Kemampuan ini dinonaktifkan secara default untuk paket Enterprise.
Panduan ini mengasumsikan sistem desain organisasi Anda telah 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 Atur sistem desain Anda di Claude Design.
Cara kerja Claude Design
Claude Design memiliki dua area utama: antarmuka obrolan di sebelah kiri dan kanvas di sebelah kanan. Anda mendeskripsikan apa yang Anda inginkan dalam obrolan, dan Claude menghasilkan desain yang berfungsi di kanvas. Dari sana, Anda mengiterasi—menyempurnakan melalui percakapan dan komentar sebaris hingga sempurna.
Alur khas adalah:
Buat proyek dan tambahkan konteks yang relevan (tangkapan layar, basis kode).
Deskripsikan apa yang ingin Anda bangun.
Tinjau apa yang Claude hasilkan di kanvas.
Iterasi menggunakan pesan obrolan dan komentar sebaris.
Ekspor atau bagikan ketika Anda puas dengan hasilnya.
Buat proyek baru
Saat Anda membuat proyek, proyek tersebut secara otomatis mewarisi sistem desain organisasi Anda. Anda tidak perlu mengunggah aset merek atau mengonfigurasi apa pun—warna merek, font, dan komponen Anda sudah siap.
Tambahkan konteks ke proyek Anda
Semakin banyak konteks yang Anda berikan kepada Claude, semakin baik hasilnya. Anda dapat melampirkan materi referensi kapan saja selama proyek.
Tangkapan layar, gambar, atau aset yang ada: Unggah tangkapan layar desain yang ada, produk pesaing, wireframe, atau inspirasi visual. Anda juga dapat melampirkan dek slide atau dokumen yang ada dengan gaya desain yang ingin Anda replikasi. Berguna untuk permintaan "buat terlihat seperti ini".
Basis kode dan file desain yang ada: Tautkan repositori kode sehingga Claude memahami komponen, arsitektur, dan pola gaya yang ada. Ini membuat prototipe lebih siap produksi sejak awal. Impor juga mendukung berbagai cara untuk mengunggah pekerjaan desain produk yang ada.
Tulis prompt yang efektif
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:
"Buat dasbor yang menampilkan pendapatan bulanan dengan filter untuk wilayah dan lini produk."
"Desain alur onboarding aplikasi seluler dengan 4 layar yang memandu pengguna melalui fitur inti kami."
"Bangun halaman arahan untuk produk API baru kami dengan bagian pahlawan, contoh kode, dan harga."
"Buat formulir untuk mengumpulkan umpan balik pelanggan dengan pertanyaan bersyarat berdasarkan kategori."
"Desain alat internal untuk tim ops kami untuk meninjau dan menyetujui pengajuan konten."
Iterasi pada desain Anda
Generasi pertama adalah titik awal. Nilai sebenarnya datang dari iterasi.
Menggunakan obrolan
Obrolan paling baik untuk perubahan luas yang mempengaruhi desain keseluruhan:
"Buat skema warna lebih gelap dan lebih minimal."
"Atur ulang dasbor sehingga metrik berada di baris atas dan bagan berada di bawah."
"Tambahkan panel pengaturan di sisi kanan."
"Tunjukkan saya 2–3 tata letak alternatif untuk halaman ini."
Anda juga dapat meminta Claude menjelaskan keputusan desainnya, menyarankan perbaikan, atau meninjau desain untuk aksesibilitas.
Menggunakan komentar sebaris
Komentar sebaris memungkinkan Anda mengklik langsung pada bagian tertentu dari kanvas dan meminta perubahan yang ditargetkan. Ini lebih cepat daripada mendeskripsikan lokasi dalam obrolan.
Contoh komentar yang baik:
"Buat padding tombol ini lebih besar."
"Ubah ini menjadi dropdown alih-alih tombol radio."
"Gunakan warna merek utama di sini."
"Buat bagian ini dapat disembunyikan."
Catatan: Jika komentar Anda tidak terdeteksi, tempel umpan balik langsung ke obrolan. Ini adalah solusi yang diketahui untuk masalah intermiten di mana komentar dapat hilang sebelum Claude membacanya.
Kapan menggunakan obrolan vs. komentar
Gunakan komentar untuk perubahan yang ditargetkan pada tingkat komponen ("perbaiki tombol ini," "sesuaikan spasi ini"). Gunakan obrolan untuk perubahan struktural, bagian baru, pergeseran estetika, atau apa pun yang memerlukan penjelasan atau konteks.
Kelola versi dan revisi
Jika Anda ingin menjelajahi arah yang 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 saat ini Anda dan mengonfirmasi di mana proyek tersebut disimpan, sehingga Anda dapat dengan mudah mereferensikan iterasi sebelumnya dalam percakapan.
Ekspor dan bagikan
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.
Unduh sebagai .zip
Ekspor sebagai PDF
Ekspor sebagai PPTX
Kirim ke Canva
Ekspor sebagai HTML mandiri
Serahkan ke Claude Code
Kirim ke agen pengkodean lokal
Kirim ke Claude Code Web
Anda juga dapat membagikan proyek dalam organisasi Anda menggunakan tautan yang dapat dibagikan. Opsi berbagi mencakup akses hanya tampilan, komentar, dan edit.
Penggunaan langganan dan harga
Lihat di sini untuk detail selengkapnya: Penggunaan langganan Claude Design dan harga.
Tips untuk hasil terbaik
Mulai sederhana, kemudian tambahkan kompleksitas. Mulai dengan tata letak dan konten inti, kemudian tambahkan interaksi, kasus tepi, dan polandia. Claude merespons dengan baik terhadap permintaan inkremental.
Jadilah spesifik dalam umpan balik Anda. "Ini tidak terlihat benar" sulit untuk ditindaklanjuti. "Ketatkan spasi antara bidang formulir menjadi 8px" memberikan Claude persis apa yang dibutuhkannya.
Referensikan sistem desain Anda. Jika Anda tahu komponen ada dalam sistem merek Anda, sebutkan dengan nama: "Gunakan komponen Tombol Utama" atau "Terapkan pola tata letak Kartu."
Pikirkan responsivitas sejak dini. Sebutkan apakah desain Anda perlu berfungsi di seluler, tablet, dan desktop, atau hanya salah satunya.
Minta variasi. Jika Anda tidak yakin tentang arah, minta Claude untuk menunjukkan 2–3 opsi. Membandingkan alternatif jauh lebih cepat daripada menebak.
Minta umpan balik Claude. Claude dapat meninjau desain Anda untuk aksesibilitas, rasio kontras, hierarki informasi, dan kegunaan umum. Perlakukan sebagai kolaborator desain, bukan hanya generator.
Batasan yang diketahui
Claude Design tersedia sebagai pratinjau eksperimental dari Anthropic Labs. Beberapa hal yang perlu diperhatikan:
Persistensi komentar: Komentar sebaris kadang-kadang hilang sebelum Claude membacanya. Untuk mengatasi ini, tempel teks komentar ke dalam obrolan.
Simpan kesalahan dalam tampilan kompak: Mode tata letak kompak dapat memicu kesalahan penyimpanan. Jika ini terjadi, beralih ke tampilan penuh dan coba lagi.
Basis kode besar: Menautkan repositori yang sangat besar dapat menyebabkan lag atau masalah browser. Tautkan subdirektori tertentu daripada seluruh monorepo.
Kesalahan obrolan: Jika Anda mengalami kesalahan "chat upstream", coba mulai tab obrolan baru dalam proyek yang sama.