00:00:00Mengapa transisi desain ke kode masih menjadi bagian yang paling bermasalah dalam membangun dengan AI?
00:00:04Anda mungkin berpikir sekarang sudah ada cara yang rapi untuk mendesain sesuatu,
00:00:06mengubahnya, dan kodenya otomatis ikut diperbarui.
00:00:08Namun setiap alat yang dicoba tim kami hanya bisa desain atau kode saja. Tidak pernah keduanya.
00:00:13Stitch dan Bolt bersifat prompt-to-code. Tidak ada kanvas desain yang bisa Anda buka kembali dan edit.
00:00:17Figma MCP bersifat read-only, jadi AI bisa mengambil desain darinya tetapi tidak bisa mendesain di sana.
00:00:22Dan jika Anda menggunakan agen coding secara langsung, setiap perubahan desain berarti harus menulis prompt dari awal.
00:00:26Jadi, saat Pencil.dev mulai naik daun dengan klaim sebagai jembatan dua arah antara
00:00:31desain dan kode, itu menarik perhatian kami. Namun saat kami benar-benar mulai membangun dengannya,
00:00:35jembatan tersebut tidak semulus yang kami bayangkan. Dan yang awalnya hanya sekadar menguji alat,
00:00:40berubah menjadi tim kami yang harus menggali lebih dalam untuk membuat alur kerja ini benar-benar berjalan.
00:00:44Anda mungkin sudah pernah mendengar tentang Pencil.dev,
00:00:47alat desain AI baru yang sedang populer di kalangan desainer belakangan ini.
00:00:51Ini pada dasarnya adalah jembatan antara alat desain populer yang khusus untuk merancang
00:00:56dan alat pengembangan AI yang dirancang untuk mengimplementasikan pola desain tersebut.
00:01:00Ini terhubung ke semua IDE agentic populer dan berisi banyak fitur yang
00:01:04membuat alur kerja desain-ke-kode lebih lancar seperti pembuatan komponen,
00:01:08dukungan pustaka UI, dan pembuatan class CSS otomatis.
00:01:11Bagi mereka yang menggunakan Figma, antarmukanya mungkin adalah yang paling mirip.
00:01:15Saat ini gratis dan tim kami mengunduhnya untuk mencobanya.
00:01:18Kami mengambil aplikasi desktopnya dan muncul opsi untuk terhubung ke semua platform AI
00:01:23yang telah kami instal. Kami menghubungkannya ke Claude Code karena itulah
00:01:27alat utama kami, dan Pencil.dev pada dasarnya menggunakan platform coding AI seperti
00:01:32Claude Code dan Codex di balik layar. Begitu aplikasi desktop terinstal,
00:01:36MCP otomatis dikonfigurasi untuk Pencil.dev dan semua alatnya muncul di
00:01:41Claude Code seketika. Setelah siap, semua model OpenAI dan Anthropic tersedia
00:01:46di dalam chat. Kami memilih Opus 4.6 dari semua model yang ada. Alat ini punya kemampuan
00:01:51desain yang sangat kuat. Ia menyimpan file desain sebagai file .pen di dalam folder proyek
00:01:56yang pada dasarnya berbasis format JSON, sehingga bisa dilacak versinya dengan Git. Namun fitur
00:02:01yang benar-benar membedakannya adalah kemampuannya sebagai jembatan dua arah antara
00:02:06agen coding dan desain di dalam aplikasi. Tapi hasilnya tidak persis seperti ekspektasi kami
00:02:10tentang sinkronisasi dua arah tersebut. Kami mengira Claude atau agen AI apa pun akan otomatis
00:02:16sinkron dari desain ke kode dan sebaliknya, tapi ternyata tidak begitu. Kami harus memintanya sinkron
00:02:21secara manual melalui prompt karena ia tidak otomatis menyinkronkan desain ke kode; ia menganalisis
00:02:26desain bagian demi bagian lalu menerapkannya di file HTML. Hasilnya memang persis
00:02:32dengan apa yang ada di kanvas, tapi menurut kami melakukannya berulang kali setiap ada perubahan desain itu terlalu merepotkan.
00:02:37Tim kami sedang mengerjakan landing page untuk studio pengarah kreatif yang sudah kami
00:02:41desain menggunakan Pencil.dev yang terhubung dengan Claude Code, dan dari yang kami lihat,
00:02:46hasilnya adalah situs web yang solid dengan arahan kreatif yang muncul jelas sesuai niat kami. Kami
00:02:51menerapkan desain tersebut menggunakan Claude sekali dan menyinkronkannya ke proyek Next.js yang kami kerjakan,
00:02:56tetapi ada banyak elemen pada halaman yang tidak kami sukai dan perlu modifikasi. Kami perlu mengubah
00:03:01banyak hal berulang kali, tapi kami tidak bisa terus-terusan meminta Claude untuk sinkron lagi
00:03:06dan lagi dengan proyek yang sedang dikerjakan karena itu tugas yang repetitif. Jadi,
00:03:10kami membuat sebuah skrip untuk menyelesaikan masalah ini. Skrip ini menggunakan beberapa pustaka JavaScript
00:03:15yang dibuat untuk memantau perubahan file. Skrip ini juga memiliki periode cooldown untuk mencegah Claude
00:03:20terpanggil berulang kali yang bisa membuang-buang token dan menyebabkan sesi mencapai batasnya. Tujuan utama
00:03:25dari skrip ini adalah untuk terus memantau file .pen yang berisi desain tersebut dan setiap kali ada
00:03:29perubahan pada file, ia akan memicu Claude CLI dengan prompt yang berisi instruksi cara sinkronisasi dengan proyek.
00:03:34Namun periode cooldown ditambahkan untuk memberi jeda di setiap penyimpanan agar tidak langsung menyinkronkan
00:03:39semua perubahan kecil sekaligus. Sekarang untuk menggunakannya, kami cukup menjalankan perintah “npm run sync”
00:03:44dan worker langsung mulai memantau file .pen desain kami. Jika kami memodifikasi
00:03:49apa pun saat skrip ini berjalan, setiap kali kami menekan kombinasi tombol simpan file, itu akan memicu
00:03:54Claude CLI secara otomatis dan mulai menyinkronkan perubahan tersebut ke proyek tanpa kami harus
00:03:59menyuruhnya secara eksplisit. Namun sebelum menggunakan skrip ini, Anda harus melakukan satu langkah awal.
00:04:04Anda harus mengonfigurasi semua izin yang diperlukan untuk proses pengeditan seperti
00:04:10izin baca-tulis dan pemanggilan tool MCP dengan menambahkannya di setting.json di dalam folder .claude,
00:04:15karena jika tidak, Claude akan tertahan di permintaan izin tanpa batas waktu. Tanpa itu, Claude tidak bisa
00:04:20membuat perubahan di proyek dan tidak akan bisa menyelesaikan implementasi dengan benar. Dengan skrip ini,
00:04:24semuanya menjadi lebih mudah karena kami tidak perlu lagi meminta sinkronisasi ke proyek secara manual.
00:04:29Setiap iterasi dipantau oleh skrip dan otomatis dikirim ke Claude untuk diimplementasikan. Skrip ini beserta
00:04:34kode sumber aplikasi ini tersedia di AI Labs Pro. Bagi yang belum tahu, itu adalah
00:04:39komunitas yang baru saja kami luncurkan di mana Anda bisa mendapatkan template siap pakai yang bisa langsung dipasang
00:04:43ke proyek Anda, baik untuk video ini maupun video sebelumnya. Jika Anda merasa konten kami bermanfaat dan ingin
00:04:48mendukung channel ini, inilah cara terbaik untuk melakukannya. Link-nya ada di deskripsi. Salah satu
00:04:52kemampuan Claude Code adalah menggunakan sistem multi-agen yang memparalelkan dan mempercepat banyak
00:04:57tugas. Kami berpikir mengapa tidak mencoba pengaturan multi-agen dengan Pencil.dev. Karena sudah terhubung sebagai MCP,
00:05:02kami mencoba menggunakan beberapa agen untuk implementasi berikutnya, membiarkan masing-masing mengerjakan aspek
00:05:07aplikasi yang berbeda secara bersamaan. Menggunakannya dengan Claude Code menjadi lebih mudah karena ia bisa mengakses
00:05:12semua file dokumen yang kami simpan sebagai konteks seperti PRD dan UI Guide yang biasanya kami buat sebelum
00:05:18memulai sebuah proyek. Kami perlu mengimplementasikan halaman lain dari situs web tersebut, bukan hanya
00:05:23sekadar landing page. Kami memintanya menangani tugas ini dengan instruksi eksplisit agar setiap agen mengambil
00:05:28aspek berbeda dari aplikasi yang ingin kami bangun. Jadi kami mulai dengan eksplorasi dan memanggil beberapa
00:05:33tool MCP. Karena kami punya lima halaman, Claude meluncurkan lima agen dan membiarkan masing-masing mengerjakan
00:05:39halaman khusus. Tak lama kemudian, versi awal desain aplikasi pun tercipta. Ia menghasilkan
00:05:44semua halaman yang dibutuhkan di aplikasi dan memastikan desainnya serasi dengan landing page menggunakan
00:05:48font dan gaya yang sama di seluruh bagian. Setelah desain selesai, kami menekan command + S untuk menyimpan file
00:05:54dan skrip pun beraksi secara otomatis menerapkan desain tersebut ke aplikasi untuk mempercepat
00:05:58proses manualnya. Sekarang, meskipun situs web pada titik itu sudah terlihat solid, ada sesuatu yang kurang.
00:06:03Tidak ada gerakan pada halaman dan butuh animasi scroll yang akan memandu mata menyusuri
00:06:08tata letak yang sebelumnya statis. Untuk itu kami menggunakan GSAP yang merupakan pustaka andalan kami karena
00:06:14animasi javascript-nya yang kuat dan kemudahan dalam menerapkan animasi kompleks. Untuk ini kami
00:06:19menggunakan prompt yang sangat detail yang ditulis dalam XML. Kami menggunakan XML karena model Claude secara eksplisit
00:06:26dilatih untuk bekerja lebih baik dengan prompt terstruktur XML, sehingga memudahkan mereka memproses instruksi.
00:06:31Prompt tersebut berisi rincian tugas, semua dependensi yang diperlukan, dan semua catatan penting
00:06:36yang menargetkan setiap elemen spesifik dan menentukan dengan tepat bagaimana perilaku setiap bagian, semuanya dalam
00:06:41tag masing-masing. Saat kami memberikan prompt ini ke Claude Code, ia melakukan banyak penambahan dan menyertakan
00:06:46komponen dengan gerakan GSAP serta menginstal GSAP itu sendiri. Setelah bagian implementasi itu
00:06:51selesai, kami memeriksa situs webnya. Dengan tambahan animasi, situs web terasa lebih hidup dan
00:06:56interaktif. Seluruh pengalaman menggunakan situs web terasa sangat berbeda dari versi sebelumnya
00:07:00yang hanya statis tanpa gerakan sama sekali. Prompt ini juga tersedia di
00:07:04komunitas AI Labs Pro di mana Anda bisa mengunduh dan menggunakannya untuk proyek Anda sendiri. Selain itu, jika Anda
00:07:09menikmati konten kami, pertimbangkan untuk menekan tombol hype karena itu membantu kami membuat lebih banyak konten
00:07:14seperti ini dan menjangkau lebih banyak orang. Sekarang, meskipun kami sudah menambahkan efek visual scroll menggunakan
00:07:19GSAP, kami menambahkan lapisan lain dengan Lenis di atas scroll GSAP awal. Lenis adalah pustaka
00:07:25smooth scroll yang bersifat open source dan merupakan salah satu alat terpopuler untuk menciptakan tata letak yang lebih imersif
00:07:30pada situs web. Anda mungkin bertanya-tanya mengapa kami menggunakan pustaka lain padahal sudah ada
00:07:35animasi scroll yang dikonfigurasi dengan GSAP, tapi begini: Lenis dan GSAP sebenarnya saling melengkapi.
00:07:39GSAP mengontrol apa yang terjadi saat Anda scroll, dan Lenis mengontrol tampilan dan nuansa dari scroll
00:07:44itu sendiri. Tanpa Lenis, scroll akan terasa melompat-lompat, namun dengannya halaman mengalir mulus dan
00:07:49animasi GSAP terasa lebih alami saat terpicu. Jadi kami menggunakan prompt detail lainnya untuk
00:07:54tugas ini. Kami mengikuti pendekatan prompt XML yang sama seperti yang kami lakukan pada GSAP. Prompt Lenis ini
00:07:59berfokus pada peningkatan animasi scroll yang sudah ditambahkan di langkah sebelumnya. Prompt tersebut
00:08:04mencantumkan dependensi, mengatur semua instruksi, dan berisi deskripsi detail tentang
00:08:09elemen-elemen, cara menempatkan animasi, dan bagaimana fungsinya berjalan, diakhiri dengan aturan. Kami
00:08:13memberikan prompt ini ke Claude Code dan membiarkannya membuat banyak perubahan di seluruh repo. Setelah ia
00:08:18mengimplementasikan semuanya, kami memeriksa situsnya dan peningkatannya sangat signifikan. Perubahan utamanya
00:08:23adalah penambahan scroll yang lebih halus yang membuat navigasi di situs web menjadi pengalaman yang jauh lebih imersif.
00:08:28Setelah situs web dibangun dan siap dengan semua fiturnya, hal terakhir yang harus dilakukan
00:08:32adalah memastikan situs tersebut memenuhi standar UX sebelum dianggap selesai. Untuk itu kami membuat sebuah
00:08:38skill menggunakan skill creator yang disebut UX Audit. Skill ini ditujukan untuk memeriksa kualitas elemen UI,
00:08:44meninjau berbagai aspek situs web, dan memastikan semuanya mematuhi standar UX.
00:08:49Ini terdiri dari beberapa fase seperti pengumpulan konteks, analisis checklist sembilan poin, dan fase pelaporan
00:08:54di mana ia memberi skor berdasarkan serangkaian kriteria. Ini juga mencakup referensi dengan checklist UX
00:08:59yang berisi detail dari kesembilan poin tersebut dan skrip Python yang ditujukan untuk
00:09:04menemukan berbagai masalah UX secara terprogram, masalah-masalah yang mungkin terlewat oleh mata manusia.
00:09:08Setelah kami menjalankan skill audit, ia merangkum semua masalah dan menandai dua masalah kritis serta beberapa masalah
00:09:14besar dan kecil. Masalah kritisnya adalah kontras warna. Metrik penilaian memberikan peringkat
00:09:19C pada situs web tersebut karena semua masalah yang ditemukan. Ia memberikan detail perubahan yang diperlukan dan
00:09:24setelah perubahan ditentukan, kami memintanya untuk menerapkan perbaikan tersebut. Setelah semua perubahan
00:09:29dilakukan, meskipun secara visual mungkin tidak terlihat jauh berbeda, ada peningkatan besar dalam kegunaan
00:09:34yang membuatnya lebih mudah dinavigasi dan juga sudah sesuai dengan standar WCAG. Saat kami menjalankan skill audit lagi,
00:09:40peringkat situs web naik dari C ke B, yang berarti semua masalah utama telah diperbaiki dan hanya tersisa
00:09:45beberapa masalah kecil. Itu membawa kita ke akhir video ini. Jika Anda ingin mendukung channel ini dan membantu kami
00:09:50terus membuat video seperti ini, Anda bisa melakukannya dengan menekan tombol Super Thanks di bawah. Seperti biasa, terima kasih
00:09:55telah menonton dan sampai jumpa di video berikutnya.