Mistral Vibe CLI untuk desain.

Apa sebenarnya Mistral Vibe CLI itu

Mistral Vibe CLI adalah agen pengkodean open-source (Apache-2.0) yang dirilis Mistral AI untuk terminal. Ia menyediakan antarmuka obrolan interaktif dengan tool untuk manipulasi berkas, pencarian kode, kontrol versi, dan eksekusi perintah, serta secara otomatis memindai struktur berkas proyek Anda dan status Git untuk memberi agen konteks yang relevan. Ia ditenagai model pengkodean Devstral milik Mistral — merencanakan dan memverifikasi pekerjaan dari tugas berbahasa natural alih-alih sekadar melengkapi baris.

Untuk pekerjaan desain, dua sifat menonjol. Ia berjalan pada keluarga Devstral berbobot-terbuka milik Mistral (Devstral 2 dan Devstral Small 2 yang lebih kecil), sehingga Anda bisa menjalankan agen terhadap Mistral API di cloud atau terhadap model lokal — berguna untuk pekerjaan desain yang sensitif-privasi atau offline. Dan ia berbicara Agent Client Protocol, sehingga agen yang sama bisa menggerakkan editor dan tool, bukan hanya satu sesi terminal.

• Berkas konfigurasi: Vibe CLI dikonfigurasi melalui berkas config.toml (tingkat-proyek ./.vibe/config.toml, dengan cadangan di ~/.vibe/config.toml). Itu tempat praktis untuk mengkodekan provider, pilihan model, dan pengaturan proyek Anda.
• Tool bawaan + MCP: Ia menyertakan tool berkas, pencarian, kontrol versi, dan eksekusi perintah, serta mendukung server MCP (dikonfigurasi di bawah bagian [[mcp_servers]]) untuk menambahkan konteks eksternal seperti berkas Figma langsung.
• BYOK atau lokal: Autentikasi dengan kunci API Mistral dari konsol Mistral, atau arahkan ke model lokal/kompatibel sehingga ia bekerja sepenuhnya offline.

• Vendor: Mistral AI
• Kredensial: kunci API Mistral (BYOK) dari konsol Mistral, atau model lokal / kompatibel
• Lisensi: Apache-2.0, open source

Mengapa agen pengkodean berbobot-terbuka cocok untuk desain

Keunggulan desain Vibe CLI berasal dari keluarga model berbobot-terbukanya dan jangkauan protokolnya — tetapi, seperti setiap agen, selera tetap harus disediakan.

• Model pengkodean Devstral: Vibe berjalan pada keluarga Devstral milik Mistral, model yang disetel untuk pengkodean dan dibangun untuk pekerjaan agentik multi-berkas — sehingga agen menyunting di seluruh basis kode frontend nyata alih-alih memancarkan potongan kode terisolasi.
• Berbobot-terbuka dan ramah-lokal: Devstral Small 2 cukup kecil untuk berjalan di perangkat keras konsumen, sehingga pekerjaan desain bisa tetap sepenuhnya lokal dan offline — referensi dan kode tidak pernah harus meninggalkan mesin Anda.
• Konvensi dalam config.toml + konteks: Konfigurasi proyek dan instruksi Anda sendiri mengarahkan agen ke token, komponen, dan spesifikasi nyata Anda, sehingga ia bekerja terhadap sebuah brand alih-alih tampilan bawaan.

Pelajarannya sama dengan yang diajarkan setiap agen: Vibe CLI tidak memiliki selera secara bawaan. Ia menghasilkan desain yang baik ketika Anda memberinya batasan — sebuah design system, sebuah skill estetika, dan referensi konkret. Open Design mengemas tepat masukan-masukan itu, itulah mengapa keduanya cocok dipadukan (lebih lanjut di bawah).

Menyiapkan Vibe CLI untuk pekerjaan desain, dari nol

Berikut jalur lengkap dari mesin bersih menuju Vibe CLI yang dapat membangun dan memverifikasi UI.

# 1. Install Mistral Vibe CLI
uv tool install mistral-vibe
# or: pip install mistral-vibe

# 2. Run the setup wizard to register your API key
vibe --setup     # saves config to ~/.vibe/config.toml and ~/.vibe/.env
#    or set it directly:  export MISTRAL_API_KEY=...

# 3. Start Vibe in your project
cd your-project
vibe

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add an [[mcp_servers]] entry in your config.toml

• Kodekan aturan desain Anda: Simpan token, primitif, dan konvensi Anda di tempat agen membacanya lalu arahkan Vibe ke sana, sehingga keluaran cocok dengan sebuah brand alih-alih jatuh ke tampilan generik.
• Tambahkan verifikasi peramban: Sambungkan Playwright atau MCP peramban sehingga Vibe merender di peramban sungguhan dan memeriksa keluarannya di seluruh breakpoint alih-alih hanya memastikan build lolos.

Alur kerja referensi-ke-UI

Loop desain dengan daya ungkit tertinggi pada Vibe CLI adalah mengubah referensi yang jelas menjadi UI yang berfungsi dan responsif, lalu berulang sampai cocok — bersandar pada tool agen untuk merender, memeriksa, dan mengoreksi keluarannya sendiri.

1. Mulailah dari referensi paling jelas yang Anda punya — dan deskripsikan beberapa keadaan (desktop dan mobile, hover, kosong, memuat), bukan hanya satu bidikan hero.
2. Bersikaplah spesifik dalam prompt; prompt yang kabur menghasilkan UI generik bahkan dengan model yang kuat.
3. Simpan design system dan konvensi Anda di tempat Vibe membacanya, dan beri tahu di mana token dan primitif kanonis berada.
4. Jalankan server dev dan minta Vibe merender di peramban sungguhan, mengubah ukuran ke breakpoint untuk memeriksa hasilnya.
5. Berulanglah dengan meminta Vibe membandingkan implementasinya kembali ke referensi — bukan sekadar memastikan ia ter-build.

Rujuk berkas dengan @ (Vibe melengkapi-otomatis jalur berkas) dan gerakkan perintah garis-miring dengan /, lalu berikan batasan konkret:

vibe
# in the prompt:
> @design-spec.md @tokens.css
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, render it in the browser, and iterate until
  it matches the references across breakpoints.

Jaga prompt tetap kecil dan terfokus, commit iterasi yang baik dan kembalikan yang buruk (beri tahu Vibe saat Anda mengembalikan), sehingga setiap putaran dibangun di atas dasar yang bersih.

config.toml, MCP, dan ACP

Tiga titik ekstensi menjadikan Vibe CLI praktis untuk pekerjaan desain berkelanjutan, dan ketiganya memetakan dengan rapi ke alur kerja desain terbuka.

• config.toml: Aturan proyek serta pengaturan provider/model tinggal di sebuah config.toml (tingkat-proyek, dengan cadangan ~/.vibe). Itu adalah rumah yang awet untuk cara agen disambungkan ke proyek Anda, dibaca pada setiap putaran.
• Server MCP: Konfigurasi server MCP di config.toml Anda ([[mcp_servers]], dengan transport HTTP, streamable-HTTP, dan stdio) — cara portabel untuk membawa konteks desain dan tool eksternal, yang paling relevan server Figma MCP, yang bekerja lintas agen, bukan hanya Vibe.
• Agent Client Protocol: Vibe berbicara ACP, sehingga agen yang sama bisa digerakkan dari editor dan klien ACP lain. Inilah persis bagaimana Open Design mengintegrasikannya — melalui ACP via biner vibe-acp.

Ini adalah kapabilitas multi-agen yang portabel — persis jenis hal yang dibangun untuk diorkestrasi oleh Open Design, alih-alih dibuat ulang per proyek.

Vibe CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI untuk desain

Tidak ada satu pemenang tunggal untuk pekerjaan desain — setiap agen punya kekuatan berbeda, dan tim berpengalaman menumpuknya. Ringkasan yang adil:

Vonis komunitas yang berulang adalah bahwa selera berasal dari manusia: semuanya jatuh ke estetika generik tanpa skill, referensi, dan batasan. Itulah masalah nyata yang harus dipecahkan — dan bentuknya adalah alat-desain, bukan model.

Jebakan, dan cara menghindari tampilan “AI slop”

Keluhan paling umum tentang desain hasil AI adalah tampak generik — gradien lembut, panel mengambang, sudut membulat berlebihan, bayangan dramatis, nuansa Inter-dan-ungu yang “berteriak bahwa ini buatan AI”. Masalah lain yang dilaporkan termasuk tata letak mobile yang rusak dan instruksi yang bocor ke teks UI. Tidak satu pun unik bagi Vibe CLI; itu yang terjadi ketika agen mana pun berjalan tanpa konteks desain yang dikurasi.

• Tambahkan skill estetika: Skill desain yang dikurasi memaksa agen untuk berkomitmen pada arah nyata alih-alih tampilan bawaan.
• Verifikasi di peramban sungguhan: Minta Vibe merender dan memeriksa-sendiri di seluruh breakpoint sehingga tata letak tidak diam-diam rusak di mobile.
• Sediakan token dan referensi: Token desain nyata dan tangkapan layar referensi adalah tuas tunggal terbesar atas kualitas keluaran.
• Kodekan aturan di konfigurasi dan konteks: Letakkan aturan bergaya “tanpa kartu hero, maksimal dua jenis huruf, hierarki brand-dulu” di tempat agen membacanya setiap putaran.

Perhatikan bahwa setiap mitigasi adalah tentang memberi agen konteks desain yang dikurasi. Memelihara konteks itu secara manual, per proyek, adalah kerja keras yang dihilangkan Open Design.

Mendesain dengan Vibe CLI di dalam Open Design

Open Design adalah lapisan desain open-source yang terus diminta oleh alur kerja di atas. Ia memperlakukan Mistral Vibe CLI sebagai adaptor first-party — menggerakkannya melalui ACP via biner vibe-acp — dan membungkusnya dengan pustaka skill dan design-system kurasi, pipeline render terstruktur, serta UI desktop lokal. Sehingga konteks desain yang membuat Vibe bagus sudah ada sejak putaran pertama, bukan dirakit dengan tangan setiap kali. Keduanya open-source dan mengutamakan lokal, yang menjadikan pasangan ini cocok secara alami.

1. Pasang Open Design dan pilih Mistral Vibe CLI sebagai agen Anda.
2. Autentikasi dengan kunci API Mistral Anda (BYOK) atau arahkan Vibe ke model lokal — kredensial tetap di mesin Anda dan tidak pernah diproksikan melalui kami.
3. Pilih sebuah design system dan sebuah skill, lalu hasilkan deck, prototipe, dan landing page dengan selera yang konsisten.
4. Setiap artefak dan berkas DESIGN.md tinggal di repo Anda sendiri, bukan cloud terkelola.

Agen Vibe CLI yang sama, kunci yang sama — plus alur kerja desain open-source yang nyata dan portabel di sekelilingnya. Ia mengutamakan lokal dan Apache-2.0, sehingga tidak ada apa pun tentang pekerjaan atau kredensial Anda yang meninggalkan mesin Anda.

Pertanyaan yang sering diajukan

1. 01 Apakah Mistral Vibe CLI benar-benar bisa mengerjakan pekerjaan desain? +

   Ya — dengan skill estetika, design system, dan referensi nyata dalam konteks, Vibe CLI menghasilkan UI berkualitas produksi dan responsif, dan model Devstral-nya menyunting di seluruh basis kode frontend nyata. Tanpa konteks itu ia cenderung jatuh ke tampilan generik, dan itulah celah yang diisi Open Design.

2. 02 Bagaimana cara mengautentikasi Vibe CLI? +

   Jalankan wizard penyiapan dengan vibe --setup untuk mendaftarkan kunci API Mistral (dari konsol Mistral), atau setel MISTRAL_API_KEY di lingkungan Anda. Ia juga bisa berjalan terhadap model lokal atau kompatibel, sepenuhnya offline. Open Design tidak pernah memproksikan kredensial Anda dengan cara apa pun.

3. 03 Apa yang membuat Vibe CLI bagus khusus untuk desain? +

   Ia adalah agen Apache-2.0 yang ACP-native yang ditenagai model pengkodean Devstral berbobot-terbuka milik Mistral — sehingga Anda bisa menjalankannya secara lokal untuk pekerjaan yang sensitif-privasi dan menyunting di seluruh basis kode nyata. Tetapi selera tetap berasal dari design system, skill, dan referensi yang Anda sediakan.

4. 04 Vibe CLI atau Claude Code untuk desain frontend? +

   Keduanya kuat. Claude Code dikenal untuk keputusan desain yang spesifik dan sadar basis kode; keunggulan Vibe CLI adalah tumpukan Devstral berbobot-terbuka yang bisa Anda jalankan secara lokal dan lisensi Apache-2.0. Banyak tim memakai keduanya — Open Design membiarkan Anda mengganti agen tanpa mengubah alur kerja desain Anda.

5. 05 Bagaimana cara menghubungkan Vibe CLI ke Figma? +

   Tambahkan server Figma MCP sebagai entri [[mcp_servers]] di config.toml Anda. Vibe kemudian bisa menarik konteks desain nyata — komponen, variabel, data tata letak — sehingga kode yang dihasilkan cocok dengan sumber alih-alih memperkirakannya.

6. 06 Apakah Open Design berafiliasi dengan Mistral AI? +

   Tidak. Mistral Vibe CLI adalah produk Mistral AI; Open Design adalah proyek open-source independen yang mendukungnya sebagai adaptor first-party, digerakkan melalui ACP. Mistral adalah merek dagang Mistral AI.

7. 07 Apakah berkas dan kredensial saya aman? +

   Ya — Open Design mengutamakan lokal dan Apache-2.0. Berkas, artefak, dan DESIGN.md Anda tetap di repo Anda sendiri, dan kredensial Mistral Anda digunakan langsung oleh agen Anda, tidak pernah dirutekan melalui server Open Design.