00:00:00Paper, mungkin salah satu alat desain paling populer saat ini bagi para desainer AI-native,
00:00:05alur kerja AI-agenic.
00:00:06Dan ini memungkinkan Anda mendesain di sini dalam sebuah kanvas dan memindahkannya ke kode,
00:00:11tapi juga melakukan sebaliknya.
00:00:13Jadi ini adalah alur kerja lengkap dua arah.
00:00:15Saya akan menunjukkan cara menggunakannya, cara menginstalnya.
00:00:17Dan juga, ini adalah bagian dari seri desain AI-native 30 hari saya,
00:00:22di mana Anda ditantang untuk mengambil desain yang ini,
00:00:25yang telah kita kerjakan pada tantangan sebelumnya,
00:00:27dan menggunakan Paper untuk mengintegrasikan dan melengkapi bagian desain ini.
00:00:32Jadi, sebelum kita masuk ke tantangan itu dan cara berpartisipasinya,
00:00:36izinkan saya menunjukkan cara menginstal Paper.
00:00:38Di paper.design, buka bagian Docs.
00:00:41Hal pertama yang harus dilakukan adalah mengunduh aplikasi desktop Paper, oke?
00:00:46Aplikasi yang simpel dan cepat.
00:00:48Lalu, apakah Anda menggunakan Cursor?
00:00:50Apakah Anda menggunakan Claude Code?
00:00:51Apakah Anda menggunakan Codex, Copilot, atau apa pun?
00:00:54Saya sendiri menggunakan Claude Code.
00:00:55Sangat mudah untuk diinstal.
00:00:57Anda cukup mengambil baris ini setelah mengetik Claude
00:01:00dan menjalankannya di terminal Anda,
00:01:03tempelkan, dan itu akan terinstal.
00:01:05Anda akan tahu ini berhasil jika mengetik perintah ini, /mcp,
00:01:10dan Anda akan melihat Paper di sana.
00:01:13Anda juga bisa melihat Pencil, yang akan kita bahas dalam waktu dekat.
00:01:17Oke, jadi ini adalah aplikasi Paper, ya.
00:01:19Anda harus membiarkannya terbuka.
00:01:21Dan kemudian Anda juga menjalankan Cursor, Claude Code,
00:01:24dan pastikan MCP sudah terhubung.
00:01:26Jadi, apa langkah selanjutnya?
00:01:27Nah, Anda bisa menggunakan Paper dengan beberapa cara berbeda.
00:01:31Anda bisa memulai desain di sini menggunakan alat frame,
00:01:35membuat tata letak Anda.
00:01:37Tampilannya cukup familiar di sini.
00:01:39Jadi, jika Anda sudah paham Auto Layout dari Figma,
00:01:41Anda akan mengerti cara menyusun tata letak dari awal secara manual jika mau.
00:01:46Kita tidak akan mengambil pendekatan itu.
00:01:48Kita akan meminta Claude atau apa pun yang Anda gunakan,
00:01:52entah itu Cursor atau yang lainnya,
00:01:53kita akan memintanya menggunakan server MCP Paper,
00:01:58dan mendesainkan tata letak untuk kita.
00:02:00Lalu kita akan meningkatkan desainnya
00:02:02dan membuat perubahan khusus di sini, di Paper,
00:02:05lalu memindahkannya kembali.
00:02:06Sekarang kita akan memintanya membuat tata letak
00:02:09untuk semacam bisnis fiktif.
00:02:10Sebelum itu, saya ingin melakukan eksperimen cepat di coolers.co.
00:02:14Ini sudah ada sejak lama.
00:02:16Tapi jika Anda klik Start the Generator,
00:02:18lalu menekan bilah spasi,
00:02:20Anda bisa mendapatkan berbagai tema,
00:02:22atau aplikasi itu sendiri yang menentukannya.
00:02:24Lalu Anda bisa menyesuaikan warnanya sendiri jika mau.
00:02:28Bagi saya, saya akan terus mencari,
00:02:31oke, ini terlihat menarik.
00:02:32Ini seperti skema warna yang lebih terang.
00:02:33Cukup berwarna, dan sebagainya.
00:02:36Saya akan mengambil tangkapan layar (print screen).
00:02:39Dan ada kode warna di bagian bawahnya,
00:02:41yang bisa kita tempelkan ke Claude Code atau apa pun sebagai konteks.
00:02:46Kita akan memintanya menggunakan warna-warna ini untuk membuat tata letak
00:02:51saat membuat desain untuk bisnis fiktif.
00:02:53Untuk perintahnya, saya akan menggunakan keahlian desain front-end di Claude Code.
00:02:59Biasanya hasilnya lebih bagus.
00:03:01Tapi jika Anda tidak terlalu spesifik,
00:03:04hasilnya sering kali terlihat sangat standar.
00:03:08Jadi, kita lihat apa yang akan dibuatnya,
00:03:10lalu kita akan memoles desain itu di Paper.
00:03:12Hal pertama yang saya lakukan adalah mengetik /front-end design,
00:03:15seperti yang Anda lihat di sini.
00:03:17Sepertinya ini sudah otomatis disertakan di Claude Code sekarang,
00:03:19tapi jika tidak, ada video yang saya sertakan di deskripsi
00:03:22yang menunjukkan cara mengintegrasikannya sebagai keahlian.
00:03:25Sekarang, /front-end design.
00:03:28Lalu saya akan menentukan perintahnya.
00:03:29Ini adalah perintah yang sangat singkat.
00:03:32Gunakan server MCP Paper.
00:03:34Sangat penting untuk meminta hal ini.
00:03:36Desain tata letak SaaS modern untuk bisnis fiktif
00:03:39yang menggunakan teknologi AI untuk penjaminan mutu di seluruh manufaktur produk.
00:03:43Terdengar membosankan.
00:03:43Harus didesain untuk desktop, memiliki bilah navigasi dan bagian hero.
00:03:47Itu saja.
00:03:47Saya ingin Anda menggunakan skema warna ini.
00:03:49Nilai hex-nya ada di bagian bawah setiap warna pada tangkapan layar,
00:03:53yang ada di sini.
00:03:54Anda tidak harus menggunakan semua warnanya.
00:03:56Pastikan saja kontrasnya tepat dan terlihat bagus.
00:03:59Itu saja.
00:04:00Saya akan tekan enter,
00:04:02dan kita akan melihat prosesnya mengakses server MCP Paper,
00:04:07dan kita bisa memuat Paper untuk melihat apa yang terjadi secara real-time.
00:04:11Sayangnya, ada masalah di Windows 11 pada komputer saya,
00:04:15di mana tampilannya berkedip-kedip.
00:04:16Saya sudah menghubungi pendirinya,
00:04:18memberitahunya tentang hal ini, kemungkinan besar Anda tidak akan mengalaminya.
00:04:21Oke, dan inilah hasilnya.
00:04:23Menurut saya, ini biasa saja,
00:04:25dan Anda bisa langsung tahu bahwa,
00:04:27"Wah, ini hasil buatan AI secara umum."
00:04:30Jadi, kita akan menggunakan Paper untuk menyesuaikan desain ini secara visual,
00:04:34lalu memindahkannya kembali.
00:04:36Apa yang akan saya lakukan?
00:04:37Pertama, saya ingin memperbesar ini sedikit.
00:04:39Oke, beri sedikit ruang kosong di sini.
00:04:42Langkah selanjutnya, Anda harus
00:04:45mulai terbiasa memahami lapisan-lapisan di sini.
00:04:48Di bagian ini, Anda bisa melihat layernya,
00:04:51dan kita punya bagian hero dengan dua kolom di dalamnya, kiri dan kanan.
00:04:56Saya tidak mau yang itu.
00:04:57Saya ingin area yang seperti ini,
00:05:01yang merupakan bagian kolom yang berada di tengah,
00:05:05dan kita akan menaruh bagian yang menarik di belakangnya.
00:05:08Tapi pertama-tama, kita ambil ini,
00:05:11dan kita akan meratakan tengah semua teksnya,
00:05:15dan juga menambah lebar bagian ini.
00:05:17Di atas sini, kita bisa melihat lebar (width) diatur ke auto.
00:05:20Kita juga bisa membuatnya tetap (fixed),
00:05:23membuatnya memenuhi wadah (fill container),
00:05:25atau menyesuaikan isi (fit content).
00:05:26Fit content itu sama saja.
00:05:28Fill container.
00:05:29Oke, jadi ini akan mengisi ruang yang tersedia di sini,
00:05:33lalu saya akan mengambil bagian ini,
00:05:36dan di sebelah sini,
00:05:38kita bisa melihat ini sudah diatur sebagai wadah flexbox dengan jarak 32 antar elemen.
00:05:44Jadi, jika kita menyesuaikan ini,
00:05:46Anda akan melihat bagaimana semuanya bergeser.
00:05:48Dan saya ingin memastikan semuanya berada di tengah ruangan itu.
00:05:53Sekarang, semuanya belum bekerja dengan sempurna,
00:05:55karena kita harus melakukan penyesuaian lain.
00:05:57Jadi, jika ada hal yang tidak sesuai harapan, teruslah periksa lebih lanjut.
00:06:01Misalnya, area ini.
00:06:04Mari kita buat ke tengah.
00:06:06Dan sekali lagi, saya hanya mengklik tombol rata tengah ini.
00:06:08Ini adalah teks, jadi kita bisa memposisikannya di tengah.
00:06:10Oke, itu berjalan lancar.
00:06:12Yang ini, mari kita tengahkan juga.
00:06:15Lalu saya akan menengahkan bagian ini juga.
00:06:18Baiklah, saya bisa klik kanan, lalu pilih Frame Selection.
00:06:21Ah, itu langsung berhasil.
00:06:24Jadi, Anda harus mau bereksperimen dengan semua kemampuan tata letak ini.
00:06:30Sama halnya dengan Figma.
00:06:31Anda harus mengerti cara kerja tata letaknya,
00:06:35karena ini mencoba merepresentasikan tampilan browser yang sebenarnya di dalam kanvas.
00:06:40Jadi memindahkan elemen bisa sedikit membingungkan,
00:06:43dan Anda mungkin tidak yakin bagaimana cara kerjanya.
00:06:44Luangkanlah waktu untuk mempelajarinya.
00:06:46Selanjutnya, saya akan mengambil tangkapan layar dari ini,
00:06:49hanya untuk memadukan beberapa warna ini dengan cara yang menurut saya lebih baik dari sebelumnya.
00:06:55Karena, perhatikan, ia mengambil beberapa warna tapi tidak semuanya.
00:06:58Bukan berarti kita harus menggunakannya semua.
00:07:00Tapi saya hanya ingin menunjukkan proses melakukan penyesuaian tambahan di sini.
00:07:05Misalnya, jika kita ingin bagian header memiliki warna latar belakang tertentu.
00:07:10Saya akan mengambil isi (fill) ini,
00:07:13dan kita akan menggunakan yang paling atas itu.
00:07:15Yaitu FC6471.
00:07:19Oke, itu terlihat sangat jelek karena teksnya jadi tidak pas, kan?
00:07:23Jadi saya akan ambil area ini, warna seleksi.
00:07:27Kita akan mengubahnya menjadi putih.
00:07:28Kita juga akan mengubah yang hitam menjadi putih.
00:07:31Dan, mungkin jika kita mau, kita bisa menekan CTRL + klik kiri untuk memilihnya,
00:07:35lalu menjadikannya tebal (bold).
00:07:37Oke, spectral AI.
00:07:39Saya akan mengubah bagian hitam ini menjadi putih.
00:07:43Yang ini, saya benar-benar tidak suka gradasinya.
00:07:45Jadi, ya, kita jelas punya dukungan gradasi di sini.
00:07:48Mungkin saya akan membuat yang satu ini terang.
00:07:51Ini cuma semacam logo aneh yang generik, tapi tidak masalah.
00:07:56Saya tidak terlalu memikirkannya.
00:07:57Kita geser ini ke sini.
00:08:00Oke, dan akhirnya di sini, kontrasnya buruk sekali.
00:08:04Jadi, mungkin kita bisa membuatnya putih.
00:08:11Yang ini bisa jadi hitam, lalu teks ini akan kita buat terang juga.
00:08:20Oke, seperti yang Anda lihat, penyesuaian bisa dilakukan dengan sangat cepat dan mudah.
00:08:23Sekarang, katakanlah kita ingin mengambil latar belakang ini dan menambahkan sesuatu yang keren,
00:08:29seperti semacam efek shader.
00:08:30Di bagian sini, jika Anda klik, Anda bisa melihat shader.
00:08:34Ini adalah salah satu hal yang sangat keren dari alat ini,
00:08:38kita bisa menciptakan shader yang sangat menarik dan unik.
00:08:42Contohnya, seperti cincin asap (smoke ring) ini.
00:08:45Baiklah, mari kita coba.
00:08:46Saya akan mengkliknya.
00:08:47Saat Anda melakukan ini, shader akan ditambahkan sebagai elemen lain ke dalam DOM,
00:08:51yaitu Document Object Model.
00:08:53Ini adalah istilah pengembang front-end yang mungkin belum pernah Anda dengar sebelumnya.
00:08:57Di sinilah latar belakang teknis cukup membantu.
00:09:00Jadi, yang kita inginkan adalah menjadikannya posisi absolut di sana.
00:09:05Ketika Anda melakukan ini, elemen tersebut keluar dari aturan kotak konvensional (box model).
00:09:09Dan kita bisa memindahkannya ke mana saja, tapi hati-hati,
00:09:11karena jika Anda mengarahkannya ke atas elemen tertentu, shader itu akan masuk ke dalamnya.
00:09:14Kita ingin memasukkannya dan mengaturnya agar berada di pojok kiri dan kanan atas,
00:09:20dan memenuhi seluruh bagian hero ini.
00:09:23Untuk melakukannya, pertama-tama kita atur posisi X ke nol,
00:09:28dan posisi Y juga ke nol.
00:09:31Lalu lebarnya (width) kita buat 100%, dan tingginya (height) 100%.
00:09:35Tapi saat kita melakukan ini, semuanya jadi tertutup, kan?
00:09:39Sayangnya, entah kenapa, saya tidak melihat adanya pengaturan Z-index di sini.
00:09:42Z-index adalah properti CSS pada elemen dengan posisi absolut
00:09:47di mana Anda mengontrol tumpukannya, alurnya.
00:09:50Bukan alurnya, tapi urutannya.
00:09:52Ini seharusnya berada di bawah semua benda ini.
00:09:54Dan sayangnya, saya tidak melihat itu sebagai pilihan,
00:09:57tapi kita bisa lanjut setelah mengimpornya ke Claude Code dan kembali ke kode browser kita, HTML dan CSS,
00:10:04kita bisa memperbaikinya di sana.
00:10:05Tapi untuk saat ini, kita sebenarnya masih bisa melihat ini jika kita menyesuaikan parameternya di sini.
00:10:10Jadi, semua shader memiliki parameter masing-masing yang dapat diubah di sebelah sini.
00:10:15Jadi, Anda bisa mengubah kecepatan dan hal-hal lainnya.
00:10:18Nah, bisa dilihat di sini, kita punya isian (fill) berwarna hitam.
00:10:21Sekarang, jika kita ubah ini ke 0%, ah, oke, sekarang kita bisa melihat benda-benda di belakangnya.
00:10:26Kita tidak terlalu bisa melihat latar depannya.
00:10:28Nah, latar depan di sini, mari kita ambil warna ini dan kita pilih smoke ring kita.
00:10:36Kita akan mengubah isiannya ke warna tersebut.
00:10:39Oh, tidak, maksud saya latar depannya ke warna tersebut.
00:10:43Oh, oke, itu masih terlihat konyol, bukan?
00:10:46Jadi, mari kita ubah beberapa elemen lainnya di sini.
00:10:50Kita punya skala, kita punya ketebalan.
00:10:54Oh, itu menarik.
00:10:56Kita punya radius.
00:10:58Seperti yang Anda lihat, ini sangat menyenangkan untuk dimainkan.
00:11:03Ini sebenarnya terlihat keren.
00:11:04Saya mengutak-atiknya sedikit.
00:11:07Ya, saya cukup senang dengan hasilnya.
00:11:09Mari kita coba bereksperimen dengan shader yang berbeda.
00:11:11Yang keren di sini adalah jika kita mengubah nilai apa pun di sini menjadi opasitas 0%,
00:11:18kita bisa melihat apa yang ada di belakangnya.
00:11:19Tentu saja, saya tidak ingin itu menjadi hasil akhirnya di browser.
00:11:23Jadi, kita akan menggunakan properti Z-index setelah kita bisa memperbaikinya di sana
00:11:27karena saya belum melihat di mana saya bisa mengaturnya di sini.
00:11:30Baiklah, saya akan lanjut dengan ini
00:11:32dan kita akan lihat hasilnya setelah kita memperbaiki masalah Z-index.
00:11:35Jadi, saya rasa kita akan pakai yang ini saja.
00:11:39Caranya adalah kita pilih elemennya agar bisa dimasukkan,
00:11:43kembali ke Cursor atau, Anda tahu, Claude Code atau semacamnya.
00:11:46Lalu kita kembali ke terminal.
00:11:48Inilah yang akan saya katakan: gunakan server MCP Paper
00:11:50untuk menerjemahkan desain yang dipilih di Paper menjadi HTML, CSS,
00:11:53dan JavaScript vanilla yang berfungsi dalam file index.html.
00:11:56Pastikan semuanya diterjemahkan dengan sempurna.
00:11:58Saya sudah melampirkan tangkapan layar pengaturan shader agar Anda tidak salah.
00:12:01Bagian ini penting karena saya sudah bicara dengan pendirinya
00:12:04dan saat ini sistemnya belum mengirimkan semua informasi yang diperlukan,
00:12:08setidaknya dari tes awal saya untuk shader.
00:12:11Sekarang, mari kita tekan enter dan lihat hasilnya.
00:12:14Baiklah, sudah selesai.
00:12:15Ini dia.
00:12:16Inilah hasilnya.
00:12:17Hasilnya bukan refleksi yang seratus persen sempurna, terutama shader
00:12:22yang bisa Anda lihat di latar belakang.
00:12:24Punya saya terlihat sedikit berbeda.
00:12:28Seperti garis-garis mengalir yang lebih besar.
00:12:31Dan yang perlu Anda lakukan hanyalah mengambil tangkapan layar di sini.
00:12:34Pastikan Anda mengambil screenshot pengaturan gradien
00:12:36dan pengaturan mesh gradient atau apa pun yang Anda gunakan
00:12:38dan cobalah untuk memperbaikinya secara iteratif.
00:12:42Saya yakin ini akan segera diperbaiki
00:12:44seiring mereka mengintegrasikan shader dengan benar dan,
00:12:47bagaimana MCP menangani penerjemahan informasi tersebut.
00:12:51Sekarang, saya ingin Anda pergi ke designcourse.com.
00:12:56Link-nya ada di bawah untuk bergabung dengan seri tantangan
00:13:01desainer native AI 30 hari.
00:13:04Dan saya ingin Anda menggunakan Paper.
00:13:06Ada akun gratis seratus persen untuk menyelesaikan desain ini.
00:13:11Ini adalah desain yang kita kerjakan sebelumnya di tantangan terakhir.
00:13:14Dan di bagian yang lebih gelap yang Anda lihat di sini,
00:13:17yang bertuliskan "desain Anda di sini",
00:13:18saya ingin Anda menggunakan Paper dengan alur yang sama seperti yang baru saja kita lakukan.
00:13:24Unduh aset yang ada di halaman tantangan,
00:13:27yaitu HTML yang Anda lihat di sini
00:13:30dan selesaikan desain di bawahnya menggunakan Paper.
00:13:33Ini adalah halaman tantangan di Figma.
00:13:35Anda bisa menjadikannya referensi jika mau.
00:13:38Anda tidak harus menggunakannya.
00:13:39Tapi inilah instruksinya.
00:13:40Cukup buat akun gratis.
00:13:42Unduh aset index.html di halaman tantangan.
00:13:45Gunakan Paper untuk menyelesaikan desain di ruang kosong pada bagian ini.
00:13:49Di sinilah tempat desain Anda dimasukkan.
00:13:52Anda bebas mendesainnya sesuka hati dan menulis apa pun.
00:13:54Yang penting harus terlihat mulus.
00:13:56Lalu Anda juga bebas melakukan apa pun di bagian selanjutnya
00:13:59dan bebas mengintegrasikan animasi atau interaktivitas.
00:14:02Jika ya, unggah rekaman video untuk pengiriman Anda
00:14:04karena sistem kami dapat menangani unggahan video.
00:14:07Dan saya sangat tertarik untuk melihat hasil karya kalian.
00:14:09Saya akan mengulas sekitar 8 hingga 10 karya seperti yang biasa saya lakukan,
00:14:13ulasan berbasis video, dan kita lihat apa yang kalian buat.
00:14:16Masa depan desain sangatlah keren.
00:14:18Kita tahu banyak alat yang keluar sekarang dengan alur kerja berbasis agen AI.
00:14:24Paper adalah salah satunya, Pencil adalah yang lain, dan saya rasa kita akan melihat lebih banyak lagi.
00:14:28Jadi, kita akan lihat siapa yang akan menjadi yang teratas.
00:14:30Mungkinkah Figma?
00:14:31Saya tidak tahu.
00:14:32Kita lihat saja nanti.
00:14:33Sampai jumpa lagi segera.
00:14:34Selamat tinggal.