00:00:00Ini adalah Pencil, alat desain berbasis 'vibe' yang mengubah perintah dari asisten AI apa pun
00:00:05menjadi desain visual menarik tepat di depan mata Anda yang bisa diedit layaknya di Figma.
00:00:10Ini mendukung komponen, UI kit, variabel CSS, dan sepenuhnya gratis.
00:00:15Namun dengan adanya Sketch dan alat MCP baru milik Figma yang tampaknya serupa,
00:00:19apakah Pencil akan menjadi alat yang benar-benar akan digunakan oleh para desainer?
00:00:22Klik subscribe dan mari kita bahas.
00:00:24Bukan rahasia lagi kalau AI belum terlalu hebat dalam hal desain.
00:00:28Maksud saya, coba lihat yang satu ini.
00:00:30Meski menambahkan kemampuan dengan model tercanggih memang membantu,
00:00:33terkadang Anda ingin sedikit mengubah desain atau mendapat persetujuan klien sebelum mulai menulis kode.
00:00:38Di sinilah Pencil berperan.
00:00:40Ini adalah alat desain berbasis agen yang bekerja secara lokal di IDE Anda atau sebagai aplikasi mandiri.
00:00:46Alat desain ini sangat cocok bagi orang yang suka menggunakan Claude Code seperti saya.
00:00:51Jadi, mari kita coba demo singkatnya.
00:00:52Inilah tampilan Pencil dalam segala kemegahannya.
00:00:54Jika Anda pernah menggunakan Figma, ini akan terasa sangat familier dengan opsi di sebelah kiri
00:00:59dan beberapa opsi khusus untuk kanvas atau frame di sebelah kanan.
00:01:03Ini adalah file pertama yang akan Anda lihat setelah selesai menyiapkan Pencil.
00:01:07Daripada melewati langkah satu dan dua,
00:01:09saya akan langsung ke langkah tiga agar Anda bisa melihat apa yang terjadi.
00:01:12Nah, ini adalah prompt-nya di sini,
00:01:14dan Anda bisa klik 'run' untuk menjalankan prompt ini di dalam jendela obrolan di sampingnya.
00:01:18Tapi yang sebenarnya akan saya lakukan adalah menggunakan Claude Code di terminal saya,
00:01:22yang sudah memiliki semua 'skill' dan server MCP saya serta segala hal yang biasa saya gunakan,
00:01:26sehingga Pencil bisa mendapatkan manfaat dari semua itu.
00:01:29Jadi saya akan menyalin prompt ini dan di dalam Claude Code—omong-omong, selamat ulang tahun yang pertama ya—
00:01:33saya akan tempel prompt-nya dan saya instruksikan untuk menggunakan server MCP Pencil,
00:01:37hanya untuk berjaga-jaga agar aman.
00:01:39Pada dasarnya, prompt ini meminta Pencil untuk mendesain dasbor platform manajemen rover
00:01:44menggunakan komponen-komponen tertentu.
00:01:45Yaitu komponen yang ada di bawah sini di dalam Lunaris UI kit.
00:01:50Jika saya kembali ke frame-nya, Anda bisa melihat dasbornya sedang dibuat secara real-time.
00:01:56Dan jika saya kembali ke Claude Code, kita bisa melihat detail apa yang sedang dikerjakan.
00:01:59Ia menggunakan alat 'batch design' MCP Pencil untuk mengisi bilah navigasi.
00:02:05Langkah pertama sudah selesai, yaitu menyiapkan struktur tata letak utama.
00:02:08Kembali ke Pencil, Anda bisa melihat desainnya ditambah dan diubah secara langsung.
00:02:13Sekarang setelah Claude selesai, kita bisa mulai memodifikasi desainnya secara real-time.
00:02:17Sejujurnya saya sangat terkesan dengan apa yang mampu dihasilkannya,
00:02:20mulai dari memilih ikon yang tepat hingga penggunaan warna dan elemen 'pill' yang bagus di sini,
00:02:25sampai ke tombol-tombol yang keren ini.
00:02:27Saya perhatikan tulisan “show 10 records” ini agak terlalu mepet ke samping.
00:02:31Jadi saya akan klik di sini dan mengubah sedikit padding-nya.
00:02:34Itulah keindahan dari Pencil.
00:02:36Apa pun yang ingin Anda ubah dalam desain, bisa dilakukan seperti di Figma,
00:02:40tetapi Anda tidak terpaku pada satu UI kit saja.
00:02:42Faktanya, ada banyak pilihan, mulai dari shadcn, Lunaris, Halo, Nitro,
00:02:48dan masih banyak lagi lainnya.
00:02:49Jika saya klik shadcn, saya punya lebih banyak opsi di area tema
00:02:54untuk mengubahnya ke mode gelap, mengubah beberapa tema seperti warna kuning untuk tombol,
00:02:58dan bahkan mengubah latar belakang keseluruhannya.
00:03:01Tersedia juga UI kit yang bisa saya gunakan sebagai panduan desain.
00:03:05Misalnya, mari kita buat sesuatu dari nol.
00:03:08Saya akan klik di sini, dan secara default ia menggunakan fitur chat,
00:03:11tapi saya bisa menyalin ini dan membawanya ke jendela obrolan.
00:03:13Namun sebelumnya, saya akan klik file, lalu 'new' untuk mendapatkan lembar kosong.
00:03:17Lalu saya beri lebar di atas 800, mungkin 1024, dan buat tingginya sedikit lebih panjang.
00:03:24Dari sini, dengan frame terpilih, saya minta Claude untuk menggunakan panduan gaya (style guide).
00:03:28Setelah selesai, saya akan memberikan prompt untuk membuat sebuah situs web
00:03:32toko roti Prancis bergaya Bohemian, mengambil gambar dari Unsplash, dan seterusnya.
00:03:36Saya tekan enter dan kita lihat apa hasilnya.
00:03:39Saya tidak tahu apa yang akan terjadi, jadi mari kita lihat.
00:03:42Karena saya menggunakan 'superpower skill',
00:03:45ia mengajukan beberapa pertanyaan lanjutan mengenai situs web tersebut.
00:03:47Dan sekarang ia mulai bekerja.
00:03:49Ia malah menyarankan frame yang lebih lebar dari yang saya buat di awal.
00:03:52Video ini akan saya percepat agar prosesnya terlihat lebih singkat.
00:03:55Sekarang tampaknya Claude telah menyelesaikan tiga halaman yang dijanjikannya.
00:03:59Jika kita perhatikan desainnya, sejujurnya ini sangat mengesankan.
00:04:02Memang ada beberapa hal yang ingin saya ubah,
00:04:06tapi jika saya melihat ini di internet, saya tidak akan menyangka ini buatan AI,
00:04:10mulai dari logonya, gambar yang dipakai, hingga seluruh tata letaknya.
00:04:14Ini terlihat luar biasa.
00:04:16Saya tidak terlalu khawatir dengan masalah kecil yang ada,
00:04:17karena saya hanya perlu klik dua kali pada bagian yang ingin diubah.
00:04:20Di sini saya bisa menggeser teksnya seperti ini dan sedikit mengubah isinya.
00:04:24Nah, itu dia. Masalahnya sudah teratasi.
00:04:26Sekarang saya akan minta Claude untuk mengodekan ini menjadi situs web yang berfungsi.
00:04:30Dan inilah hasilnya. Ini situsnya.
00:04:32Tadi saya tidak menyangka ia akan menambahkan latar belakang gambar roti ini.
00:04:35Karena itu tidak ada di desain aslinya, tapi tidak apa-apa.
00:04:38Mari kita gulir ke bawah.
00:04:39Semuanya hampir sama persis, satu per satu, ini sangat impresif.
00:04:44Mari kita lihat halaman “Our Story” dan... sempurna.
00:04:47Terlihat persis seperti di desain, dengan teks yang bagus, tiga langkah proses,
00:04:52dan fakta bahwa mereka hanya memakai bahan yang mereka makan sendiri, itu keren sekali.
00:04:56Semua gambar berada di tempat yang tepat dan menu-nya pun terlihat sangat bagus.
00:05:00Saya suka garis horizontal yang ditambahkan di akhir setiap item.
00:05:04Keunggulan desain ini adalah karena dibuat oleh AI,
00:05:07saya bisa menghubungkannya ke database mana pun. Jadi ini menggunakan data asli.
00:05:10Saya bisa pakai alat MCP atau skill lainnya untuk meningkatkan kualitas situs ini.
00:05:15Belum lagi, jika saya sudah punya desain di Figma,
00:05:18saya bisa buka file dan impor dari Figma untuk menggunakannya di Pencil juga.
00:05:22Saya sudah sertakan tautan situs ini di deskripsi agar Anda bisa mencobanya sendiri.
00:05:25Sejujurnya saya sangat senang membuat berbagai desain hanya dengan perintah
00:05:29dan melihatnya terwujud langsung di depan mata dengan kemampuan untuk mengeditnya kemudian, rasanya ajaib.
00:05:35Terlebih lagi, file Pencil murni berupa JSON,
00:05:38sehingga mudah bagi agen AI untuk memahami dan menerjemahkannya ke dalam kode.
00:05:42Namun sehebat apa pun Pencil, ia belum sempurna.
00:05:46Saya sempat mengalami masalah dengan fitur chat bawaan yang entah kenapa tidak merespons.
00:05:50Overlay 'generating' pada file baru terkadang tidak hilang kecuali saya simpan atau muat ulang Pencil,
00:05:56dan terasa agak lambat saat melakukan tindakan tertentu.
00:05:59Tapi jujur saja, saya rasa itu masalah kecil yang kemungkinan sedang dikerjakan oleh timnya,
00:06:04termasuk kemampuan untuk membuat atau mengimpor UI kit kustom seperti dari Tailwind UI.
00:06:11Dan perlu diingat, alat ini sepenuhnya gratis untuk digunakan saat ini.
00:06:15Jadi manfaatkanlah sebaik mungkin karena ini mungkin tidak selamanya gratis karena didukung modal ventura.
00:06:19Saya ini bukan seorang desainer. Ya, kejutan, kan?
00:06:22Dan meski saya belum mencoba alat MCP Figma atau Sketch, dari apa yang saya lihat di internet,
00:06:28sepertinya Pencil jauh lebih mudah disiapkan karena integrasinya yang mulus dengan banyak alat.
00:06:34Bicara soal kemudahan, jika Anda ingin Claude Code mendesain UI terminal secara instan daripada
00:06:39mengodenya secara manual, silakan tonton video tentang Claude Canvas ini,
00:06:42yang akan menunjukkan caranya kepada Anda.