| Istilah | Arti |
|---|---|
| PenDev | Alat desain berbasis kode yang sebelumnya bernama Pencil, gratis, dan bisa dipakai bersama agen coding. |
| design engineering | Peran yang menggabungkan keahlian desain dan kemampuan membangun antarmuka langsung di kode. |
| Agent Client Protocol | Protokol yang menghubungkan alat desain dengan agen coding seperti Claude Code atau Cursor CLI sehingga agen terdeteksi otomatis. |
| MCP | Protokol yang menghubungkan agen AI dengan alat lain, seperti Figma atau PenDev, tanpa perlu menyalin konteks secara manual. |
| Cursor | Editor kode berbasis AI yang dalam video ini disebut sebagai salah satu agen coding yang bisa dipakai di PenDev. |
| OpenRouter | Layanan penyedia berbagai model AI yang bisa dipakai sebagai agen di PenDev. |
| PRD | Dokumen kebutuhan produk yang menjelaskan masalah, solusi, pengguna, dan user story sebuah aplikasi. |
| screens | Daftar layar aplikasi yang ditulis dalam dokumen agar agen AI tahu apa saja yang harus didesain. |
| components | Elemen UI yang dipakai berulang, seperti tombol atau status bar, yang cukup diubah sekali untuk semua layar. |
| UI Review | Skill untuk meninjau dan merapikan UI yang dipakai pembicara dari kursus AI for UI. |
| HTML skill | Skill untuk mempublikasikan hasil desain menjadi halaman HTML yang bisa dibagikan. |
| Next.js | Kerangka kerja web berbasis React yang dipakai sebagai templat awal proyek pembicara. |
Video ini dibuat Faiz Intifada dan membahas cara ia memakai PenDev sebagai alat desain harian untuk membuat UI aplikasi mobile. Dulu PenDev bernama Pencil. Pembicara beralih dari Cloud Design karena PenDev gratis dan bisa dipakai bersama agen coding seperti Claude Code, Cursor CLI, Gemini, atau OpenRouter melalui Agent Client Protocol. Alur kerjanya dimulai dari rekaman rapat dengan klien, yang ditranskrip dan dibuat notulen oleh Grockbot. Notulen itu lalu dijadikan dasar untuk menyusun dokumen kebutuhan produk atau PRD memakai skill dari GitHub. Pembicara meminta agen bertanya dulu dan tidak membuat asumsi sendiri, lalu menghasilkan PRD yang berisi masalah, solusi, kriteria sukses, dan user story.
Setelah PRD jadi, agen membuat daftar layar dan dokumen desain dari screenshot aplikasi lama yang sudah ada di App Store dan Play Store. Komponen yang dipakai berulang, seperti tombol dan status bar, dibuat dulu supaya cukup diubah sekali untuk semua layar. Pembicara memakai skill UI Review serta skill dari Emil dan Jacob Kocher untuk merapikan tipografi, tata letak, dan bayangan yang berlebihan. Hasil draft pertama berisi sekitar 81 layar. Pembicara tetap memberi arahan sendiri, misalnya dengan mencari referensi di Pinterest selama sekitar satu jam dan memakai MCP Mobbin untuk mencari contoh UI. Desain lalu diekspor sebagai HTML mandiri dan dipublikasikan dengan skill HTML agar engineer tinggal mengimplementasikannya.
Kata kunci
- PenDev
- Agent Client Protocol
- PRD
- UI Review
- Menunjukkan alur kerja harian design engineering memakai PenDev (dulu Pencil) yang gratis dan bisa memakai agen coding yang sudah ada seperti Cursor, XAI, OpenRouter, dan Gemini lewat MCP atau Agent Client Protocol.
- Menyusun PRD, daftar layar dan komponen (tombol, state, empty state), memakai skill UI Review, dan meminta AI bertanya alih-alih membuat asumsi sendiri.
- Memeriksa visual lewat browser, mempublikasikan dengan skill HTML, dan menerapkan desain langsung ke Next.js.
Tulis catatan pribadimu untuk video ini. Catatan tersimpan di akunmu dan bisa dibuka dari perangkat mana pun.