Claude Design memungkinkan Anda membuat desain, prototipe interaktif, presentasi, dan banyak lagi dengan berbincang dengan Claude. Panduan ini memandu Anda membuat proyek pertama, melakukan iterasi desain, dan memaksimalkan penggunaan alat ini.
Claude Design kini tersedia dalam beta untuk paket Pro, Max, Team, dan Enterprise. Kemampuan ini dinonaktifkan secara default untuk paket Enterprise. Anda dapat menggunakannya di web di claude.ai/design atau dari bilah sisi di Claude Desktop.
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 melakukan iterasi—menyempurnakan melalui percakapan, komentar sebaris, dan langsung di kanvas hingga sempurna.
Alur khas adalah:
Buat proyek.
Lampirkan atau impor sistem desain yang ingin Claude gunakan.
Tambahkan konteks yang relevan (tangkapan layar, basis kode).
Deskripsikan apa yang ingin Anda buat.
Tinjau apa yang Claude hasilkan di kanvas.
Sempurnakan melalui obrolan, edit langsung di kanvas, atau tinggalkan komentar sebaris.
Ekspor atau bagikan ketika Anda puas dengan hasilnya.
Pindah antara Claude Design dan Claude Code
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 buat di Claude Design dimulai dari komponen yang ada. Ketika desain siap menjadi perangkat lunak, Anda dapat menyerahkannya ke Claude Code, yang melanjutkan dari pekerjaan yang ada daripada memulai dari awal dari tangkapan layar.
Jika Anda lebih suka bekerja dari Claude Code, hubungkan server Claude Design MCP untuk membuat dan mengedit desain tanpa meninggalkan terminal Anda:
Tambahkan server:
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
2. Jalankan /design-login untuk masuk.
Setelah Anda terhubung, Anda dapat mengimpor desain ke basis kode Anda, mengekspor kode Anda sebagai prototipe langsung, atau membiarkan Claude membangun semuanya dari awal hingga akhir.
Buat proyek baru
Ketika 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.
Lampirkan atau impor sistem desain Anda
Bawa satu atau beberapa sistem desain dari repositori 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 output-nya sendiri terhadap sistem desain Anda, dan membuat koreksi sebelum Anda melihatnya.
Untuk tim yang lebih besar, peran kustom Claude Design Admin memungkinkan admin menyetujui sistem standar dan mengunci pengeditan, sehingga pekerjaan selalu sesuai dengan pedoman perusahaan Anda.
Tambahkan konteks ke proyek Anda
Semakin banyak konteks yang Anda berikan kepada Claude, semakin baik output Anda. 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 beberapa 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 hero, 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."
Sempurnakan 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 sebaris 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 diambil, tempel umpan balik langsung ke obrolan. Ini adalah solusi yang diketahui untuk masalah intermiten di mana komentar dapat hilang sebelum Claude membacanya.
Edit langsung di kanvas
Gunakan kontrol tata letak kaya untuk pergeseran visual dan estetika cepat, khususnya untuk menyeret, mengubah ukuran, dan menyelaraskan elemen secara langsung.
Kapan menggunakan obrolan vs. komentar vs. edit 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 cepat.
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 mereferensikan iterasi sebelumnya dalam percakapan dengan mudah.
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 ke 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
Kirim ke alat yang sudah Anda gunakan, termasuk Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, dan Wix, dengan lebih banyak tujuan akan segera hadir.
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 dan harga
Claude Design dihitung terhadap batas penggunaan yang sama dengan sisa Claude. Aktivitas Desain ditarik dari kumpulan bersama yang Anda gunakan untuk obrolan, Claude Code, dan Cowork, 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.
Catatan: Claude Design sebelumnya memiliki tunjangan mingguan sendiri, terpisah dari batas penggunaan lainnya. Semua aktivitas Claude Design sekarang dihitung terhadap batas bersama paket Anda.
Tips untuk hasil terbaik
Impor sistem desain lengkap. Impor sistem desain lengkap yang mencakup gaya, font, dan komponen Anda.
Mulai sederhana, kemudian tambahkan kompleksitas. Mulai dengan tata letak dan konten inti, kemudian tambahkan interaksi, kasus tepi, dan polandingan. 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 tentang 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.
Keterbatasan yang diketahui
Claude Design kini tersedia dalam beta. Beberapa hal yang perlu diperhatikan:
Persistensi komentar: Komentar sebaris kadang-kadang tidak muncul di halaman, tetapi Anda masih dapat melihatnya dengan membuka tampilan komentar.
Basis kode besar: Pertimbangkan menautkan repositori yang sangat besar dari Claude Code untuk menghindari lag atau masalah browser. Untuk menyinkronkan sistem desain, gunakan
/design-syncdari Claude Code.Kesalahan obrolan: Jika Anda mengalami kesalahan "chat upstream," coba mulai tab obrolan baru dalam proyek yang sama.
Ketersediaan: Claude Design tersedia di web dan desktop saja.
Pengeditan multi-orang: Dua orang atau lebih mengedit proyek desain pada waktu yang sama masih dasar dan mungkin tidak berfungsi dengan andal.
Impor sistem desain: Impor sistem desain hanya sebaik sumbernya. Basis kode yang berantakan atau file yang tidak lengkap akan muncul dalam output.