Alat Desain AI
Ringkasan Episode
Bantu KoreksiEpisode ini menelusuri gelombang alat desain berbasis AI: getdesign.md, Stitch dari Google, Claude Design, Open Design, dan Impeccable. Pembukaannya adalah pengakuan jujur bahwa jago CSS dan jago visual design itu dua keahlian berbeda yang sering dianggap satu paket — CSS punya spesifikasi yang bisa dipelajari, sementara membuat desain yang punya karakter seperti Vercel atau Apple adalah hal lain, dan justru di situlah AI sekarang menutup celah. Dibahas juga kontroversi getdesign.md yang bisa meniru design token situs populer seperti Airbnb hanya dengan satu perintah. Kekhawatiran utamanya bukan soal originalitas — meminta desainer meniru situs lain juga selalu bisa dilakukan — melainkan bahwa scam jadi jauh lebih mudah: dulu penanda penipuan adalah tampilan yang acak-acakan karena scammer tidak punya budget untuk desainer, sekarang halaman phishing bisa dibuat sepolished aslinya. Bagian demo membandingkan Stitch dan Claude Design. Stitch bagus di one shot tetapi kacau saat diminta revisi, sehingga lebih baik memulai chat baru daripada menyunting; ia juga masih menuntut ekspor ke AI Studio dan instruksi teknis manual seperti memecah komponen React agar tidak menumpuk di satu file. Claude Design menang di alur ujung ke ujung dalam satu antarmuka — generate design system dulu (sekitar 30 menit), lalu prototipe yang komponennya sudah siap pakai, dan design system itu bisa dipakai ulang satu tim. Ditutup dengan design.md, format markdown terstandar dari Google untuk design token beserta CLI linter-nya, dan Figma MCP yang membuat perbandingan spacing serta line-height jadi urusan mesin ke mesin, bukan lagi tebak-tebakan mata.
Poin-poin Utama
- •Jago CSS dan jago visual design adalah dua keahlian berbeda yang sering diasumsikan satu paket — CSS punya spesifikasi yang bisa dipelajari, sedangkan membuat desain yang berkarakter tidak, dan di situlah alat AI paling menolong
- •Bahaya terbesar alat yang bisa menyalin design token situs populer bukan soal originalitas tetapi scam: penanda klasik penipuan adalah tampilan acak-acakan, dan itu kini bisa dihapus dengan mudah
- •Stitch bagus untuk one shot tetapi berantakan saat diminta merevisi, jadi lebih efektif membuka chat baru daripada menyunting hasil lama
- •Claude Design unggul karena alurnya ujung ke ujung dalam satu antarmuka: generate design system dulu, lalu prototipe dengan komponen yang sudah siap pakai — dan design system itu bisa dipakai ulang oleh satu tim
- •design.md adalah markdown biasa dengan frontmatter terstandar untuk design token, jadi tetap berguna meski kita tidak memakai tool Google — cukup suruh AI assistant membacanya
- •CLI design.md bisa mengecek field yang hilang, mendeteksi token duplikat atau penamaan yang tidak konsisten, memeriksa kontras WCAG, dan mengekspor ke konfigurasi Tailwind
- •Figma MCP mengubah perbandingan spacing, line-height, dan font menjadi urusan mesin ke mesin — tetapi scope-nya harus dipecah per komponen, karena satu halaman penuh membuat coding agent kewalahan
[musik] Dapatkan hanya di domainesia. Halo. Halo.
Wis. Halo. Halo. Halo. Kencang sekali semua. Apa kabar?
Halo. [tertawa] Kita mencoba kita sambil ini ya mencoba trial produk baru.
Open source. [tertawa] Video Ninja ini open source kan ya? Iya, open source kita pakai vdo.
Ini sambil trouble shooting ya, Teman-teman ya.
[tertawa] Sambil trouble syuting. Mudah-mudahan aman. Ini sebenarnya agak ganggu sih suara sendiri kedengaran jadinya.
Tapi keren juga sih ini bisa ada kelihatan detailnya lengkap.
Iya, kalau lengkap sih lengkap ya, tapi kayak audio settingnya biasa sama UX-nya aja. Iya, UX-nya masih saya bisa lihat detailnya Eka nih.
Remote pear info kelihatan CPU-nya pakai 8 pakai pakai Chromium 147 platform.
Platformnya make Intel. Oh, masih Intel masih pakai Intel.
Eh, bisa kelihatan [tertawa] kelihatan semua ya?
Eh, enggak sih? Platform Intel tuh aneh ya? Kayaknya bukan deh.
Bukan ya? Saya tahu Mas Risa pakainya M1.
M1. Betul. Salah berarti salah info.
Iya. Mungkin emang enggak precise ya.
Halo. Bisa, bisa. Aman. Aman. K. Enggak enaknya platform baru gini ya.
Bolak-balik. Halo. Halo. Gimana caranya? Enggak, Mas. Mas Oh, kayaknya admin doang deh. Tap gua enggak
ada. Oh, iya. Enggak bisa kalau dari ini enggak. Tapi kalau dari telinga saya bisa dengar suara sendiri.
[tertawa] Ya, itu agak [berdehem] aneh sih kalau enggak bisa dengar suara sendiri.
monitor. Heeh.
Baik. Baik. Kita bisa baca komen enggak? Coba teman-teman kalau ada yang nonton dipost komennya.
Oh, gitu. kemarin e pas puasa kali ya
gak kan yang masih kirim studio studio YouTube-nya.
Iya. Heeh. Iya, YouTube live-nya. Kalau enggak minta minta ininya Mas aja apa [tertawa] minta password social engineering-nya
gitu ya. Baru minggu lalu. [tertawa] 2 minggu kayak 2 minggu lalu 3 minggu lalu gitu.
Entar itu itu pas gua lagi di pas gua lagi di Kroasia itu hah yang background gua beneran laut.
Oh kirain kena scampas lagi di sana.
bukan lebih tepatnya ste isue Heeh.
Klarifikasi dulu eh apa UI design, visual design. Kan orang kalau yang di luar front end kayak asumsinya ya udahlah kalau kalau bisa
dan suka apa front end kayak HTML, CSS jago itu kayak eh UI design atau visual desain pasti langsung ngerti. Nah, gua
Lihat transkrip lengkap (532 segmen lagi)
dulu krisis kayak krisis kepercayaan diri habis karena ee apa ya? terlalu gampang nerima asumsi itu. Terus masalahnya gua punya kombinasi yang aneh
eh skill visual design minim. Tapi kalau CSS, HTML atau apalah React JavaScript itu kan apa ya itu logis dan eh relatif
lebih mudah dipelajarin. Ada semua ada spesifikasinya kan. Walaupun mungkin kalau orang yang di luar front end kalau
misalnya apa enggak tahu cara kerja CSS dianggap aneh. Tapi kan sebetulnya kayak box model itu kan ada teorinya, ada
spesifikasinya, ada penjelasannya, bisa dipelajarin, bisa dipraktikin kayak apalah flexbox atau grid atau apapun itu kan ee ada keilmuannya kan bisa
dipelajarin yang salah ee apa penerapan yang benar gimana, yang salah gimana, terus kayak misalnya accessibility eh kontras rasio kalau misalnya kontrasnya
kurang akibatnya apa? Kan bisa dilihat kan kalau ee ada hitungannya kontrasnya 3 bing 0 atau 4,5 4,5 bing 1 itu lebih
enak dilihat makudnya itu ee apa ya itu bisa dipelajarin. Nah, sedangkan kalau visual desain yang terutama bukan kalau
yang basic okelah ya kontras rasionya harus cukup terus ada hierarki kalau H1 tuh ukurannya harus jauh lebih besar
dibanding H2. Kalau itu mah masih bisa dikira-kira. Tapi kalau yang sampai punya karakter, terutama yang UI visual
design digabung sama branding kayak Versel kan punya ciri khas sendiri atau yang paling klasik kan Apple kan. Kalau
website-nya Mac itu kan bisa wow itu kayak nah gue tuh enggak bisa itu dan dulu tuh kayak yang apa insecure banget.
Wah gua enggak bakal bisa jadi front end webd yang proper nih karena enggak bisa hal itu. Nah dulu belum ada AI
sayangnya. Nah, maksudnya itu kayak ee dari luar itu dianggap semua di apa?
Dibandling dipaketin dianggap hal yang sama. Padahal sebetulnya itu dua hal yang berbeda. Nah, sekarang mungkin ee dengan AI ya udah kayak udah udah enggak
jadi masalah lagi. Karena kayak misalnya kalau CSS sih ee apa ya? Gua optimis gampang bisa nguasain, tapi sampai
sekarang enggak bisa bikin desain yang wow yang bagus. Nah, sekarang bisa di leverage ke AI design tool.
Kok sampai sekarang? Ah, apa tuh?
Oh, iya. Gimana sih ini?
[tertawa] Eh, udah gini ya? Belum tahu caranya.
Oh, belum disiapin [berdehem] agak berbeda.
Kemarin terus kalau sudah pakai kabar-kabarin dong ke kita kalau pakai.
kita
I
prototyping ya.
Iya. ee cuman e supaya gimana gimana sama minta tolong
punyanya GitHub punyanya Heeh punyanya Shopify Polaris color schem-nya tapi ini Automing
wow. Kak gimana sih? Heh. Ini bisa ditiru dong.
Tahu bisa ditiru dong ya. Tinggal tinggal
ini I dengar. Iya, samain kayak Airbnb. Heeh. Berarti tinggal ambil dari
keren. Terus dimasukin ke cloud desain langsung jadi ya ke desain tool apun.
doang. Jadi ini nanti mau dibuka jadi enggak mau didemoin cloud desain nanti mau.
I ya. Tapi bentar si kontroversi ini.
He. Ada stage lovable Vzero yang maksud saya
yang establish kan stage stage lovable Vzero.
Nah, tapi kalau si belum Oh, kagak kagak bahas si geta-nya ini berarti ya.
Bahas, bahas dulu aja ini. Iya. Eh, enggak sih bebas bahas itu.
Oh, heeh.
Kalau fontnya gimana tuh fontnya? dikasih tahu enggak font-nya apa?
Kan kadang kan font itu kan ada license tuh tuh dijelasin inter is used here as a substitute for serial eh VF
VF. Oh. Nah, jadi sebetulnya ini kan masuk kalau menurut gue sih ini masuk gre eh maksudnya kontroversi itu kan kayak
socially lah. Tapi kan kalau di apa?
Kalau dipikir-pikir gitu, kalau dibedah kan enggak ngelanggar apa-apa ya.
Sebetulnya kita kan ee apa secara teori kita bisa ke airbnb.com ya udah bikin apalah e coding chrome extension buat
nge-escribe dan mengan menganalisa CSS file CSS-nya atau bahkan manually eh ngecek di def tools CSS-nya kan bisa.
Cuma kayaknya apa ya kita secara umum nih ekosistem developer kayak masih belum belum adaptasi sama dengan adanya
AI kan e scrapping itu semua kita kan sebenarnya udah kebayang ya prosesnya kayak gimana buat ngambil ini ee buat
ngambil semua desain token dari Airbnb dan lain-lain. Terus kita juga sebetulnya kita ngerti caranya bikin apa sih kayak ee outline desain token kayak
gini ngerti. Cuma karena kalau dulu ini kan terlalu apa ya tas intensif ngabisin waktu sama tenaga. Jadi enggak pernah
ada yang bikin gitu walaupun secara teori bisa. Nah sekarang dengan adanya AI semua bisa diutomate bisa di
scrapping. Kayak kita belum kebiasa aja sama e ada fenomena kayak gini.
Eh sebentar ada yang bilang suara saya enggak ada. Benar enggak?
Kalau sih dengar-dengar aja. Jadi ngomong dari tadi itu gak kedengar.
Dari tadi ngomong gak ada yang dengar.
Wah, sampai domin kedengaran sih. Waduh, kedengaran.
Kedengaran ya. Apa karena Mas Oh, karena Mas Riza mute.
Iya, jadinya enggak masuk ke berarti berarti yang feedback itu salah berarti ya yang di Iya.
Hm. Ya, maafkan maafkan. yang feedback itu berarti dari si OBS-nya.
Dari OBS-nya ya. Oke. Terus dulu beli salah sekarang apakah sudah dengar coba? Mana teman-teman suaranya? Eh, suaranya
sekarang sudah. Oke, terima kasih. Dari tadi berarti saya ngomong [tertawa] yang dengar kecuali Eka dan Ivan ya.
Okelah ya. Padahal seru tadi yang ngejelasin kontroversi se Oh iya ulang ya. Ulang ya. Ulang ulang ulang ulang.
Beberapa minggu yang lalu ramai di Twitter ee ada muatan yang bikin Telwin.
Eh merasa kalau tools get design ini ee cukup apa ya kontroversi ya apa ya sebutannya ya ee kayak kurang original
lah. Kurang original ya. ya emang enggak dimaksudkan untuk menjadi original kan ee memang cuman terlalu apa ya terlalu
gampang meniru website yang lain mungkin itu konsern utamanya di situ kali ya yang menyebabkan ee orang-orang dengan gampang gitu ya
misalkan kita bikin aplikasi sesuatu terus habis itu kita pakai desainnya Airbnb dengan desain dmd gini ini hasilnya juga
mirip banget gitu ya walaupun jenis website-nya beda. Airbnb kan buat ini kan buat penginapan kan mungkin kita
bikin aplikasi chatbot misalkan tapi desain sistemnya menggunakan Airbnb banget gitu ya. RNB.
Heeh. Maksudnya kalau orang lihat jadi itu persis Airbnb.
Persis Airbnb. Nah, ini sih yang bahaya ee apa di luar kalau gue mikir malah konsern utamanya bukan ya mungkin beda perspektif kayak
kalau originalitas mah ya udahlah ya masek kita ee harus mulai berusaha nerima originalitas ya udah mati juga
maksudnya kayak kasar kasarnya nih ee kita mau bikin desain kan bisa bilang ke desainernya Mas Mbak tolong bikinin
samain persis kayak Airbnb ya kalau yang versi manusianya kan gitu Cuma ini diutomate jadi tapi kern gue
adalah scam. Tahu enggak sih? Ee kalau apa website populer atau banking atau apa misalnya YouTube Creator Studio atau Airbnb bisa
dengan mudah dengan gampang banget ditiru. Misalnya itu tadi ada chatboot-nya ya orang tinggal kirim scam ee apa
loginlah ke akun Airbnb Anda, bla bla bla ya. pokoknya apa ee itu memfasilitasi scam dengan jauh lebih
mudah. Di mana kalau dulu mungkin ee scammer enggak punya budget sebesar itu untuk ee apa nyuruh webdef atau desainer
eh buat bikinin aplikasi atau website yang persis kayak Airbnb dan profesional dan kelihatan polis dan profesional. Kan
dulu tail-nya scam, indikator reflek scam kan adalah acak-acakan ya, enggak profesional lah. Nah, kalau sekarang dengan adanya itu jadi gampang dong
ngcam. Iya, terlalu gampang ya meniru ya kayak klik fishing fishing pokoknya ee apa macam-macam perilaku fishing bakal
sangat. Sebenarnya di dunia nyata kan sudah terjadi seperti itu kan di luar di luar teknologi loh. He.
Anggap itu pernah lihat enggak sih itu tendanya ayam penyet atau ayam ayam penyet yang gambarnya pecel lele? Ada
ayam jagonya, ada ikan lelenya, ada apa tendanya kan gitu semua.
Kalau misalnya sudah satu berhasil di daerah situ nanti satu jalan itu tendanya begitu semua. Ada yang nomor
71, 72 [tertawa] loh. Enggak. Tapi kalau itu kan ee imitasi ya, bukan scam yang malisi kalau ini tuh kayak jauh dipermudah kalau
orang mau ngaku-ngaku eh kami dari Airbnb dan seterusnya.
itu sih bisa juga jadi scan plus imitasi mengatakan misalnya ee kita subsidiary dari Airbnb jadi dibikin website-nya
super mirip tapi sebenarnya website-nya berbeda, servis yang berbeda, tapi subsidiary Iya. Nah, nah itu sih apa konsernnya
adalah itu kalau yang kayak cuma semi-semi imitasi kayak yang contoh yang lebih dekat sama teknologi kayak toko-toko
toko-toko atau tukang servis iPhone ee yang bukan resmi ya yang bukan bukan Apple Store itu kan ya kayak grafiknya
style-styleennya dimirip-miripin. Tapi kan selama ini kita bisa ya kita bisa lihatlah itu style Mac atau style desain
Apple tapi ala-ala karena emang bukan toko resmi. Ya udah kalau itu kan ee apa lebih straight forward. Nah, kalau yang
ngaku-ngaku itu sih yang agak seram ya.
Iya. Agak mengerikan dengan mudahnya kita melakukan duplikasi ya, memirip-miripkan terus domainnya dibikin mirip gitu ya.
Kalau kata yang ngomong ee sekarang-sekarang ini berarti kita harus ngedukasi orang di sekitar kita dengan lebih proper nih
kayak tugas moral. Iya ya. Yang di teknologi harus ini ya apa namanya harus sangat hati-hati ya.
Makudnya karena ancamannya ya dari dulu okelah emang udah ada risiko kayak gitu cuma sekarang ancamannya jadi kayak
lebih tinggi aja tukang kalau kayak aplikasi kayak Android app atau iOS app bisa juga berarti ya dikasih apk-nya atau dikasih
screenshot-nya screenshot-nya dikasih terus dikasih tahu oh ini layout-nya terus bikinin e desain oh ini desain tool bukan scam ya bisa
aja itu sih bisa kalau itu Iya. Iya.
Terus dibikin aplikasi scam-nya [tertawa] nih.
Tapi kalau aplikasi itu kan lebih ada kontrolnya ya. Eh yang centralize. Eh misalnya kalau kita ee bikin air spasi
PNB, kita submit ke apa itu Android Play Store atau Apple Store kan pasti kena reject kan.
Tapi ya namanya biasanya APK-nya APK-nya APK-nya dikirim lewat WhatsApp undangan perjalan undangan [tertawa] undangan. APK undangan.MD undangan.md.
Iya. Itu apa risikonya nambah tapi maksudnya enggak sefatal kalau web app kan tinggal diklik langsung muncul.
Iya sih. Oke. Nah, ini ada sebenarnya salah satu tools ya.
Cuman dia hanya menghasilkan desain.md aja sebenarnya walaupun instalnya open ya.
Iya. Tuh build on Google's design MD spec. Jadi kalau nah ini ada ceritanya ini menarik ini si
desain.m jadi ee apa ya enggak maksudnya ceritanya ya itu sih tadi udah singkatnya itu ee format kayak kan
sekarang ada agents.m atau standardiz markdownmkdown. Jadi sebetulnya itu markdown biasa, tapi kayak ada fronter tertentu yang ee distandarisasi biar
bisa dipakai di berbagai tools. Nah, Google ini bikin stitch. Stitch itu ya desain eh apa? E desain tool punya
Google ya 111 kayak Lovable Vzero dan lain-lain. Nah, jadi si design.md itu awalnya ya dipakai untuk stage sendiri
tapi habis itu diopen source kan eh oleh Google. Ada [berdehem] ada Greponya.
Nah, namanya standarisasi gini ya terserah ee bisa terserah masing-masing tools sih bisa mengadopsi atau enggak.
Kalau tools-nya Google kayak anti graffiti sama stait sih eh pakai. Nah, cuma enggak tahu cloud design eh support
atau enggak. Cuma ini menarik sih.
Oh, beda ya. Berarti sejauh ini yang adopsi baru toolsnya Google sendiri ya.
Jadi kalau kita enggak pakai mulai diadopsi sih sudah mulai kayaknya.
Oh ya berarti baguslah maksudnya apa mulai meluas. Jadi kalaupun kita enggak pakai tool stage itu kan e salah satu
kelebihannya adalah itu file markdown biasa. Jadi apa walaupun kita enggak pakai stitch atau anti graffiti ya tinggal ee suruh LLM atau AI
assistantnya baca file itu udah bisa dapetin semua data tentang desain token ya.
Siap. Termasuk ya buat yang dipakai si getdesign.mD itu getdesign.md.
Betul. Oh ini ya github.com/googleabs code ya.
Belum tunjukin. Bentar share screen lagi. Share screen-nya harus nyala mati-nyala mati gini.
Enggak bisa di-hide. Jadi ini awal mulanya ya di sini ya.
Heeh. Ini dari yang yang standarisasi siapa?
Sejak kapan sih? Iya. Iya. Google mempropose eh maksudnya ini emang sengaja diopen source eh untuk keperluan eh spesifikasi desain token untuk ee
penggunaan LLM. Lihat aja ke bawah ada contohnya.
Oh iya ini dia. Jadi sebenarnya ya gini doang. Gini doangnya tuh maksudnya ya apa? Human readable cuma ada e kayak apa ya?
convention aja. Eh, struktur-strukturnya convention-nya e ya kita bikin di sendiri juga bisa kan cuma kan mikir apa
field apa yang dipakai terus kalau bikin sendiri-sendiri ya masing-masing tools enggak ada cara buat ee meng apa
men-streamlin pembagian kayak klasifikasi token-tokennya groupingnya kayak misalnya kalau di desain sistem itu kan ada warna selain warna ada roll warna
itu kan hijau, kuning, merah. eh role itu misalnya primary prim apa action primary foreground atau primary background atau apalah. Nah, ini tuh
kayak ngasih e konvensi yang nih udah ada udah ada template-nya kayak gini tinggal diikutin aja.
He. Jadi kalau yang di front-nya itu eh semua value tokennya didefinisikan di e frontnya.
Ini ya ternyata ya. He di sini baru deskripsinya ya.
Nah, terus yang di bodinya itu human apa? Natural language bahasa manusia biasa. E itu fungsinya untuk penjelasan
ngejelasin ya ituat sendiri primarynya bla bla bla.
Apa sih front meter itu? Gua pernah gua pernah ng-Google sih. Apa sih arti front meter?
Artinya apa? Coba jelaskan. Apa? Apa? Kalian menyebutkan volometer metadata bisa metadata yang dipisahkan oleh ee iya metadata yang jika dalam suatu mark dan
file ee ditandai oleh tiga karakter dash di awal file dan diakhiri dengan tiga karakter dash, bukan gitu ya?
sih enggak pakai bahasa yang definisi frontmeter itu sebenarnya di sebuah buku halaman depan-depannya itu adalah frontmeter ya daftar isi segala macam itu front
i jadi kata frontmeter itu dari buku zaman dulu dari print ya fisik iya nah kita tuh kayak sebagai penutur
bahasa Indonesia kayak enggak terlalu bias enggak terlalu terbiasa sama ini ya cuma sebetulnya kalau dipikir-pikir di bahasa Inggris itu ee semua istilah
Enggak semua maksudnya banyak istilah ee apa GUI itu yang diambil dari hal fisik kan ya, window, jendela file. File itu
kan berkas fisik kan. Makanya apa econnya juga suka kertas kan.
File apaagi ya? Apa nih maksudnya bikin apa nih?
Yang topik-topik tuh. Oh yang waktu ituiktopik.
Iya. cobain. Oh, cobain pakai ini.
Keren sekali. Apa banyak alternatifnya? Yang ini begini bentuknya.
Terus by the way ada stitch ini agak agak ada karena stitch ini kan di belakangnya pakai flash ya si zaman 3 flash ya. Jadi
bisa diganti kalau misalnya konteksnya konteksnya sudah terlalu besar jadi Bur.
Iya. Jadinya kalau bisa si chatnya itu dihapus. Jadi Oh dihapus one shot. One shot terus I dihapus. E
maksudnya kalau sudah misalnya kita dia bagus kalau nge-generate desain yang langsung jadi satu gitu yang pertama.
Tapi kalau kita minta dia berubahin mau twaking sedikit aja jadi ngacau dia.
Bahkan yang lama bisa hilang gitu apa.
Jadi ee jadi cara pakainya saya itu ee suka new chat new chat aja. Kalau jadi konteks yang lama hilangin aja. Jadi dia
bisa lebih iya sedikit lebih bagus lebih ringan. Lagian dia kan bisa terima eh any image upload. Jadi ya udah
tinggal dissave sebagai file kali ya.
Hm ini langsung dia sudah sudah generate langsung jadi react komponen sebenarnya belakangnya komponen belakang ya.
Kalau nah kalau diekspor itu sekarang sudah ada AI Studio.
Wah bisaudah jadi langsung dulu cuma dulu cuma bisa AI studio doang.
Iya. Terus bisa deploy, bisa ke lavable ke bolt. Uh, marah malah diarahkan ke lavable. Eh, lain ya.
ST ST ini dan AI Studio salah satu yang di dieriusin sama Google dihighlight. I iya.
Karena ada beberapa sih notebook LM Stitch Jules Jules itu apa J itu kayaknya seriusin deh enggak kayak anti graffiti yang
sekarang enggak tahu nasibnya ah enggak juga sampai build e build with AI aja pakai anti itu yang biasanya buat
ee biasanya di Firebase tuh beliau kan ee hilang jadi apa bikin video tentang ini.
Oh, udah muncul lagi. Ah, muncul lagi. Muncul lagi.
Tes. Nah, dari sini kalau teman-teman suka yang mana misalkan ini gitu ya.
Oke, sudah sudah. Eh, terus nanti bisa download zip atau code to clip ya enggak sih? Zip nanti di
dalamnya ada desain. MD. Terus habis itu cemplungin aja. K.
Kalau yang sekarang kita bisa ngedit desain. MD-nya juga di tengah-tengah bisa ngedit arbitrary. Jadi ada markdown-nya gitu. Kita misalnya emang
cuma pengin ganti merahnya kurang merah atau jadiin orange atau apalah atau jadiin ungu biar kelihatan AI. Nah, bisa
diubah satu item doang desain ND-nya.
Bisa juga pakai preset lain yang udah ada. Jadi sekali klik jadi berubah semua.
Tapi ya cocok cocok nasib-nasiban kan.
Iya. Bagusan mana sama cloud desain.
Nah, kita bandingin nanti ya sini.
Udah, udah enggak punya subscription sih. Udah enggak bisa lagi. Coba sekarang cloud desain.
Cloud desain. Yuk, share screen dulu. Ini screen-nya dimatiin dulu ya. ya. [mendengus] Ee caranya gimana ya ini?
Oh, gitu. Ee maaf sebentar saya masih kagok menggunakan entar screen aja deh biar gampang ya.
Cuma diperlu diclose-close yang enggak yang anono.
[tertawa] Bukan anono ya, Teman-teman ya.
Maksudnya yang tidak perlu dil. Oke.
Wih, langsung ngeri kali. Oke. Apa itu?
Sudah lihat belum? Udah. di sini aja sudah oke. So, ini cloud desain [berdehem] zoom in bisa terus ee karena ini ad karena ini adalah
account-nya company jadi e ya create new aja L. Nah, itu event personal bisa maksudnya kalau kalau kalau di
desain syem dia langsung ada yang lain bisa kelihatan. Jadi ini kan karena saya ini accountnya company. Jadi di company
itu kalau desain itu desain sistem yang kita bikin itu bisa dipakai sama satu tim yang lain.
I. Nah, saya berusaha untuk ee weekend lalu saya saya buat ee apa namanya? buat me
mau meredesain blog saya. Lalu em saya cuma iseng aja bertanya ke di chat GPT, visit website saya, saya mau redesain
dan kemudian interview terus bla bla bla bla bla bla ya dia.
Terus saya diinterview kenapa mau didesain? Terus kemudian saya kasih jawabannya. Terus dia bantuinlah ini bikin strukturnya segala macam.
Terus em dia kasih sedikit wencangan untuk tipe-tipe apa untuk desain sistemnya dari si CJ GPT. Terus saya cemplungin
aja ke cloud desain. Saya jadi dari GPT ini kan saya minta di desain sistem draft-nya nih.
Simpel aja sebenarnya. bagaimana bentuknya segala macam itu saya cemplungin ke cloud desain. Nah, di cloud desain itu
kita bisa generate desain system. Jadi saat mau create prototype kita bisa pilih desain sistemnya mau yang mana.
Jadi ada desain sistemnya saya yang saya buat waktu lalu dan bisa mau pilih mau buat wife atau high fidelity.
Nah, kita lihat ke desain sistemnya ya.
yang saya lakukan cuma kemarin tuh cuma cemplungin apa yang ada di desain sistemnya si dikasih sama si JPT terus
dijadiin begini sama dia. Jadi waktu itu saya cemplungin di chat di sini lalu jadi begini jadi langsung jadi UI
kit-nya ee seperti ini. Lalu artikel desain apa kayak potongan-potongannya, spesimen ee tipenya, terus kemudian color-nya,
color palet. Eh, kalau dark team-nya gimana?
Spacing ini dijen semua sama si eh sistemnya sama si cloud desain.
Nah, cloud desain ini bisa digunakan kalau ada subscription.
Iya. Nah, desain sistem ini juga eh terpisah ya ini buildingnya sama si ini. Jadi kalau session saya hari
[tertawa] ini jadi sesinya beda ya. Jadi kalau yang biasa kan session kita weekly limit.
Kalau CL desain punya punya limit yang berbeda makanya saya sudah habis di pakai 80%.
Nah, setelah tapi bisa ngubah e bisa milih kon gitu enggak? Enggak ada enggak ada komit dia di sini dia sampai desain. Jadi pertama
dia ngedesain desain sistemnya dulu terus dia jadiin desain file. Jadi ada skill dmd-nya.
Eh, ini karena saya mintanya jadi WordPress punya standar, dia kating time.jonj-nya, tetapi sisanya dia kasih aset-asetnya ee terus kemudian
komponen-komponennya dia generate HTML-nya. Dan kayak gini deh contoh HTML-nya.
Contohnya guide card ya. Enggak maksudnya bisa milih pakai opus atau sonet gitu?
Enggak ada. Enggak ada pilihannya. Kita enggak tahu model yang opus.
Bisa bisa bisa dia langsung ternyata defont-nya opus.
Oh, pantesan 80% habis. Iya. Terus enggak bayar sih jadi ya bodo amatlah.
Iya. [tertawa] Foya-Fa. Tapi kan bisa kena limit foya-foya. Ee ya. Jadi kalau misalnya kita bikin bikin pakai cloud desain,
generate dulu desain. Kita harus generate dulu desain sistemnya.
Jadi dan ini proses ini habis sampai sekit dari bisa sampai 30 menit dia bikin ini semua lengkap ini. Terus nanti
iya habis itu kita saya kayak ini kurang bagus kenapa terus ini kurang bagus kenapa? Nanti dia revise. Ini hasil
akhir. Nah, setelah desain sistem selesai, saya pilih kan personal block, pilih desain systemnya high fidelity create, nanti muncullah eh apa namanya?
Muncullah ee kayak gini isi chatnya. Jadi sebelum saya tunjukin ini ada chatnya kan?
dari awal terus kayak ee bikinlah page ini segala macam. Saya sebenarnya enggak enggak enggak chat, saya cuma copy paste aja
hasil dari percakapan saya di sini dari si chat GPT saya paste semua saya cemplungin.
Saya cemplungin aja ke sini terus pengin tahu jadinya kayak apa. Eh, ternyata hasilnya bagus. [tertawa] Mana hasilnya?
Ini hasilnya. Ini. Iya. Dan ini sudah jadi warna antropik sekali.
Iya, tapi ee dia kasih kayak gini juga sih.
Apa bisa kasih show twick-nya terus kemudian eh enggak bisa show twick.
Jadi ada varian dia kasih. Jadi variannya kayak personal kayak gimana?
Oh, dan ini sesuai dengan percakapan saya di chatpt. Terus eh tagline timnya bisa ya biasalah standar lah ya.
Terus aksennya bisa terakota. E mau aksennya yang ee signal blue mono.
Hmm. ini dia sendiri yang bawa. Jadi twon dia sendiri yang tentuin. Jadi ini enggak selalu sama tiap desain. Iya.
Oh dinamis ya itu ya tergantung sama percakapan kita.
Tergantung sama desain kita. Iya. Terus kita ah ternyata enggak butuh nih bagian latest notes. Ya udah matiin.
Jadi dia yang dia menyesuaikan dengan desain. Karena di desain yang lain saya dikasih twik yang begini. soalnya
isinya beda. Nah, terus ya tentu kita bisa ee bisa bisa komen lah ya. Bisa komen gimana yang kita mau komen terus
kemudian ee Oh, annotation ya? Anotation ya.
Iya. Dianotate terus kemudian suruh rubah.
Oh. E iya artikel bisa begini sama diensak jadi kayak kayak kalau misalnya
dieksport dan dijadiin jadi site sudah jadi ini cuma karena tujuan saya mau bikin dia jadi WordPress sudah jadi
juga tapi di komputer yang seberang ini.
Jadi saya remote desktop dulu. Tada. Ini di WordPress-nya.
Mantap. Ini WordPress. Hm. Belum live ya? Belum live.
Cuma yang lain page yang lain Samsung jadi [tertawa] WordPress statik dia nginject HTML yang tadi digenerate static
jadi baru fashion doang saya jadi nantilah we can project lanjutin lagi sampai kelar jadi sebenarnya saya suka pakai cloud
desain keren banget lebih apa kayak apa ya rasanya ya di ketimbang pakai Stitch Plus AI Studio, Google AI Studio. Saya merasa pakai
cloud desain ini lebih apa ya?
Lebih full apa? Bahasa lebih orang bego kayak saya aja bisa pakai gitu.
lebih solid ya, lebih sesuai kali bukan orang yang minim mengurangi hal orang yang minim skill, minim pengalaman
bisa pakai dan hasilnya keren lah.
Jadi ini kan sekali pakai saya waktu desain waktu lagi hacketon.
Jadi ee dan saya baru belajar saat itu juga dan yang makai ini adalah orang yang nonteknis. Jadi saya sedang
mengajarkan orang nonteknis yang di mana saya sendiri belum pernah pakai cloud desain di saat itu.
Jadi secara produk kayak udah matang gitu. Udah udah udah siap pakai gitu.
I dan hasilnya jadi wah. Nah, enaknya lagi kalau kayak stageit kan kita perlu ekspor, perlu ekspor gimana perlu jadi
desain MD kita minta generate tokens segala macam. Kalau ini dia udah udah langsung jadi. Jadi dari desain sistem
yang tadi yang bisa dipakai direuse segala macam orang di company.
Terus desain ee setelah jadi ee setelah jadi ee website-nya komponen-komponennya sudah langsung dibikin meskipun di-react ya, tapi komponennya sudah jadi. Jadi
sebenarnya secara website ini tuh sudah website. tadi.
Iya. I kalau kayak AI Studio memang sebenarnya dia juga sudah sudah bisa generate ke React React code,
React ya. ee website, tetapi masih merasa kalau saya kayak AI Studio itu jadi saya export dari Stitch ke AI
Studio dan di Studio itu saya masih kayak kayak pakai chat system untuk mengubah dan ee apa ya kayak masih
menginstruksikan secara teknis. banyak hal-hal teknis yang saya instruksikan ke E studionya supaya membuat sebuah ee supaya pertama react komponennya dipecah
jadi kecil-kecil. Kalau enggak dia bikin aja tuh satu file gede banget isinya satu app app.jsx JSX semua di semua di di
dicemplungin ke situ until saya minta oh pecah dong jadi beberapa komponen per folder di folder saya benar dan saya yang instruksikan
seperti itu. Ee jadi di Studio itu jadi sih jadi cuma kayak prototype.
Kalau yang di sini jadi sudah bisa siap pakai beneran sudah. Nah, kelihatannya pembeda utamanya ya itu sih kalau kayak bukan
perkara penggunanya ee teknis atau nontnis ya mungkin lebih ke ee end to end apa sih kayak end to end-nya
maksudnya beneran dari awal sampai akhir semua dalam satu unit. Jadi kayak eh kalau stage kan eh harus terbiasa sama
kanvas ya. Mungkin eh apa UI desainer yang biasa pakai Figma walaupun dia enggak bisa ngoding mungkin bakal lebih
lancar kan. E kalau misalnya apa ee enggak biasa ya walaupun non teknis orang non teknis juga bisa pakai stage kan karena enggak
perlu ngoding cuma ya itu harus membiasakan pakai kanvas harus ekspor.
Nah kalau ini kan apa ya sekarang orang awam pun udah bisa pakai chatbot kan udah banyaklah kayak awamnya pakai chat
GPT gitu kan ee itu hal yang sudah mulai familiar di banyak orang. Nah, ini kelihatannya si cloud design ngandalin
satu unified interface. Jadi, ya udah tinggal e intinya ngetik-ngetik di kiri itu kan e kanannya ada preview-nya, ada
list of files-nya kayak dari awal sampai akhir eh udah diurus beres sama cloud design.
Iya. Nah, cuma dia Google itu saya minta dia generate logo. H saya minta dia generate logo. Ada
kayaknya logo ee hilang gak tahu dari di mana saya minta di Jet logo tuh saya di bikinin.
Lu mau pilih yang mana katanya [tertawa] option A B.
Wow. Ini kayak gimana? Kayak UX UX-nya tuh udah itu banget ya, QX-nya eh simplified. Pokoknya kita ngetik, kita request si kiri,
kita diberi sesuatu entah itu berupa list of files, entah berupa pilihan jadi di render kan. Tapi kan user enggak
perlu ee mikir dan peduli di render atau list of files atau apa.
Ee hasilnya di kanan. Jadi input di kiri, output di kanan.
Dan beneran mungkin tadi Eka ke ini ya ke offline tadi. Jadi yang saya sampaikan tadi cloud desain itu beneran seperti full
proof. Jadi orang yang enggak punya pengalaman belum tadi gua dengar cuma apa enggak muncul ini aneh asli video
ninja ya gitu [tertawa] enggak? Nah kalau e gue justru poinnya apa ya? kelihatannya bukan eh pendapat ini pendapat bukan di e full proof-nya
setuju eh tapi lebih ke bukan perkara orang yang enggak punya pengalaman atau punya pengalaman karena e bisa diargumen
balik stitch juga kan enggak perlu ngoding apa-apa bisa langsung deploy netlify tapi kayak friction eh maksudnya eh one click deploy to netlify ya itu
tadi ee apa step-stepnya mungkin eh kayak harus breakdown ini itu kayak kayak itunya belum di-cover walaupun bisa-bisa aja kan stitch kan juga
tinggal pencet-pencet aja kan. Iya. Cuma ya friction kayak enggak smooth aja.
Bisa download, bisa export HTML, bisa hand off to cloud code juga bisa. Jadi langsung dikirimkan ke cloud code yang
di cloud code yang di awan.
Heeh. Yang awan. Cloud code yang awan yang di Iya. Tapi nanti kan bisa diemote kan.
Jadi yang cloud yang awannya kan kita bisa balikin lagi ke sial kan bisa juga lokal ya.
Iya. Nah, jadi bisa seperti itu. E, oke. Ini berarti menang di workflow-nya kali ya. Nah, itu kelihatan tadi
berusaha cari-cari termnya workflow-nya seperti buat enggak cuma buat ini ya. Enggak cuma buat dia cloud desain enggak cuma buat
website loh. Dia bisa buat slide deck, bisa buat apalah animation time based motion desain juga bisa.
I bisa ya. Nah, itu jadi kalau dipikir-pikir ekosistem apa Google atau Gemen kan sebetulnya ya dari Stage pun
eh bisa misalnya dibawa ke notebook LM atau Gemini misal eh generate slide itu juga bisa tanpa harus ngoding tapi
friction kan jadi ee mungkin sekarang betul ee yang bikin repot itu friction-nya walaupun orang nonteknis pun di atas
kertas ya bisa-bisa aja. Mau coba enggak nih?
sama masalahnya satu kalau ee apa modelnya Google tuh penyakitnya tadi Ivan sudah sempat mention bagusnya di one shot kalau minta revisi
tuh susah banget iya kita bikin coba coba minta kalkulator ya kalau itu emang betul ngerepotin orang yang enggak teknis sih
bikin kalkulator 10% cukup ya pencet ya tak tahu deh coba aja sih.
Start with sketch send. Cuma gini doang sih gua tah.
Nah, ini salah satu. Iya. Nanti janj baru gini token Anda habis.
Iya. Kekurangannya adalah Iya. You use 79% Friday apa Friday ini kalau punya apa namanya? Kalau udah punya subscription
cloud aman ya. Tapi kalau belum gak bisa juga kalau kayaknya kalau desain kalau desain enggak bisa ini deh
enggak ada yang enggak bisa subtion ya cloud desain enggak bisa enggak bisa ini enggak bisa non subscription
heeh hanya boleh subscription dia part of the service kan iya iya iya iya dan emang sekarang kan kalau penggunaan
model doang udah disaingin mocin murah nah selling pointnya nya Cloud ya. Ini nih kelihat maksudnya ee kemungkinan
bakal diseriusin. Em masih lama nih entar kalau sudah jadi mulai kelihatan ya apa pergerakan strateginya. Jadi kalau
eh antropic cloud ini awalnya kan dia bagus di coding kan coding tools ya munculnya cloud code kan semakin ke sini
dia semakin menuju ke any user ke user yang non teknis ada cloud enterprise eh tapi eh non coding
dan itu usage-nya banyak sih maksudnya kan Heeh sekarang orang produk orang marketing ya semua entrepreneur solo prener apalah
sekarang semua bisa bikin produk bisa bikin iya sementara makanya saya bilang non non yang pakai yang waktu kita hacketon
non non technical non itu sudah pada pakai iya jadi setelah pulang dari hacketon kemarin itu rata-rata sekarang
di tim saya itu sudahudah pakai cloud design sudah pakai cloud code mereka pakai cloud code untuk ngebikin
jadi saya tuh kayak terus miss sometimes mereka Iya. Ada satu kasus ee mereka ada apa namanya? Jadi kliennya minta
sesuatu. Jadi dia enggak ada konsultasi teknis lagi ke saya. Dia langsung masukin apa yang diminta si klien
dimasukin ke cloud desain digenerate. Terus dia baru minta ini saya kayak konsultasi klien kira-kira mintanya begini.
Jadi divisualkan ke saya. Benar. [tertawa] I ya. Dan berarti ini kan target market yang dikejar sama antropik kan yang ee
tapi enterprise yang relatif establish yang udah ada budget buat eh langganan eh ini kan akun akun enterprise eh C design
tapi kompetitornya kebalik nih Open AI awalnya buat user chat GPT noneknis ya kan sekarang mengarahnya ke coding
masuk ke kodex nanti bakal ketemu [tertawa] di tengah tengah-tengah itu siapa yang menang?
Iya. Kalau Google di mana posis aja kan?
Kalau Google di semua produknya Google.
Google menang karena ada cloud karena mereka punya cloud mungkin karena mereka punya cloud dan mereka sudah punya aplikasi yang
user sudah pakai kayak Gmail, eh Office, Suite apagi itu banyak ya.
Tinggal diomong Google ini lihat di chat ya. Jadi ee menurut gua ada hal menarik dari stitch sih.
Stitch yang eh apa yang GUI sih ya kayak tadi ya udah kayak gitu ya. eh orang noneknis eh di atas kertas ya bisa pakai
mungkin kalau simpel dan one shot bisa deploy tapi frictionnya apa maksudnya kalau untuk workflow yang serius banget
ya masih agak kurang tapi gua rasa ke depannya mungkin nih bakal ada produk terpisah mungkin semacam notebook LM
atau ya mungkin di di gabungin ke notebook LM beneran atau entah apa. Yang jelas eh Steve sih
keunikannya dia integrasinya ternyata ee apa udah lumayan udah lumayan itu sih udah lumayan komplit. Ada MCP servernya,
ada SDK. Jadi maksudnya kalau orang mau bikin e kasarannya nih mau bikin kayak cloud desain tapi eh mesinnya engine-nya stitch itu
bisa tinggal bikin aja dan kita bisa bikin sesuatu di atasnya.
Stage gitu ya maksudnya ya. Iya bisa aja bikin interface untuk nanti ee mesinnya stage itu sebagai engine-nya gitu ya.
Oh yang generate screen-nya. Jadi eh bahkan udah ada e jadi ada MCP server dan ada SDK.
SDK-nya itu udah terintegrasi sama AISDK-nya eh FSEL.
Jadi ee nah cuma gua belum nyoba sih jadi enggak tahu kalau enggak pakai Gimni bisa atau enggak.
Tapi gimana sih cara mereka bikin kayak gitu ya? Padahal modelnya sama-sama aja zaman juga, Opus juga. Tapi kok kita
ada kayak harness-nya enggak sih? Harness gitu maksudnya apa? Ee apa gimana caranya? Pasti instruksinya panjang banget kan. Tapi untuk ngedesain
dikasih contoh-contohnya. Iya. Tapi gimana caranya ya mau belajar?
Nah itu itu secret resapinya. Tunggu antropic leag lagi aja. [tertawa] Anyway, desain le gitu ya.
Iya. Belum. Ini kan kalau cloud desain kan lebih ke apa ya? Vendor login lah ya jatuhnya ya.
Ya, gimana kalau teman-teman nih udah nih wi sudah jadi nih.
Weh, tapi belum jalan belum ini.
Oh, ya. Ini apa ngelihat menarik ya desain tokennya aja. Preview desain [mendengus] token dulu ya berarti.
Wih. Sekarang desain UI udah enggak pakai Macromedia Dreamver kah?
Ini sudah 2026 bukan 2006. [tertawa] Tuhl lagi.
Iya. Wow. Grotes. Wi mono serif tuh.
Kalau bikin tokens dia support ke desain.md. Enggak.
Enggak. Soalnya aku punya enggak enggak sih.
Tapi kan bisa di chat aja tolong bikinkan desain.md gitu.
Iyaak bisa bisa bisa kan coba man ini kayaknya belum selesai deh. Masih belum pasti jalan terus dia.
I loh itu token habis jangan-jangan dia nyangkut sambil menunggu ya. Jadi, iya kalau misalkan teman-teman yang mau
nyoba cloud design tapi enggak punya subscription-nya yang lumayan mahal ya, ee ada sesuai dengan namanya itu kayaknya
versi terbukanya lah, versi open source-nya. Versi namanya open desain.
Namanya open desain. Bagus ya. Coba di ini open minusdesign.ai.
Landing page-nya sih mirip banget ya.
Open minusdesign. Nah, jangan-jangan landing page-nya mirip gara-gara dia pakai itu tadi getdesign.md suruh nyolong desain tokennya cloud
antropik. Ini sih menarik dan bisa pakai model yang lain.
Model kita sendiri. Iya. Oh, nice.
Iya. Jelasik atau coba lihat ke sistemnya. Mirip seperti yang tadi get design tuh. Kita bisa pilih mau Airbnb, Apple,
BMW, Bugatti. Oh, iya. Kanva. Cloud lah itu paling narik dari gedesin.md itu.
Iya mungkin benar juga kenapa gak pakai skill kapa pakai skill.
Jadi ini kalau teman-teman buat alternatif ya.
Kalau teman-teman enggak punya subscription seperti saya. Oh, [mendengus] bukannya Mas Liza punya AMV Code?
Tapi kan bukan ya enggak bisa pakai cloud desain.
Oh iya enggak bisa kan? Apa hubungannya sama cloud des?
Iya apa hubungannya? Kok enggak bisa ini tokennya enggak jalan nyambung.
Iya ini juga enggak jalan gimana sih?
open case ini enggak jalan. Nah, kemudian selain open desain ada juga yang buatannya
ada muatan ui.s ui. Ini perah kita bahas kan?
Belum. Tapi belum ada ini bikin bikin penasaran aja sih apa sih ini?
Eh, saya pernah didemoin Mazain waktu ee WFC dilihatin cara penggunaannya.
Jadi, ini dia modelnya pakai MCP. Kita ee waktu itu didemoin pakai Codex ya atau cloud code ya. Jadi dari si ber
pakai coding ID kita sendiri kan.
Iya. tolong desain bikin desain ini.
Terus nanti dia kasih tiga alternatif kita ee bentuknya HTML bisa di next next gitu. Kita mau pilih yang mana
loh. Bentar kan di terminal jadi dia generate file HTML gitu.
Iya dia starting server buat HTML static.
Iya itu kayak gitu juga. Super power juga sudah bisa ya. Tapi ini kan find tune apa oleh
orang yang ahlinya UI mungkin enggak tahu tapi memang hasilnya bagus siak tahu brandingnya Adam Wat kan dia
Tailwin kan dia orang tailwin mana ya ya something di sinilah yang brandstorming dia bisa visual companion nah ini bisa nge-generate desain juga
ini. sih pasti ada L alternatifnya.
Cuman ini kayaknya dia sudah pasti ya menggunakan. Nah, kalau dilihat sekilas tuh dari open desain tadi kelihatannya
bagus di apa ee apa ya integrasi dari UI UI visual ke eh kode mark up front end-nya kan rapi tadi
kayak browser event maksudnya dia mengindikasi button ya mungkin jadi button beneran misalnya kalau misalnya di tempat lain mungkin di semua
oh iya iim mungkin Oh, itu hasil generated-nya ya?
Iya. React. Kenapa semua pakai React ya?
Kenapa enggak pakai ST aja? Karena LLM teranjur jago di situ. Udah stack apa? Stack sejuta umat tria
tailwin shot CN. Kalau pakai komponen yang sudah jadi bikin aja sistem desainnya never use react gitu.
Tiba-tiba pakainya S 2 [tertawa] atau view yang apa yang lama bangetlah.
Berapa sih pakainya tadi? Ee cuma kepakai 5%.
Oke. Kalau desainnya wah itu doang 5%. Berarti kalau satu website yang proper 100% ya. Kemarin itu dari desain sistem di
website gua jadi itu 80%. Oh, tapi lumayan mirip juga open desainnya kok mirip.
Iya, tapi open desain ada ininya loh.
Keren. Ada patch-nya. [tertawa] Clip itu sih.
Heh. Kayak di apa? Enggak [tertawa] penting sih. Enggak penting kayak di itu kayak di cloud kayak lucu.
Iya. Jadi misalkan apa ya kita sekarang tuh jadi musim pet gitu loh di apa di Pie aja ada yang bikin
ya kayak tamagoci gitu kayak patch juga.
Ya ampun awalnya cloud code ya habis itu ada Codex juga ada ya.
Iya. Heeh. Nah token. Oh sampel ya. Tuh kayak gini mirip-mirip ya memang terinspirasi.
Iya emang standar. Makin ke bawah makin enggak jelas gitu sih. [tertawa] Gmail tuh Gmail
dating web notion. di sini ada Oh, slide juga ada dia. Slide
bisa generate slide, bisa pakai e model sendiri tuh pakai Gemini antropik.
Bisa coba pakai gak ada ininya vi-nya.
Nah, gini ada nih. Ada nih.
Hah? Itu pencet show ya. Bukan. Tapi bukan dari open-nya. [tertawa] Minx. Minx.
[tertawa] Social engineering. Social engineering lagi.
Ih, bagus. lumayan ini bisa dipakai lumayan lumayan heeh ee dan kemarin terakhir sempat ketemu satu tools tapi
ini bukan desain tools ya apa bukan kayak cloud desain ya ini lebih ke skills ya ada namanya impable
itu skill kan skill kayak yang pertama mempopulerkan si antropik kan front end skill itu yang suruh jangan pakai ungu
heeh nah Ini ee ini ada perintah jangan pakai ungu enggak? Nah, itu kiri kanan ini ungu generic AI
purple gradien. Iya, makanya generic kita bisa install. Installnya itu pakai npm lah. NPX ya. Terus nanti di
code coding agent kita, kita bisa kasih tahu misalkan impecable eh polish ada komennya index page misalkan polis audit kritik
atau types ini punya bapak si Paulus ternyata.
Hah? Siapa Paul Baus? Siapa itu?
Hah? Kamu tak tahu kausak coba tadi itu yang desainnya tadi docd coba buka gitub-nya mungkin mungkin familiar sama
eh yang tadi yang mana yang yang paling awal yang tadi NPX coba fotbakaus kan PBOS itu siapa ini Xrael dulu
enggak kenal Oh, created Jaquery UI.
Jaquery UI. Jaquery UI-nya tahu kita pernah ketemu Mas Paul ini waktu di San Fransisco yang Google IO
kayaknya. Iya sih kalau dari last.
Ah gua enggak ikut belum jadi CDI.
Ingat enggak yang ada Jeselin? Masih ada waktu itu masih sama masih di masih JD GD ya. Ini yang yang waktu kita di ini deh
yang di San Fransisco ingat enggak?
H ikut Google ee Chrome Dev Summit.
Chrome Dev Summit. Iya. Bukan Google A. Bukan Google Chrome Dev Summit.
2018 ada Mas Paul itu ada di situ dulu. Masih ada ya? Chrom summit zaman dulu ee apa? Siapa tuh yang kemarin kita
sempat interview yang tim defrel yang sekarang sudah enggak di Google? Nugler.
Oh, si yang mana si yang kita ikut workshopnya Argail.
Argal. Argal dia masih jaga stand.
Mas Adam. Ada Margel. Iya, masih jaga stand itu dia masih yang bikin dia bikin bikin chrome fbug feb
febug ya. Chrome chrome extension feb dia mendemokan di itu ya di boot ya. Dan Pak Paul Baos ini sudah sudah jauh di
atas waktu itu dia. Kita ketemunya di mana?
Di di hall. Oh di hallnya lupa lupa.
Sudah hampir 10 tahun yang lalu. 8 tahun ya.
Iya. Eh apagi? Oke, ya. Ada lagi tools AI yang mungkin belum sama yang mau sampaikan tapi kok lupa gitu.
Entar kalau ingat kayaknya ditulis. H kalau gue enggak ada sih [mendengus] paling ya standar Lava Blue sama Viro. Tapi belum
belum sempat coba lagi [tertawa] sebenarnya.
Paling sih yang menarik itu MCP. MCP sama SDK-nya ST sih. Penasaran kayak ke depannya. pasti bakal ada sesuatu nih
bakal dibikin kayak gimana. Apakah bakal ya cloud kay desain juga atau mungkin ada pendekatan lain ini yang tadi ya
kayaknya lebih ke arah ini deh lebih ke arah setelah didesain sama si stitch bisa di bisa disedot ke
anti anti graffiti untuk di dilanjutin.
Hm. Eh, jadi kayak Figma MCP, Figma MCP kan gitu kan sudah desain kita bisa reference Om desain yang bagian komponen
kayaknya bisa eh udah bisa kerjain ini udah bisa kerjain komponennya tuh coba deh ini sudah bisa kenapa semua
Kenapa MCP ini masih ini ya masih kayak belum standar ya karena ada yang pakai API Dan si kalau si Cloud dia harus
pakai Oof kalau mau sambungin ke MCP-nya si Cloud.
Padahal yang menginisiasi MCP antropik ya.
Iya mereka pakai oof. Jadi kalau mau pakai di cloud cloud e standar itu kan eh sori APik kan kalau long lif token
oh iya eh yang menarik lagi dari impable adalah ada live nya jadi kita extension chrome extension kita bisa anotasi langsung dari halaman
eh web yang kita buka local host 3000 gitu terus ini minta tiga varian atau apa gitu itu gampang banget dong kalau mau
nyolong apa desain sistemnya website lain kayaknya dia buka khusus yang itu doang eh tapi enggak tahu ya
benar juga bisa juga okok Gua baru ingat apa kabarnya Zen Garden? Masih Zen CSS apa? Zen CS Garden. Zen Garden
masih eh pernah lihat ini kan si SS Garden pernah lihat apa kayak udah di kayak enggak terima submission baru
lagi. Oh berarti kan kita bisa ambil bisa desainnya dari sini bisa ambil desain dari sini kan.
Ya mending outdated daripada sama semua.
Dulu salah satu cita-cita pengin submit ke situ tuh. Ini efek AI ini dari Januari sampai Januari sampai Mei langsung
langsung aktif banget. Langsung hijau semua ya.
Langsung hijau semua. Slop ada slop di sini 37 pattern deadmark and interface AI generated. Contoh slop kan dia punya
tadi dia punya lin kayak linter slop detection.
Iya. Kalau gradasi tuh dia langsung ada linternya jadi bisa menghindari slop ya.
Lucu juga ini. Ini standar banget ya.
Bukan standar sering lihat. Sering lihat.
Kita kayak sudah familiar gitu lama-lama.
Iya. Ini slop. Heeh. Makin lama makin pas pertama kedua kali mungkin enggak ngeh. Karena kita udah kalau kita udah sering banget lihat
pas lihat lagi tuh yang udah ah itu pasti slop great text on colored background.
Iya ini menarik juga dicoba. Jadi tadi kita sudah bahas getdesign.
stage, terus cloud desain, open design, sama impactable.
Oh ya, satu lagi sih yang tadi kayaknya e belum sempat bahas di design.md itu eh Google bikin CLI Tool juga karena tadi
ngomong Lint jadi ingat. Jadi eh design.mD kan markdown biasa tapi mark eh fronteternya kan ada standardized eh
item-itemnya. Ada si tool-nya. Jadi kita ee bisa kirim eh file desain MD. Kita bisa macam-macam sih kayak cuma ngecek field-field yang
missing bisa eh buat nge-format biar formattingnya proper bisa. Terus eh kalau ada juga lin buat wcgibility misalnya primary text-nya. Jadi eh cuma
dengan masukin desain MD bisa dikasih rekomendasi card-nya apa misalnya background-nya apa, teksnya apa, dia ada linternya.
Coba buka GitHub-nya lagi deh. Ada beberapa itunya hal yang bisa di link ternyata kalau lagi sharing screen kita
enggak bisa lihat chatnya ya di video ninja ini. Iya, ini bukan
sudah kelihatan. Iya. Scroll ke bawah aja terus.
Oh, sor dari agak atas aja. Dari mana ya? Token scop.
Dari. Heeh. Nah. Iya. itu pakai NPX bla bla bla itu tadi. H mana NPX?
Iya npm. Eh pokoknya adalah storynya jatuh bawah bawahnya. Oh bisa di-install sebagai library bisa langsung NPX langsung.
Heeh. atau PNPX atau Bunx dan lain-lain.
Nah, terus itu juga bisa diekspor ke Tailwin Config dari situ. Jadi lumayan bantu juga walaupun ini beda layer ya,
kayak beda. Kalau ini kan lebih apa ya bisa dibilang low level lah buat orang yang ngoding manual. Kalau tadi kan ee
maksudnya biar bisa siapapun bikin. Kalau ini sih enggak sih. Harus ya paling generate juga jadi telwin aja.
Tapi lumayan buat terusnya lengkap atau enggak.
Oh desain desain token kita. Iya.
Oh jadi dia dan macam-macamnya yang dicek tuh ya yang tadi ya. kebutuhan kita duplicate komponen.
Heeh. Menarik menarik. Jadi kayak kalau udah banyak kan kita lupa tuh mungkin enggak konsisten ya atau kita lupa terminologinya terus
malas ee ngecek. Ee tinggal dimasukin ke itu atau yang lebih realistisnya mah sekarang kita enggak ngelinting manual
cuma kita suruh AI tools kita buat nge-hit si Linter itu kan yang paling sering sih duplikasi ya
kadang-kadang di atas sudah terus kita tambahin lagi di bawah duplikasi atau beda term kayak satu hal yang sama tapi mirip-mirip gitu misalnya
apalah font medium e satu pakai mat atau satu pakai MD atau apa?
Iya iya iya sudah deh resmi kita ya jadi markdown engineer ya.
Enggak lihat enggak nulis kode tapi nulis markdown kita from engineer.
Iya tapi beneran deh semenjak ada Pak ada ya ini saya tuh enggak pernah lagi mengalami kesulitan itu font-nya apa?
Font spacing-nya berapa? Turning-nya berapa? line high-nya berapa? Enggak peduli lagi. Cuma tinggal kasih AI.
Kok bandingkan antara desain yang ada di Figma, fontning, spacing segala macamnya sama hasil yang yang sudah saya buat. Ada
missing, ada gap-nya enggak? Nanti dia cari sendiri dia screenshot, dia cari.
Oh, ada ada spacing yang salah di sini.
Tolong ee saya suruh perbaiki. Jadi deh [tertawa] dan enggak perlu screenshot-senshot di Figma karena Figma sudah ada MCP tinggal
dengan reference aja ini komponennya ini hasilnya sudah kita sedang in progress. Ada missing enggak soal spacing? Karena mata saya itu yang
paling dari dulu kesulitan utama saya adalah mengetahui itu font-nya apa, space-nya gimana, terus kemudian ya kayak fonting, font spacing, line high
segala macam itu saya lemah banget.
Matanya bukan mata desainer. Jadi dulu tuh sempat bukannya dulu pun bisa langsung di-copy propertinya tanpa kita harus
insting. Tapi dari apa deteksi dari visual doang namanya CSS kan ada yang kena general CSS ada kena juga kan jadi enggak bisa
spesifik ke komponen itu. Jadi kadang hasilnya sudah jadi terus berantem sama sama desainer itu salah gitu. Apanya
yang salah? Enggak [tertawa] tahu. Nah, itulah begitulah.
Sekarang sudah meminimalisir kesalahan kesalahan yang detail karena bisa dilihat mesin to mesin mesin to mesin. Iya. I
tapi berarti hasilnya rapi ya MCP Fikma.
Soalnya kalau tadi kan kayak e berarti kan masalahnya misalnya casgate misalnya global line hate ya jujurlah orang
sefont front end apapun sejago CSS apapun kalau teks kecil line-nya antara 1,5 sama 1,25 pasti sulit dong bedain kalau
enggak ada ee sistem dari Figma yang rapi.
Ee ada kelemahannya juga MCP dari Figma.
kita enggak bisa. Misalnya kan ada yang ketahuan kan ya, Figma kan kadang dia kasih desain yang panjang satu halaman
full. Kalau terlalu besar scopnya kita kasih kasih ke MCP dan kasih ke cloud code. Si cloud code-nya juga pusing. Ee jadi ee
lebih mending dipecah-pecah ke komponen yang kecil-kecil.
Dipotong-potong section by section. Iya. Kadang yang ngedesain di Figma pun enggak konsisten. Bisa juga kan komponennya direuse di sini dan di
tempat lain. Tempat lain. Di tempat lain tapi di e diganti diubah.
Beda satu spacing. Beda satu spacing sedikit ya. ya. Oke, kita sudah dipanggil anak saya mau tidur.
Oke. Oh, kalau gua sih gua pribadi kalau ada magic number kayak gitu di luar token enggak mau enggak mau bikin, enggak mau
implementen. Ya, kalau gitu harus sesuai kita udahan dulu. Terima kasih buat semuanya. Ivan sudah dipanggil tidur.
[tertawa] Iya, sama anak. Heeh. Harus ee apa? menjalankan tugas sebagai ayah. [mendengus] Kita ketemu lagi minggu depan.
Ee selamat malam, sampai jumpa. Bye bye.
Apakah Anda baru pertama kali melihat tayangan dan halaman ini atau mungkin telah kesekian kali melihat untuk membandingkan kembali dengan lainnya?
Jika Anda mencari tahu mengenai layanan web hosting terbaik, kami pastikan Anda berada di tempat yang tepat dengan
domainia. mendapatkan pengalaman menggunakan layanan hosting yang lebih baik dengan SSD berperform tinggi dalam infrastruktur cloud yang telah
dioptimalkan untuk kebutuhan personal maupun bisnis. Teknologi ini memungkinkan Anda memperoleh layanan yang lebih stabil serta proteksi dari
korupsi data. Hosting domainesia juga telah mendukung notgyt, Ruby, Go, PHP, [musik] Java, serta Binary Linux. Lebih dari
200.000 pelanggan telah mempercayakan layanan hosting di dominia. Kepercayaan yang kami jaga dengan garansi uptime 99,9% serta garansi uang kembali 100%.
Buat website Anda lebih mendunia, segera beralih ke
Deskripsi asli dari YouTube
🕸️ Selasa malam waktunya #ngobrolinweb Semenjak era AI, developer yang tadinya punya desiign skill issue mendadak bisa punya karya dengan desain yang ciamik. Apalagi akhir-akhir ini muncul alat bantu spesifik untuk desain seperti Stitch dari Google, Claude Design, Open Design dan masih banyak lagi Mari kita bahas satu-per-satu di sesi kali ini. Sesi ini terselenggara berkat kerjasama dengan Domainesia! 📦 Langganan Cloud VPS Turbo? Gunakan kode: NGOBROLINVPSDN → 50% OFF, bisa digunakan berk Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
3 Des 2025
Ngobrolin Gemini 3
Episode 158 ini membahas tentang Gemini 3, model AI terbaru dari Google yang dirilis beberapa minggu sebelumnya. Pembawa...
21 Jan 2026
Agentic AI
Episode ini membahas tentang Agentic AI, menjelaskan perbedaan mendasar antara AI/LLM biasa dengan Agent AI. Diskusi ini...
28 Jan 2026
Alat Pengkodean Agen
Episode ini membahas tentang Agentic Coding Tools, yaitu tools AI yang dapat membantu developer dalam menulis kode secar...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .