103.5K+İndir
Mistral Vibe OpenDesign

Mistral Vibe ile
OpenDesign’da
tasarlayın.

OpenDesign'da Mistral Vibe CLI ile arayüz tasarlama: yerel olarak veya kendi anahtarınızla çalışan bir Devstral modeli, brief'ten incelenen dosyaya kadar bir ürün sayfası görevi ve başlamadan önce bilinmesi gereken sınırlar.

OpenDesign'ı indirin Kuruluma gidin

MISTRAL VIBE İLE BAŞLAMANIN ÜÇ YOLU

Mistral Vibe ile nereden başlayacağınıza karar verin

BU KILAVUZ · UI TASARIMI

Mistral Vibe kullanarak bir ürün arayüzü tasarlayın

Bu kılavuzun sundukları: bir özet, referanslar, tasarım kuralları ve incelemeden geçen bir HTML eseri.

Bu kılavuzu okuyun KURULUM

Mistral Vibe'ı sıfırdan kurun

Yeni bir makineden, arayüz üreten ve kontrol eden bir Vibe CLI'ye giden eksiksiz yol.

Kuruluma git KARŞILAŞTIRMA

Mistral Vibe'ın diğer ajanlarla karşılaştırılması

Mistral Vibe'ın tasarım görevlerinde Codex, Claude Code ve Cursor'dan ayrıldığı noktalar ve farklı bir iş akışının ne zaman daha mantıklı olduğu.

Karşılaştırmayı görün
Bu Sayfada Örnek
  1. Örnek
  2. Uygunluk
  3. Uyumluluk
  4. Kurulum
  5. İş Akışı
  6. Kaynaklar
  7. Sınırlamalar
  8. SSS

Tam bir Mistral Vibe tasarım görevi

Özetten arayüze: bir Mistral Vibe tasarım görevi

Bir özet ve kısıtlamalar sağlarsınız; Mistral Vibe bir eser döndürür; ardından tamamlandı demeden önce kalan kontrolleri yaparsınız. Aşağıdaki arayüz, bu sayfa için oluşturulmuş açıklayıcı bir örnektir, kaydedilmiş bir Mistral Vibe çalışması değildir.

1Tasarım Brief'i ve Kısıtlar

Brief

Bir seramik stüdyosu mağazası için ürün sayfası oluşturun: büyük fotoğraf, fiyat, miktar ve sır seçenekleri, sepete ekle kontrolü ve üç ilgili parça. Yerel model, yerel dosyalar. Masaüstü ve telefon.

  • Tasarım sistemiOpenDesign kağıt tuvali — Albert Sans, tek bir yeşil vurgu
  • Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma olmadan
  • EtkileşimlerGaleri, sır seçimi, miktar ve sepete ekle
  • ÇıktıKararlı data-od-id kancalarına sahip tek bir kendi kendine yeten HTML dosyası

2Kim ne yapar: siz, Mistral Vibe ve OpenDesign

  • Siz

    Özeti siz yazarsınız, tasarım sistemini seçersiniz ve kabul kriterlerini belirlersiniz.

  • Mistral Vibe

    Mistral Vibe düzeni planlar, HTML, CSS ve JavaScript yazar, ardından istek üzerine revize eder.

  • OpenDesign

    OpenDesign tasarım sistemini ve yeteneği sağlar, önizlemeyi oluşturur ve her sürümü projede bir dosya olarak saklar.

  • İnceleme

    Teslimden önce görsel hiyerarşi, 8px ızgara aralığı, her iki kırılma noktası ve her etkileşim kontrol edilir.

3Mistral Vibe eseri: 1440px ve 390px'te mağaza vitrini

Mistral Vibe eseri: 1440px ve 390px'te mağaza vitrini — Masaüstü
Örnek gösterim

4Teslimden Önce İnceleme

Düzen

Izgara ve Boşluklar

Fotoğraf ve bilgi 8px ızgarada yer alır; fotoğraf tüm genişliklerde 4:5 oranını korur.

Hiyerarşi

Görsel Hiyerarşi

Ad ve fiyat öne çıkar; vurgu yalnızca sepete ekle düğmesinde görünür.

Duyarlı

Mobil Düzen

Fotoğraf, ardından ad ve fiyat, sır çipleri, tam genişlikte bir düğme; ilgili parçalar kaydırılır.

Etkileşim

Etkileşim Kontrolleri

Bir sır seçin, miktarı değiştirin, sepete ekleyin, ilgili öğeleri kaydırın.

Uygunluk

Mistral Vibe'ın uyduğu yerler — ve uymadığı yerler

Mistral Vibe Şu Durumlarda Uyar

  • Devstral kodlama modelleri. Kodlama için ayarlanmış, ajan tabanlı modeller, izole kod parçacıkları yayınlamak yerine gerçek bir ön uç kod tabanında düzenleme yapar.
  • Açık ağırlıklar ve yerel dostu. Devstral Small 2 tüketici donanımında çalışır, böylece tasarım çalışması tamamen yerel ve çevrimdışı kalabilir.
  • config.toml + MCP. Proje yapılandırması, ajanın nasıl bağlandığını taşır; Figma MCP sunucusu gerçek tasarım bağlamını koda getirir.
  • Açık ve ACP-yerel. Apache-2.0 ve Agent Client Protocol üzerine inşa edilmiş, Mistral API aracılığıyla BYOK ile.

Şu Durumlarda Başka Bir Workflow Seçin

  • Düzenlenebilir vektör dosyalarına ihtiyacınız var. Eser HTML'dir, düzenlenebilir bir tasarım belgesi değildir. Gerekli varlık biçiminiz için ayrı bir vektör iş akışına bakın.
  • Referansınız ve kısıtlarınız yok. Bir design system veya örnek olmadan çıktı genel bir görünüme kayma eğilimindedir; önce brief'i yazın.
  • Bu ajanın gerektirdiği kimlik bilgisine sahip değilsiniz. Gerekli: Mistral API anahtarı (kendi anahtarınızı getirin) veya yerel modeller. OpenDesign kimlik bilgisi sağlamaz veya proxy'lemez.
  • Ekibiniz OpenCode veya Aider'da çalışıyor. Bu ajanların kendi sayfaları var; kurulum ajana göre değişir. ilgili ajanlar bölümüne bakın.

Uyumluluk

Mistral Vibe'in Başlamadan Önce Gerektirdikleri

Bu kılavuz, OpenDesign masaüstü uygulaması üzerinden bağlanan Mistral Vibe'i ele alır. Yayımlanmış referanslar 6 Eylül 2026'da kontrol edilmiştir.

Araç KapsamıMistral Vibe, Mistral AI tarafından

Mistral Vibe CLI, Mistral AI'nin açık kaynaklı (Apache-2.0) terminal kodlama ajanıdır. Proje dosyalarını ve Git durumunu tarar, kodu düzenler, arama yapar, komutlar çalıştırır ve doğal dil görevlerinden sürüm kontrolünü yönetir. Bu sayfa, Mistral Vibe'in kendi arayüzünü değil, OpenDesign üzerinden Mistral Vibe ile arayüz tasarlamayı ele alır. OpenDesign'in kurulum notları mevcut ajanları listeler.

Hesaplar ve Kimlik DoğrulamaMistral API anahtarı (BYOK) veya yerel modeller

Mistral API anahtarı (BYOK) veya yerel modeller. Mistral API anahtarınızla (BYOK) veya yerel modellerle kimlik doğrulayın — kimlik bilgileri makinenizde kalır. Bu sayfa bir kota veya fiyat vaat etmez.

Sistem ve SürümlerMasaüstü uygulama veya kaynak kod

Masaüstü sürümleri için indirme sayfasına bakın. Kaynak hızlı başlangıç kılavuzundaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırma için geçerlidir; masaüstü paketi kurulumu için değil. Uyumlu minimum Mistral Vibe sürümü: burada doğrulanmamıştır.

Bağlantı KontrolüBaşarı sinyali

Yüklü sürümünüzün gösterdiği bağlantı talimatlarını izleyin, ardından küçük bir görev çalıştırın. Mistral Vibe'in bunu ele aldığını ve eserin açıldığını doğrulayın. Tek başına indirme, çalışan bir bağlantı oluşturmaz.

Masaüstü uygulamasıyla başlayın

Mistral Vibe'i Üç Adımda Kurun

Önce indirin, yüklü sürümünüz için Mistral Vibe kurulumunu tamamlayın, ardından küçük bir sonucu kontrol edin. Bu yol için OpenDesign'i kaynaktan derlemek gerekli değildir.

  1. 1

    OpenDesign Masaüstü Uygulamasını İndirin

    Bilgisayarınız için paketi seçin, kurun ve uygulamayı açın.

    OpenDesign'ı indirin
    KONTROL NOKTASI
    Masaüstü uygulaması açılır. Zaten yüklü mü? Sonraki adıma geçin; yeniden indirmeye gerek yok.
  2. 2

    Mistral Vibe Bağlantınızı Hazırlayın

    Yüklü sürümünüzdeki Mistral Vibe talimatlarını izleyin. Mistral API anahtarınızla (BYOK) veya yerel modellerle kimlik doğrulayın — kimlik bilgileri makinenizde kalır.

    mistral-vibe README ve kurulum (GitHub) 
    # 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=...

    Yayınlanan kılavuzdaki Mistral Vibe kurulum notlarından alınmıştır; güncel komut için satıcı belgelerini kontrol edin.

    KONTROL NOKTASI
    Hedeflenen ajanı ve hesabı doğrulayın. Kullanılamıyorsa, daha büyük bir göreve kalkışmadan önce uyumluluğu kontrol edin.
  3. 3

    Küçük bir Mistral Vibe Görevi Çalıştırın

    Tam döngüyü, bir revizyon dahil, değerlendirebilmek için brief'i küçük tutun.

    Başlangıç brief’i

    Bir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluşturun. Design kurallarımı kullanın. Masaüstü ve mobil genişliklerde kontrol edin.

    KONTROL NOKTASI
    Sonucu açın, kaydetme durumunu test edin ve belirli bir değişiklik isteyin. Üretim incelemeyi başlatır; onu bitirmez.

OpenDesign'ı kaynak koddan çalıştırmak için bunun yerine teknik hızlı başlangıç kılavuzunu izleyin.

Mistral Vibe tasarım iş akışı

Bir Mistral Vibe Tasarım Görevinde Beş Adım

Yazılı bir brief'ten doğruladığınız bir dosyaya taşınan tek bir mağaza vitrini sayfası. Her adım sizin girdinizi, Mistral Vibe'in işini, OpenDesign'in katkısını ve hâlâ sizin yapmanız gereken kontrolü adlandırır.

  1. 1

    Tasarım Brief'i

    Üç ila altı sade cümle. Ekranın kime hizmet ettiğini, neyi başarması gerektiğini ve hangi platformlarda ayakta kalması gerektiğini söyleyin.

    • SizBrief'i taslak haline getirin. Varsa bir referans ekran görüntüsü ekleyin.
    • Mistral VibeBrief'i projenin talimat dosyasıyla birlikte ayrıştırır ve harekete geçmeden önce belirsiz olan her şeyi sorgular.
    • OpenDesignProjeyi, istem yüzeyini ve eser türüyle eşleşen skill'i sağlar.
    • KontrolBrief'in kabul ölçütlerini açıkça belirttiğini kontrol edin; bunları burada yazmak, çıktıyı sonradan onarmaktan daha az maliyetlidir.
  2. 2

    Tasarım Kısıtları

    Bir tasarım sistemi artı birkaç kesin kural. Bu eşleşme, çıktıyı genel geçer olmak yerine markaya uygun tutan şeydir.

    • SizBir tasarım sistemi seçin, kesme noktalarını adlandırın ve görünmesi gereken bileşenleri listeleyin.
    • Mistral VibeTek bir satır yazılmadan önce DESIGN.md token'larını ve duruş kurallarını bağlama çeker.
    • OpenDesignTasarım sistemi kitaplığını sağlar ve seçiminizi skill şablonuna bağlar.
    • KontrolToken'ları markanıza göre doğrulayın: bir vurgu rengi, doğru yazı tipleri, doğru köşe yarıçapı.
  3. 3

    Arayüzü Oluştur

    Mistral Vibe'den tek, kendi kendine yeten bir HTML dosyası çıkar — düzen, stiller, etkileşimler ve kararlı kancalar.

    • SizYapılandırılacak bir şey yok. Bekleyin veya bir açıklama sorusu gelirse yanıtlayın.
    • Mistral VibeBölümleri planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır ve başarısız olan her şeyi onarır.
    • OpenDesignEseri proje klasöründe saklar ve önizlenebilmesi için dizinler.
    • KontrolBekle. Dosyayı kaynağı okuyarak değil, işlendikten sonra değerlendir.
  4. 4

    Önizleme

    OpenDesign içinde dosya, belirttiğiniz genişliklerde işlenir — ve değerlendirilen şey kod değil, o işlenmiş hâldir.

    • SizGenişlikler arasında geçiş yapın, etkileşimleri deneyin ve tek tek öğeler hakkında yorum yapın.
    • Mistral VibeÖnizleme yorumlarınızı toplar ve bir sonraki revizyonu hazırlar.
    • OpenDesignÖnizlemeyi işler ve yorumlarla düzenlemeleri sabitleyen data-od-id hedeflerini açığa çıkarır.
    • KontrolHiyerarşi, kontrast, 390px'te taşma, odak durumları ve vurgunun ölçülü kalıp kalmadığı.
  5. 5

    Revize Et ve Doğrula

    Değişiklik istemek için önizleme öğelerini işaret edin. Her revizyon yeni bir dosya olarak gelir — siz görmeden hiçbir şeyin üzerine yazılmaz.

    • SizYorumları isteklere dönüştürür ve görevi tamamlandı olarak işaretler.
    • Mistral Vibeİstenen değişiklikleri yerinde uygular, ardından dosyayı yeniden çalıştırır.
    • OpenDesignSürümleri yan yana tutar ve sonunda bir görseli ya da HTML'yi dışa aktarır.
    • KontrolYalnızca değişen alanı yeniden kontrol eder, ardından her kesme noktası için tam sayfayı bir kez tarar.

Kaynaklar

Mistral Vibe Tasarım Kaynakları

Skill'ler

Tasarım Skill'leri

Mistral Vibe'ın OpenDesign içinde üretebileceği her çıktı türü; her tür için bir beceri.

Skill'lere göz atın Tasarım sistemleri

Tasarım Sistemleri

Mistral Vibe tek bir çıktı üretmeden önce bağlanmaya değer token'lar ve bileşenler.

Sistemlere göz atın Şablonlar

Şablonlar

Sunumlar, açılış sayfaları ve ürün ekranları için açılışlar.

Şablonlara göz atın

Sınırlamalar

Mistral Vibe Sınırlamaları, Manuel Kontroller ve Geri Dönüşler

  • KapsamAşağıdakiler, Mistral Vibe'ı OpenDesign içine bağlanmış bir ajan olarak ele alır — CLI'nin sunduğu her özelliği değil.
  • Kullanım SınırlarıMaliyet ve kullanım sınırları, getirdiğiniz kimlik bilgisine göre belirlenir — bir Mistral API anahtarı ya da yerel modeller. Burada ücretsiz kotalar hakkında bir iddia yapılmamaktadır.
  • AğYalnızca yerel proje dosyaları çıkarımı çevrimdışı hale getirmez. Hassas girdileri teslim etmeden önce sağlayıcı ayarlarını ve veri politikalarını kontrol edin.
  • Çıktı HTML'dirGeri gelen çıktı bir HTML dosyasıdır, vektörel bir tasarım dosyası değildir.
  • Manuel İncelemeErişilebilirlik, gerçek içerik, marka uyumu ve etkileşim doğruluğu önizlemede incelemeniz gereken unsurlardır; ajanın yaptığı her öz denetim yalnızca ilk geçiş sayılır.
  • Yedek ÇözümAjan erişilebilir olmadığında veya bir görev başarısız olduğunda, yüklü sürümünüz için bağlantı talimatlarına ve kimlik doğrulamaya başvurun. Yapılandırmaya dokunmadan önce hata metnini ve son çalışan çıktıyı saklayın.

SSS

Mistral Vibe ve OpenDesign Hakkında Sık Sorulan Sorular

Mistral Vibe CLI Tasarım İşlerini Gerçekten Halleder mi?
Evet — bağlamda bir estetik skill, bir design system ve gerçek referanslar olduğunda Vibe CLI, üretim kalitesinde, duyarlı bir 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 kaymaya eğilimlidir; OpenDesign'ın doldurduğu boşluk da budur.
Vibe CLI'ı Nasıl Kimlik Doğrularım?
Bir Mistral API anahtarı kaydetmek için (Mistral konsolundan) kurulum sihirbazını vibe --setup ile çalıştırın veya ortamınızda MISTRAL_API_KEY değişkenini ayarlayın. Ayrıca yerel veya uyumlu modellere karşı, tamamen çevrimdışı da çalışabilir. OpenDesign her iki durumda da kimlik bilgilerinizi asla proxy'lemez.
Vibe CLI'ı Tasarım İçin Özellikle Ne İyi Yapıyor?
Bu, Mistral'ın açık ağırlıklı Devstral kodlama modelleriyle güçlendirilmiş, Apache-2.0 lisanslı, ACP-native bir ajandır — böylece gizlilik açısından hassas işler için yerel olarak çalıştırabilir ve gerçek bir kod tabanında düzenleme yapabilirsiniz. Ancak zevk hâlâ sağladığınız design system, skill ve referanslardan gelir.
Frontend Tasarımı İçin Vibe CLI mi Claude Code mu?
Her ikisi de güçlüdür. Claude Code, spesifik, kod tabanı farkındalığına sahip tasarım kararlarıyla tanınır; Vibe CLI'ın avantajı ise 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 — OpenDesign, tasarım iş akışınızı değiştirmeden ajanlar arasında geçiş yapmanızı sağlar.
Vibe CLI'ı Figma'ya Nasıl Bağlarım?
Figma MCP sunucusunu config.toml dosyanızda bir [[mcp_servers]] girdisi olarak ekleyin. Vibe ardından gerçek tasarım bağlamını — bileşenler, değişkenler, düzen verisi — çekebilir, böylece üretilen kod kaynağa yaklaşmak yerine onunla eşleşir.
Mistral Vibe CLI Somut Olarak Nedir
Mistral Vibe CLI, Mistral AI'nin terminal için sunduğu açık kaynaklı (Apache-2.0) bir kodlama ajanıdır. Dosya işleme, kod arama, sürüm kontrolü ve komut yürütme araçlarıyla etkileşimli bir sohbet arayüzü sunar ve ajanın ilgili bağlamı elde etmesi 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şi planlar ve doğrular.

Tasarım çalışmaları için iki özellik öne çıkıyor. Mistral'in açık ağırlıklı Devstral ailesinde (Devstral 2 ve daha küçük Devstral Small 2) çalışır, böylece ajanı bulutta Mistral API'sine karşı veya yerel modellere karşı çalıştırabilirsiniz — gizliliğe duyarlı veya çevrimdışı tasarım çalışmaları 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ı aracılığıyla yapılandırılır (proje düzeyinde ./.vibe/config.toml, ~/.vibe/config.toml'de bir yedek ile). 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ı içerir 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ı ile kimlik doğrulayın veya tamamen çevrimdışı çalışması için yerel/uyumlu modellere yönlendirin.

Kimlik bilgisi: Mistral konsolundan Mistral API anahtarı (BYOK) veya yerel / uyumlu modeller

Satıcı: Mistral AI

Lisans: Apache-2.0, açık kaynak
Açık ağırlıklı bir kodlama ajanı neden tasarıma uyar
Vibe CLI'nin tasarım avantajı, açık ağırlıklı model ailesinden ve protokol erişiminden gelir — ancak her ajan gibi, zevk yine de sağlanmalıdır.

Devstral kodlama modelleri: Vibe, Mistral'in Devstral ailesinde çalışır; ajan tabanlı, çok dosyalı çalışma için oluşturulmuş kodlamaya ayarlı modellerdir — böylece ajan, izole kod parçacıkları yaymak yerine gerçek bir ön uç 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 çalışmaları tamamen yerel ve çevrimdışı kalabilir — referanslar ve kod makinenizden asla ayrılmak zorunda kalmaz.

config.toml'deki kurallar + bağlam: Proje yapılandırması ve kendi talimatlarınız, ajanı belirteçlerinize, bileşenlerinize ve gerçek spesifikasyonlarınıza yönlendirir, böylece varsayılan bir görünüm yerine bir markaya göre çalışır.

Zevk, sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görselleri.

Ders, her ajanın öğrettiğiyle aynıdır: Vibe CLI varsayılan olarak zevke sahip değildir. Ona kısıtlamalar verdiğinizde iyi tasarım üretir — bir tasarım sistemi, estetik bir beceri ve somut referanslar. OpenDesign tam olarak bu girdileri paketler, bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).
Vibe CLI'yi tasarım çalışmaları için sıfırdan kurun
Kurulum sırası: yükle → kimlik doğrula → config.toml yapılandır → bir beceri ekle → tarayıcı doğrulamasını etkinleştir.

Tasarım kurallarınızı kodlayın: Token'larınızı, temel öğelerinizi ve kurallarınızı aracının onları okuduğu yerde tutun ve Vibe'ı onlara yönlendirin, böylece çıktı, genel bir görünüme varsayılan olarak dönmek yerine bir markayla eşleşir.

Tarayıcı doğrulaması ekleyin: Vibe'ın gerçek bir tarayıcıda render etmesi ve çıktısını yalnızca derlemenin geçtiğini onaylamak yerine kırılma noktaları arasında kontrol etmesi için bir Playwright veya tarayıcı MCP'si bağlayın.

Komutlar ve değişebilecek sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın.

# 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
Önceki kılavuzdan tarihsel komut örneği; bağlantılı satıcı belgelerinde güncel sözdizimini doğrulayın.
Referansları Kullanıcı Arayüzüne Dönüştürmek
Vibe CLI ile en etkili tasarım döngüsü, net bir referansı çalışan, duyarlı bir kullanıcı arayüzüne dönüştürmek ve eşleşene kadar yinelemektir — aracının kendi çıktısını işleme, inceleme ve düzeltme araçlarına yaslanarak.

Elindeki en net referanslardan başla — ve yalnızca tek bir ana görsel değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) tanımla.

İstemde belirli olun; belirsiz istemler güçlü bir modelle bile genel kullanıcı arayüzü üretir.

Tasarım sisteminizi ve kurallarınızı Vibe'ın onları okuduğu yerde tutun ve ona token'ların ve kanonik temel öğelerin nerede olduğunu söyleyin.

Bir geliştirme sunucusu çalıştırın ve Vibe'ın gerçek bir tarayıcıda render etmesini ve sonucu kontrol etmek için kırılma noktalarına yeniden boyutlandırmasını sağlayın.

Vibe'ın uygulamasını referanslarla karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini onaylamasını değil.

Dosyaları @ ile referans gösterin (Vibe dosya yollarını otomatik tamamlar) ve eğik çizgi komutlarını / ile yönlendirin, ardından somut kısıtlamalar verin:

İ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 üzerine inşa edilir.

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.
Önceki kılavuzdan tarihsel komut örneği; bağlantılı satıcı belgelerinde güncel sözdizimini doğrulayın.
config.toml, MCP ve ACP
Üç genişletme noktası, Vibe CLI'yi sürekli tasarım çalışmaları için pratik hale getirir ve üçü de açık bir tasarım iş akışına temiz biçimde oturur.

config.toml: Proje kuralları ve sağlayıcı/model ayarları bir config.toml içinde yaşar (proje düzeyinde, ~/.vibe yedeğiyle). Ajanın projenize nasıl bağlandığının kalıcı evidir; her çalıştırmada okunur.

MCP sunucuları: MCP sunucularını config.toml içinde yapılandırın ([[mcp_servers]], HTTP, streamable-HTTP ve stdio taşıma katmanlarıyla) — tasarım bağlamını ve harici araçları getirmenin taşınabilir yolu; en ilgili olanı Figma MCP sunucusudur ve yalnızca Vibe'da değil, ajanlar arasında çalışır.

Agent Client Protocol: Vibe ACP konuşur, böylece aynı ajan editörlerden ve diğer ACP istemcilerinden yönlendirilebilir. OpenDesign onu tam olarak böyle entegre eder — vibe-acp ikili dosyası aracılığıyla ACP üzerinden.

Bunlar taşınabilir, çok ajanlı yeteneklerdir — tam da OpenDesign'in proje başına yeniden oluşturmak yerine orkestre etmek için inşa edildiği türden şeyler.
Tasarım için Vibe CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI
Tasarım işleri için tek bir kazanan yok — her ajanın farklı bir gücü vardır ve deneyimli ekipler bunları bir arada kullanır. Adil bir özet:

Mistral Vibe CLI — Yerel olarak çalıştırabileceğiniz açık ağırlıklı Devstral kodlama modelleri; Apache-2.0 ve ACP-yerel — Gizliliğe duyarlı veya çevrimdışı tasarım işleri ve açık ağırlıklı bir yığın

Codex — Bir frontend becerisiyle güçlü görsel cila; sandboxed asenkron derlemeler — Devredilmiş asenkron derlemeler ve taşınabilir AGENTS.md kuralları

Claude Code — Belirli tasarım kararları (hex, aralık, tipografi) ve kod tabanına duyarlı UX — Frontend akıl yürütme ve büyük bağlamlı refaktörler

Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel oluştur-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması

Gemini CLI — Güçlü multimodal görüntü anlama ve çok büyük bir bağlam penceresi — Ekran görüntüsü ağırlıklı işler ve tüm bir tasarım sistemini bağlamda tutma

Tekrarlayan topluluk yargısı, zevkin insanlardan geldiğidir: hepsi beceriler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak yönelir. Çözülmesi gereken gerçek sorun budur — ve bu model şeklinde değil, tasarım aracı şeklindedir.

Ajan — Tasarım gücü — En uygun olduğu yer
Tuzaklar ve “AI Slop” Görünümünden Kaçınma
AI tarafından üretilen tasarımla ilgili en yaygın şikayet, sıradan görünmesidir — yumuşak gradyanlar, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, dramatik gölgeler, Inter ve mor havasıyla “bunu bir AI yaptı” diye bağıran bir görünüm. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve talimatların UI metinlerine sızması yer alır. Bunların hiçbiri Vibe CLI'ye özgü değildir; herhangi bir ajanın özenle seçilmiş bir tasarım bağlamı olmadan çalışması durumunda olan şeydir.

Estetik bir beceri ekleyin: Özenle seçilmiş bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yönelime bağlanmaya zorlar.

Gerçek bir tarayıcıda doğrulayın: Vibe'ın kesme noktaları genelinde render etmesini ve kendi kendini kontrol etmesini sağlayın; böylece düzenler mobilde sessizce bozulmaz.

Token ve referans sağlayın: Gerçek tasarım token'ları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük tek kaldıraçtır.

Kuralları yapılandırmaya ve bağlama kodlayın: “hero kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları ajanın her çalıştırmada okuduğu yere koyun.

Her önlemin, ajana özenle seçilmiş bir tasarım bağlamı vermekle ilgili olduğunu fark edin. Bu bağlamı her proje için elle sürdürmek, OpenDesign tarafından ortadan kaldırılan angaryadır.
OpenDesign içinde Vibe CLI ile tasarım yapmak
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynaklı tasarım katmanıdır. Mistral Vibe CLI'yi birinci taraf bağdaştırıcı olarak ele alır — onu vibe-acp ikili dosyası üzerinden ACP ile sürer — ve onu özenle seçilmiş bir beceri ve tasarım sistemi kitaplığı, 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 kaynaklı ve yerel önceliklidir, bu da eşleşmeyi doğal bir uyum haline getirir.

OpenDesign kurun ve ajanınız olarak Mistral Vibe CLI'yi seçin.

Mistral API anahtarınızla (BYOK) kimlik doğrulayın veya Vibe'ı yerel modellere yönlendirin — kimlik bilgileri makinenizde kalır ve asla bizim üzerinden proxy'lenmez.

Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları oluşturun.

Her artefakt ve DESIGN.md dosyası kendi deponuzda bulunur, barındırılan bir bulutta değil.

Aynı Vibe CLI ajanı, aynı anahtar — üstelik etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve Apache-2.0'dır; bu yüzden işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
OpenDesign Mistral AI ile bağlantılı mı?
Hayır. OpenDesign bağımsızdır; Mistral, Mistral AI'nin ticari markasıdır.