Repo Open Source Ini Baru Saja Mengkloning Claude Design (Hasilnya BAGUS)
CChase AI
컴퓨터/소프트웨어창업/스타트업AI/미래기술
Transcript
00:00:00Claude Design pasti adalah alat terhebat yang pernah saya gunakan.
00:00:02Itu sebenarnya benar-benar tidak bisa digunakan.
00:00:05Meskipun saya membayar Anthropic $200 sebulan untuk paket 20X mereka.
00:00:10Saya mencapai batas penggunaan mingguan di Claude Design dalam waktu kurang dari satu jam.
00:00:14Ini sangat membuat frustrasi, tetapi untungnya bagi Anda dan saya,
00:00:17ada harapan karena repositori sumber terbuka baru saja dirilis,
00:00:22yang pada dasarnya mengkloning Claude Design dan mengubahnya menjadi keterampilan yang bisa kita gunakan.
00:00:23Repositori itu disebut Huashu Design dan dibangun di atas perintah sistem yang persis sama,
00:00:28yang digunakan Claude Design.
00:00:32Dan hari ini kita akan mengujinya secara langsung melawan Claude Design untuk
00:00:33melihat apakah alat ini benar-benar layak untuk waktu kita. Karena jika iya,
00:00:37kita mungkin benar-benar punya jalan keluar dari penjara penggunaan Claude Design.
00:00:41Huashu Design memecahkan masalah Claude Design yang merupakan alat luar biasa,
00:00:45tetapi alat yang benar-benar tidak bisa Anda gunakan selama lebih dari satu jam sebelum Anda mencapai batas penggunaan.
00:00:50Jadi, apa yang mereka lakukan adalah mereka mengambil semua perintah sistem dan filosofi desain dari
00:00:54Claude Design dan mengubahnya menjadi repositori GitHub sumber terbuka,
00:00:55yang pada dasarnya hanya satu keterampilan yang bisa kita muat ke dalam Claude Code atau Codex atau
00:00:58benar-benar agen pengodean apa pun, persis seperti Claude Design.
00:01:02Alat ini mampu membuat prototipe interaktif untuk aplikasi web atau aplikasi seluler.
00:01:07Kita bisa membuat dek slide, desain gerak, infografis, dan seterusnya.
00:01:10Dan alat ini mampu melakukan semua itu hanya dengan satu keterampilan karena sebenarnya ada
00:01:13banyak yang terjadi di balik layar. Misalnya,
00:01:17alat ini memiliki akses ke 20 file Markdown mendalam yang menjelaskan apa yang harus dilakukan untuk dek slide,
00:01:21gaya desain yang berbeda, praktik terbaik animasi.
00:01:24Jadi meskipun di permukaannya hanya satu keterampilan,
00:01:28alat ini memiliki akses ke 20 keterampilan mini.
00:01:31Alat ini juga memiliki akses ke sejumlah komponen serta media dan aset yang dapat ditarik
00:01:33ketika mendesain sesuatu untuk Anda.
00:01:35Dan alat ini memiliki seluruh rantai alat yang dapat dieksekusi.
00:01:40Jadi memberi kemampuan untuk mengambil file HTML dan mengubahnya menjadi MP4 atau
00:01:42menggunakan Playwright untuk benar-benar memastikan bahwa apa yang dirancang untuk Anda di
00:01:44atas kertas benar-benar berfungsi dalam kehidupan nyata. Dan sama seperti Claude Design,
00:01:50kita dapat melihat berbagai variasi. Kita memiliki sistem penyesuaian lengkap.
00:01:53Dan bagian terbaiknya adalah karena ini adalah keterampilan, jika saya berada di dalam Claude Code,
00:01:56itu didasarkan pada penggunaan tersebut, apakah jika saya menggunakan paket Pro 5X atau 20X,
00:02:00saya tidak dibatasi oleh batas penggunaan Claude Design yang tampaknya sewenang-wenang ini,
00:02:05tapi mari kita benar-benar mengujinya.
00:02:08Jadi apa yang akan kita lakukan adalah kita akan melihat seberapa baik alat ini sebenarnya bekerja
00:02:13dalam hal mendesain halaman arahan dari awal.
00:02:16Kemudian kita akan melihat bagaimana kinerjanya untuk hal yang hampir sama,
00:02:18tetapi jika kita memberikan aset untuk dibangun mirip dengan sistem desain Claude Design,
00:02:22dan terakhir, kita akan melihat seberapa baik kinerjanya pada dek slide dan di sepanjang jalan,
00:02:24kita akan membandingkannya dengan Claude Design secara langsung.
00:02:29Jadi kita bisa melihat apakah ini benar-benar layak. Tapi sebelum kita melakukan itu,
00:02:33sepatah kata dari sponsor favorit semua orang, saya sendiri. Jadi baru bulan lalu,
00:02:36saya mengeluarkan kelas master Claude Code dan ini adalah cara nomor satu untuk
00:02:39beralih dari nol menjadi pengembang AI, terutama jika Anda tidak berasal dari latar belakang teknis.
00:02:43Saya memperbarui kursus ini setiap minggu.
00:02:46Dan saya baru saja mengeluarkan modul agen iOS Claude Code.
00:02:51Jadi jika Anda seseorang yang ingin belajar cara memanfaatkan alat ini dengan sebaik-baiknya,
00:02:53maka Anda perlu memeriksanya. Anda bisa mendapatkannya di dalam Chase AI.
00:02:56Ditambah lagi, akan ada tautan untuk itu di komentar yang disematkan. Jadi mari kita mulai.
00:03:01Jadi perintah yang saya berikan kepada Claude Code,
00:03:04dan ini akan menggunakan keterampilan Huashu Design di seluruh bagian adalah gunakan
00:03:08keterampilan desain untuk membuat halaman arahan untuk produk SaaS fiksi saya, Lighthouse,
00:03:09tanyakan pertanyaan apa pun yang Anda perlukan sebelum kita mulai. Sekarang,
00:03:13saya juga telah memberikan perintah yang persis sama ini ke Claude Design.
00:03:17Jadi Huashu Design kembali dengan enam pertanyaan yang menanyakan apa fungsi Lighthouse, target
00:03:21pembeli, suasana, bagian yang diperlukan, variasi. Dan Anda tahu,
00:03:24apakah harus membuat konten fiksi atau apakah saya punya salinannya?
00:03:29Claude Design memiliki pertanyaan serupa,
00:03:34meskipun ia masuk sedikit lebih dalam dan jelas karena sifat grafisnya,
00:03:37ia memberi saya beberapa hal untuk benar-benar dipilih dalam hal arah visual
00:03:40yang bisa saya lihat. Jadi untuk Huashu Design saya memberi tahu,
00:03:44mari kita buat suasana analitik. Kita menargetkan pengembang solo.
00:03:48Saya katakan saya ingin melihat beberapa jenis suasana dan gaya,
00:03:50dan dengan begitu saya bisa membandingkan variannya.
00:03:54Dan saya juga ingin ia membuat salinannya sendiri. Dan untuk Claude Design,
00:03:57saya cukup memberi tahu hal yang sama dan bahwa saya juga menginginkan tiga varian yang
00:03:59bisa saya lihat secara berdampingan.
00:04:02Jadi inilah yang dihasilkan Claude Design dibandingkan dengan apa yang dihasilkan Huashu Design.
00:04:05Dan saya akan mematikan kamera agar kita bisa melihat ini dengan lebih baik.
00:04:06Jadi mari kita lihat apa yang dilakukan Huashu Design di satu halaman.
00:04:11Kita bisa saja membuatnya melakukan tiga halaman terpisah,
00:04:16tetapi ini membiarkan kita semua melihat sekaligus. Yah, sebenarnya saya tarik kembali.
00:04:19Kita punya di bagian kanan atas kemampuan untuk melihat ketiganya.
00:04:22Jadi inilah yang kita dapatkan dengan keterampilan ini.
00:04:25Jadi yang pertama ini sebenarnya terlihat cukup keren. Anda tahu,
00:04:29ini memberi kita seluruh halaman web. Kita memiliki varian terminal,
00:04:31jenis kesepakatan yang sama serta hanya versi kertas.
00:04:35Dan kemudian saya bisa melihat ketiganya sekaligus. Dan sejujurnya, cukup bagus.
00:04:40Ini jauh lebih baik daripada jika kita hanya menggunakan Claude Code sendirian.
00:04:44Kita bahkan dengan keterampilan desain ujung depan dan berkata, Hei, hebat,
00:04:49tiga varian, cukup solid. Dan sekarang mari kita lihat Claude Design.
00:04:52Design memberi kita penyesuaian sejak awal. Kita tidak akan melihat itu sekarang,
00:04:55tapi inilah versi terminalnya, Anda tahu,
00:04:59ini melalui seluruh editorial sekali lagi,
00:05:03cukup mirip dengan yang editorial di sini.
00:05:07Sangat, sangat mirip secara spasial.
00:05:11Ini sangat mengerikan. Ini jelas memberikan suasana AI tipikal Anda.
00:05:15Saya pikir itu banyak hubungannya dengan gradien.
00:05:19Dan kemudian saya bisa membandingkan ketiganya. Sekarang,
00:05:24apa yang ingin saya lakukan saat ini bukanlah berpikir, Oh,
00:05:28satu terlihat lebih baik daripada yang lain dalam ruang hampa, tetapi benar-benar hanya melihat seberapa
00:05:32dekat keterampilan yang sedang kita lihat di sini dibandingkan dengan Design. Sangat,
00:05:34sangat mirip, yang merupakan jempol besar bagi keterampilan Huashu Design.
00:05:37Sekarang apa yang ingin saya lakukan setelah saya melihat varian makro ini adalah berfokus pada satu
00:05:42hal tertentu yang saya suka, lalu mulai melakukan penyesuaian untuk itu.
00:05:46Sekarang untuk tetap agak mirip agar kita bisa melakukan perbandingan dan kontras yang lebih baik.
00:05:51Saya akan menggunakan yang editorial pada Design,
00:05:54yang dikenal sebagai ledger di keterampilan ini.
00:05:59Dan kita akan melihat seberapa baik mereka melakukan penyesuaian. Sekarang untuk Claude Design,
00:06:03penyesuaiannya sudah ada di sini. Jadi untuk editorial,
00:06:06kita bisa menukar antara terang dan gelap. Saya bisa mengubah aksen.
00:06:09Ini memberi saya hampir semua warna yang bisa saya pikirkan, yang cukup keren.
00:06:11Saya bisa mengubah judul sebenarnya,
00:06:15tetapi kemudian ia membaginya antara spasial dan global.
00:06:18Jadi apa yang akan saya lakukan adalah saya akan memberi tahu ia untuk memperluas penyesuaian dan memilikinya
00:06:21hanya untuk editorial. Dan sementara itu terjadi,
00:06:25saya masuk ke Claude Code dan berkata,
00:06:29mari gunakan varian ledger dan berikan jumlah penyesuaian yang agresif.
00:06:31Jadi kita bisa membandingkannya di depan itu.
00:06:33Jadi Claude Design telah melakukan serangkaian penyesuaian untuk kita. Dan perlu dicatat,
00:06:36pada titik ini, hanya dari apa yang telah Anda lihat dalam video ini,
00:06:38saya sudah menghabiskan sekitar 15% dari penggunaan Claude Design saya. Yah,
00:06:42di sisi keterampilan,
00:06:44kita baru menggunakan 13% dari jendela konteks dari satu sesi.
00:06:49Jadi 130K token, alias, bahkan bukan 1% dari penggunaan mingguan saya,
00:06:49memang saya menggunakan 20X, tetapi perbedaannya mencengangkan. Meskipun kita harus tahu,
00:06:54ini masih mengerjakan penyesuaian untuk satu hal itu.
00:06:59Jadi sedikit lebih lambat dan penyesuaian Claude Design bekerja seperti yang diharapkan.
00:07:03Penyesuaian sejujurnya,
00:07:05adalah salah satu bagian favorit saya dari Claude Design secara umum.
00:07:10Saya pikir kekuatan Claude Design belum tentu seperti, Oh,
00:07:12desainnya luar biasa. Dan saya memang berpikir mereka satu tingkat di atas.
00:07:16Jangan salah sangka,
00:07:20tetapi faktanya adalah saya bisa dengan cepat melihat banyak hal yang berbeda
00:07:22dan melihat seperti apa tampilannya dan hanya melakukan iterasi, iterasi, iterasi dengan sangat cepat.
00:07:24Dan satu hal yang ingin kita ketahui di sini adalah karena sifat cara kerja Claude Design,
00:07:28kemampuan untuk mengklik hal-hal tertentu seperti ini dan bermain-main dengan
00:07:31tipografi atau meninggalkan komentar tertentu.
00:07:36Itu bukan sesuatu yang bisa kita lakukan di dalam keterampilan desain.
00:07:36Saya tentu tidak bisa menggambar pada keterampilan desain dan berkata, Hei, lihat ini.
00:07:40Mari, Anda tahu, mainkan ini, pindahkan ini ke kiri sedikit,
00:07:43pindahkan ini ke kanan sedikit. Hal-hal semacam itu.
00:07:47Anda memerlukan antarmuka grafis untuk,
00:07:51di mana Claude Design jelas akan unggul.
00:07:54Jadi mari kita bandingkan dengan penyesuaian yang kita dapatkan dengan Huashu Design.
00:07:57Jadi perlu dicatat,
00:07:58penyesuaiannya agak cocok dengan gaya yang sama dengan halaman itu sendiri.
00:08:01Saya bisa mengubah preset.
00:08:05Saya bisa mengubah jenis keluarga tampilan, mode gelap yang sedikit berbeda.
00:08:07Saya bisa mengubah aksen dan sepertinya saya bisa mengubah sejumlah hal seperti
00:08:10kepadatan tata letak. Apakah kita memiliki strip kepercayaan?
00:08:13Apakah strip kepercayaan hilang? Ya. Hal semacam itu. Jadi pastinya sebanding.
00:08:18Apakah ada penyesuaian sebanyak di Claude Design? Tidak,
00:08:22tetapi saya hanya berjarak satu perintah untuk mendapatkan lebih banyak.
00:08:26Dan saya pikir poin utama di sini adalah Claude Code dengan keterampilan desain ini.
00:08:30Jelas bersaing dengan apa yang bisa Anda dapatkan di dalam Claude Design secara asli dan
00:08:32total penggunaan token pada titik ini adalah 170K pada dasarnya tidak menggunakan apa pun dari
00:08:34penggunaan mingguan saya dan saya membakar 15% dari Claude Design. Jadi untuk contoh ini,
00:08:38yaitu perintah mentah, tidak ada sistem desain, tidak ada aset,
00:08:42lihat apa yang bisa Anda hasilkan. Saya pikir keterampilan itu berhasil dengan baik.
00:08:47Jadi mari kita beralih ke demo berikutnya dan melihat seberapa baik ini bisa dilakukan.
00:08:51Jika kita benar-benar memberikannya sesuatu untuk dibangun, semacam sistem desain,
00:08:56semacam contoh desain dan menguji keterampilannya,
00:08:59karena saya sudah tahu Claude Design bisa melakukan ini dengan cukup baik.
00:09:02Ketika kita melihat Claude Design dan sistem desainnya,
00:09:06itu melakukan pekerjaan yang cukup baik untuk dapat mengambil apa pun yang kita berikan.
00:09:10Dan itu bisa saja seperti basis kode atau sesuatu dan menarik banyak
00:09:13informasi, semuanya mulai dari spasi hingga komponen, pengukur, tombol, hero,
00:09:16semua hal ini. Jadi ketika saya memuat sistem desain ini ke Claude Design,
00:09:19saya tahu itu akan mampu mempertahankan itu di berbagai jenis
00:09:23pengiriman. Misalnya,
00:09:27desain OS agen ini adalah sesuatu yang saya ubah menjadi sistem desain.
00:09:31Dan sementara kita melihatnya sebagai dasbor di sini di dalam Claude Design,
00:09:34sangat mudah untuk mereplikasi tema desain itu.
00:09:36Jadi Anda melihat ini di dalam dek slide, misalnya,
00:09:39tampilannya seolah-olah semuanya berasal dari tempat yang sama dan itu karena sistem desain Claude Design
00:09:42cukup kuat. Sisi negatifnya adalah membuat semacam
00:09:45sistem desain menghabiskan 30% dari penggunaan mingguan Anda.
00:09:47Jadi apa yang baru saja saya katakan kepada Claude Design adalah membuat ulang halaman arahan Lighthouse ini
00:09:50menggunakan dasbor OS agen itu.
00:09:55Saya kemudian memberi tahu Claude Code hal yang hampir sama mengatakan,
00:10:00Saya ingin menggunakan estetika garis miring sistem desain yang cocok dengan dasbor itu.
00:10:00Dan kemudian saya memberi tahu di mana ia dapat menemukan semua informasi itu di dalam direktori atau referensi terpisah.
00:10:04Ini pada dasarnya apa yang digunakannya sebagai
00:10:07inspirasi sebagai estetikanya.
00:10:11Jadi jelas sprite di sini panik,
00:10:14tetapi sisanya cukup masuk akal. Ehm,
00:10:18ia pergi dan membuat ulang dasbor di sini juga,
00:10:22yang sangat mirip dengan ini. Saya pikir itu terlihat cukup manis.
00:10:25Uh, untuk font, warna,
00:10:28semua itu sangat sejalan dengan apa yang seharusnya dilakukan.
00:10:33Satu-satunya keluhan nyata yang saya miliki adalah karakter kecil di sini.
00:10:37Hanya saya tidak tahu apa yang sedang terjadi,
00:10:41tetapi itu mungkin perbaikan yang relatif sederhana.
00:10:44Sekarang mari kita lihat bagaimana keterampilan Huashu Design untuk referensi.
00:10:47Keterampilan itu memakan waktu 11 menit dan sekitar 70.000 token, Claude Design
00:10:52memakan waktu sekitar tiga menit, tetapi menghabiskan 10% dari penggunaan mingguannya.
00:10:54Dan inilah yang kita dapatkan. Saya akan mematikan kamera agar kita bisa melihat lebih baik.
00:10:56Jadi kita mendapatkan sedikit Claude,
00:10:59sedikit ikon logo di sini perlu dicatat.
00:11:04Logo ini sedikit berbeda dari sprite di sini,
00:11:08tapi Hei, itu cocok. Warna dan font tampak masuk akal pada pandangan pertama.
00:11:10Dan kita memang memiliki sprite kecil kita di bagian atas di sini juga di sebelah Lighthouse.
00:11:15Uh, ini terlihat cukup keren. Ini seperti ticker kecil.
00:11:18Semua hal ini terlihat cukup familiar dari dasbor dalam hal desain umum.
00:11:22Ini terasa sedikit aneh di sini.
00:11:26Saya berharap bagian terminal ini hanya sedikit terdorong ke atas untuk berpusat dengan apa
00:11:30Eh, ini terlihat cukup keren. Seperti sebuah ticker kecil.
00:11:35Semua hal ini terlihat cukup familiar dari dasbor dalam hal
00:11:40desain secara umum. Bagian ini terasa sedikit aneh di sini.
00:11:43Saya harap bagian terminal ini bisa sedikit dinaikkan agar sejajar dengan apa
00:11:47yang kita miliki di sebelah kiri, tapi itu perbaikan yang mudah. Dan secara keseluruhan,
00:11:51cukup bagus. Saya pribadi lebih menyukai desain Claude,
00:11:56terutama fakta bahwa ia membuat dasbornya sendiri dan menyematkannya di sana.
00:12:00Tapi hei, ini mengerjakan hal-hal desain, kan? Kriterianya terpenuhi.
00:12:04Font yang digunakan sama, warnanya juga sama.
00:12:06Jelas terasa seperti berasal dari keluarga desain yang sama. Jadi untuk tes ini,
00:12:11menurut saya ini adalah kemenangan besar lainnya untuk skill ini, acungan jempol. Ya.
00:12:14Apakah butuh waktu sedikit lebih lama? Tentu.
00:12:15Tapi pada dasarnya ia membuat sistem desainnya sendiri.
00:12:18Ia tidak memilikinya sebelumnya. Apakah sebaik desain? Hmm. Mungkin tidak,
00:12:22tapi hasilnya cukup mendekati dan jauh lebih murah. Jadi sangat,
00:12:27sangat terkesan. Sekarang untuk tes terakhir, kita akan melihat slide dek.
00:12:29Saya sudah meminta Claude design untuk membuatnya.
00:12:31Dan Anda sedang melihat hasil percobaan pertamanya saat ini.
00:12:33Ia menggunakan sistem desain yang sama dan membahas produk SaaS palsu kita.
00:12:37Jadi dalam hal kemampuan untuk tetap konsisten dengan desain,
00:12:41jelas ia melakukan pekerjaan yang cukup baik dan semua ini terlihat cukup
00:12:46bagus. Satu-satunya keluhan, Sprite kecil di atas sini agak sedikit melar.
00:12:50Tapi sekali lagi, itu bukan hal yang sulit untuk diperbaiki.
00:12:52Yang sebenarnya saya khawatirkan di sini adalah apakah hasilnya terlihat keren? Itu agak keren.
00:12:56Apakah itu cocok dengan sistem desain saat berbicara tentang desain Claude? Ya,
00:13:00ia mampu melakukan ini hanya dalam beberapa menit dengan penggunaan 6%.
00:13:04Sekarang mari kita lihat bagaimana performa Claude code menggunakan skill ini.
00:13:07Dan inilah hasilnya. Jadi langsung saja, sangat mirip dengan situs webnya.
00:13:11Ia mampu membuatnya, ada sprite yang sama muncul,
00:13:15muncul di bagian atas.
00:13:16Dan kita mendapatkan logo kecil Claude code di sebelah kanan.
00:13:20Jadi itu adalah halaman sampulnya. Nomor dua,
00:13:23sepertinya ada teks yang tumpang tindih di sini, tapi bukan masalah besar.
00:13:27Halaman tiga terlihat bagus. Slide empat. Ini agak terpotong,
00:13:32tapi itu bisa jadi memang keputusan desain.
00:13:34Ada teks yang berjalan, terlihat bagus. Dan pada slide terakhir,
00:13:38kita ada sedikit tumpang tindih lagi di sini,
00:13:40tapi ini masalah kecil yang bisa dengan mudah kita perbaiki dengan satu perintah.
00:13:44Jadi secara keseluruhan, saat kita membandingkan kedua desain versus apa yang kita dapatkan dengan skill ini,
00:13:49sekali lagi sangat mirip,
00:13:50itu benar-benar tiga hal berturut-turut yang telah kita uji di mana skill ini mampu
00:13:54bersaing dengan apa yang kita dapatkan dalam desain.
00:13:56Dan menurut saya itulah poin utama dari video ini.
00:13:58Kita sekarang memiliki opsi untuk mendapatkan output desain Claude tanpa harus terikat
00:14:03pada batasan penggunaan yang liar ini, yang mana sangat luar biasa bagi rata-rata pengguna.
00:14:07Sekarang dalam ruang hampa, apakah saya masih berpikir desain Claude lebih baik? Ya, tentu saja.
00:14:12Skill ini hanya meniru semua yang dilakukan desain Claude.
00:14:15Dan desain Claude memiliki keunggulan dalam hal-hal tertentu seperti menggambar, mengedit, mengomentari,
00:14:19mampu mengajak semua orang di tim untuk menggunakan hal ini.
00:14:21Jadi karena sifat antarmuka grafisnya,
00:14:24ia bisa melakukan hal-hal yang tidak akan pernah bisa dilakukan oleh skill ini. Tapi bagi banyak orang,
00:14:29apa yang baru saja Anda lihat di sini sudah lebih dari cukup. Dan itu adalah lompatan besar ke depan dari,
00:14:34tahu kan, menggunakan skill desain front end, sebagai contoh. Dan ingat,
00:14:37skill ini bisa melakukan lebih dari sekadar halaman web dan slide dek.
00:14:40Ia bisa melakukan hal-hal seperti desain gerak, infografis, dan segala macam hal.
00:14:43Jadi pastikan untuk mencoba hal ini. Anda benar-benar tidak akan rugi.
00:14:46Jadi di situlah saya akan meninggalkan kalian semua untuk hari ini. Saya harap dengan video ini,
00:14:50saya bisa menambahkan satu alat lagi ke kotak peralatan Anda yang terus berkembang. Seperti biasa,
00:14:54beri tahu saya apa pendapat Anda.
00:14:55Pastikan untuk memeriksa Chase AI plus jika Anda ingin mendapatkan akses ke kelas master
00:14:58Claude dan sampai jumpa lagi.