Anthropic Menambahkan Perintah /design ke Claude Code untuk Mockup UI di Terminal

Anthropic telah memperluas Claude Code dengan perintah /design baru yang memungkinkan pengembang membuat, melakukan iterasi, dan melihat mockup UI tanpa meninggalkan terminal.

Prototyping UI Langsung di Terminal

Alih-alih berpindah-pindah antara Figma dan shell, Anda sekarang dapat mengetik sesuatu seperti /design a few options for a login screen. Claude akan membalas dengan beberapa "artboard" interaktif yang menampilkan mockup high-fidelity. Anda dapat membandingkan tata letak, memilih yang paling disukai, dan menyempurnakan tampilannya dengan mengajukan pertanyaan lanjutan—semuanya sebelum menulis satu baris kode produksi pun.

Mockup Sadar Konteks dari Codebase Anda

Pengembang Nate Parrott mencatat bahwa Claude sebenarnya membaca repositori saat ini. Claude mengambil palet warna, pustaka komponen, dan konvensi tata letak, lalu menyesuaikan setiap desain agar sesuai dengan gaya proyek yang ada. Hasilnya muncul sebagai "Artifacts," sebuah tampilan khusus di dalam Claude yang memperlihatkan gambar tanpa perlu membuka editor grafis terpisah. Pada tahap ini, mockup hanya ada di workspace Claude; Anda harus menyimpannya secara eksplisit ke sistem file sebelum mengubahnya menjadi kode.

Mengapa Ini Penting untuk Pengembangan Berbantuan AI

Perintah ini menyatukan dua tahap siklus hidup pengembangan perangkat lunak—desain dan pengodean—menjadi satu. Tim yang mengutamakan kecepatan dapat menghasilkan beberapa opsi tata letak dengan satu prompt saja, sehingga mempercepat fase penemuan di tahap awal. Karena Claude menggunakan codebase yang sedang berjalan, mockup tetap sesuai dengan brand dan kompatibel dengan sistem komponen, sehingga mengurangi pembersihan manual yang biasanya mengikuti pembuatan gambar generik.

Anthropic membingkai hal ini sebagai langkah menuju "AI software engineer" yang menangani logika sekaligus estetika. Jika terminal dapat berfungsi sebagai workspace multi-modal, batasan antara menulis kode dan membentuk pengalaman pengguna akan menipis secara drastis.

Batasan Saat Ini

Fitur ini masih dalam tahap pratinjau (preview). Mockup yang dihasilkan tidak otomatis menjadi file sumber; Anda harus mengekspor dan mengintegrasikannya sendiri. Langkah tambahan tersebut dapat mengurangi penghematan waktu, terutama pada proyek yang lebih besar dengan puluhan komponen.

Cara Mencobanya

Jalankan claude update untuk mengambil build pratinjau terbaru dan mengaktifkan perintah /design.

Poin-Poin Penting

  • Prototyping Terintegrasi: /design menghasilkan beberapa artboard UI langsung dari prompt terminal.
  • Konsistensi Kontekstual: Claude memindai codebase saat ini agar mockup tetap selaras dengan sistem desain yang ada.
  • Alur Kerja yang Efisien: Dengan menggabungkan kekuatan prompting Claude Design dengan eksekusi Claude Code, pengembang dapat berpindah dari konsep ke prototipe visual tanpa harus berganti alat.

Perintah /design baru dari Anthropic memungkinkan pengembang membuat dan melakukan iterasi mockup UI langsung dari terminal, memangkas proses bolak-balik antara alat desain dan editor kode—sebuah hambatan yang masih dihadapi oleh banyak tim yang bergerak cepat.

Menghasilkan Draf Visual dari Prompt CLI

Anda mengetik perintah seperti /design a few options for a login screen dan Claude mengembalikan sekumpulan artboard interaktif. Setiap artboard menampilkan mockup high-fidelity yang dapat Anda periksa, bandingkan, dan sempurnakan dengan mengajukan pertanyaan lanjutan.

Claude membaca file dalam proyek saat ini, mengekstrak palet warna, pustaka komponen, dan konvensi tata letak, lalu menyesuaikan desainnya agar cocok. Outputnya muncul sebagai "Artifacts," sebuah tampilan yang memperlihatkan gambar tanpa membuka editor grafis terpisah. Pada titik ini, mockup hanya ada di workspace Claude; Anda harus menyimpannya secara eksplisit ke sistem file sebelum mengubahnya menjadi kode.

Mengapa Pengembang Membutuhkan Alat Desain di Dalam Terminal

Sebagian besar pengembang menghabiskan banyak waktu dalam sehari untuk berpindah-pindah antara terminal kode dan aplikasi desain UI. Membawa prototyping visual ke jendela yang sama dengan tempat kode ditulis menyatukan dua tahap siklus hidup pengembangan perangkat lunak menjadi satu.

Bagi tim yang berfokus pada kecepatan, menghasilkan beberapa opsi tata letak dengan satu prompt dapat mempercepat fase penemuan tahap awal. Kemampuan Claude membaca codebase yang ada menjaga mockup tetap sesuai brand dan kompatibel dengan sistem komponen proyek, sehingga mengurangi pembersihan manual yang biasanya mengikuti langkah pembuatan gambar generik.

Anthropic membingkai penambahan ini sebagai langkah menuju "AI software engineer" yang dapat menangani logika sekaligus estetika. Jika terminal kini dapat berfungsi sebagai workspace multi-modal, batasan antara menulis kode dan membentuk pengalaman pengguna menjadi semakin tipis.

Batasan dan Alasan Penggunaan Alat Desain Tradisional

Fitur ini masih dalam tahap pratinjau, dan beberapa kendala praktis masih ada. Pertama, mockup yang dihasilkan tidak secara otomatis menjadi file sumber; pengembang harus mengekspor dan mengintegrasikannya secara manual. Langkah tambahan tersebut dapat mengurangi penghematan waktu pada proyek yang lebih besar di mana puluhan komponen perlu disinkronkan.

Hal yang Perlu Diperhatikan Seiring Matangnya Fitur Ini

Pembaruan Anthropic mencatat bahwa perintah tersebut dapat diaktifkan dengan perintah sederhana claude update.

Kesimpulan: Menyematkan prompt desain di dalam terminal Claude Code memberikan jalan pintas bagi pengembang dari konsep ke prototipe visual, namun alur kerjanya masih bergantung pada penyerahan manual dan kurang memiliki kedalaman alat UI khusus. Evolusinya akan menentukan apakah perintah ini tetap menjadi kenyamanan khusus atau menjadi bagian inti dari stack pengembangan berbasis AI.