Claude memiliki fitur baru bernama Design.
Claude Design adalah pratinjau riset yang diluncurkan oleh Anthropic pada 17 April, bagian dari lini produk Anthropic Labs, yang berjalan di model visi terkuat mereka saat ini, Opus 4.7. Fitur ini dirancang untuk membuat draf visual bersama Claude—prototipe web, PPT, pitch deck, landing page, one-pager, dan lainnya semuanya dalam jangkauannya. Ia dapat membaca repositori kode Anda dan file desain yang ada, menerapkan sistem desain Anda ke output, sehingga gayanya cocok dengan proyek Anda yang sudah ada.
Bagian terbaiknya adalah output akhir: selain mengekspor PDF/PPTX/HTML atau mengirim ke Canva, ia juga dapat mengemas semuanya menjadi bundel serah terima dan meneruskannya ke Claude Code lokal untuk melanjutkan modifikasi kode proyek.
Begitu keluar, fitur ini langsung membuat saham Figma turun—tutup dengan penurunan 6,89%.
Sekilas tentang Figma: perusahaan yang membuat alat desain kolaboratif online, bersaing dengan Adobe dan Canva. Puluhan juta desainer di seluruh dunia menggunakannya untuk membuat desain. Sebenarnya, sudah ada MCP yang memungkinkan Anda menggunakan AI untuk mengontrol Figma, tetapi karena selera estetika saya terlalu dasar dan pikiran saya kosong tanpa ide, saya tidak pernah menggunakan produk itu.
Mengapa Saya Sangat Membutuhkannya
Ingat plugin Obsidian yang saya buat untuk mendorong konten ke WeChat Official Accounts?
Sejauh ini, di semua saluran, saya telah menjual total 0 kopi. Betapa menyenangkannya (TAT).
Tentu saja, mungkin saja—dan saya tidak bermaksud sombong—ini ada hubungannya dengan selera desain dasar saya.
Lihatlah seperti apa tampilan antarmuka plugin asli saya:
Dua baris toolbar, 9 tombol berjejalan dalam satu baris. Format, akun, nama akun prasetel, konfigurasi akun, pembelian aktivasi, panduan pengguna, refresh render, salin HTML, tempel ke WeChat Official Account, terbitkan draf… semuanya bertumpuk di tempat yang paling menonjol.
Semua fitur ada, tapi melihatnya saja sudah melelahkan.
Di bawahnya, ada prompt yang sangat panjang: ‘Klik tombol di bawah untuk memilih gambar dari komputer Anda; biarkan kosong untuk menggunakan sampul placeholder; jika sampul default diatur, gunakan sampul default.’ Seorang teman melihatnya dan berkata, ‘Ini untuk siapa? Deskripsi field database?’
Jadi ketika saya melihat Claude Design keluar, saya langsung mencobanya. Mari kita lihat bagaimana kinerjanya.
Cara Menggunakan
Pertama, buka versi web Claude, klik Design di sebelah kiri untuk masuk. Di bagian atas, ada kotak input bernama ‘New prototype’, cukup isi nama proyek.
Anda dapat memilih Wireframe (fidelitas rendah) atau High fidelity (fidelitas tinggi dengan aset merek). Saya memilih fidelitas rendah karena pada awalnya hanya tentang konsep kasar, tidak perlu fidelitas tinggi. Sebenarnya, setelah selesai, ia akan secara otomatis meningkatkan untuk Anda.
Selanjutnya, beri tahu path folder program, dan kirimkan screenshot halaman yang ingin Anda ubah.
Ia akan terlebih dahulu menanyakan beberapa pertanyaan: apa yang harus diubah, apa yang harus dipertahankan, apa tindakan utama, apa tindakan sekunder. Saya mengaku jujur—saya paling ingin menyorot ‘Terbitkan Draf’ dan ‘Ganti Akun’, sisanya bisa disembunyikan.
Setelah bertanya, ia mulai berjalan sendiri.
Ia Memberikan 4 Opsi
Tak lama kemudian, ia memberikan saya halaman perbandingan wireframes.html.
Hal pertama adalah perbandingan—ia mendaftar ‘dosa’ dari UI saya saat ini satu per satu dalam teks merah:
- ‘Dua baris bar menekan pratinjau’
- ‘9 tombol’
- ‘Campuran Inggris/Cina + deskripsi simbol yang membingungkan’
Fitur ini benar-benar mengejutkan saya. Saya pikir ia hanya akan membantu saya memodifikasi, tetapi ia benar-benar melihat konten dan menunjukkan masalahnya. Rasanya seperti desainer nyata yang berkomunikasi tatap muka, bukan AI yang dingin.
Kemudian muncul 4 opsi:
- Opsi A: Baris tunggal minimal, tombol utama ‘Terbitkan Draf’ + kapsul akun, sisanya ikon + menu
⋯ - Opsi B: Breadcrumb kartu + laci, pertahankan entri untuk mengedit info meta
- Opsi C: Rel samping (seperti VSCode), bar atas hanya judul
- Opsi D: Kartu terbitkan mengambang di kanan bawah, tindakan utama paling menonjol
Yang paling menarik adalah Opsi D. Ia menggambar sticky note dengan ‘Aturan Desain Umum’ dan ‘Urutan yang Direkomendasikan’:
A → Paling hemat ruang, biaya belajar rendah D → Paling indah secara visual, tindakan utama paling memuaskan C → Ramah untuk pengguna power (pustaka ikon) B → Aman, mempertahankan pengeditan info meta
Ini bukan hanya ‘ini beberapa opsi’, tetapi ‘ini beberapa opsi + memberi tahu Anda untuk siapa masing-masing’. Saya sudah lama membuat plugin, dan belum pernah ada yang serius memberi tahu saya ‘di mana tombol ini harus ditempatkan’.
Anda Dapat Terus Melakukan Iterasi
Setelah memilih arah, Anda dapat terus berkomunikasi. Di sebelah kiri adalah kotak obrolan, di sebelah kanan klik Edit untuk langsung memilih elemen dan memodifikasi (tapi pengaturan di sana terlalu profesional, saya tidak bisa memahaminya, jadi saya lewati). Klik Draw untuk menggambar lingkaran dan panah pada pratinjau dan memberi tahu ‘Saya ingin memindahkan ini ke sini’:
Saya pikir fitur Draw luar biasa. Saya menggambar panah yang sangat kasar dari sebuah tombol ke kanan bawah, dan ia benar-benar mengerti—mungkin terkait dengan peningkatan besar dalam pengenalan visual Opus 4.7 (seperti yang disebutkan sebelumnya, ia meningkatkan presisi pengenalan gambar menjadi 3,75 megapiksel).
Dari Toolbar ke Tata Letak
Setelah memodifikasi bilah menu, saya memintanya untuk membuat beberapa gaya tata letak artikel—bagaimanapun juga, tugas utama plugin saya adalah memformat Markdown menjadi sesuatu yang dapat diterbitkan di WeChat Official Accounts.
Ia membuka halaman baru dengan judul ‘Format Markdown menjadi artikel WeChat yang layak dibaca’. Di kanan atas, ada tombol Tweaks yang, ketika diklik, memungkinkan Anda menyesuaikan ukuran font, ketebalan, warna, spasi baris, dll., seperti Figma:
Perhatikan bahwa ini adalah halaman yang benar-benar dapat diklik dan dialihkan, bukan halaman palsu. Interaksi ini jauh lebih baik daripada melakukannya di Claude Code di terminal. Dengan Claude Code, Anda harus menunggu sampai selesai untuk melihat efeknya, lalu memintanya untuk memodifikasi. Di sini, Anda mendapatkan pratinjau waktu nyata.
Setelah final, klik Export di kanan atas. Ia memberikan beberapa opsi: unduh PPT, ekspor PDF, ekspor HTML mandiri, atau—yang terakhir—‘Handoff to Claude Code’, yang mengirim seluruh file desain ke Claude Code lokal untuk melanjutkan pengkodean.
Ini adalah bagian terbaik dari seluruh rantai.
Setelah mendesain di web, ia menghasilkan perintah untuk Anda. Salin dan tempel ke terminal, dan Claude Code lokal mengambil alih:
> Fetch this design file, read its readme,
and implement the relevant aspects of the design.
Implement: option-b-hifi.html
Kemudian ia mulai membaca paket desain, melihat kode saat ini, memahami file mana yang harus dimodifikasi, dan akhirnya langsung mengubah semua kode sumber plugin saya. Halaman desain menyediakan option-b-hifi.html (saya akhirnya memilih versi fidelitas tinggi dari Opsi B), dan Claude Code membaca warna, ukuran font, spasi dari file desain dan menerapkannya ke kode React saya.
Saya tidak menulis satu baris kode pun selama seluruh proses.
Hasil Akhir
Bagaimanapun, saya pikir ini terlihat jauh lebih baik daripada aslinya. Meskipun desainer sungguhan mungkin bisa melakukannya lebih baik, untuk plugin pribadi, ini sudah lebih dari cukup (dibandingkan dengan desain asli saya).
Judul + info meta diciutkan menjadi satu baris, akun menjadi kapsul (dengan titik aktif hijau), tindakan utama hanyalah satu tombol ‘Terbitkan Draf’ ungu di kanan, sisanya disembunyikan di menu ⋯.
Ternyata tumpukan ‘fitur’ saya tidak kekurangan selera desain—tetapi tidak ada yang membantu saya membuat trade-off.
Menambahkan tombol itu mudah, tetapi menghapusnya dari UI terasa tidak intuitif bagi pengembang—Anda selalu berpikir ‘bagaimana jika seseorang membutuhkannya?’. Tetapi seorang desainer akan membuat keputusan itu untuk Anda: ‘Letakkan ini di menu sekunder, pengguna tidak akan mengkliknya lagi setelah pertama kali.’
Kali ini, Claude Design membuat keputusan itu untuk saya.
Biaya
Ini Boros Sumber Daya
Dalam paket langganan Claude, Design memiliki kuota sendiri (saya harus mengatakan, kuota terpisah Claude benar-benar menumpuk).
Melakukan set ini—4 perbandingan opsi + 5 tema artikel + implementasi fidelitas tinggi—menghabiskan 36% kuota harian saya. Saya memiliki akun Max 5x; untuk akun Pro, itu akan menghabiskan seluruh kuota harian.
Seorang teman saya memiliki akun Pro. Tadi malam, ia menggunakan Design untuk membuat PPT 30 halaman dan kuota hariannya habis total.
Kadang Ada Gangguan
Kadang-kadang di tengah pekerjaan, Anda mungkin mengalami situasi: Anda mengirim pesan, dan ia membalas dengan <empty>. Kirim lagi, masih <empty>:
Perbaikannya adalah dengan me-refresh halaman dan memberi tahu ’lanjutkan’, dan biasanya ia akan melanjutkan. Tapi Anda kehilangan sedikit konteks. Jika Anda sedang dalam iterasi desain kritis, ingatlah untuk mengambil tangkapan layar sebagai cadangan sesekali, sehingga Anda tidak perlu memulai dari awal jika rusak di langkah terakhir.
Pemikiran Akhir
Plugin Obsidian saya dengan desain dasarnya akhirnya terlihat seperti produk yang layak.
Tapi sejujurnya, ketika saya duduk di depan komputer dan mengklik ‘Terbitkan Draf’, saya tidak sepenuhnya bersemangat. Saya sangat sadar akan satu hal—jika seseorang seperti saya yang tidak memiliki pelatihan desain dapat membuat UI yang layak dalam dua jam, maka mereka yang mencari nafkah dari ‘cukup layak’ akan mengalami beberapa tahun yang sulit.
Dulu saya khawatir AI akan membuat penulis kehilangan lawan bicara dengan selera sastra. Kali ini kebalikannya—desainer akan kehilangan bagian paling tebal dari pasar: rentang pemula hingga menengah.
Setiap kali AI melangkah maju, beberapa orang bersorak, dan beberapa orang pergi dengan tenang. Kali ini saya yang bersorak, tetapi saya bisa mendengar desahan di belakang saya.
Saya baru-baru ini menghabiskan banyak waktu dan uang untuk AI, khawatir suatu hari ia akan menggantikan saya, tetapi sejauh ini saya belum menemukan jalan keluar. Ia membantu pekerjaan sehari-hari saya, tetapi tidak ada perubahan mendasar. Yang terpenting, saya belum menghasilkan uang darinya.
Jika Anda juga memiliki produk kecil, plugin, atau situs web yang berdebu seperti milik saya—cobalah Claude Design.
Mungkin itu tidak akan memberi Anda penjualan pertama, tetapi setidaknya itu akan membuatnya terlihat lebih rapi. Dan itu sendiri adalah peningkatan besar.