Mistral Vibe ile
OpenDesign’da
tasarlayın.

storefront-product.html · 1440px

4Teslimden Önce İnceleme

1. 1

   OpenDesign Masaüstü Uygulamasını İndirin

   Bilgisayarınıza uygun paketi seçin, kurun ve uygulamayı açın.

   OpenDesign'ı indirin

   KONTROL NOKTASI

   Masaüstü uygulaması açılır. Zaten kurulu mu? Sonraki adıma geçin; yeniden indirmenize 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örev denemeden önce uyumluluğu kontrol edin.
3. 3

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

   Bir revizyon dahil olmak üzere tüm döngüyü değerlendirebilmeniz için küçük bir brief kullanın.

   Başlangıç brief’i Kopyala

   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, kayıt durumunu test edin ve belirli bir değişiklik isteyin. Oluşturulan bir dosya, incelemenin sonu değil başlangıcıdır.

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

1. 1

   Tasarım Brief'i

   Sade bir dil, üç ile altı satır arasında. Hedef kitleyi, ekranın işlevini ve platformları belirtin.

   • SizBrief'i yazın; varsa referans bir ekran görüntüsü ekleyin.
   • Mistral VibeBrief'i ve projenin talimat dosyasını okur; bir şey belirsizse sorar.
   • OpenDesignProjeyi, prompt yüzeyini ve ilgili artifact türü için skill'i sağlar.
   • KontrolBrief'in kabul kriterlerini belirttiğini doğrulayın. Bunları şimdi eklemek, üretimden sonra eklemekten daha ucuzdur.

   New project · PromptMistral Vibe

   You

   Design the plate product page: photo, price, glaze and quantity, add to cart, three related pieces. Local model only.

   Mistral Vibe

   Understood. Running on the local Devstral model. Should the set discount appear as a second price line or as a note under quantity?
2. 2

   Tasarım Kısıtları

   Bir design system ve birkaç katı kural. Marka uyumlu bir çıktıyı sıradan bir görünümden ayıran şey budur.

   • SizBir design system seçin; breakpoint'leri ve kullanılması gereken bileşenleri belirtin.
   • Mistral VibeBir satır yazmadan önce DESIGN.md token'larını ve tutum kurallarını bağlama yükler.
   • OpenDesignDesign-system kütüphanesini sunar ve seçilen olanı skill şablonuna bağlar.
   • KontrolToken'lar markanızla eşleşir. Bir vurgu rengi, doğru fontlar, doğru radius.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Arayüzü Oluştur

   Mistral Vibe kendi kendine yeten bir HTML dosyası yazar: düzen, stiller, etkileşimler ve sabit hook'lar.

   • SizBekleyin veya netleştirici bir soruyu yanıtlayın. Yapılandırılacak bir şey yok.
   • Mistral VibeBölümleri planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır ve başarısız olanı düzeltir.
   • OpenDesignArtifact'ı proje klasörüne kaydeder ve önizleme için indeksler.
   • KontrolHenüz yok. Dosyayı kaynak koddan değil, render edildikten sonra değerlendirin.

   Project files3 files

   • storefront-product.htmlnew
   • config.tomlbound
   • DESIGN.mdread
4. 4

   Önizleme

   Dosya, istediğiniz genişliklerde OpenDesign içinde render edilir. Tasarımın değerlendirildiği yer burasıdır.

   • SizGenişlikleri değiştirin, etkileşimlere tıklayın, öğeler üzerine yorum bırakın.
   • Mistral VibeÖnizleme üzerindeki yorumlarınızı okur ve bir sonraki revizyonu hazırlar.
   • OpenDesignÖnizlemeyi render eder, yorumlar ve düzenlemeler için data-od-id hedeflerini açığa çıkarır.
   • KontrolHiyerarşi, kontrast, 390px'de taşma, focus durumları ve vurgu renginin ölçülü kullanılıp kullanılmadığı.

   Preview · 390pxComment mode

   Comment on · price

   Set discount as a small line under the price, not a second price.

   Comment on · photo

   Keep 4:5; do not crop the rim on the phone.
5. 5

   Revize Et ve Doğrula

   Önizlemede öğeleri işaret ederek değişiklik isteyin. Her revizyon yeni bir dosyadır; hiçbir şey sessizce üzerine yazılmaz.

   • SizYorumları isteklere dönüştürür; görevin ne zaman tamamlandığına karar verirsiniz.
   • Mistral VibeDeğişiklikleri yerinde uygular ve dosyayı yeniden çalıştırır.
   • OpenDesignSürümleri yan yana tutar; işiniz bittiğinde bir görüntü veya HTML dışa aktarır.
   • KontrolÖnce sadece değişen alanı, ardından her bir kırılma noktasında sayfanın tamamını bir kez yeniden kontrol edin.

   Verification · v23 of 4

   • ✓Discount as a note under price
   • ✓Photo ratio held at 390px
   • ✓No horizontal scroll at 390px
   • Quantity control — checked by you