Satu Lagi Repo Open Source Berhasil Mengkloning Desain Claude
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Pak, desain klon Claude Design kedua baru saja muncul di GitHub. Ya, benar sekali, ada lagi desain klon
00:00:06Claude lainnya, tapi kali ini hadir dengan antarmuka grafis yang nyata. Awal pekan ini saya merilis
00:00:13video tentang Huwashu Design yang merupakan klon Claude Design pertama di pasar saat ini.
00:00:20Hasilnya sangat bagus, kami menunjukkannya bersaing langsung dengan format standar Claude Design,
00:00:24tapi tanpa masalah penggunaan apa pun. Namun, salah satu masalah dengan Huwashu Design adalah
00:00:30fakta bahwa ia hanya ada di dalam terminal, tidak memiliki antarmuka grafis seperti yang Anda lihat di sini
00:00:36dengan alat desain terbuka baru ini yang sangat meniru Claude Design. Lihat saja
00:00:43kedua alat ini. Di sini ada Open Design yang akan kita bahas hari ini,
00:00:48dan di sini ada Claude Design. Sangat mirip. Hal yang sangat keren tentang Open Design
00:00:54adalah ia dibangun di atas Huwashu Design. Seperti yang Anda lihat di video terakhir, Huwashu Design itu
00:00:59sangat bagus. Kita mendapatkan konten dan desain front-end yang hebat dari repo ini, dan sekarang
00:01:06kita mengambilnya dan memberikan lapisan grafis yang bagus di atasnya agar jauh lebih mudah
00:01:11berinteraksi bagi sebagian besar pengguna dan memberikan banyak polesan seperti yang kita lihat awalnya di
00:01:16Claude Design. Lebih baik lagi, Open Design bisa digunakan dengan alat pengodean apa pun, tidak
00:01:22harus Claude Code saja. Kita bisa gunakan Gemini, kita bisa gunakan Codex, dan sekali lagi, kita tidak menghadapi
00:01:28masalah penggunaan seperti di Claude Design yang asli. Jadi hari ini kita akan mengulas Open Design.
00:01:34Saya akan tunjukkan cara kerjanya, cara instalnya, apa yang harus Anda perhatikan karena
00:01:39saya pikir ada beberapa hal yang berlebihan, dan kita akan bandingkan dengan
00:01:43Claude Design. Bocoran: ini cukup bagus. Saya pikir ini solid dan saya sangat senang kita mulai
00:01:49mendapatkan banyak variasi Claude Design karena saya sangat menyukainya, hanya saja masalah
00:01:53penggunaannya mengerikan. Semakin banyak alat seperti ini yang keluar, saya pikir Anthropic akan
00:02:00mulai tersadar dan segera memperbaiki masalah penggunaan ini. Jadi Open Design adalah alternatif sumber terbuka untuk
00:02:05Claude Design. Kita bisa menghubungkannya ke Claude Code atau Codex, atau kita bisa bawa kunci API sendiri
00:02:12jika ingin menggunakan harness atau API lain. Ia akan otomatis mendeteksi agen pengodean apa yang ada
00:02:16di komputer Anda. Ia punya 31 keahlian dan 72 sistem desain kelas atas yang sudah bawaan. Saat saya
00:02:24bilang ini dibangun di atas Huwashu Design, saya tidak bercanda. Mereka bahkan menyebutkannya sendiri. Ini
00:02:28semacam penggabungan dari Huwashu Design, skill PowerPoint Guzheng, Open Code Design, dan
00:02:34Multica. Jika digabungkan, saya katakan ini adalah Huwashu Design dengan lapisan UI yang bagus.
00:02:40Sisa repo ini menjelaskan cukup mendalam tentang apa yang terjadi di balik layar serta beberapa
00:02:45contoh dan demo. Yang perlu Anda tahu: ini adalah Claude Design versi sumber terbuka atau yang paling mendekati.
00:02:49Sebelum kita masuk ke instalasi, sepatah kata dari sponsor hari ini:
00:02:53Saya sendiri. Saya baru saja merilis Masterclass Claude Code saya, dan ini adalah cara nomor satu untuk beralih dari nol
00:02:58menjadi AI dev, terutama jika Anda tidak punya latar belakang teknis. Saya memperbaruinya setiap minggu
00:03:04dan kami sangat fokus pada kasus penggunaan dunia nyata dan cara menggunakan alat ini untuk benar-benar memberikan dampak
00:03:09pada bisnis Anda atau proyek apa pun yang sedang Anda kerjakan. Anda bisa menemukannya di Chase AI Plus, ada
00:03:14tautannya di komentar tersemat, dan saya harap bisa bertemu Anda di sana. Ada dua cara instal: Anda bisa buka
00:03:18repo ini, buka terminal, dan tempelkan semua ini di sana. Opsi kedua adalah
00:03:23Anda cukup ke tautan ini, salin (saya sertakan tautannya di deskripsi), tempelkan ke
00:03:28Claude Code atau Codex atau apa pun dan katakan, "Hei, instalkan ini di direktori baru," dan alat ini akan
00:03:32segera berjalan. Setelah Anda menginstal dan menjalankannya, ia akan memberi tautan ke
00:03:36server pengembangan lokal. Jika tidak ada, beri tahu Claude Code, "Hei, jalankan dev server untuk Open Design,"
00:03:42dan Anda akan melihat halaman seperti ini. Kemungkinan besar akan muncul jendela yang menanyakan,
00:03:46"Hei, apakah Anda ingin menggunakan CLI lokal atau API Anthropic?" atau apa pun terkait sistem AI-nya.
00:03:51Jadi, Anda harus memilih CLI lokal. Itu artinya ia menarik data dari Claude Code, Codex, atau Open
00:03:56Code, khususnya Claude Code dan Codex. Dengan begitu, Anda tidak membayar biaya API, semuanya
00:04:01ditarik dari akun desktop Anda. Untuk model, Anda bisa pilih default (konfigurasi CLI), lalu kita punya
00:04:06kemampuan untuk menambahkan penyedia media karena seperti yang Anda lihat di sini, saya tidak hanya bisa membuat prototipe,
00:04:13slide, dan templat, tapi juga gambar dan video. Saya bisa membuatnya dari UI ini, tapi
00:04:18untuk menghasilkan video dan gambar, saya perlu menambahkan kunci API ke model yang mendukung itu. Jadi saya bisa menambahkan
00:04:24layanan seperti Minimax, OpenAI, ElevenLabs, dan banyak lagi. Itu sangat berguna dan
00:04:30tidak bisa Anda temukan di dalam Claude Design. Di bagian atas, ada desain, contoh, sistem desain, templat gambar, dan
00:04:36templat video. Apa sebenarnya templat-templat ini di dalam sistem desain? Ya,
00:04:40ini mirip dengan awesomedesigns.md jika Anda pernah melihatnya. Jadi intinya, mereka mengunjungi situs web
00:04:46seperti Airbnb misalnya, lalu mereka membedah apa yang terjadi di situs tersebut dalam hal
00:04:52palet warna, tipografi, komponen, tema visual, dan suasana. Jadi idenya adalah jika saya ingin membuat
00:04:58situs web yang gaya desainnya mirip dengan Airbnb, saya bisa menggunakan perintah ini dan menyertakannya,
00:05:06maka saya akan mendapat hasil yang mirip. Menurut saya hasilnya akan bervariasi. Saya rasa bagian sistem desain
00:05:13terlihat keren, tapi saya tidak tahu seberapa efektif kenyataannya. Bagian templat gambar juga
00:05:18serupa, hanya menunjukkan contoh gambar dan prompt JSON yang bisa digunakan untuk mendapatkan hasil yang mendekati.
00:05:23Menurut saya ini berlebihan. Sama halnya dengan templat video, menurut saya ini berlebihan. Kelihatannya keren, tapi Anda
00:05:29tidak akan mendapat banyak manfaat. Di sini ada bagian contoh yang juga cukup keren, tapi pahamilah
00:05:35bahwa ini hanyalah hasil yang mereka dapatkan saat menggunakan prompt satu baris saja. Jadi tidak
00:05:42ada prompt rumit di baliknya. Prompt-nya benar-benar tertulis di sini.
00:05:47Jadi jika saya klik "gunakan prompt ini", ia akan menyertakannya, dan isinya cuma satu baris: "desain Mutuals, situs kencan
00:05:53untuk pengguna X, dasbor ringkasan harian dengan statistik, kecocokan bersama, dan komunitas."
00:06:00Jadi, Anda tahu, jangan terlalu terpukau oleh beberapa contoh yang ada di sini. Itu hanya
00:06:07prompt satu baris. Tidak ada yang luar biasa terjadi di sini. Jadi mari kita fokus pada
00:06:12apa yang benar-benar Anda butuhkan, yaitu membuat prototipe, slide, dan
00:06:16jenis deliverable standar yang biasa Anda lihat di Claude Design sendiri. Cara kerjanya
00:06:22hampir sama. Anda cukup memberi nama demo, memilih sistem desain (bisa pilih satu
00:06:28atau lebih), dan sekali lagi, kita punya daftar semua sistem yang sudah tersedia di sana.
00:06:32Kita tentukan apakah ingin wireframe atau high fidelity. Kita juga punya kemampuan untuk mengimpor file
00:06:37zip Claude Design. Jadi katakanlah Anda membuat sistem desain di dalam Claude Design, saya bisa mengubahnya menjadi
00:06:44file zip dan memasukkannya ke sini, lalu tinggal klik buat. Saya ingin menunjukkan contoh ini
00:06:51terlebih dahulu. Di sini saya meminta Open Design membuat hal yang sama dengan yang kita demokan di video Huwashu Design,
00:06:57yaitu: "Saya ingin landing page untuk produk SaaS buatan bernama Lighthouse, ditujukan untuk
00:07:03tim kecil, solo founder, dan saya ingin tiga contoh untuk dibandingkan bersama." Dan saya mendapatkan
00:07:11gaya tumpuk klasik, sesuatu yang lebih bergaya editorial, dan sesuatu yang sedikit lebih
00:07:17mencolok. Saat kita bandingkan langsung dengan apa yang kita dapatkan di Claude Design,
00:07:21Anda melihat banyak kemiripan. Banyak jenis font yang sama, warna yang sama, terutama
00:07:26pada latar belakang, apalagi karena kita memilih gaya editorial. Anda juga bisa melihat di sisi
00:07:32kiri pada Open Design bahwa ia melalui proses tanya jawab singkat yang sama seperti yang Anda harapkan di
00:07:37Claude Design sendiri. Ia menanyakan pertanyaan, memberi tombol pilihan, dan sebagainya. Ini hampir
00:07:43merupakan produk yang sama persis. Salah satu perbedaan yang saya temukan pada Open Design
00:07:49dibandingkan Claude Design adalah Open Design sedikit lebih lambat. Ini butuh sekitar 10 menit, sementara Claude
00:07:56Design hanya butuh separuh waktu tersebut. Perlu dicatat, meskipun kita melihat fitur komentar, edit, dan gambar, itu
00:08:01sebenarnya belum tersedia di Open Design, meskipun sudah ada dalam rencana pengembangan. Jika Anda ingin
00:08:06panel penyesuaian muncul, Anda harus meminta Open Design secara langsung, seperti, "Hei, bisakah buatkan
00:08:13panel penyesuaian untuk mengedit hal-hal sendiri dengan cepat," cukup dengan,
00:08:18menyalakan dan mematikannya lagi. Mirip dengan yang kita lakukan di Huwashu. Jadi Open Design agak lambat,
00:08:24kekurangan beberapa fitur kenyamanan ini, tapi selain itu, sangat mirip dengan Claude
00:08:30Design. Sekarang mari kita bahas jika Anda ingin menggunakan sistem desain buatan sendiri, karena ini adalah salah satu
00:08:35hal yang harus diakali. Jika saya ingin membuat slide yang menggunakan
00:08:40sistem desain dasbor agen OS saya sendiri—sebagai referensi, inilah yang saya maksud,
00:08:46ini estetika visual yang saya inginkan, yang mana di dalam Claude Design sendiri saya punya
00:08:51sistem desainnya—jika saya ingin membuatnya kembali di dalam Open Design, bagaimana caranya?
00:08:56Sekali lagi, tidak harus dasbor saya. Katakanlah Anda punya situs web, aset sendiri,
00:09:01tipografi, atau apa pun yang ingin dibuat ulang di sini. Tidak ada cara yang sangat langsung,
00:09:08seperti masuk ke sistem desain dan langsung membuatnya, tidak ada tombol untuk itu sama sekali.
00:09:14Sebagai gantinya, yang harus Anda lakukan adalah mengimpor zip Claude Design. Jadi jika
00:09:20saya sudah membuat sistem desain ini di dalam Claude Design, saya bisa pergi ke proyek
00:09:25sistem desain tersebut—di sanalah saya sekarang—klik bagikan, lalu klik unduh proyek sebagai .zip.
00:09:32Lalu saya masuk ke Open Design, pilih zip sistem desain tersebut dan unggah. Anda bisa lihat di dalam
00:09:39sini semua file desain yang baru saja diunggah. Nah, jika Anda mencoba melakukan sesuatu
00:09:45yang serupa tapi belum menjadikannya sistem desain di Claude Design, saya sarankan
00:09:51lakukan itu dulu. Itu cara termudah. Atau Anda bisa membuat ulang pengaturan sistem desain
00:09:55sendiri di Codex atau Claude Code. Agak repot memang, ini salah satu kekurangan
00:10:00Open Design, dan di sinilah menurut saya Huwashu Design sedikit lebih mudah karena
00:10:04saat kita berada di terminal, dibandingkan antarmuka grafis, saya tinggal bilang
00:10:08di terminal di dalam Claude Code, "Hei, lihat direktori itu, lihat semua yang ada
00:10:14di sana, sekarang buatkan slide ini dengan gaya tersebut." Jadi, ya, itulah salah satu kekurangan
00:10:20karena dipaksa menggunakan UI. Jadi, saya tulis di prompt, "Buatkan slide yang membahas tentang
00:10:25produk SaaS buatan saya, Lighthouse. Ini tentang analitik untuk tim kecil. Ajukan pertanyaan apa pun yang dibutuhkan."
00:10:29Kita perbesar sedikit agar lebih jelas. Inilah pertanyaan untuk saya:
00:10:34"Untuk siapa presentasi ini?" Katakanlah untuk peluncuran produk. "Siapa yang hadir?" Kita jawab orang produk.
00:10:44"Berapa slide?" Kita buat singkat saja. "Fidelitas?" Saya ingin high fidelity. "Catatan pembicara?" Tidak.
00:10:51"Nada visual?" Gunakan brutalist, gunakan sistem desain agen OS, lalu biarkan ia menentukan
00:11:00alur ceritanya. Kita kirim jawabannya. Sama seperti penguraian Claude Code normal, ia akan
00:11:04memberi daftar tugas lalu mulai mengerjakannya perlahan. Dan inilah hasil akhirnya
00:11:08untuk slide pertama yang terlihat cukup bagus. Saya rasa ini sudah sesuai
00:11:13dengan sistem desain yang kita berikan. Namun, seperti yang mungkin Anda sadari, saya tidak bisa berpindah
00:11:20antar-slide, atau mungkin ia membuat semuanya sama. Jadi saya beri tahu Open Design, "Saya hanya bisa lihat slide pertama,"
00:11:25tidak bisa berpindah slide. Kita lihat apakah ia bisa memperbaikinya. Inilah hasil yang
00:11:29diberikan Open Design untuk presentasinya, dan saya juga mengekspornya ke PowerPoint agar
00:11:34Anda bisa melihat proses ekspornya. Sering kali desain terlihat bagus di Claude Design dan
00:11:39Open Design, tapi saat dimasukkan ke PowerPoint, ada beberapa hal yang berantakan. Jadi,
00:11:43slide pertama oke, slide kedua oke, tapi kita bisa lihat bagian angka ini mungkin
00:11:52perlu diperbaiki sedikit. Slide ketiga, ini agak aneh, kita perlu mengubah
00:11:58cara pemisahan dan jarak antar-elemen. Slide keempat terlihat bagus,
00:12:04ini juga bagus. Slide keenam, kita mungkin perlu menggesernya ke atas sedikit. Lalu slide tujuh, ada
00:12:13sedikit masalah format lagi agar teks tetap di dalam kotak. Tapi saya anggap ini
00:12:18sudah 90% jadi, hanya butuh lima menit untuk memperbaikinya dan ini cocok dengan sistem desain
00:12:24yang kita inginkan. Tapi saya rasa Anda bisa melihat saat pembuatan slide ini, hasilnya agak
00:12:29kurang rapi dibandingkan proyek yang lebih matang seperti Claude Design. Dan itu
00:12:33wajar karena Open Design baru saja rilis minggu ini. Semoga mereka terus
00:12:37melakukan iterasi dan menyempurnakannya. Tapi secara keseluruhan, untuk alat yang baru rilis dan
00:12:42masih iterasi pertama, menurut saya Open Design adalah alat yang solid jika Anda
00:12:48ingin menggunakan Claude Design dengan antarmuka grafis untuk semua proses ini, tapi
00:12:54terkendala kuota penggunaan. Jika Anda tidak butuh antarmuka grafis tapi suka kerangka Claude
00:13:00Design dan cara kerjanya, menurut saya Huwashu Design mungkin masih sedikit lebih baik. Lebih cepat,
00:13:05dan karena di dalam terminal, saya rasa lebih fleksibel. Tapi jika Anda tipe orang yang
00:13:10butuh antarmuka seperti ini, ini adalah alternatif yang solid untuk Claude
00:13:15Design. Karena sejujurnya saya suka Claude Design, jangan salah sangka, hanya saja masalah kuota ini konyol. Tapi
00:13:21seperti yang saya katakan tadi, saya harap ada 10 juta alat seperti ini besok agar
00:13:26Anthropic segera memperbaiki masalah penggunaan ini, karena ini sudah keterlaluan. Jadi,
00:13:31sampai di sini saja. Menurut saya ini alat yang keren, silakan coba sendiri.
00:13:34Mudah dipasang dan sangat fleksibel terkait agen pengodean yang didukung. Beri tahu saya
00:13:40pendapat Anda di komentar. Pastikan cek Chase AI Plus jika ingin mencoba
00:13:43Masterclass-nya, dan sampai jumpa lagi.