Claude Design — Apa Itu dan Cara Menggunakannya
Anthropic meluncurkan Claude Design: apa yang dikirimkan, mengapa berbeda dari Figma dan Canva, dan bagaimana bundel serah terima Claude Code menggabungkan desain-ke-kode menjadi satu percakapan.
Claude Design diluncurkan kemarin.
Produk terbaru Anthropic Labs: berkolaborasi dengan Claude untuk membuat desain, prototipe, slide, satu halaman, dan halaman arahan. Didukung oleh Opus 4.7. Tersedia di claude.ai/design untuk pelanggan Pro, Max, Team, dan Enterprise.
Angka yang membingkai segalanya, dari Olivia Xu, Senior Product Designer di Brilliant: "Halaman kami yang paling kompleks, yang membutuhkan 20+ prompt untuk dibuat ulang di alat lain, hanya membutuhkan 2 prompt di Claude Design." Halaman Brilliant dikenal karena interaktivitasnya yang padat. Ketika seorang desainer di perusahaan yang berorientasi desain mengatakan itu, alat tersebut melakukan sesuatu yang benar-benar berbeda di balik layar.
Fitur yang paling penting: serah terima ke Claude Code.
Ketika sebuah desain siap dibangun, Claude Design mengemas semuanya (maksud, komponen, interaksi, konteks sistem desain) ke dalam bundel yang Anda berikan kepada Claude Code dengan satu instruksi. Claude Code mengimplementasikannya.
Ini adalah bagian yang tidak dimiliki Figma dan Canva. Mereka mengirimkan artefak statis. Claude Design mengirimkan maksud terstruktur yang dapat ditindaklanjuti oleh AI lain. Lingkaran desain-ke-kode yang dulunya membutuhkan waktu seminggu bolak-balik menjadi satu percakapan.
Merek Anda dibangun selama orientasi. Claude membaca basis kode dan file desain Anda yang ada untuk mempelajari warna, tipografi, dan komponen Anda. Setiap proyek menggunakan sistem itu secara otomatis, dan Anda dapat mempertahankan lebih dari satu (situs pemasaran, produk, dek investor). Merek Anda dipelajari, bukan dikonfigurasi.
Anda dapat memulai dari mana pun pemikiran Anda berada: prompt teks, gambar, file DOCX / PPTX / XLSX, atau langsung basis kode Anda. Yang perlu diketahui adalah alat penangkap web. Arahkan ke URL mana pun dan itu akan mengambil elemen dari halaman langsung, sehingga prototipe Anda terlihat seperti produk sebenarnya, bukan perkiraan Figma yang melenceng tiga sprint yang lalu.
Kontrol penyempurnaan dihasilkan untuk desain spesifik Anda: komentar sebaris pada elemen apa pun, pengeditan teks langsung, dan kenop penyesuaian untuk spasi, warna, dan tata letak yang dibuat khusus oleh Claude untuk proyek tersebut. Dapatkan penyesuaian yang tepat pada satu elemen, lalu minta Claude untuk menerapkannya di seluruh desain.
Jalur ekspor: bagikan sebagai URL internal, simpan sebagai folder, atau ekspor ke PDF, PPTX, atau HTML mandiri. Yang patut disebut: ekspor ke Canva (CEO Canva Melanie Perkins memiliki kutipan di postingan peluncuran). Desain yang didorong ke Canva menjadi sepenuhnya dapat diedit untuk rekan tim non-teknis. Gunakan saat langkah selanjutnya adalah "pemasaran perlu menyesuaikan ini" daripada "rekayasa perlu membangun ini."
Apa yang digunakan tim untuknya, langsung dari postingan peluncuran: prototipe dari mockup statis untuk pengujian pengguna, wireframe produk yang diserahkan ke Claude Code, deck pitch dari garis besar kasar, dan halaman arahan dari deskripsi. Aneesh Kethini, PM di Datadog: "Apa yang dulunya membutuhkan waktu seminggu bolak-balik antara ringkasan, mockup, dan putaran tinjauan sekarang terjadi dalam satu percakapan."
Akhir pekan ini: arahkan alat penangkap web ke situs langsung, hasilkan 3 arah alternatif, pilih satu dan sempurnakan, lalu ekspor bundel serah terima ke Claude Code dengan satu instruksi. Kasus penggunaan yang tidak terduga adalah desain perbatasan: prototipe bertenaga kode dengan suara, video, shader, 3D, dan AI bawaan.
Apa yang dikirimkan: Claude Design, pratinjau penelitian Anthropic Labs yang didukung oleh Opus 4.7, di claude.ai/design untuk Pro, Max, Team, dan Enterprise.
Mengapa berbeda: sistem desain yang dipelajari dari basis kode Anda, alat penangkap web yang mengambil dari situs langsung Anda, kenop penyempurnaan kustom, dan bundel serah terima yang mengirimkan maksud terstruktur ke Claude Code alih-alih artefak statis. Lingkaran desain-ke-kode runtuh dari satu sprint menjadi satu percakapan. Panduan yang lebih mendalam ada di Track 2 hingga 5.