Tasarım için Mistral Vibe CLI.

Mistral Vibe CLI aslında nedir

Mistral Vibe CLI, Mistral AI'nin terminal için sunduğu açık kaynak (Apache-2.0) bir kodlama ajanıdır. Dosya manipülasyonu, kod arama, sürüm kontrolü ve komut yürütme araçlarına sahip etkileşimli bir sohbet arayüzü sunar ve ajana ilgili bağlam sağlamak için projenizin dosya yapısını ve Git durumunu otomatik olarak tarar. Mistral'in Devstral kodlama modelleriyle çalışır — sadece satırları tamamlamak yerine doğal dil görevlerinden iş planlayıp doğrular.

Tasarım işi için iki özellik öne çıkar. Mistral'in açık ağırlıklı Devstral ailesi (Devstral 2 ve daha küçük Devstral Small 2) üzerinde çalışır, böylece ajanı bulutta Mistral API'sine veya yerel modellere karşı çalıştırabilirsiniz — gizlilik açısından hassas veya çevrimdışı tasarım işleri için kullanışlıdır. Ve Agent Client Protocol'ü konuşur, böylece aynı ajan sadece bir terminal oturumunu değil, editörleri ve araçları da yönlendirebilir.

• Yapılandırma dosyaları: Vibe CLI, bir config.toml dosyası (proje düzeyinde ./.vibe/config.toml, yedek olarak ~/.vibe/config.toml) aracılığıyla yapılandırılır. Sağlayıcılarınızı, model seçiminizi ve proje ayarlarınızı kodlamak için pratik bir yerdir.
• Yerleşik araçlar + MCP: Dosya, arama, sürüm kontrolü ve komut yürütme araçlarıyla birlikte gelir ve canlı bir Figma dosyası gibi harici bağlam eklemek için MCP sunucularını (bir [[mcp_servers]] bölümü altında yapılandırılır) destekler.
• BYOK veya yerel: Mistral konsolundan bir Mistral API anahtarıyla kimlik doğrulayın veya tamamen çevrimdışı çalışması için yerel/uyumlu modellere yönlendirin.

• Sağlayıcı: Mistral AI
• Kimlik bilgisi: Mistral konsolundan Mistral API anahtarı (BYOK) veya yerel / uyumlu modeller
• Lisans: Apache-2.0, açık kaynak

Açık ağırlıklı bir kodlama ajanı neden tasarıma uyuyor

Vibe CLI'nin tasarım avantajı, açık ağırlıklı model ailesinden ve protokol erişiminden gelir — ancak her ajanda olduğu gibi zevk yine de sizin tarafınızdan sağlanmalıdır.

• Devstral kodlama modelleri: Vibe, Mistral'in Devstral ailesi üzerinde çalışır; ajantik, çok dosyalı iş için oluşturulmuş kodlama odaklı modeller — böylece ajan izole kod parçacıkları yerine gerçek bir frontend kod tabanında düzenlemeler yapar.
• Açık ağırlıklı ve yerel dostu: Devstral Small 2, tüketici donanımında çalışacak kadar küçüktür, böylece tasarım işi tamamen yerel ve çevrimdışı kalabilir — referanslar ve kod asla makinenizden ayrılmak zorunda değildir.
• config.toml + bağlamdaki kurallar: Proje yapılandırması ve kendi talimatlarınız, agent'ı tokens, bileşenler ve gerçek spesifikasyonlara yönlendirir, böylece varsayılan bir görünüm yerine bir markaya göre çalışır.

Ders, her agent'ın öğrettiğiyle aynı: Vibe CLI varsayılan olarak zevk sahibi değildir. Ona kısıtlamalar verdiğinizde — bir tasarım sistemi, estetik bir skill ve somut referanslar — iyi tasarım üretir. Open Design tam da bu girdileri paketler, bu yüzden ikisi birlikte uyum sağlar (aşağıda daha fazla bilgi).

Vibe CLI'ı sıfırdan tasarım çalışması için kurun

Temiz bir makineden UI oluşturabilir ve doğrulayabilir bir Vibe CLI'a giden tam yol burada.

# 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

• Tasarım kurallarınızı kodlayın: tokens, ilkeler ve kurallarınızı agent'ın okuduğu yerde tutun ve Vibe'ı onlara yönlendirin, böylece çıktı genel bir görünüme varsayılan kalmak yerine bir markayla eşleşir.
• Tarayıcı doğrulaması ekleyin: Bir Playwright veya tarayıcı MCP bağlayın, böylece Vibe gerçek bir tarayıcıda render eder ve yalnızca derlemenin başarılı olduğunu onaylamak yerine çıktısını farklı kesme noktalarında kontrol eder.

Referanstan UI'a iş akışı

Vibe CLI ile en yüksek kaldıraçlı tasarım döngüsü, net bir referansı çalışan, duyarlı UI'a dönüştürmek ve eşleşene kadar yinelemek — agent'ın kendi çıktısını render etme, inceleme ve düzeltme araçlarına dayanarak.

1. Sahip olduğunuz en net referanslardan başlayın — ve sadece bir ana çekim değil, birden fazla durumu (masaüstü ve mobil, hover, boş, yükleniyor) tanımlayın.
2. Prompt'ta spesifik olun; belirsiz prompt'lar güçlü bir modelle bile genel UI üretir.
3. Tasarım sisteminizi ve kurallarınızı Vibe'ın okuduğu yerde tutun ve tokens ile standart ilkelerin nerede olduğunu ona bildirin.
4. Bir dev server çalıştırın ve Vibe'ın gerçek bir tarayıcıda render etmesini sağlayın, sonucu kontrol etmek için kesme noktalarına göre yeniden boyutlandırın.
5. Vibe'ın uygulamasını referanslara geri döndürerek karşılaştırmasını sağlayarak ilerleyin — sadece derlemenin başarılı olduğunu onaylamakla kalmayın.

Dosyalara @ ile referans verin (Vibe dosya yollarını otomatik tamamlar) ve slash komutlarını / ile yönlendirin, ardından somut kısıtlamalar verin:

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.

İstemleri küçük ve odaklı tutun, iyi yinelemeleri commit edin ve kötü olanları geri alın (geri aldığınızda Vibe'a söyleyin), böylece her geçiş temiz bir temel üzerinde inşa edilsin.

config.toml, MCP ve ACP

Üç genişleme noktası Vibe CLI'ı sürdürülebilir tasarım çalışması için pratik hale getirir ve her üçü de açık tasarım iş akışına temiz bir şekilde eşlenir.

• config.toml: Proje kuralları ve sağlayıcı/model ayarları bir config.toml içinde bulunur (proje düzeyinde, ~/.vibe yedek konumuyla). Bu, agent'ın projenize nasıl bağlandığının kalıcı evidir ve her çalıştırmada okunur.
• MCP sunucuları: MCP sunucularını config.toml dosyanızda yapılandırın ([[mcp_servers]], HTTP, streamable-HTTP ve stdio aktarımlarıyla) — tasarım bağlamını ve harici araçları, özellikle agent'lar arasında çalışan Figma MCP sunucusunu getirmenin taşınabilir yolu, sadece Vibe için değil.
• Agent Client Protocol: Vibe ACP konuşur, böylece aynı agent editörlerden ve diğer ACP istemcilerinden yönetilebilir. Open Design'ın onu entegre etme şekli tam olarak budur — vibe-acp binary'si aracılığıyla ACP üzerinden.

Bunlar taşınabilir, çoklu-agent yetenekleridir — tam olarak Open Design'ın proje başına yeniden oluşturmak yerine düzenlemeye yönelik olarak tasarlandığı şeyler.

Tasarım için Vibe CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI

Tasarım çalışması için tek bir kazanan yoktur — her agent'ın farklı bir gücü vardır ve deneyimli ekipler onları yığarlar. Adil bir özet:

Topluluğun yinelenen kararı, zevkin insanlardan geldiğidir: hepsi skills, referanslar ve kısıtlamalar olmadan jenerik bir estetiğe varsayılan olarak döner. Çözülmesi gereken asıl sorun budur — ve bu model-biçimli değil, tasarım-aracı-biçimlidir.

Tuzaklar ve "AI slop" görünümünden nasıl kaçınılır

AI tarafından oluşturulan tasarım hakkındaki en yaygın şikayet, jenerik görünmesidir — yumuşak degradeler, yüzen paneller, büyük yuvarlak köşeler, dramatik gölgeler, "bunu bir AI yaptı" diye çığlık atan bir Inter-ve-mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve UI kopyasına sızan talimatlar bulunur. Bunların hiçbiri Vibe CLI'ye özgü değildir; herhangi bir agent küratörlü bir tasarım bağlamı olmadan çalıştığında olan budur.

• Estetik bir skill ekleyin: Özenle seçilmiş bir design skill, agentin varsayılan görünüm yerine gerçek bir yöne bağlı kalmasını sağlar.
• Gerçek bir tarayıcıda doğrulayın: Vibe'ın breakpoint'ler arasında render yapıp kendi kendini kontrol etmesini sağlayarak düzenlerin mobilde sessizce bozulmamasını garantileyin.
• tokens ve referanslar sağlayın: Gerçek design tokens ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük kaldıraçtır.
• Kuralları yapılandırma ve bağlamda kodlayın: "Hero kartlar yok, maksimum iki yazı tipi, marka öncelikli hiyerarşi" tarzı kuralları, agentin her çalıştırmada okuduğu yere yerleştirin.

Her azaltma yönteminin ajan için özenle hazırlanmış bir tasarım bağlamı sağlamakla ilgili olduğuna dikkat edin. Bu bağlamı proje başına elle sürdürmek, Open Design'ın ortadan kaldırdığı zahmetli işin ta kendisidir.

Open Design içinde Vibe CLI ile tasarım yapmak

Open Design, yukarıdaki iş akışının sürekli talep ettiği açık kaynak tasarım katmanıdır. Mistral Vibe CLI'yi birinci sınıf bir adaptör olarak ele alır — onu vibe-acp binary üzerinden ACP ile yönetir — ve özenle hazırlanmış bir skill ve design-system kütüphanesi, yapılandırılmış bir render hattı ve yerel bir masaüstü UI ile sarar. Böylece Vibe'ı iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her seferinde elle bir araya getirilmez. Her ikisi de açık kaynak ve local-first'tür, bu da eşleşmeyi doğal bir uyum haline getirir.

1. Open Design'ı kurun ve agent olarak Mistral Vibe CLI'yi seçin.
2. Mistral API anahtarınızla kimlik doğrulaması yapın (BYOK) veya Vibe'ı yerel modellere yönlendirin — kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden proxy'lenmez.
3. Bir design system ve bir skill seçin, ardından tutarlı estetikle sunular, protottipler ve açılış sayfaları oluşturun.
4. Her artifact ve DESIGN.md dosyası, barındırılan bir bulutta değil, kendi repo'nuzda yaşar.

Aynı Vibe CLI agenti, aynı anahtar — artı etrafında gerçek, taşınabilir, açık kaynak bir tasarım iş akışı. Local-first ve Apache-2.0 olduğu için çalışmanız veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden çıkmaz.

Sıkça sorulan sorular

1. 01 Mistral Vibe CLI gerçekten tasarım işi yapabilir mi? +

   Evet — estetik bir skill, bir design system ve bağlamda gerçek referanslarla, Vibe CLI üretime hazır, duyarlı UI üretir ve Devstral modelleri gerçek bir frontend kod tabanında düzenleme yapar. Bu bağlam olmadan genel bir görünüme yönelme eğilimindedir ki Open Design'ın doldurduğu boşluk budur.

2. 02 Vibe CLI kimlik doğrulamasını nasıl yaparım? +

   Bir Mistral API anahtarı kaydetmek için vibe --setup komutuyla kurulum sihirbazını çalıştırın (Mistral konsolundan), veya ortamınızda MISTRAL_API_KEY ayarlayın. Tamamen çevrimdışı olarak yerel veya uyumlu modellere karşı da çalışabilir. Open Design kimlik bilgilerinizi her iki durumda da asla proxy üzerinden yönlendirmez.

3. 03 Vibe CLI'ı tasarım için özel olarak iyi yapan nedir? +

   Apache-2.0 lisanslı, ACP yerel bir ajan olup Mistral'ın açık ağırlıklı Devstral kodlama modelleri tarafından desteklenir — bu sayede gizlilik gerektiren işler için yerel olarak çalıştırabilir ve gerçek bir kod tabanında düzenlemeler yapabilirsiniz. Ancak zevk yine de sağladığınız design system, skill ve referanslardan gelir.

4. 04 Ön yüz tasarımı için Vibe CLI mi Claude Code mu? +

   Her ikisi de güçlü. Claude Code, belirli, kod tabanı farkında tasarım kararlarıyla bilinir; Vibe CLI'ın üstünlüğü yerel olarak çalıştırabileceğiniz açık ağırlıklı bir Devstral yığını ve Apache-2.0 lisansıdır. Birçok ekip her ikisini de kullanır — Open Design, tasarım iş akışınızı değiştirmeden ajanlar arasında geçiş yapmanıza olanak tanır.

5. 05 Vibe CLI'ı Figma'ya nasıl bağlarım? +

   Figma MCP sunucusunu config.toml dosyanızda bir [[mcp_servers]] girişi olarak ekleyin. Vibe daha sonra gerçek tasarım bağlamını — bileşenler, değişkenler, düzen verileri — çekebilir, böylece oluşturulan kod yaklaşık değer vermek yerine kaynakla eşleşir.

6. 06 Open Design, Mistral AI ile bağlantılı mı? +

   Hayır. Mistral Vibe CLI, Mistral AI'nın bir ürünüdür; Open Design, ACP üzerinden yönlendirilen birinci taraf bir adaptör olarak destekleyen bağımsız bir açık kaynak projesidir. Mistral, Mistral AI'nın ticari markasıdır.

7. 07 Dosyalarım ve kimlik bilgilerim güvende mi? +

   Evet — Open Design yerel önceliklidir ve Apache-2.0 lisanslıdır. Dosyalarınız, yapıtlarınız ve DESIGN.md kendi depolarınızda kalır ve Mistral kimlik bilgileriniz doğrudan ajanınız tarafından kullanılır, Open Design sunucuları üzerinden asla yönlendirilmez.