Buku Agentic UI Design Workflow

Sampul buku Agentic UI Design Workflow

Buku tutorial bahasa Indonesia pertama yg nge-cover topik penerapan AI dalam UIUX Design secara holistik.

Panduan buat solo player dan team untuk mengubah design dari POC ke production code tanpa ngorbanin kualitas.

BACA BUKU DISINI

4.8 (50+ reviews)

Apa kata pembaca

APAKAH KAMU MERASA

I feel u. Saya pun ngerasain hal yang sama dan kita ga sendiri. Dari 500+ designer yang daftar dan nyobain buku ini, semua punya keresahan yang sama.

Tiap hari ada tools baru.

Figma Make hari ini, Claude Design besok, entah apa lusa. Tapi perubahan tool itu baru di permukaan aja, yang sebenernya lagi berubah adalah cara kita mendesain di era agentic AI.

Buku ini ngajak kamu pindah ke cara pikir baru, men-challenge convention dan framework lama, memaksa kamu berpikir buat diri kamu sendiri. Biar ga panik lagi tiap ada tools baru, biar ga ngerasa ketinggalan saat industri lagi mencari bentuk barunya.

Buku ini dirancang untuk mendampingi kamu berproses melalui 4 tahapan. Kita mulai dari membangun mindset, lalu belajar menerjemahkan PRD menjadi design brief. Setelah itu, kamu akan masuk ke sesi praktik yang seru: mengeksplorasi desain menggunakan AI baik dari blank canvas maupun mengembangkan varian dari Design System yang sudah ada.

Perjalanan ini ditutup dengan tahap delivery, di mana kamu akan belajar cara mengkonversi Desain Figma ke POC (proof of concept), handoff ke tim developer, hingga Scaling Agentic Design Workflow ke Production Pipeline secara utuh. Setiap tahap yang kamu lewati didesain agar pemahaman dan skill kamu semakin advance.

Buku ini berisikan 40% pondasi pola pikir, 40% workflow kerja, dan 20% real production case study. Semuanya disertai latihan praktek di tiap modul. Ga cuman dapet teori kamu juga bakal ngelakuin banyak practical hands-on.

Saya meracik workflow ini selama 13 bulan terakhir, ngumpulin pelajaran dari 500+ designers dan menyajikannya dengan jujur. Tidak semua eksperimen saya masukin ke buku ini, hanya workflow yang bener2 saya pake sehari-hari, sehingga waktumu ga terbuang ngetes hal yang sudah saya buktiin ga berhasil.

TABLE OF CONTENT

Introduction

  • A typical day in the life as a Startup Designer
  • Di luar sana, semua sedang “memasak”

Mindset Foundations in the AI Era

  • MODUL 1: Mindset shift — dari Creator ke Conductor
  • MODUL 2: Design process baru, beyond Double Diamond
  • MODUL 3: design.md — bahasa baru antara designer dan AI

Framing & Benchmarking

  • MODUL 4: Problem framing & benchmark research
  • MODUL 5: Translate PRD jadi Design Brief

Use Case 1 — Zero to UI

  • MODUL 6: Fitur Claude ada banyak, which for what
  • MODUL 7: Agentic design dari blank canvas

Use Case 2 — Design Iteration at Scale

  • MODUL 8: Eksplorasi varian dari UI dan DS yang sudah ada
  • MODUL 9: Claude sebagai Design Critic

Use Case 3 — Convert Figma to Production Code

  • MODUL 10: Empat tingkatan cara convert
  • MODUL 11: Convert Figma dengan single prompt
  • MODUL 12: Convert Figma dengan Skills
  • MODUL 13: Convert Figma dengan Multiple Agents
  • MODUL 14: Scale up jadi production pipeline

Handoff & Scaling

  • MODUL 15: Handoff hasil vibe coding ke developer
  • MODUL 16: Membangun Design System dengan AI
  • MODUL 17: GitHub sync untuk designer
  • MODUL 18: Deploy ke Cloudflare, live website
  • MODUL 19: Supabase sebagai database

Cheat Sheet

  • MODUL 20: Semua prompt, template, checklist dalam 1 halaman

UNTUK SIAPA BUKU DIGITAL INI?

Junior Designer

  • Yang takut digantiin AI dan butuh skill baru biar tetep relevant
  • Yang mau naikin kesempatan di-hire di global market
  • Yang baru masuk kerja dan butuh shortcut tanpa kompromi craft

Mid-level designer

  • Yang dituntut atasan untuk masukin AI tapi ga ada arahan
  • Yang capek liat output AI inconsistent dan ga sesuai brand
  • Yang mau upgrade dari "AI buat brainstorming" ke "AI sebagai design partner"
  • Yang mau handoff nya bisa langsung dipake dev, ga jadi reference doang

Senior, Lead & Principle designer

  • Yang lagi ngerancang AI adoption strategy buat tim dan org
  • Yang udah jalanin agentic workflow tapi belum punya framework yang rapih
  • Yang mau own complete workflow dari Figma sampai production code
  • Yang mau ngebangun dan maintain Design System pakai AI

Solo designer / Freelancer

  • Yang harus deliver end-to-end dari research sampai handoff
  • Yang butuh efisiensi tanpa kompromi kualitas
  • Yang mau bisa scale tanpa nambah headcount

Design Manager / Head of Design

  • Yang lagi ngebangun design culture di era AI
  • Yang butuh framework buat onboard tim ke agentic workflow
  • Yang mau nentuin KPI yang sesuai dengan cara kerja baru
  • Yang butuh material training internal yang udah teruji

MEREKA YANG SUDAH MEMULAI...

BELI SEKALI, AKSES SELAMANYA

“Dibanding course-course Claude yang beredar, ini jauh lebih practical dan akurat. Literally satu-satunya tutor yang lo butuhin di era banjirnya konten AI slop.”

Harga special Launch-Day. Berlaku hingga timer selesai atau stock habis duluan.

23:59:59

BASIC

AI as Design Partner

Cocok buat yang mau mulai dari NOL dengan agentic workflow yang udah teruji.


Rp699K Rp999,000
AKSES BASIC
  • [✓]Mindset shift, dari Creator ke Conductor
  • [✓]The new design process, beyond Double Diamond
  • [✓]Design.md, bahasa baru antara designer dan AI
  • [✓]Problem Framing dan Benchmark Research
  • [✓]Translate PRD ke Design Brief

  • USE CASE 1 - ZERO TO UI

  • [✓]Fitur Claude ada banyak, which for what?
  • [✓]Agentic Design dari Blank Canvas

  • USE CASE 2 - DESIGN ITERATION AT SCALE

  • [✓]Eksplorasi varian dari UI dan Design System yang sudah ada

Akses buku selamanya, untuk 1 email.

PRO

Production-Ready Figma to Code

Cocok buat yang ingin convert Figma ke Production Code secara regular, konsisten dan akurat menggunakan Multi-agents.


Rp999K Rp1,299,000
AKSES PRO
  • [✓]

    Semua isi Basic +

    AI sebagai Design Crits, 4 tingkatan convert Figma ke production code (single prompt, Skills, multiple agents, scale up jadi pipeline).


  • Use Case 3 - Convert Figma jadi Production Code

  • [✓]Claude sebagai Design Critic
  • [✓]Intro perbandingan 4 tingkatan cara
  • [✓]Convert Figma dengan single prompt
  • [✓]Convert Figma dengan Skills
  • [✓]Convert Figma dengan Multiple Agents
  • [✓]Scale up untuk production pipeline

Akses buku selamanya, untuk 1 email.

ULTIMATE

Handoff & Scaling Agentic Workflow with Your Design System

Cocok buat builder, studio dan product team yang mau ownership penuh: bangun, deploy, dan siap scale produk sendiri dengan AI.


Rp1,199K Rp1,999,000
AKSES ultimate
  • [✓]

    Semua isi Pro +

    Handoff ke developer, build Design System dari NOL sinkron ke GitHub, deploy menjadi live web, setup Supabase sebagai database.


  • HANDOFF DAN SCALING

  • [✓]Handoff hasil vibe coding ke developer
  • [✓]Membangun Design System dengan AI
  • [✓]GitHub sync untuk designer
  • [✓]Deploy ke Cloudflare, live website
  • [✓]Supabase sebagai database

  • bonus

  • [✓]Cheat Sheet — semua prompt, template, checklist dalam 1 halaman

Akses buku selamanya, untuk 1 email.

YANG SERING DITANYAKAN

Aku newbie, enaknya ambil paket yang mana?

Mulai dari Basic dulu. Modul 1–8 udah cukup buat kamu ngerasain workflow agentic-nya, dari mindset shift sampe bisa generate POC sendiri. Tapi kalau kamu udah kerja di tim atau pengen punya workflow lengkap sampai production-ready (handoff ke developer, design system, deploy), Pro atau Ultimate justru pilihan paling worth it — kamu langsung dapet gambaran utuh end-to-end tanpa perlu upgrade dua kali. Dan karena sekali beli akses-nya seumur hidup, ambil paket atas dari awal sering malah jadi yang paling hemat.

Bedanya paket Basic, Pro, sama Ultimate apa?
  • Basic (Modul 1–8): mindset shift + POC generation. Cocok buat yang pengen rasain workflow-nya dulu.
  • Pro (Modul 1–15 + 17): production-ready Figma-to-code + developer handoff + Design Critic. Cocok buat designer di tim maupun solo/freelance yang mau implementasi code-nya >95% akurat — sama persis kayak yang kamu design di Figma. Bagus buat naikin value & harga jual service kamu.
  • Ultimate (semua modul): semua isi Pro + bikin Design System sendiri, GitHub sync, deploy jadi web live (Cloudflare) & database (Supabase). Cocok buat yang mau nge-transform tim jadi workflow AI-embedded top tier, lengkap dengan production pipeline yang siap scaling pakai multi-agents.
Aku belum pernah pake AI buat design serius, masih bisa ngikutin?

Bisa. Modul 1–2 dimulai dari mindset shift dulu, bukan langsung teknis. Yang penting kamu udah punya basic design fundamental (typography, spacing, hierarchy). Justru buku ini cocok buat kamu yang ngerasa “telat” mulai.

Untuk pemula dan awal pertama kali terjun ke dunia ini, sangat cocok dan terarah — bagus banget buat base pemahaman tentang perkembangan sekarang. Nice works team HD!”
— Fridandy, Design Manager
“Overall buat pemula enak banget, terutama buat orang yang kerjaannya belum terekspos sebagian/sepenuhnya pake AI.”
— Bobby, B2B Product Designer
Aku bukan designer (tapi developer / founder / PM), worth it ga?

Worth it. Buku ini ngajarin kamu cara translate ide ke UI yang beneran jalan, tanpa harus jago Figma. Banyak founder & developer di waitlist yang pengen bisa bikin POC sendiri tanpa nunggu designer.

Apakah perlu subscribe Claude berbayar buat ngikutin buku ini?

Ga wajib, tapi sangat disarankan. Buat eksplorasi awal, free tier Claude masih cukup. Tapi kalo kamu mau serius pake workflow ini buat kerjaan harian, minimal Claude Pro (sekitar Rp300rb-an/bulan). Buat tim yang udah siap fully onboard agentic workflow, Claude Max worth banget karena limit-nya jauh lebih leluasa dan ga kena throttle pas lagi ngebut. Detail tier-nya aku bahas di Modul Cheat Sheet.

Bedanya sama tutorial “AI for designers” lain di YouTube apa?

Buku ini bukan showcase “AI is amazing, ini 10 tools keren”. Fokusnya ke proses kerja yang reproducible, dari brief sampe handoff ke developer. Ada framework namanya Agentic Design Loop (ADL) yang bisa kamu pake terus, bukan trick sekali pake.

Tone-nya jujur dan dewasa. Banyak konten ‘AI for designers’ yang beredar 2025-2026 itu hype-coded. Buku ini ambil sudut yang lebih realistis: AI bisa generate cepet, tapi judgment itu mahal.”
— Beta tester, Senior Designer (9+ thn)
Aku pake Mac/Windows lama, specnya pas-pasan. Aman?

Aman. Semua tools yang dipake jalan di mesin standar. Buat Intel Mac aku kasih workaround khusus di beberapa modul (misal pake html.to.design plugin sebagai pengganti Paper Design native app).

Berapa lama aku bisa selesain semua modul?

Tergantung paket dan ritme kamu. Basic realistis 1–2 minggu kalo nyambil kerja. Pro sekitar 3–4 minggu. Ultimate butuh lebih panjang karena ada eksekusi handoff & design system. Tapi tiap modul self-contained, ga harus selesai berurutan.

Hasil design-nya beneran bisa dipake ke production, atau cuma POC doang?

Bisa production. Di paket Pro & Ultimate ada modul khusus buat handoff ke developer + design system. Beberapa beta tester udah pake workflow ini buat project klien beneran.

“Aku suka bagian ketika perintahkan Claude untuk selalu update design.md. Ini jujur aku baru paham selama ini kenapa design yang aku buat tidak pernah konsisten padahal sudah membuat design system. Setelah aku coba, design yang aku buat selalu konsisten.
— David Bagus Prasetyo
Kalo aku ga cocok, bisa refund ga?

Sayangnya buat saat ini belum ada opsi refund. Karena format-nya digital book via Notion, sekali akses dibuka ga bisa ditarik balik. Makanya aku saranin pelajarin dulu paket breakdown-nya dengan teliti.

Apakah website ini juga dibuat pake AI?

Yeap. Landing page ini dibuat pakai workflow yang aku sendiri ajarin — tepatnya dari Figma ke Production Code di Use Case 3. AI yang eksekusi implementasi, hosting, dan deploy ke server, jadi designer bisa fokus di crafting content dan interaction.

TENTANG PENULIS

Wasil, penulis buku

Halo, nama saya Wasil.

Saya product designer yang bekerja dan tinggal di Singapore. Saya lulus kuliah Master sebagai Engineer ITB dengan predikat cum-laude kemudian bekerja di perusahaan multi-national berpusat di California, sampai pada saatnya saya memutuskan untuk berhenti dan memulai karir sebagai UI UX Designer.

Allhamdulillah sekarang sudah berjalan 14 tahun dan merupakan perjalanan yang mengasyikan dan sangat menguntungkan (mentally and financially rewarding).

Saat ini saya memimpin tim desain di perusahaan travel no.1 di Middle East. Disana saya membangun dan menginisiasi agentic workflow dalam pembangunan digital produk, dengan tetap mengedepankan manusia sebagai pengambil keputusan dan feedback loop utama. Selain itu juga membangun design culture yang sehat antara designers, engineers, PM dan “AI agents”.

Sebelumnya saya pernah bekerja di beberapa startup, agency dan corporate nasional/international di kota2 besar lainnya, seperti Bandung, Jakarta, Redlands CA, dan Austin TX. Saya merasa beruntung bisa punya pengalaman untuk kerja dan belajar langsung dengan tim yang jago2, pinter2, dari berbagai latar belakang dan negara yang berbeda2.

Selain bekerja, saya pun senang berbagi ilmu dan pengalaman dengan rekan seprofesi melalui akun Halo Designers. Semoga dengan membaca buku tutorial ini temen2 bisa mengikuti jejak saya dalam membangun agentic workflow yg sehat sebagai tim maupun solo designer.

Sapa saya di Twitter, Instagram atau LinkedIn.

Beberapa buku Best-Seller yg pernah saya buat:

Petunjuk Memulai UX dari NOL 4.8 (9,101+ books sold)
HaloFigma, Tutorial Interaktif Design System 4.7 (10,001+ downloads)
Tutorial Interaktif Dashboard UI 4.6 (5,001+ downloads)
Cara Bikin Creative Assets Konsisten Pake AI 4.8 (301+ books sold)