/design-sync dan /design, plus import design system langsung dari GitHub repo. Artikel ini menjelaskan alur kerja terbaru dari desain ke kode, langkah demi langkah.Anthropic merombak cara Claude Design dan Claude Code saling terhubung. Claude Design tetap berfungsi sebagai kanvas untuk membuat tampilan visual, sementara Claude Code mengeksekusinya jadi kode. Bedanya, alur perpindahan antara keduanya sekarang dua arah dan bisa tetap sinkron, bukan sekadar ekspor satu kali jalan seperti versi sebelumnya.
Apa yang Berubah dari Alur Kerja Claude Design ke Claude Code?
Update Claude Design pada 17 Juni 2026 mengganti cara desain berpindah ke kode. Sebelumnya, perpindahan hanya satu arah lewat tombol ekspor. Sekarang, Anthropic menambahkan command /design-sync dan /design yang membuat Claude Design dan Claude Code tetap sinkron dua arah selama proyek berjalan.
Design System Sekarang Bisa Diimpor Langsung dari GitHub
Anda tidak perlu lagi upload screenshot atau file desain satu per satu. Claude Design bisa mengimpor satu atau beberapa design system langsung dari repositori GitHub, file desain, atau upload mentah. Setelah diimpor, Claude membangun desain memakai komponen yang sudah ada di repo Anda, bukan menciptakan tombol dan spacing baru yang berbeda dari sistem yang sudah berjalan.
Command /design-sync Menjaga Desain dan Kode Tetap Selaras
Mekanismenya: jalankan /design-sync untuk menarik design system organisasi ke dalam Claude Code, lalu gunakan /design langsung dari terminal untuk membuat dan mengedit tampilan sambil tetap sinkron dengan repo. Developer yang lebih nyaman bekerja di terminal pun bisa memunculkan kanvas desain langsung dari dalam Claude Code tanpa pindah aplikasi.
Siapa yang Bisa Pakai Claude Design dan Claude Code?
Claude Design tersedia untuk pengguna paket Pro, Max, Team, dan Enterprise. Produk ini masih berstatus beta dengan rollout bertahap, jadi tampilan dan fitur bisa sedikit berbeda tergantung kapan akun Anda menerima update.
Akses Lewat claude.ai/design atau Sidebar Desktop App
Claude Design kini punya tempat baru di sidebar Claude desktop app, selain tetap bisa diakses lewat claude.ai/design di browser. Untuk paket Enterprise, admin organisasi perlu mengaktifkan fitur ini lebih dulu karena statusnya nonaktif secara default.
Role Admin untuk Mengunci Satu Design System
Untuk tim yang butuh konsistensi merek di banyak proyek, organisasi besar sekarang punya role admin yang bisa menyetujui satu design system standar dan menguncinya. Begitu dikunci, semua proyek baru di organisasi otomatis memakai komponen, warna, dan tipografi yang sama tanpa perlu pengaturan ulang setiap kali mulai proyek.
Cara Membuat Desain di Claude Design dari Awal
Membuat proyek baru dimulai dengan membuka claude.ai/design, lalu membuat proyek baru. Jika organisasi Anda sudah mengimpor design system lewat GitHub repo atau file desain, proyek baru otomatis mewarisi komponen, warna, dan font yang sama tanpa perlu upload ulang.
Deskripsikan Kebutuhan di Kolom Obrolan
Setelah proyek terbuka, Anda mendeskripsikan apa yang ingin dibuat di kolom obrolan di sisi kiri, dan hasil desainnya muncul di kanvas sisi kanan. Instruksi yang spesifik menghasilkan output yang lebih tepat, misalnya “Buat dasbor yang menampilkan pendapatan bulanan dengan filter wilayah” dibanding sekadar “Buat dasbor penjualan.”
Tabel Contoh Instruksi dan Hasilnya
| Jenis Instruksi | Contoh | Hasil |
|---|---|---|
| Dasbor | “Buat dasbor pendapatan bulanan dengan filter wilayah” | Layout dasbor lengkap dengan komponen filter |
| Alur onboarding | “Desain 4 layar onboarding aplikasi mobile” | 4 layar terpisah dengan alur navigasi |
| Landing page | “Bangun landing page produk API dengan harga dan contoh kode” | Halaman lengkap dengan section hero dan pricing |
| Formulir | “Buat formulir feedback dengan pertanyaan bersyarat” | Form interaktif dengan logika kondisional |
| Alat internal | “Desain tools untuk tim ops menyetujui konten” | Panel review dengan tombol aksi |
Cara Mengedit Desain Sebelum Dikirim ke Claude Code
Sebelum desain dikirim ke Claude Code, Anda bisa memperbaikinya langsung di kanvas Claude Design. Update terbaru menambahkan kontrol editor yang lebih presisi per elemen, termasuk tools drag, resize, dan align langsung di kanvas, bukan hanya lewat obrolan teks.
Tiga Cara Mengedit: Obrolan, Komentar, dan Kanvas Langsung
Untuk perubahan besar seperti mengubah skema warna seluruh halaman, gunakan kolom obrolan. Untuk perubahan kecil seperti mengganti elemen tertentu, gunakan komentar sebaris. Untuk penyesuaian presisi seperti memindahkan posisi tombol, gunakan editor kanvas langsung yang baru ditambahkan di update ini.
Menyimpan Versi Sebelum Eksplorasi Arah Baru
Kalau Anda mau eksplorasi arah desain lain tanpa menghapus yang sudah ada, ketik instruksi seperti: “Simpan apa yang kami miliki dan coba pendekatan yang sama sekali berbeda.” Claude Design menyimpan versi sebelumnya dan mengonfirmasi lokasinya, sehingga Anda bisa membandingkan dua versi tanpa kehilangan progres.
Cara Mengirim Desain dari Claude Design ke Claude Code
Setelah desain selesai, perpindahan ke Claude Code dilakukan lewat tombol “Ekspor” di sudut kanan atas tampilan proyek, atau lewat command /design-sync jika Anda sudah bekerja di terminal Claude Code.
Langkah-Langkah Handoff ke Claude Code
- Setelah desain selesai, klik tombol “Ekspor” di sudut kanan atas tampilan proyek.
- Pilih “Kirim ke agen pengkodean lokal” jika Anda sudah memasang Claude Code di komputer, atau “Kirim ke Claude Code Web” jika ingin bekerja lewat antarmuka browser.
- Claude Code menerima proyek dengan konteks desain yang sudah ada, termasuk komponen dari design system yang sudah diimpor, sehingga tidak perlu membangun ulang dari screenshot.
- Untuk proyek yang sudah disinkronkan lewat
/design-sync, perubahan di Claude Code bisa didorong balik ke Claude Design tanpa proses ekspor manual.
Tabel Pilihan Format Ekspor
| Format Ekspor | Kegunaan | Cocok Untuk |
|---|---|---|
| Kirim ke Claude Code (lokal) | Langsung ke environment pengkodean lokal | Developer yang pakai Claude Code di komputer |
| Kirim ke Claude Code Web | Buka di antarmuka Claude Code berbasis browser | Developer yang kerja tanpa instalasi lokal |
| /design-sync (terminal) | Sinkronisasi dua arah antara repo dan Claude Design | Tim yang sudah punya design system di GitHub |
| Unduh sebagai PDF / PPTX | File presentasi atau dokumen siap bagi | Pitch deck, laporan, one-pager |
| Kirim ke Canva, Adobe, atau partner lain | Lanjutkan proses desain di tool lain | Tim yang lebih familiar dengan tool tersebut |
Cara Setup Design System Agar Konsisten di Semua Proyek
Kalau Anda kerja dalam tim atau punya identitas merek yang harus konsisten, setup design system di Claude Design hanya perlu dilakukan satu kali lewat proses impor, bukan upload manual berulang setiap proyek baru.
Sumber yang Bisa Dipakai untuk Impor Design System
Materi yang bisa diimpor sebagai sumber design system mencakup repositori kode yang berisi komponen, file desain yang sudah ada, atau upload mentah aset merek seperti logo dan palet warna. Mengombinasikan lebih dari satu sumber memberikan hasil ekstraksi yang lebih akurat dibanding hanya mengandalkan satu jenis file.
Verifikasi Otomatis Sebelum Hasil Ditampilkan
Setelah design system diimpor, Claude membangun desain memakai komponen yang sudah disetujui, lalu memeriksa hasilnya terhadap design system tersebut dan melakukan koreksi sebelum hasil akhir ditampilkan ke Anda. Ini berbeda dari versi sebelumnya yang menghasilkan desain dengan gaya yang kadang tidak konsisten dengan proyek lain.
Batasan yang Perlu Anda Tahu Sebelum Pakai
Claude Design masih berstatus beta, jadi ada beberapa batasan praktis yang perlu Anda ketahui lebih awal sebelum mengandalkannya untuk proyek besar.
Komentar Sebaris dan Mode Tampilan Kompak
Komentar sebaris kadang hilang sebelum Claude membacanya. Solusinya simpel: tempel teks komentar itu langsung ke kolom obrolan. Mode tampilan kompak juga bisa memicu kesalahan saat menyimpan; kalau ini terjadi, beralih ke tampilan penuh dan coba lagi.
Repositori Besar Bisa Memicu Lag
Menautkan repositori kode yang sangat besar bisa menyebabkan lag atau masalah di browser. Solusi yang direkomendasikan: tautkan subdirektori spesifik saja, bukan seluruh monorepo. Kalau muncul pesan kesalahan terkait sinkronisasi chat, buka tab obrolan baru dalam proyek yang sama.
Key TakeawayClaude Design dan Claude Code dirancang untuk bekerja sebagai satu alur kerja, bukan dua tool terpisah. Sejak update 17 Juni 2026, alur ini menjadi dua arah lewat command /design-sync dan /design, dengan design system yang bisa diimpor langsung dari GitHub repo dan tetap sinkron selama proyek berjalan. Setup design system organisasi cukup dilakukan satu kali, dan role admin memastikan semua tim tetap konsisten dengan brand guideline. Dengan alur ini, tim desain dan developer Anda bisa bergerak dari ide ke kode tanpa kehilangan konsistensi visual di setiap proyek.
FAQ: Pertanyaan yang Sering Diajukan
Q1: Apa bedanya /design-sync dan tombol Ekspor di Claude Design?
A: Tombol Ekspor mengirim desain satu arah ke Claude Code atau format lain. Command /design-sync dijalankan dari Claude Code untuk menarik design system ke repo dan menjaga sinkronisasi dua arah selama proyek berjalan, termasuk mendorong balik perubahan dari kode ke Claude Design.
Q2: Apakah saya perlu repo GitHub untuk memakai Claude Design?
A: Tidak wajib. Anda tetap bisa mengimpor design system lewat file desain atau upload aset mentah seperti logo dan palet warna. GitHub repo hanya salah satu opsi sumber, dan menjadi paling akurat untuk tim yang sudah punya komponen kode siap pakai.
Q3: Apakah Claude Design bisa dipakai tanpa paket berbayar?
A: Tidak. Claude Design saat ini hanya tersedia untuk paket Pro, Max, Team, dan Enterprise. Pengguna paket gratis belum bisa mengaksesnya.
Q4: Apakah saya harus install sesuatu untuk pakai Claude Design?
A: Tidak perlu instalasi untuk versi browser. Claude Design bisa diakses langsung di claude.ai/design, atau lewat sidebar Claude desktop app untuk pengalaman terintegrasi dengan Claude Code.
Q5: Apa yang terjadi kalau komentar sebaris saya hilang?
A: Ini batasan yang masih terjadi di versi beta. Solusinya: salin teks komentar dan tempel langsung ke kolom obrolan, hasilnya sama.
Q6: Apakah design system organisasi perlu diatur ulang setiap proyek baru?
A: Tidak perlu. Setelah diimpor dan dikunci oleh admin, semua proyek baru di organisasi otomatis memakai design system yang sama tanpa konfigurasi ulang.
Q7: Tool apa saja yang terhubung dengan Claude Design selain Claude Code?
A: Selain handoff ke Claude Code, Claude Design juga terhubung ke partner lain untuk melanjutkan proyek menjadi produk jadi, serta tetap mendukung ekspor ke format PDF dan PPTX untuk kebutuhan presentasi.
Q8: Apakah repo besar aman dihubungkan ke Claude Design?
A: Repo yang sangat besar berpotensi menyebabkan lag di browser. Anthropic merekomendasikan menautkan subdirektori spesifik yang relevan saja, bukan seluruh monorepo sekaligus.
Mau Tahu Cara Maksimalkan Claude Design dan Claude Code untuk Bisnis Anda?
Tim Olakses siap bantu Anda setup design system, integrasi Claude Code, dan strategi AI yang sesuai kebutuhan tim Anda.
Muhammad Dwiki Septianto is an SEO Specialist at Olakses with a background in Informatics Engineering from UIN Bandung. Certified in Digital Marketing (BNSP), he specializes in on-page and technical SEO, content optimization, and cross-functional coordination between content and development teams.
