00:00:00Halo, video hari ini adalah tentang Paper. Paper pada dasarnya adalah Figma tetapi untuk Claude Code atau
00:00:05Cursor. Di sini Anda bisa melihat contohnya. Kita sedang menjalankan Paper desktop, lalu Anda bisa
00:00:10mengontrol semuanya melalui Claude Code yang Anda lihat di sini, dan ini
00:00:14juga sangat bagus karena Anda bisa dengan sangat mudah mengonversi antara komponen
00:00:19dan kode Anda. Anda bisa melihat perusahaan seperti Vercel menggunakannya, Z, Dub. Jadi banyak sekali
00:00:24produk keren yang menggunakannya. Ini adalah tampilan aplikasinya saat Anda memulai.
00:00:28Ini adalah proyek demo yang akan Anda dapatkan untuk pertama kalinya. Anda akan bisa
00:00:31mengunduh aplikasinya dari paper.design/downloads dan langkah selanjutnya
00:00:35yang perlu Anda lakukan adalah menginstal server MCP. Jika Anda ingin menginstal ini di
00:00:40Cursor, Anda tinggal klik tombol ini, yang sebenarnya sudah saya lakukan, tetapi sekarang
00:00:43kita akan mencobanya di Claude Code. Jadi kita akan menyalin ini. Ini
00:00:47akan menambahkan lingkup pengguna server MCP Paper, yang artinya ini untuk setiap
00:00:53proyek di komputer bisa mengaksesnya. Biasanya lingkupnya terbatas pada proyek saat
00:00:57Anda menambahkan server MCP, dan di sini Anda bisa melihat transport-nya sebenarnya lokal. Ini
00:01:01akan terhubung ke aplikasi desktop Paper. Jadi saya akan menginstalnya
00:01:06di sini, dan sekarang setelah terinstal, kita akan membuka Claude. Saya telah membuka
00:01:11empat jendela di sini di Cmux. Ini pada dasarnya Ghosty yang berjalan dengan gaya
00:01:17Tmux di mana kita punya empat jendela berbeda, jadi kita akan melakukan beberapa
00:01:19demo yang berbeda. Saya pikir kenapa tidak punya beberapa jendela sekaligus. Jadi apa yang akan kita
00:01:22lakukan selanjutnya adalah menyalin perintah ini ke terminal. Jadi kita
00:01:28akan membuat aplikasi pelacak pengeluaran di Paper. Mari kita lihat seperti apa jadinya. Anda bisa
00:01:33melihat demo seperti ini akan muncul, tetapi kita akan melihat hasilnya nanti.
00:01:36Sementara itu, saya akan menjalankan beberapa tugas lainnya. Buatlah
00:01:40halaman landas demo untuk saya di Paper dan buatlah saya terpukau. Mari kita lihat apakah hasilnya
00:01:44bagus. Buatlah dasbor untuk saya untuk aplikasi keuangan. Mari kita lakukan itu, dan
00:01:48buatlah sistem desain untuk saya untuk aplikasi sosial seperti Twitter. Jadi saya akan menjalankan
00:01:53semua ini secara paralel. Saya sebenarnya tidak tahu seperti apa hasilnya nanti, jadi
00:01:56mari kita lihat cara kerjanya. Di sini Anda bisa melihat proses sebelumnya yang
00:02:00sedang berjalan. Kita punya ringkasan desain, palet warna. Ini adalah Claude Code yang sedang memikirkan
00:02:04berbagai hal, menambahkannya ke aplikasi selamat datang Paper yang kita punya, tapi mari kita ke
00:02:08bagian bawah. Oke, sudah selesai. Mari kita lihat seperti apa jadinya. Jadi kita akan memperkecil tampilan
00:02:13dan melihat apakah ada di sekitar sini. Oh, jadi kita bisa melihat aplikasi kita yang lain
00:02:17sebenarnya sedang dibangun, dan di sini Anda bisa melihat aplikasi entri pengeluaran kita yang sangat
00:02:22keren. Desainnya cukup solid untuk itu, dan sebenarnya saat saya menjalankannya sebelumnya,
00:02:25hasilnya sedikit berbeda. Di sini Anda bisa melihat yang lainnya ini sebenarnya
00:02:30semuanya berjalan secara paralel, dan hal keren tentang aplikasi Paper ini adalah
00:02:34pada dasarnya ini Figma. Jadi segala sesuatu yang mungkin sudah biasa Anda gunakan di Figma, Anda bisa melihatnya
00:02:39tampak sangat mirip. Di sini saya bisa mengubah banyak hal dan saya sebenarnya bisa kembali
00:02:43dan melakukan beberapa pengeditan. Hapus bagian unggahan, ganti dengan sesuatu yang lain.
00:02:53Mari kita lihat apa yang terjadi saat kita melakukannya, dan Anda bisa melihat semua ini masih
00:02:56berjalan di latar belakang. Jika kita kembali ke sini, semoga bagian unggahan itu
00:03:00akan dihapus. Anda bisa melihat halaman landas kita, terlihat cukup lumayan. Desain
00:03:04dengan niat, berkreasi tanpa batas. Omong-omong, di sini kita bisa melihat semua
00:03:09komponen kita yang lain mulai menyatu. Sistem desainnya terlihat sangat keren dan profesional.
00:03:12Rasanya seperti Anda bisa membayar desainer ribuan dolar untuk memberi Anda
00:03:16hasil yang persis sama. Cukup keren dan bagus, dan tentu saja ini bisa diedit sepenuhnya
00:03:20persis seperti di Figma. Ini adalah hasil akhir dari halaman landasnya, dan
00:03:24kita akan memasukkan ini ke React sebentar lagi dengan Tailwind. Ini adalah
00:03:28dasbornya dan tugas lainnya juga sudah selesai. Di sini Anda bisa melihat lebar terpisah,
00:03:33jadi itu tadi sudah disesuaikan juga. Jadi Anda memiliki desain yang terlihat sangat profesional
00:03:36ini, dan yang kita lakukan hanyalah memerintahkannya agar ada, dan untuk semua ini kita bisa menggunakan
00:03:42ekosistem keahlian yang sudah disediakan oleh Claude Code atau Cursor untuk kita,
00:03:46jadi kita bisa menggunakan keahlian desain front-end untuk mendesain semua ini jika kita
00:03:50mau juga. Jadi saya akan meminta halaman HTML dengan desain ini sekarang di
00:03:54browser saya, mari kita lihat cara kerjanya, dan kembali ke Paper, saya akan menunjukkan
00:03:58beberapa hal lainnya. Jadi di sini saya punya komponen ini, dan apa yang bisa saya lakukan adalah saya
00:04:03bisa klik "copy as tailwind" atau "copy as react CSS", jadi biasanya saya tinggal salin dan tempel
00:04:08saja, tapi saya pikir apa yang juga akan kita lihat sebentar lagi adalah Claude Code bisa
00:04:13memuat ini untuk kita juga, jadi kita akan bisa membukanya di browser dan wah,
00:04:17Anda bisa lihat itu benar-benar berhasil, ini benar-benar luar biasa,
00:04:20di sini Anda bisa melihat tombolnya, maksud saya ya, ini hebat sekali, jujur, jika kita
00:04:24memeriksa halamannya, mari kita lihat apa yang sebenarnya dihasilkan, jadi di sini Anda bisa melihat ini
00:04:29hanya menggunakan HTML dan CSS saja, tapi kita juga bisa membuatnya menggunakan React
00:04:35dan Tailwind. Anda bisa membangun banyak hal seperti di Figma, ini
00:04:40persis sama. Di sini Anda bisa melihat di samping kita bisa mengubah banyak hal, kita bisa mengubah
00:04:44warnanya, ini pada dasarnya sama persis dengan Figma, tapi saya tadi
00:04:48menyusun komponen ini juga karena saya ingin melihat seperti apa jadinya jika
00:04:51saya tinggal salin dan tempel ke aplikasi biasa, dan di sini Anda bisa melihat ini adalah
00:04:55tepat apa yang dilakukannya, hasilnya persis seperti yang saya inginkan, dan di sini Anda
00:05:00bisa melihat apa yang disalin dan ditempel tadi. Ini adalah komponen latar belakangnya, saya akan tunjukkan
00:05:05lagi seperti yang saya lakukan sebelumnya. Jadi saya akan klik "copy as tailwind", saya akan masuk
00:05:10ke Cursor dan saya tinggal menempelnya, dan Anda bisa melihat ini yang diberikan kepada saya.
00:05:14Sekarang saya akan membatalkan beberapa bagian ini, dan ini sebenarnya adalah komponen yang telah saya
00:05:20tempel sebelumnya untuk aplikasi pelacak pengeluaran, Anda bisa melihat bilah atas, pahlawan jumlah, dan
00:05:26sebagainya, jadi ini sebenarnya React dan Tailwind untuk hal yang pada dasarnya sama
00:05:29seperti yang baru saja kita lakukan, dan di sini Anda bisa melihat ini adalah kode React yang sebenarnya di aplikasi kita, ini
00:05:34variasi lainnya, ini saat saya memberikan perintah 20 menit yang lalu, dan jadi ini versi
00:05:40satu, ini versi lainnya di mana kita melakukannya dengan HTML dan CSS biasa, dan
00:05:44keduanya hasilnya sangat bagus. Saya sebenarnya ingin melihat bagaimana hasil aplikasi lainnya jika
00:05:49kita melakukannya di Claude Code, jadi saya meminta versi HTML dari semua
00:05:53layar yang baru saja kita desain, dan yang juga baru saja saya lakukan adalah saya klik
00:05:58kanan "copy as react CSS", saya pergi ke Cursor, saya tempel, dan ini adalah aplikasi sungguhan, Anda
00:06:04bisa lihat ini berjalan di localhost 3001, ini bagian dari Inbox Zero, hanya sebuah halaman demo
00:06:09yang saya tambahkan, dan Anda bisa melihat ini bekerja dengan sempurna juga, yang mana ini sangat
00:06:13bagus. Awalnya ini tidak benar-benar responsif, tetapi selain itu, ini cukup
00:06:18solid. Di sini Anda bisa melihat ini butuh sedikit usaha agar responsif, tapi saya rasa konsepnya
00:06:22setidaknya sangat keren, dan ini sebenarnya versi HTML yang baru saja
00:06:26dimuat yang juga kita perintahkan, dan ini agak lebih responsif, mulai
00:06:33sedikit berantakan di bagian sini, tapi setidaknya ini lebih baik daripada versi lainnya,
00:06:36jadi ya, itu keren sekali. Sekarang yang ingin saya tunjukkan adalah Anda juga bisa memintanya
00:06:41menghasilkan gambar, jadi jika Anda menekan Command I, mari kita lihat apakah kita bisa melakukannya dan kita
00:06:46akan memintanya menghasilkan gambar untuk kita, jadi perintah yang saya tulis adalah untuk membuat
00:06:50iklan yang indah untuk Inbox Zero, sebuah asisten email AI, yang membantu Anda mencapai
00:06:54kotak masuk kosong dengan cepat. Anda bisa melihat di sini ada berbagai model yang bisa Anda gunakan, Nano Banana
00:06:59Pro, mari kita coba paket variasi untuk yang pertama ini, semoga berhasil, dan
00:07:05ya, Anda bisa melihat ini mulai membuat empat gambar, dan saya ingin
00:07:10mencoba lagi karena saya penasaran apa yang terjadi jika kita menggunakan Nano Banana Pro.
00:07:14Mari kita klik buat gambar. Jadi ada gambar lain yang sedang dibuat dan saya harap segera
00:07:19hasilnya muncul. Oh, di sini Anda bisa melihat iklannya mulai muncul, yang mana ya, maksud saya
00:07:25terlihat lumayan, tentu saja perlu dipoles lagi, tetapi sebagai percobaan pertama, itu
00:07:29cukup keren. Mari kita lihat yang ini, Inbox Zero, Anda tahu, Anda bisa menemukan desainer yang
00:07:35membuat desain yang lebih buruk dari itu, dan kemudian yang ini, mungkin dari keempatnya, saya paling suka
00:07:39yang ini, tapi ya, Anda bisa lihat tentu saja itu sekali coba, Anda bisa melakukan iterasi
00:07:43lebih banyak lagi. Mari kita lihat apa hasil dari Nano Banana Pro, itu mungkin
00:07:47yang paling mengesankan, ya, jalur cepat Anda menuju ketenangan, asisten email AI, saya
00:07:51pikir itu cukup solid, jujur, untuk sekali coba, itu grafis yang lumayan. Saya juga
00:07:55merasa menarik bagaimana ia tahu logonya, seperti apakah AI ini mengenali
00:08:00logo Inbox Zero atau hanya kebetulan saja sehingga terlihat sangat mirip dengan teks logo kita.
00:08:04Nah, sebelum kita akhiri, saya ingin menunjukkan dua hal lagi. Jika saya klik pada
00:08:09gambar ini dan saya tekan S, maka saya bisa memberikan efek yang berbeda. Jadi di sini Anda bisa melihat
00:08:13efek air pada gambar ini. Jika saya tekan S lagi, ada logam cair ini, saya
00:08:18sebenarnya tidak yakin bagaimana cara kerjanya karena saya tidak yakin apakah ini ada hubungannya dengan gambar kita sama sekali,
00:08:21tetapi Anda bisa melihat Anda bisa membuat efek yang sangat keren ini dan Anda sebenarnya
00:08:24bisa menggunakannya di halaman landas Anda. Ini versi lain dari gambar yang kita
00:08:27buat tadi, dan satu hal lagi yang bagus adalah warnanya konon
00:08:33konsisten dan akurat. Paper memiliki pemilih warna seragam pertama di dunia yang
00:08:37membuat warna jadi mudah. Jadi jika orang-orang tidak terbiasa dengan ini, Anda bisa punya satu warna
00:08:41di Figma dan kemudian warna lain di situs web Anda dan itu tidak satu-ke-satu, itu
00:08:45sebenarnya cukup menjengkelkan. Kami mengalami ini dengan warna biru di situs kami di mana Figma
00:08:48menunjukkan satu hal dan situs web menunjukkan hal lain padahal
00:08:52seharusnya satu-ke-satu berdasarkan kode hex warnanya, dan jadi
00:08:56jika Anda adalah seseorang yang pernah mengalami masalah ini seperti kami, itu adalah fitur yang cukup bagus
00:08:59untuk dimiliki juga. Dan hal terakhir yang ingin saya tunjukkan adalah buatlah
00:09:04sistem desain di Paper dari basis kode kami yang sudah ada, dan Anda bisa melihat ia mulai
00:09:08menganalisis basis kodenya. Ini hanya Claude Code biasa, Anda bisa melihat ia mengambil
00:09:12font kami. Sekarang kami sebenarnya kesulitan karena rupanya kami telah mencapai batas alat MCP mingguan
00:09:17dalam video ini untuk Paper Pro, jadi kita tidak bisa melihat seperti apa
00:09:20hasilnya nanti, tetapi singkatnya, kita seharusnya bisa menggunakan basis kode kita yang
00:09:23sudah ada lalu melihat seperti apa tampilannya di Paper, dan kemudian kita bisa mengeditnya di
00:09:28Paper lalu memasukkan kodenya kembali ke proyek kita, jadi itu adalah fitur yang sangat sangat
00:09:32bagus. Saya pikir salah satu tempat di mana hal ini sangat berguna adalah
00:09:35ketika kita membuat komponen desain demo seperti saat kita
00:09:39mengambil tangkapan layar untuk halaman landas. Biasanya apa yang akan kita lakukan adalah, yang lebih mudah
00:09:43biasanya hanya mengambil tangkapan layar, tetapi yang sering ingin saya lakukan adalah sedikit mengeditnya, mengedit
00:09:47teks yang ada di halaman, menyembunyikan beberapa email asli yang ada di sana, dan memilikinya
00:09:50di Figma atau Paper jauh lebih mudah karena saya bisa langsung mengetik dan mengedit sesuai
00:09:55kebutuhan, dan kemudian itu bukan sekadar tangkapan layar, saya benar-benar bisa mengekspornya sebagai gambar sungguhan,
00:09:58PNG atau JPEG atau apa pun itu. Ini aplikasi sosial Twitter yang kita
00:10:03bangun tadi, dan desain-desain ini juga sangat keren. Bagaimanapun, semoga Anda menikmati
00:10:07videonya, semoga tidak terlalu membingungkan. Kita menjalankan beberapa hal yang
00:10:10berbeda secara paralel. Beginilah cara saya mengoding akhir-akhir ini, dan jadi mungkin hal itu
00:10:14sedikit terbawa ke dalam video, tapi ya, saya harap Anda merasa ini membantu. Beri tahu saya
00:10:17apa yang akhirnya Anda buat dengan Paper. Saya pikir ini alat yang sangat berguna, saya rasa
00:10:20saya akan segera meningkatkan ke versi Pro-nya juga, dan jangan lupa untuk
00:10:24berlangganan untuk video-video mendatang.