Sistem desain menangkap warna, tipografi, komponen, dan pola tata letak Anda, sehingga Claude menerapkannya ke setiap desain dan dek baru. Claude mengekstraknya dari aset yang Anda berikan, seperti basis kode, dek slide, atau referensi desain lainnya.
Sistem desain tersedia dalam beta di paket Pro, Max, Team, dan Enterprise. Sistem ini aktif secara default di paket Pro, Max, dan Team. Di paket Enterprise, sistem ini dinonaktifkan sampai pemilik mengaktifkan Design systems di Organization settings > Artifacts. Claude Design mandiri di claude.ai/design memiliki pengaturan terpisahnya sendiri.
Panduan ini untuk desainer atau pemilik merek yang akan menyiapkan sistem desain. Di paket Team dan Enterprise, Anda hanya perlu melakukan ini sekali, dan pekerjaan semua orang akan menggunakannya setelah itu.
Sebelum Anda mulai
Design systems harus aktif untuk organisasi Anda di paket Team dan Enterprise, dan pemilik dapat membatasi siapa yang dapat menerbitkan atau menetapkan default.
Anda memerlukan setidaknya salah satu dari berikut ini sebagai bahan sumber:
Basis kode dengan sistem desain atau perpustakaan komponen Anda
Dek slide atau dokumen yang mencerminkan identitas visual Anda
Aset panduan merek (logo, palet warna, spesifikasi tipografi)
Buat sistem desain
Dari obrolan
Minta Claude untuk membangun sistem desain dari aplikasi terhubung, file yang diunggah, file Figma, dek, logo, dan font Anda. Ini berfungsi paling baik untuk sistem desain merek dengan font, warna, dan panduan.
Dari Claude Code
Jika sistem desain Anda sudah ada sebagai komponen React, jalankan /design-sync di Claude Code. Ini membaca token dan komponen Anda secara langsung, dan berfungsi paling baik untuk sistem desain produk dalam kode.
Bawa sistem desain dari claude.ai/design
Buka tab "Design" di bagian bawah bilah sisi.
Klik "Migrate team design systems" di spanduk.
Setiap sistem desain menjadi artefak yang dapat digunakan Claude di obrolan apa pun, termasuk di Claude Code. Sistem desain yang dimigrasikan mungkin memerlukan beberapa pembersihan, jadi masing-masing menampilkan spanduk tempat Anda dapat mengklik "Let Claude clean it up," dan Claude merapikan panduan, token, dan komponennya.
Kelola sistem desain Anda
Kelola sistem desain Anda di Settings > Design systems. Di paket Enterprise, admin dapat memesan penerbitan, pengaturan default organisasi, dan penghapusan sistem desain untuk pengguna tertentu. Pelajari lebih lanjut di Artifacts admin guide for Team and Enterprise plans.
Gunakan sistem desain dengan keyboard
Untuk masuk dan keluar dari panel artefak, lihat Use artifacts with a keyboard or screen reader. Artikel itu juga menjelaskan apa arti fokus, apa yang harus dilakukan di laptop Mac atau di Safari, dan bagaimana pintasan ditulis.
Sistem desain terbuka sebagai daftar bagian di samping bagian yang Anda baca. Return pada bagian dalam daftar memindahkan ke dalamnya, Cmd+F6 (Ctrl+F6 di Windows) berpindah antara daftar dan bagian, dan Cmd+Z (Ctrl+Z di Windows) membatalkan perubahan saat Anda tidak berada di kotak teks.
Catatan: Pratinjau komponen langsung dalam sistem desain tidak dapat dijangkau dengan Tab, jadi tidak dapat dioperasikan dari keyboard. Nama dan catatan setiap komponen dapat dibaca.
Siapkan sistem desain di claude.ai/design
Langkah-langkah ini menggunakan Claude Design mandiri.
Buat atau beralih ke organisasi Anda
Buka Claude Design.
Di sudut kiri bawah pemilih proyek, klik nama organisasi saat ini.
Pilih organisasi Anda, atau buat yang baru.
Selesaikan alur onboarding yang Anda alihkan.
Unggah aset merek dan produk Anda
Selama onboarding, atau setelahnya dari pengaturan organisasi Anda, unggah aset yang menentukan merek dan produk Anda. Claude menganalisisnya dan mengekstrak sistem desain yang dapat digunakan kembali.
Basis kode: Jika sistem desain Anda berada dalam kode, seperti perpustakaan komponen React, tautkan atau unggah repositori. Claude membaca komponen dan gaya.
Prototipe: Tangkapan layar, alur web, dan file desain yang ada.
Dek slide atau dokumen: Bahkan PowerPoint atau PDF yang dirancang dengan baik yang mencerminkan merek Anda dapat berfungsi. Claude mengekstrak warna, pola tata letak, dan pilihan tipografi.
Aset individual: Logo, file palet warna, spesimen tipografi.
Anda hanya memerlukan satu sumber untuk memulai, tetapi lebih banyak sumber memberi Claude lebih banyak untuk dikerjakan.
Tinjau sistem desain yang dihasilkan
Setelah mengunggah, Claude menghasilkan sistem desain untuk organisasi Anda. Ini biasanya mencakup:
Palet warna: Warna primer, sekunder, dan aksen yang diekstrak dari aset Anda.
Tipografi: Keluarga font, ukuran, dan bobot.
Komponen: Tombol, kartu, elemen navigasi, dan pola UI yang dapat digunakan kembali lainnya.
Pola tata letak: Spasi, sistem grid, dan struktur halaman.
Untuk memvalidasinya, buat proyek uji dan periksa apakah hasilnya sesuai dengan merek Anda. Coba prompt seperti:
"Buat halaman arahan untuk [produk Anda]."
"Desain dasbor yang menampilkan [metrik relevan]."
"Buat satu halaman tentang [topik yang sering dipresentasikan tim Anda]."
Buat tersedia untuk tim Anda
Ketika Anda puas dengan sistem desain, aktifkan toggle "Published". Setelah penerbitan, proyek yang dibuat dari layar beranda Claude Design di organisasi Anda menggunakan sistem desain Anda alih-alih default.
Perbarui sistem desain Anda
Ketika sistem desain Anda berubah, Anda dapat memperbaruinya dalam Claude Design. Dari pengaturan organisasi Claude Design Anda, klik tombol "Open" di samping sistem desain yang ingin Anda edit. Klik tombol "Remix" di sudut kanan atas untuk membuka antarmuka obrolan di sisi kiri jendela. Dari sini, Anda dapat bekerja dengan Claude untuk mengubah sistem desain Anda.
Tips untuk hasil terbaik
Sertakan contoh nyata, bukan hanya spesifikasi. Halaman arahan atau situs pemasaran yang selesai memberi tahu Claude lebih banyak tentang nuansa merek Anda daripada palet warna saja.
Iterasi. Jika ekstraksi pertama tidak menangkap merek Anda dengan baik, coba unggah aset tambahan atau berbeda.