Apa Itu Claude Design? Penjelasan Alat Desain AI dari Anthropic

Bagaimana Cara Kerja Claude Design?

Dua panel: chat di kiri, kanvas langsung di kanan. Anda menulis prompt, Claude menghasilkan desain di kanvas, dan Anda terus menyempurnakannya. Anthropic menggambarkan siklusnya dalam lima langkah: 

1. Buat proyek dengan konteks yang relevan
2. Jelaskan apa yang Anda inginkan
3. Tinjau keluarannya
4. Iterasi melalui chat dan komentar
5. Ekspor atau bagikan

Yang menonjol bagi saya adalah perilaku pertanyaan klarifikasi. Saat prompt tidak spesifik, Claude dapat berhenti untuk menanyakan hal yang masih diperlukan alih-alih langsung menggambar asumsi pertamanya.

Panel chat di kiri, kanvas hasil di kanan. Gambar oleh Penulis.

Sekarang mari lihat bagaimana tiap bagian siklus itu terasa dalam praktik.

Menyiapkan proyek dan menambahkan konteks

Proyek baru mewarisi design system organisasi yang telah dipublikasikan, sehingga aset merek tidak perlu diunggah ulang setelah penyiapan itu ada. 

Panduan penyiapan merekomendasikan memberikan konteks nyata kepada Claude sejak awal: tangkapan layar, mockup, deck slide dengan gaya yang Anda sukai, dan repositori kode jika ada. Claude dapat mengajukan pertanyaan klarifikasi sebelum menggambar jika membutuhkan lebih banyak informasi, yang membantu menyingkap detail yang Anda lupa sebutkan.

Prompt yang baik mencakup empat hal: tujuan, tata letak, konten, dan audiens. Contoh prompt termasuk "Buat dasbor yang menampilkan pendapatan bulanan dengan filter untuk wilayah dan lini produk" dan "Rancang alur onboarding aplikasi seluler dengan 4 layar."

Beriterasi di kanvas

Beberapa jalur mendorong desain maju setelah draf pertama. 

• Chat menangani perubahan luas (tema lebih gelap, dua atau tiga alternatif tata letak)
• Komentar inline menargetkan elemen tertentu tanpa menjelaskan posisinya
• Pengeditan teks langsung memperbaiki copy tanpa prompting
• Penggeser penyesuaian khusus menangani jarak, warna, dan tweak tata letak secara langsung

Satu keanehan di hari pertama: komentar kadang menghilang sebelum dibaca Claude. Menempelkan teks ke chat adalah solusi sementara yang didokumentasikan. Mengganggu, tetapi lebih baik diketahui sebelum Anda mengandalkan komentar untuk ulasan.

Versi, berbagi, dan ekspor

Untuk mempertahankan draf saat ini dan mencoba sesuatu yang berbeda, Anthropic menyarankan memberi tahu Claude seperti "simpan yang kita punya dan coba pendekatan yang benar-benar berbeda." 

Berbagi dibatasi organisasi, dengan akses privat, hanya lihat, komentar, dan edit; akses edit memungkinkan rekan tim mengubah desain dan mengobrol dengan Claude dalam percakapan yang sama. 

Menu Ekspor berada di kanan atas dan mencakup format file umum, handoff ke Canva, serta paket handoff ke Claude Code.

Apa yang Bisa Anda Bangun dengan Claude Design?

Pengumuman peluncuran menyebutkan enam jenis output dari penggunaan pelanggan pra-rilis. Berikut masing-masing dengan catatan singkat:

• Prototipe realistis: mengubah mockup statis menjadi prototipe interaktif yang dapat Anda bagikan dan uji pengguna tanpa code review atau pull request.
• Wireframe dan mockup produk: alur fitur yang dapat Anda serahkan ke Claude Code atau ke desainer untuk dipoles.
• Eksplorasi desain: beberapa arah dicoba dengan cepat, untuk desainer yang biasanya harus menghemat waktu eksplorasi.
• Pitch deck dan presentasi: dari kerangka kasar hingga deck sesuai merek, dengan ekspor PPTX atau opsi kirim ke Canva.
• Materi pemasaran: landing page, aset sosial, dan visual kampanye.
• Frontier design: prototipe bertenaga kode dengan suara, video, shader, 3D, atau AI bawaan. Ini yang paling eksperimental dari keenamnya, dan saya akan kembali pada pertanyaan terbukanya di bagian batasan.

Prototipe onboarding seluler yang dihasilkan pada kanvas. Gambar oleh Penulis.

Panduan admin menambahkan microsite dan landing page sebagai kategori terpisah. Testimoni peluncuran Anthropic berfokus pada kecepatan dan peralihan dari ide ke prototipe dalam satu pertemuan; anggap itu sebagai ilustrasi, bukan universal, karena dokumen yang sama menandai sisi kasar pada output yang lebih eksperimental.

Bagaimana Claude Design Menggunakan Merek dan Design System

Bagian ini penting karena mengubah output default. Anthropic memperingatkan bahwa tanpa design system, tim akan mendapatkan output yang "fungsional namun generik". Dengan sistem yang dipublikasikan, proyek baru akan menggunakan warna, tipografi, dan komponen Anda. Sisi negatifnya, sistem yang diekstrak hanya sebaik aset sumber yang Anda unggah, sehingga input berantakan akan menghasilkan sistem awal yang berantakan.

Sekarang mari lihat bagaimana sistem tersebut dibangun.

Bagaimana sistem dibuat

Penyiapan dilakukan sekali per organisasi. Artikel design system mengulas empat langkah: buat organisasi Anda, unggah aset merek dan produk, tinjau hasil generasi Claude, dan publikasikan untuk tim. Materi sumber bisa berupa repositori kode, file desain yang ada, deck slide yang mencerminkan identitas visual Anda, atau aset individual seperti logo dan file palet. Satu sumber sudah cukup untuk mulai.

Anthropic mengatakan sistem yang dihasilkan biasanya mencakup palet warna, skala tipografi, komponen (tombol, kartu, navigasi), dan pola tata letak. Uji dengan prompt seperti "Buat landing page untuk [produk Anda]" untuk melihat bagaimana merek Anda muncul dalam praktik.

Tinjauan design system dengan token yang diekstrak. Video oleh Penulis.

Publikasi, banyak sistem, dan pembaruan

Setelah Anda puas, aktifkan toggle "Published" agar proyek baru di organisasi tersebut mengambilnya secara default. Tim dapat menyimpan lebih dari satu sistem untuk sub-merek atau lini produk terpisah. Untuk memperbarui, artikel design system mengarahkan pengguna ke tombol "Remix", yang membuka chat di mana Claude dapat mengubah bagiannya.

Panduan admin jelas tentang urutannya: menyalakan Claude Design tanpa sistem yang dipublikasikan menghasilkan output "fungsional namun generik", itulah mengapa rekomendasi peluncuran menempatkan penyiapan design system terlebih dahulu.

Jenis Input Apa yang Diterima Claude Design?

Anda tidak dibatasi pada prompt satu baris. Claude Design menerima beberapa jenis input yang saling melengkapi, dan konteks yang lebih nyata cenderung menghasilkan draf pertama yang lebih baik.

Input yang didokumentasikan saat ini mencakup:

• Prompt teks biasa di panel chat.
• Tangkapan layar, gambar, atau aset yang ada, termasuk deck slide dan dokumen dengan gaya yang ingin Anda tiru.
• Dokumen dalam format DOCX, PPTX, dan XLSX, disebutkan dalam posting peluncuran.
• Codebase, baik dengan menautkan repositori kode atau melampirkan folder lokal melalui alur impor.
• Web capture: Anda dapat menangkap elemen dari situs web yang ada, sehingga Claude dapat meniru pola antarmuka nyata dengan lebih dekat.

Dua hal sering dilaporkan keliru. Anthropic menyebut "file desain yang ada" tetapi tidak mencantumkan format asli alat desain, dan saat ini tidak ada klaim impor atau ekspor Figma native; menu ekspor tidak menyertakan file .fig . Jika alur kerja Anda bergantung pada bolak-balik dengan Figma, itu perlu dicek pada produk live sebelum Anda berkomitmen.

Jika draf pertama belum tepat sasaran, kembali ke daftar periksa empat bagian tadi: tujuan, tata letak, konten, dan audiens.

Claude Design vs. Claude Code

Keduanya berbagi nama Claude, model dasar, dan jembatan handoff, tetapi bukan alat yang sama. Mencampuradukkannya adalah salah satu kebingungan paling umum yang saya lihat sejak peluncuran. Namanya terdengar mirip; produknya mengerjakan pekerjaan yang berbeda.

Mari lihat perbedaannya yang sebenarnya.

Untuk apa masing-masing alat?

Claude Design adalah produk web untuk membuat dan menyempurnakan output visual di kanvas: prototipe, deck, microsite, dan halaman pemasaran. Ia dapat membaca repositori kode untuk memahami merek Anda, tetapi tidak mengedit codebase Anda atau menjalankan perintah.

Claude Code adalah alat agentic coding. Ikhtisar resminya menggambarkannya sebagai alat yang membaca codebase Anda, mengedit file, dan menjalankan perintah di dalam alur kerja pengembangan Anda yang ada. Ia berjalan di terminal, IDE, aplikasi desktop, atau browser Anda, dan tugasnya adalah mengerjakan kode. Pekerjaannya berbeda, prosesnya sama.

Bagaimana hubungan Claude Design dan Claude Code?

Saat proyek siap dibangun, menu Ekspor memiliki handoff ke Claude Code, baik ke agen pengodean lokal maupun ke Claude Code Web. Anthropic mengatakan Claude memaketkan intent desain ke dalam bundel yang diambil agen penerima dengan satu instruksi. Jalur klik yang tepat muncul di panduan langkah di bawah.

Model mental yang tepat adalah urutan: ide, prototipe, kode. Kedua produk juga memiliki batas penggunaan terpisah, yang akan saya bahas nanti di bagian akses.

Untuk Siapa Claude Design?

Anthropic membagi audiens menjadi dua: desainer berpengalaman yang biasanya harus menghemat waktu eksplorasi, dan "yang lainnya" yang perlu menghasilkan pekerjaan visual tanpa latar belakang desain. Panduan peluncurannya juga menyebut peneliti UX, manajer produk, pemasar, dan fungsi terkait.

Membaca materi sumber dan kutipan pelanggan, produk ini tampaknya dibuat untuk desainer yang menguji arah sejak awal, manajer produk yang membuat sketsa alur fitur, serta founder atau account executive yang membutuhkan deck tanpa menghabiskan akhir pekan di slide. 

Produk ini juga cocok untuk pemasar yang mengerjakan landing page, aset sosial, dan visual kampanye sebagai titik awal, plus non-desainer yang perlu menyampaikan ide secara visual tanpa harus mempelajari Figma.

Luas, tetapi bukan "semua orang sama rata." Desainer yang bekerja dengan library komponen ketat dan spesifikasi yang presisi masih memerlukan alat desain sungguhan untuk pekerjaan tahap akhir. Kecocokan lebih jelas untuk tim yang sudah memiliki sistem merek dan peduli pada draf pertama.

Di Mana Posisi Claude Design?

Produk ini berada di bagian awal hingga menengah alur kerja desain, saat draf pertama lebih penting daripada polesan akhir. Kasus penggunaan di bawah ini berasal dari positioning Anthropic, tutorial resmi, dan testimoni peluncuran.

Pola yang paling sering muncul adalah eksplorasi prototipe awal, demo internal yang perlu terasa nyata tetapi tidak perlu menjadi kode, dan deck untuk founder, tim penjualan, atau account executive. 

Logika yang sama berlaku untuk konsep kampanye, draf awal landing page, mockup yang paham merek, dan persiapan handoff, di mana Anthropic mengatakan prototipe yang selesai dapat dipaketkan ke Claude Code atau Claude Code Web untuk diimplementasikan.

Benang merah di sebagian besar kasus ini adalah jalur dari ide ke draf pertama yang bisa ditunjukkan. Produk ini tidak mencoba menyelesaikan seluruh proses desain. Tidak setiap kasus pada daftar itu akan berhasil di percobaan pertama, itulah mengapa sebagian besar keberhasilan awal yang dibagikan orang terlihat seperti dua atau tiga iterasi, bukan satu.

Menguji Claude Design dalam Praktik

Membaca tentang alur kerja hanya sampai di situ. Berikut adalah lintasan singkat melalui siklus penuh, menggunakan prompt yang bisa Anda tiru jika akun Anda memiliki akses. Jika Anda sudah memahami alurnya, lewati ke langkah ekspor; itu bagian yang paling sering disamakan dengan Claude Code.

Buka claude.ai/design, klik New project, beri nama Workspace tour, dan pilih High fidelity. Tempel prompt ini ke panel chat:

Create a dashboard for a small fintech app. 
It should show monthly revenue at the top, a chart of revenue over the last six months in the middle, and a list of recent transactions below. 
Keep it clean and readable. Single page, no sidebar.

Claude mungkin akan menanyakan beberapa pertanyaan klarifikasi terlebih dahulu: audiens, estetika, mata uang, dan pola navigasi. Jawaban sederhana sudah cukup (tim internal, bersih dan minimal, USD, hanya bilah atas). Kanvas kemudian akan terisi setelah menunggu sebentar.

Selanjutnya, lakukan iterasi. Ubah kanvas ke mode Comment, klik tombol call-to-action utama, dan ketik permintaan satu baris seperti "Tingkatkan padding horizontal pada tombol ini." Ini adalah perilaku komentar inline yang saya jelaskan sebelumnya.

Komentar inline disematkan ke elemen kanvas. Gambar oleh Penulis.

Saat desain sudah sesuai keinginan, klik Export dan pilih Hand off to Claude Code. Inilah jalur handoff yang saya sebutkan sebelumnya.

Menu Ekspor terbuka menampilkan opsi handoff. Video oleh Penulis.

Jika Anda menjaga contohnya tetap sempit, poinnya bukanlah waktu di jam. Poinnya adalah melihat di mana prompt, komentar, menu ekspor, dan handoff berada dalam satu alur. Putaran pertama akan memiliki masalah; beberapa iterasi biasanya cukup untuk melihat apakah alat ini cocok dengan cara Anda bekerja.

Batasan Claude Design dan Pertanyaan Terbuka

Seperti saya sebutkan sebelumnya, Claude Design adalah pratinjau riset, jadi harapkan perubahan. Anthropic mendokumentasikan komentar yang terlepas, error penyimpanan tampilan ringkas, lag pada codebase besar, dan error hulu di chat. Solusinya lugas: tempel komentar yang hilang ke chat, beralih ke tampilan penuh, tautkan subdirektori alih-alih seluruh monorepo, atau mulai tab chat baru.

Bagi organisasi, batasannya lebih tentang tata kelola. Sesuai dokumentasi saat ini, Claude Design belum memiliki audit log atau pelaporan penggunaan admin, hanya berjalan di web, dan memiliki jatah mingguan yang mungkin berubah setelah periode beta. Anthropic juga mengatakan aset yang diunggah disimpan secara persisten dan Claude Design saat ini belum mendukung persyaratan residensi data.

Poin design system dari sebelumnya juga relevan di sini: tanpa penyiapan itu, output tetap generik. Kategori frontier design yang saya tandai sebelumnya berada di posisi serupa: output suara, video, shader, dan 3D itu nyata, tetapi oleh Anthropic dianggap eksperimental, bukan final. 

Pertanyaan terbukanya masih sama: seberapa jauh frontier design akan melaju, seberapa banyak kontrol langsung desainer yang akan hadir, dan apakah produk ini kelak terhubung lebih dalam dengan alat desain yang sudah mapan.

Cara Mengakses Claude Design

Aksesnya sederhana hingga Anda masuk ke kontrol tim dan penggunaan.

Claude Design berada di claude.ai/design. Produk ini hanya berbasis web dan tersedia pada paket Pro, Max, Team, dan Enterprise, tanpa akses Free. Di Enterprise, fitur ini nonaktif secara default; admin menyalakannya di Organization Settings, lalu Capabilities, di bagian Anthropic Labs. Seperti yang saya bahas sebelumnya, urutan peluncuran penting: design system dulu, akses yang lebih luas kemudian.

Posting peluncuran menyebut Claude Design "termasuk" dengan batasan langganan, tetapi artikel harga adalah sumber yang lebih mutakhir.

Artikel harga menyebut penggunaan dihitung terpisah dari chat dan Claude Code. Jatah direset mingguan dan melekat pada tiap pengguna, bukan dalam pool tim bersama. Untuk pelanggan Enterprise berbasis penggunaan, Anthropic menggambarkan penagihan standar berbasis API-rate setelah kredit onboarding satu kali sekitar 20 prompt tipikal, yang kedaluwarsa pada 17 Juli. 

Kesimpulan

Bingkai prompt-ke-desain tetap berlaku, tetapi hanya jika Anda memperlakukan hasil pertama sebagai draf. Tanpa konteks merek, Anthropic mengatakan output akan tetap generik. Dengan design system yang dipublikasikan, Claude Design memiliki tugas yang lebih jelas: mengubah ide menjadi sesuatu yang cukup visual untuk ditinjau, dibagikan, atau di-handoff.

Handoff ke Claude Code terasa sebagai titik alur kerja utama. Desain bukanlah keadaan akhir; ia dapat menjadi bundel yang membawa intent desain ke alat pengodean. Itu berbeda dari memperlakukan Claude Design sebagai kanvas lain untuk mockup statis.

Satu temuan penting bagi tim memang kurang menarik tetapi lebih praktis: cerita admin masih awal. Belum ada audit log, belum ada pelaporan penggunaan admin, belum ada dukungan residensi data, dan aset yang diunggah secara persisten bukanlah detail kecil jika tim Anda bekerja dengan materi merek atau produk.

Jadi pembacaan yang jujur itu sempit. Claude Design masuk akal untuk draf pertama, eksplorasi desain, deck awal, ide landing page, dan persiapan handoff. Untuk pekerjaan desain tahap akhir, ingat label pratinjau dan pertahankan proses desain yang sebenarnya di sekelilingnya.

Untuk pengantar yang lebih luas tentang AI dan apa yang bisa Anda lakukan dengannya, saya merekomendasikan mendaftar di jalur keterampilan AI Fundamentals kami.