Open Design: Mengapa 40 Ribu Developer Meninggalkan Claude Design
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Ini adalah OpenDesign, alternatif open source untuk Claude Design yang memungkinkan Anda menggunakan agen
00:00:05atau model apa pun yang sudah terinstal untuk menghasilkan prototipe web lengkap, aplikasi seluler, bahkan slide
00:00:11dalam format HTML. Dengan 72 sistem desain kelas brand yang disertakan, dan setiap proyek tetap ada di komputer Anda,
00:00:17jadi tidak ada yang dikirim ke cloud. Namun kita sudah tahu bahwa Claude Opus 4.7 sangat bagus untuk desain
00:00:23front-end, jadi tidak masuk akal jika membiarkan pengguna memilih model apa pun yang mereka inginkan, karena sebagian besar
00:00:27mungkin sangat buruk dalam desain, klik subscribe dan mari kita cari tahu.
00:00:33Claude Design dari Anthropic dirilis bulan lalu dan langsung populer. Alat ini memberi orang
00:00:38kemampuan untuk membuat desain yang tampak sangat bagus menggunakan model yang mengesankan, alat ini memberi orang
00:00:43alternatif untuk Lovable v0 dan alat serupa lainnya. Tapi ini adalah alat berpemilik yang hanya berbasis cloud, terkunci pada
00:00:49satu model, dan akan memakan biaya $20 per bulan untuk menggunakannya, yang pada dasarnya berarti ini bukan untuk semua orang.
00:00:54Jadi, 11 hari kemudian, Tom dan tim Nexa merilis alternatif open-source yang sangat populer.
00:01:00Ini agak mengingatkan saya pada OpenCode yang berasal dari Claude code, dan sekarang OpenDesign berasal dari Claude
00:01:05Design. Apa hal berikutnya yang akan dibuat Anthropic yang akan diberi awalan 'open' oleh seseorang?
00:01:09Tapi bagaimana alat open-source ini mampu membuat desain sebagus Claude Design? Nah,
00:01:14ini karena dua hal bekerja bersama. Yang pertama adalah sistem desain. OpenDesign berisi banyak
00:01:18di antaranya dengan spesifikasi brand penuh, tipografi, jarak, dan token warna yang terinspirasi dari brand seperti Linear,
00:01:24Stripe, dan Spotify. Yang kedua adalah keterampilan. Banyak sekali keterampilan untuk setiap jenis output. Jadi sebuah skill dasbor
00:01:30tahu cara mengatur tata letak bagan, dan skill slide tahu cara menyusun slide. Bahkan ada daftar periksa anti-AI
00:01:35yang disertakan dalam setiap prompt, dan sebelum menghasilkan apa pun, alat ini bertanya tentang audiens,
00:01:41nada, dan konten brand Anda. Jika Anda pernah menonton video saya tentang Impeccable, ini akan terasa sangat familier,
00:01:45tetapi ini berbeda, dan kita akan membahas perbedaannya nanti di video ini. Tapi untuk saat ini,
00:01:49mari kita lihat demo singkatnya. Jadi untuk memulai, Anda bisa mengunduh OpenDesign untuk macOS atau
00:01:54Windows, melakukan clone repo dan menginstalnya menggunakan Docker, atau menjalankannya dari sumber, itulah yang saya putuskan
00:01:59untuk dilakukan. Jadi dengan proyek yang berjalan, saya bisa mengunjungi port ini di browser saya, yang membawa saya ke UI ini,
00:02:04yang terlihat cukup membingungkan bagi seseorang yang tidak terbiasa dengan Claude Design, tapi mari kita bahas.
00:02:08Jadi jika saya klik di sini, Anda bisa melihat ia telah mengambil alat agen yang sudah saya instal,
00:02:13yaitu Claude Code Codex dan OpenCode. Dan jika saya klik Claude Code lalu gulir ke bawah,
00:02:17kita bisa memilih modelnya. Secara default, ia akan memilih yang dipilih di CLI, tapi saya bisa memilih
00:02:21di sini. Saya juga bisa melakukan hal yang sama dengan Codex, tapi Codex memungkinkan saya mengubah upaya penalaran,
00:02:26yang merupakan sentuhan yang bagus. Tapi saya akan memilih OpenCode. Saya akan gulir ke bawah dan mengubah
00:02:31modelnya ke GLM 5.1. Sekarang di sini juga, saya bisa memilih memori, yaitu instruksi yang akan ditambahkan
00:02:36ke setiap prompt, penyedia media, dan secara default, ia telah mengambil kunci OpenAI saya, dan ia akan menggunakan
00:02:41GPT Image 2 untuk menghasilkan gambar. Tapi saya juga bisa menghubungkan kunci API ElevenLabs saya untuk melakukan hal-hal seperti
00:02:46text-to-speech atau efek suara berbeda untuk animasi yang mungkin Anda miliki di situs web Anda. Kemudian
00:02:50di sini, saya bisa melihat semua keterampilan yang tersedia. Saya bisa melihat semua sistem desain,
00:02:54yang akan kita bahas nanti. Dan saya bahkan bisa memilih hewan peliharaan, yang merupakan sesuatu yang dilakukan Codex.
00:02:58Pada dasarnya, kita punya banyak pilihan di sini, tapi saya akan menutup ini dan mulai mendesain. Jadi saya
00:03:03akan memberi nama proyek saya dan kemudian memilih sistem desain. Nah, jika Anda tidak tahu apa itu
00:03:08sistem desain ini, Anda bisa klik tab sistem desain untuk melihat semuanya, dan ada banyak
00:03:13sekali. Tapi saya sudah melihatnya sebelum merekam video, dan menurut saya saya suka yang Miro, yang terlihat
00:03:17seperti ini dan memberikan detail token desain, serta informasi dalam file MD desain.
00:03:22Perhatikan bahwa saya berada di tab prototipe, tetapi ada juga artefak langsung untuk hal-hal yang ingin Anda perbarui
00:03:27berdasarkan data yang berubah, slide deck untuk menghasilkan slide berbasis HTML, atau untuk membangun dari template.
00:03:33Jadi saya bisa klik tab template di sini dan memilih template yang saya inginkan. Sekarang kita akan tetap
00:03:38dengan prototipe dan klik buat. Sekarang dari sini, kita dibawa ke halaman lain di mana kita bisa memberikan
00:03:42prompt. Sekarang saya akan mencoba sesuatu yang agak unik di sini. Jadi saat ini saya punya aplikasi
00:03:47pencarian saluran YouTube yang sedang berjalan, dan saya ingin membuat versi yang jauh lebih bagus dari ini. Jadi yang akan
00:03:52saya lakukan adalah memberikannya URL ini dan melihat apakah GLM mampu mencari melalui tab dan
00:03:57input dan menggunakannya untuk desainnya. Jadi di sini saya telah memberikannya prompt untuk membuatkan saya situs web sederhana
00:04:02yang didesain dengan baik untuk produk yang bisa saya gunakan untuk mencari saluran YouTube. Saya juga telah memberikan tautan
00:04:07situs web tersebut agar ia mengunjunginya menggunakan browser agen atau alat apa pun yang menurutnya cocok. Dan dengan cara itu ia bisa
00:04:12melihat input dan menelusuri semua halaman. Jadi mari kita lihat apa yang dilakukannya. Sekarang ia menanyakan beberapa
00:04:15pertanyaan seputar nada visual, konteks brand, dan beberapa hal lainnya, yang akan saya jawab.
00:04:20Dan kemudian kita akan melanjutkan proses desain dan lihat ini. Ia mampu menjalankan perintah curl
00:04:24untuk membuka situs menggunakan Chrome. Dan sekarang ia menggunakan browser agen untuk terhubung ke situs tersebut. Jadi saya tidak
00:04:29membuka apa pun atau pergi ke URL tersebut dan ia sedang menelusuri situs tersebut di browser. Kita bisa melihat beberapa
00:04:34perintah browser agen lagi untuk memahami cara kerjanya. Oke. Jadi pada titik ini, ia masih berjalan.
00:04:38Belum selesai sepenuhnya. Masih ada beberapa hal yang harus dilakukan, tapi saya suka arah kemana segalanya
00:04:43berjalan. Saya suka halaman pencarian yang dibuatnya dengan filter canggih di bawah sini, dan saya bisa beralih
00:04:48antara judul video dan nama saluran untuk pencarian. Kita mendapatkan hasil pencarian, yang terlihat
00:04:52sangat mengesankan dan ia menggunakan data dari situs web yang sebenarnya. Jadi saya tidak yakin apa yang ia lakukan,
00:04:57apakah ia mengambil dan menyimpannya di suatu tempat, tetapi ini adalah data aktual selain dari thumbnail yang hilang. Kita juga
00:05:01memiliki halaman favorit. Jadi jika saya memfavoritkan seseorang di sini, di sinilah mereka akan pergi dan saya bisa membuat
00:05:06email untuk menghubungi mereka atau menghapusnya. Dan ada juga halaman tersembunyi di sini. Jadi sebagai contoh,
00:05:11jika saya menekan X, maka seseorang akan berakhir di halaman ini. Dan sepertinya setelah sekitar 20 menit. Ya.
00:05:17GLM 5.1 bukan model tercepat. Semuanya sudah selesai. Dan inilah yang ia katakan kepada saya.
00:05:23Ia memberi saya kelima file yang ia buat. Dan saya pikir ia mengekspor semuanya ke lokasi
00:05:28sementara. Jadi apa yang bisa saya lakukan sekarang adalah saya bisa memberikannya prompt lain. Jadi jika saya ingin menambahkan mode gelap,
00:05:33saya bisa melakukannya, tapi saya juga bisa klik selesaikan paket desain, yang akan mensintesis
00:05:37segalanya menjadi satu file MD desain. Jadi transkrip, sistem desain, dan artefak apa pun
00:05:42yang dihasilkan, pada dasarnya kelima halaman ini. Saya juga bisa klik bagikan untuk mengekspor dalam format yang berbeda.
00:05:48Dan saya bahkan bisa mengekspor HTML mandiri dan memberikannya ke Claude Code untuk diterapkan dalam proyek saya yang sebenarnya
00:05:53dan bahkan men-deploy-nya ke Vercel atau Cloudflare Pages, yang merupakan sentuhan yang sangat bagus.
00:05:57Jadi itu gambaran singkat tentang OpenDesign. Apakah layak digunakan? Nah, jika Anda sudah memiliki agen
00:06:02pengodean yang terinstal dan Anda membayar langganan VanClaude, maka sangat mudah untuk mencobanya.
00:06:07Kombinasi sistem desain dan keterampilan berarti ia benar-benar dapat menghasilkan sesuatu yang cukup layak
00:06:12terlepas dari harness atau modelnya. Tapi bagaimana perbandingannya dengan sesuatu seperti Impeccable?
00:06:16Nah, secara pribadi, saya lebih suka cara Impeccable melakukan perencanaannya. Ia menanyakan segalanya di depan
00:06:22dan mendesain mockup yang berbeda menggunakan model gambar, yang bisa Anda pilih dan iterasi dari sana.
00:06:27Jadi Anda bisa saja tidak tahu seperti apa desain yang Anda inginkan di awal,
00:06:32tetapi berakhir dengan sesuatu yang cukup layak. Sedangkan dengan OpenDesign, Anda harus tahu
00:06:37sedikit tentang desain sebelum memulainya. Maksud saya, ia memang menanyakan sistem desain apa yang Anda inginkan sebelum
00:06:42Anda mulai dan saya tahu modelnya bisa menghasilkan satu, tetapi fakta bahwa ia menanyakannya berarti ia ditujukan untuk
00:06:48seseorang yang tahu sedikit lebih banyak tentang desain. Tapi saya harus akui, OpenDesign memiliki UI yang hebat,
00:06:53memberi Anda opsi untuk melihat tampilan responsif, mengekspor ke mana pun Anda mau, menambahkan keterampilan, alat MCP,
00:06:58dan bahkan hewan peliharaan, yang bagus untuk seseorang yang terbiasa menggunakan UI Codex atau aplikasi desktop Claude.
00:07:04Dan ia melakukan pekerjaan hebat dalam mendesain aplikasi menggunakan GLM 5.1, yang bukan model terbaik untuk mendesain
00:07:10di luar sana. Jadi jika saya ingin mendesain sesuatu dengan relatif cepat dan saya punya sedikit gambaran
00:07:15tentang arah yang ingin saya tuju, maka saya pasti akan mencoba OpenDesign. Tapi jika Anda tidak keberatan
00:07:19menghabiskan sedikit uang, Claude Design cukup bagus. Maksud saya,
00:07:22lihat apa yang mampu dilakukannya dengan prompt yang sama persis.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video