| Istilah | Arti |
|---|---|
| Pen.dev | Aplikasi desain mirip Figma yang dulu bernama Pencil, dilengkapi agent AI dan MCP, dan dipakai sepanjang video ini untuk membuat design system serta desain website. |
| design system | Kumpulan aturan visual seperti warna, tipografi, spacing, radius, dan ikon yang menjadi pedoman agar seluruh halaman desain tampil konsisten. |
| TanStack Start | Framework untuk membangun aplikasi web berbasis React yang disebut pembicara sebagai pilihannya saat nanti mengubah desain Pen.dev menjadi kode. |
| React | Library JavaScript populer untuk membangun antarmuka web, yang menjadi target akhir ketika desain di video ini kelak diubah menjadi aplikasi. |
| Mobbin | Situs kumpulan referensi desain aplikasi dan website yang di video ini dipakai lewat MCP untuk mencari inspirasi varian desain portfolio. |
| Lucide | Koleksi ikon garis bersumber terbuka yang dipilih design system di video ini sebagai gaya ikon tipis yang seragam. |
| shader | Efek grafis yang dihitung komputer untuk membuat latar bergerak atau bertekstur unik, tersedia sebagai template siap pakai di Pen.dev. |
| komponen | Bagian antarmuka yang berdiri sendiri seperti tombol, navbar, label, atau input, yang di video ini disusun agar dipakai berulang di banyak halaman. |
| reusable components | Komponen yang dibuat sekali lalu dipakai ulang di semua halaman, sehingga perubahan pada sumbernya langsung ikut mengubah seluruh desain. |
| Canva | Aplikasi desain grafis daring yang terkenal dengan banyak template, dipakai di video ini sebagai perbandingan untuk fitur template di Pen.dev. |
| Next.js | Framework React populer untuk membuat website, yang disebut di video ini sebagai alternatif bila penonton tidak memakai TanStack Start. |
| portfolio | Website pribadi yang memamerkan karya, pengalaman, dan testimoni seseorang, yang di video ini didesain ulang milik pembicara sebagai bahan percobaan. |
Faiz Intifada membagikan alur kerjanya mendesain UI dengan bantuan AI memakai Pen.dev, aplikasi desain mirip Figma yang dulu bernama Pencil dan dirancang ramah AI. Banyak penontonnya bertanya bagaimana memakai Pen.dev dari nol, jadi video ini menunjukkan cara membuat design system lengkap, menerapkannya ke desain website portfolio, lalu menyiapkannya sebelum dijadikan kode React dengan TanStack Start atau Next.js. Masalah yang ingin ia hindari adalah AI slop, yaitu desain mentah hasil prompt asal-asalan, serta komponen yang berubah-ubah bentuknya setiap kali AI mendesain halaman baru. Video ini berguna bagi desainer dan developer yang ingin hasil desain AI tetap rapi, konsisten, dan siap diteruskan ke tahap coding.
Faiz memulai dengan menyimpan file .pen di folder proyek, lalu menjelaskan tab agent yang memakai Agent Client Protocol sehingga Claude Code, Codex, dan Cursor otomatis terhubung, serta MCP Pen.dev yang bisa dipanggil dari Claude Code CLI. Ia juga menunjukkan goodies berupa template mirip Canva dan shader untuk latar unik. Dengan browser bawaan, ia mengimpor website x.ai sebagai referensi yang bisa diedit beserta screenshot satu halaman penuh, lalu memakai model Opus untuk membuat design system dengan font Geist, delapan bagian spec board, semantic token, spacing 4px, dan ikon Lucide. Setelah itu ia meminta redesign portfolio faizintifada.com, mencari varian lewat Mobbin MCP, membuat versi mobile, dan menyusun reusable components sebagai satu sumber kebenaran yang diterapkan ke semua halaman. Desain bisa diekspor ke PNG, WebP, JPEG, PDF, atau HTML statis, sedangkan proses handoff ke kode dijanjikan di video bagian kedua.
Kata kunci
- Pen.dev
- design system
- TanStack Start
- Lucide
- Menunjukkan proses dari nol membuat design system dan desain website memakai Pen.dev, lalu menjadikannya aplikasi React dengan TanStack Start (atau Next.js).
- Melihat komponen dan varian, template ala Canva, shader untuk latar, ikon Lucide outline, serta mendesain situs portofolio sebagai percobaan.
- Mengubah desain menjadi komponen reusable dan shared; bagian dua akan menjadikannya kode dengan Claude Code, Cursor, atau OpenCode.
Tulis catatan pribadimu untuk video ini. Catatan tersimpan di akunmu dan bisa dibuka dari perangkat mana pun.