Cara Menggunakan Claude Design Gratis

Claude Design menarik perhatian karena alurnya sederhana: tulis satu kalimat, lalu dapatkan pitch deck, landing page, atau mockup mobile dalam hitungan detik. Masalahnya, Claude Design adalah produk berbayar, berbasis cloud, dan terkunci pada ekosistem Anthropic. Jika Anda mencari cara menggunakan pengalaman seperti Claude Design secara gratis, pendekatan paling realistis adalah memakai alternatif open source yang bisa berjalan di mesin sendiri.

Coba Apidog hari ini

Salah satu opsi terbaik adalah Open Design, proyek sumber terbuka yang membangun ulang workflow desain berbasis artefak. Artikel ini membahas apa itu Open Design, tiga cara instalasinya, cara menghubungkannya ke agen AI, dan bagaimana memasangkannya dengan API nyata menggunakan Apidog.

💡 Alat desain AI memberi Anda antarmuka. Agar prototipe menjadi produk yang benar-benar bisa diuji, antarmuka tersebut perlu dihubungkan ke API, data mock, dan skenario testing.

TL;DR: cara menggunakan Claude Design secara gratis

Claude Design adalah alat desain berbayar dan closed source dari Anthropic. Jika yang Anda butuhkan adalah pengalaman serupa secara gratis, gunakan Open Design.

Open Design adalah alternatif open source berlisensi Apache-2.0 dengan workflow desain berbasis artefak. Ia bisa berjalan lokal atau self-hosted, lalu memakai CLI agen pengodean sebagai mesin AI-nya.

Agen yang didukung mencakup Claude Code, Codex, Gemini CLI, Cursor, dan beberapa CLI lain. Perangkat lunaknya gratis. Anda hanya membayar model AI yang digunakan. Jika Anda sudah berlangganan agen tertentu atau memakai model lokal seperti Ollama, biaya tambahan bisa menjadi nol.

Mengapa “Claude Design gratis” perlu diluruskan

Claude Design adalah produk resmi dari Anthropic. Produk ini berjalan di cloud Anthropic, bersifat closed source, dan tidak menyediakan opsi self-hosting atau penggantian model secara bebas.

Jadi, ketika orang mengatakan ingin “menggunakan Claude Design secara gratis”, biasanya yang dimaksud adalah salah satu dari dua hal berikut:

• Menginginkan workflow yang sama: prompt → desain → artefak siap pakai.
• Menginginkan kontrol atas data, hosting, dan pilihan model.

Open Design menjawab kedua kebutuhan tersebut. Ia tidak memberikan Claude Design resmi secara gratis, tetapi menyediakan workflow serupa dengan kontrol yang lebih besar.

Apa itu Open Design?

Open Design adalah lingkungan desain open source yang mengutamakan local-first workflow. Repositori GitHub mendeskripsikannya sebagai alternatif terbuka dan agent-native untuk Claude Design.

Secara arsitektur, Open Design terdiri dari tiga lapisan:

1. Frontend web berbasis Next.js
   
   Ini adalah UI chat dan canvas yang Anda gunakan di browser.

2. Daemon lokal berbasis Node.js + SQLite
   
   Daemon ini menyimpan proyek, percakapan, artefak, dan mendeteksi agen pengodean yang tersedia di sistem Anda.

3. Runtime agen
   
   Daemon menjalankan CLI agen pengodean dengan folder proyek sebagai working directory. Agen membaca template, skill, dan design system, lalu menghasilkan file artefak.

Bagian ketiga adalah inti dari Open Design. Ia tidak membawa model AI sendiri. Sebaliknya, ia memakai agen pengodean yang sudah Anda pasang di laptop, seperti Claude Code, Codex, Gemini CLI, Cursor Agent, OpenCode, Qwen, GitHub Copilot CLI, Kimi, dan lainnya.

Jika Anda ingin memahami cara kerja agen seperti Claude Code di balik layar, baca juga arsitektur harness agen Claude Code.

Open Design juga menyediakan dua komponen penting untuk meningkatkan kualitas output:

• Skill: template kerja untuk prototipe web, dashboard, aplikasi mobile, landing page SaaS, email, carousel sosial, dan presentasi.
• Design system: panduan visual berbasis Markdown yang meniru gaya merek seperti Linear, Stripe, Vercel, Notion, dan Apple.

Pola ini mirip dengan penggunaan file DESIGN.md untuk agen pengodean, yaitu memberi instruksi desain yang eksplisit agar agen tidak menebak-nebak.

Open Design dapat menghasilkan:

• Prototipe web
• UI desktop dan mobile
• Slide deck
• Gambar
• Video pendek
• HTML, PDF, PPTX, ZIP, Markdown, dan MP4

Semua berjalan di bawah lisensi Apache 2.0, sehingga penggunaan komersial diperbolehkan.

Cara instal Open Design

Ada tiga cara menggunakan Open Design. Pilih berdasarkan kebutuhan kontrol dan kenyamanan.

Opsi 1: aplikasi desktop

Ini jalur tercepat jika Anda tidak ingin menyentuh terminal.

1. Buka open-design.ai atau halaman rilis GitHub.
2. Unduh build untuk macOS atau Windows.
3. Instal dan jalankan seperti aplikasi desktop biasa.

Saat pertama kali dijalankan, aplikasi akan:

• Memindai agen pengodean di mesin Anda.
• Memuat skill dan design system.
• Membuat folder runtime untuk proyek.

Gunakan opsi ini jika Anda ingin pengalaman paling dekat dengan produk desain siap pakai.

Opsi 2: Docker

Gunakan Docker jika Anda ingin menjalankan Open Design sebagai layanan terisolasi, misalnya di server lokal atau mesin bersama.

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d

Setelah container berjalan, buka:

http://localhost:7456

Docker membuat instalasi lebih bersih dan mudah diulang. Jika belum terbiasa dengan Docker Compose, lihat dokumentasi resmi Docker.

Opsi 3: dari source

Gunakan opsi ini jika Anda ingin versi terbaru dan ingin memodifikasi skill atau design system.

Prasyarat:

• Node.js sekitar versi 24
• pnpm 10.33.x

Langkah instalasi:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version
pnpm install
pnpm tools-dev run web

Perintah tools-dev menjalankan daemon dan frontend web. Beberapa perintah yang berguna:

Perintah	Fungsi
pnpm tools-dev run web	Menjalankan daemon dan web di foreground
pnpm tools-dev start web	Menjalankan daemon dan web di background
pnpm tools-dev status	Melihat service yang sedang berjalan
pnpm tools-dev logs	Membaca log daemon dan web
pnpm tools-dev stop	Menghentikan semua service

Jika Anda sudah memakai pnpm, workflow ini akan terasa familiar. Jika belum, corepack enable membantu mengunci versi package manager yang benar.

Menghubungkan Open Design ke agen AI

Setelah instalasi selesai, Open Design membutuhkan mesin AI. Ada dua jalur utama.

Jalur A: agen CLI

Ini jalur yang direkomendasikan.

Pastikan agen pengodean yang didukung sudah terinstal dan tersedia di PATH.

Contoh pengecekan:

which claude
which gemini
which codex

Jika ingin pengalaman paling dekat dengan Claude Design, gunakan Claude Code karena sama-sama memakai model Anthropic. Namun Open Design juga dapat bekerja dengan Codex, Gemini CLI, Cursor Agent, dan agen lain.

Keuntungan jalur ini:

• Tidak perlu konfigurasi API key di Open Design.
• Bisa memakai langganan agen yang sudah Anda miliki.
• Tidak ada biaya tambahan dari Open Design.

Untuk setup Claude Code, lihat panduan penyiapan SDK Agen Claude dan Paket Claude.

Jalur B: proxy BYOK

Jika tidak ingin memakai CLI, Open Design menyediakan proxy kompatibel OpenAI. Anda bisa memasukkan API key dari penyedia seperti:

• Anthropic
• OpenAI
• Azure OpenAI
• Google Gemini
• Ollama
• Server model lokal

Jalur ini fleksibel, tetapi biaya token tetap mengikuti penyedia model yang Anda gunakan.

Jika Anda mengelola API key, perlakukan sebagai kredensial sensitif. Prinsip dalam artikel keamanan kunci API di ekstensi editor juga relevan di sini.

Untuk biaya nol yang paling literal, gunakan Ollama dengan model lokal. Dengan begitu, loop desain dapat berjalan offline tanpa tagihan API.

Membuat artefak desain pertama

Setelah mesin AI terhubung, workflow Open Design cukup langsung.

1. Pilih skill
   
   Tentukan output yang ingin dibuat: landing page SaaS, dashboard, layar mobile, email marketing, atau slide deck.

2. Pilih design system
   
   Pilih gaya visual seperti Linear, Stripe, Vercel, Notion, atau Apple. Jika tidak memilih, Open Design menyediakan arah visual bawaan seperti Editorial, Modern Minimal, Tech Utility, Brutalist, dan Soft Warm.

3. Tulis brief
   
   Gunakan bahasa sederhana. Contoh:
   

   desain halaman pricing untuk tool API developer

atau:

   buat pitch deck bergaya editorial untuk startup tahap seed

1. Jawab discovery form
   
   Open Design akan menanyakan konteks seperti audiens, tone, permukaan desain, dan informasi brand. Jangan lewati tahap ini karena kualitas output sangat bergantung pada jawaban awal.

2. Pantau rencana kerja agen
   
   Agen akan menampilkan task list di UI dan memperbarui progres saat bekerja.

3. Preview artefak
   
   Output dirender di iframe terisolasi. Isolasi ini penting karena kode hasil generasi tidak langsung berjalan bebas di sistem Anda. Konsep serupa dibahas dalam artikel apa arti CubeSandbox bagi agen AI.

4. Ekspor hasil
   
   Ekspor ke HTML, PDF, PPTX, ZIP, Markdown, atau MP4. File juga tersimpan di folder proyek sehingga bisa diedit manual.

Kustomisasi lanjutan

Setelah workflow dasar berjalan, Anda bisa mulai menyesuaikan Open Design agar cocok dengan kebutuhan tim.

Edit skill

Setiap skill adalah folder yang berisi SKILL.md dan aset pendukung. Anda bisa mengubah checklist, menambahkan aturan layout, atau memasukkan template internal.

Contoh penggunaan:

• Skill khusus untuk landing page internal.
• Skill untuk dashboard SaaS B2B.
• Skill untuk deck sales perusahaan.

Buat design system sendiri

Design system Open Design berbasis Markdown. Anda bisa menulis aturan seperti:

• Token warna
• Skala tipografi
• Spacing
• Komponen
• Tone of voice
• Prinsip layout

Letakkan file tersebut di folder design-systems, lalu gunakan di proyek berikutnya.

Gunakan model berbeda

Proxy BYOK memungkinkan Anda mengganti model sesuai kebutuhan:

• Model frontier untuk presentasi penting.
• Model lebih murah untuk draft awal.
• Model lokal untuk eksperimen offline.

Jika ingin membandingkan model besar, lihat perbandingan Gemini 3.5 vs GPT-5.5 vs Opus 4.7.

Hubungkan lewat MCP

Open Design menyertakan server Model Context Protocol. Agen pengodean lain dapat memakai MCP untuk membaca file desain, mengambil artefak, atau mengakses design system tanpa workflow ekspor-impor manual.

Ini membuat Open Design lebih mudah dimasukkan ke toolchain pengembangan yang sudah ada.

Dari prototipe ke produk: pasangkan Open Design dengan Apidog

Open Design dapat menghasilkan UI yang bagus, tetapi UI dengan data placeholder belum menjadi produk. Saat tombol diklik atau dashboard dibuka, aplikasi tetap membutuhkan API.

Di sinilah Apidog berguna.

Misalnya Open Design menghasilkan dashboard developer tool dengan:

• Grafik penggunaan
• Panel billing
• Halaman pengaturan akun

Agar dashboard tersebut bisa diuji secara realistis, Anda membutuhkan endpoint seperti:

GET /usage
GET /billing
GET /account/settings
PATCH /account/settings

Dengan Apidog, Anda dapat mendesain API tersebut secara visual dan menghasilkan spesifikasi OpenAPI yang rapi. Setelah schema dibuat, Anda bisa langsung menjalankan mock server.

Contoh workflow praktis:

1. Buat desain dashboard di Open Design.
2. Identifikasi data yang dibutuhkan UI.
3. Definisikan endpoint dan schema response di Apidog.
4. Aktifkan mock server.
5. Ubah frontend hasil Open Design agar memanggil endpoint mock.
6. Jalankan testing API saat backend asli mulai dibuat.

Keuntungan mocking:

• Frontend tidak perlu menunggu backend selesai.
• Data mock tetap mengikuti schema.
• Tim backend dan frontend bisa bekerja paralel.
• Demo produk terasa lebih nyata.

Ketika backend sudah tersedia, Apidog juga membantu membuat skenario testing otomatis dan menghubungkannya ke CI/CD. Mode spec-first di Apidog menjaga desain API dan implementasi tetap sinkron.

Ada simetri menarik di sini. Open Design memakai agen dan skill untuk membuat antarmuka. Apidog juga mengekspos kemampuan ke agen AI dan menyediakan debugger agen AI untuk memeriksa bagaimana agen memanggil endpoint.

Dengan kombinasi ini:

• Open Design membuat UI.
• Apidog mendesain dan mock API.
• Agen AI dapat membaca konteks frontend dan backend.
• Prototipe lebih cepat berubah menjadi produk yang bisa diuji.

Anda juga bisa mengunduh Apidog dan langsung membuat mock endpoint pertama.

Open Design vs Claude Design vs Figma

Faktor	Open Design	Claude Design	Figma
Harga	Gratis, Apache 2.0	Langganan berbayar	Tier gratis + paket berbayar
Kode sumber	Terbuka	Tertutup	Tertutup
Hosting	Lokal, self-host, atau Vercel	Cloud saja	Cloud
Mesin AI	Agen apa pun, BYOK, atau model lokal	Model Anthropic	Manual + fitur AI add-on
Output	Artefak kode, deck, gambar, video	Artefak desain	File desain yang dapat diedit
Offline	Ya, dengan model lokal	Tidak	Terbatas
Cocok untuk	Developer dan tim yang ingin kontrol	Pengalaman hosted cepat	Desain visual manual

Claude Design unggul dalam kenyamanan karena tidak perlu instalasi. Figma tetap kuat untuk desain manual dan kolaborasi visual. Open Design unggul jika Anda menginginkan kontrol: local-first, open source, pilihan model bebas, dan integrasi lebih mudah dengan workflow pengembangan.

Kesalahan umum yang perlu dihindari

1. Agen tidak tersedia di PATH

Jika Open Design tidak menemukan mesin AI, cek instalasi CLI:

which claude
which gemini
which codex

Jika tidak ditemukan, instal CLI yang didukung atau gunakan proxy BYOK.

2. Versi Node atau pnpm salah

Instalasi dari source membutuhkan Node sekitar versi 24 dan pnpm 10.33.x. Gunakan:

corepack enable
corepack pnpm --version

3. Mengira semua jalur selalu gratis

Open Design gratis, tetapi API key berbayar tetap dikenakan biaya token. Jika ingin biaya nol, gunakan:

• Agen yang sudah termasuk dalam langganan Anda.
• CLI dengan tier gratis.
• Model lokal lewat Ollama.

4. Melewati discovery form

Discovery form menentukan konteks desain. Jawab dengan jelas agar output pertama lebih akurat.

5. Menganggap output sebagai production-ready code

Output Open Design adalah titik awal. Sebelum dipakai di production:

• Review kode.
• Refactor struktur.
• Hubungkan ke API nyata.
• Tambahkan testing.
• Validasi keamanan.

Gunakan pengujian API agar endpoint di balik desain tetap stabil.

6. Memakai build lama

Open Design berkembang cepat. Jika fitur tertentu tidak tersedia, cek apakah Anda memakai rilis lama. Pengguna source bisa menarik perubahan terbaru dari main; pengguna desktop perlu memeriksa rilis baru.

Kesimpulan

Anda tidak bisa mendapatkan produk Claude Design resmi dari Anthropic secara gratis. Namun Anda bisa mendapatkan workflow serupa: tulis brief, pilih gaya, hasilkan artefak, lalu iterasi.

Ringkasnya:

• Open Design adalah alternatif open source Apache-2.0 untuk workflow seperti Claude Design.
• Bisa dijalankan lewat aplikasi desktop, Docker, atau source.
• Menggunakan CLI agen pengodean seperti Claude Code, Codex, Gemini CLI, dan lainnya.
• Bisa memakai BYOK atau model lokal seperti Ollama.
• Skill dan design system dapat diedit agar sesuai dengan brand sendiri.
• UI hasil generasi tetap membutuhkan API agar menjadi prototipe yang bisa diuji.
• Apidog membantu mendesain, mock, dan menguji API di balik prototipe tersebut.

Langkah praktis berikutnya: instal Open Design, hubungkan ke agen AI, buat satu artefak, lalu unduh Apidog untuk membuat mock API yang menghidupkan prototipe Anda.