Banani
İstemleri, ekran görüntülerini ya da Figma bağlantılarını düzenlenebilir, çok ekranlı prototiplere çeviren yapay zekâ arayüz tasarım aracı.
Banani, bir metin isteminden, ekran görüntüsünden ya da Figma bağlantısından düzenlenebilir, çok ekranlı arayüz prototipleri üreten bir yapay zekâ arayüz tasarım aracıdır. Banani'de ürünü anlatır, ekranları sohbetle ya da elle stil kontrolleriyle şekillendirir, sonra bir proje bağlantısı paylaşır veya çalışmayı Figma katmanları, HTML/CSS ya da görsel dosyaları olarak dışa aktarırsınız.
En uygun kullanım Ayrı bir tasarımcı olmadan sunulabilir arayüz konseptlerini hızla isteyen ürün yöneticileri, girişimciler ve mühendisler ile ilk taslağa daha çabuk ulaşmak isteyen tasarımcılar.
- Listelendiği kategoriler
- UI ve UX tasarımı
- Platformlar
- Web, MCP
- Fiyat modeli
- Freemium
- Ücretsiz plan
- Evet
- Geliştiren
- Banani
- Eklenme
Son doğrulama: . Bilgiler banani.co sitesinden alınmıştır.
Banani nedir?
Banani, yazılı bir açıklamadan kullanıcı arayüzü düzenleri ve tıklanabilir prototipler üreten bir yapay zekâ tasarım aracıdır. Metnin yanında görselleri, ekran görüntülerini ve Figma bağlantılarını referans olarak kabul eder; düzenini ve görsel stilini okuyarak arayüzü ya yeniden üretir ya da yeni yönler önerir. Çıktı, düzenlenebilir kalan birbirine bağlı ekranlardan oluşur: asistandan sohbetle bir tasarımın havasını değiştirmesini isteyebilir, renkleri, tipografiyi ve diğer token'ları elle ayarlayabilirsiniz. Biten iş bir proje bağlantısıyla paylaşılır ya da Figma'ya, HTML/CSS'e veya görsel dosyalarına aktarılır; bir MCP bağlantısı da kodlama ajanlarının tasarımları doğrudan okumasına izin verir. Site, ürünün Vlad Solomakha ve Vova Parkhomchuk tarafından kurulduğunu ve ücretsiz, Plus, Pro ve kurumsal katmanlarla sunulduğunu söylüyor.
Öne çıkan özellikler
Metinden prototipe
Aklınızdaki ürünü sade bir dille anlattığınızda birbirine bağlı, düzenlenebilir birkaç ekran kurar.
Referansa dayalı üretim
Bir görseli, ekran görüntüsünü ya da Figma bağlantısını alır; düzenini ve stilini çıkarıp ekranı yeniden kurar ya da yeni fikirlere dallanır.
Stil kontrolleri
Tasarımın havasını bir sohbet isteğiyle değiştirir; renkler, tipografi ve diğer token'lar üzerinde elle kontrol sağlar.
Bağlantıyla paylaşım
Bir projeyi ya da tek bir ekranı iş arkadaşlarına gönderir; onlar da bakıp yorum yapabilir.
Dışa aktarma seçenekleri
Tasarımları Figma'ya düzenlenebilir ve otomatik düzeni koruyan katmanlar olarak aktarır ya da HTML/CSS veya görsel dosyaları çıkarır; Figma ve kod dışa aktarma ücretli planlara özeldir.
MCP bağlantısı
Seçilen ekranları Claude Code, Cursor ve Codex gibi kodlama ajanlarına bağlar; ajanlar bunları sizin yığınınızda kurabilir.
Banani nasıl çalışır
Anlatın ya da yükleyin
Ürünün ne yapması gerektiğini yazın ya da referans olarak bir görsel, ekran görüntüsü veya Figma bağlantısı verin.
Üretilen ekranları inceleyin
Banani, birkaç ekrandan oluşan tıklanabilir bir prototip döndürür.
Tasarımı ayarlayın
Bir öğeye tıklayın ya da değiştirmek için asistanla sohbet edin; stil token'larını elle ayarlayın.
Paylaşın ya da dışa aktarın
Bir proje bağlantısı gönderin ya da tasarımı Figma katmanları, HTML/CSS veya görsel dosyaları olarak çıkarın.
Ekran görüntüleri
Kullanım alanları
- Ürün şartnameleri için tel kafesler
- Bir ürün yöneticisi, fikrini mühendislere ve paydaşlara anlatmak için bir akışı hızla çizer.
- Girişimci prototipleri
- Tasarımcısı olmayan bir girişim, geliştirme zamanı harcamadan önce uygulamanın maketini çıkarır.
- Ekran görüntüsünden yeniden tasarım
- Mevcut bir ekranı verin, onun alternatif sürümlerini üretin.
- Tasarımcıdan Figma'ya devir
- İlk taslağı üretin, katmanları Figma içinde inceltmeye devam edin.
- Ajanlarla tasarımdan koda
- Seçili ekranları MCP üzerinden bunları uygulayacak bir kodlama ajanına aktarın.
Bilmeniz gerekenler
- Üretim kredilerle çalışır
- Bir üretim, isteğin karmaşıklığına göre genellikle tek krediden fazlasını harcar. Ücretsiz hesaplar ayda 12 kredi ve 3 günlük yenilenme alır; Plus 100 kredi ve 10 günlük yenilenme, Pro ise sınırsız kredi verir.
- Figma ve kod dışa aktarma ücretli
- Fiyatlandırma SSS'si, Figma ve HTML/CSS dışa aktarmayı Plus ve Pro planlarıyla sınırlıyor.
- Kredi bitince yalnızca üretim durur
- Mevcut projeler görüntülenebilir ve paylaşılabilir kalır; yeni yapay zekâ üretimleri krediler yenilenene ya da faturalama döngüsü sıfırlanana kadar bekler.
- Yıllık fiyatlar gösteriliyor
- Listelenen fiyatlar yıllık faturalamayla gösterilenlerdir; site bunun aylık ödemeden yüzde 40 düşük olduğunu söylüyor.
Sık sorulan sorular
Banani nedir?
Banani, kullanıcı arayüzü tasarlamak için bir yapay zekâ aracıdır. İstemlerden, referans görsellerden ve ürün gereksinim belgelerinden düzenlenebilir ekranlar ile etkileşimli prototipler üretir.
Banani ne için kullanılır?
Banani; web uygulamaları, mobil uygulamalar, paneller ve açılış sayfaları için tel kafes ve daha yüksek doğruluklu arayüz taslakları hazırlamak, sonra sonucu paylaşmak ya da dışa aktarmak için kullanılır.
Banani ücretsiz mi?
Evet. Banani'nin süresi dolmayan ve kredi kartı istemeyen bir Free planı var; ayda 12 kredi, 3 günlük yenilenme ve özel projeler içerir.
Banani ne kadar?
Banani: ücretsiz plan mevcut. Ücretli plan fiyatları banani.co'da yayımlanıyor. Güncel tutarlar için resmî fiyat sayfasına bakın.
Banani Figma'ya aktarabilir mi?
Evet, ücretli planlarda. Banani'nin fiyatlandırma SSS'sine göre Plus ve Pro kullanıcıları tasarımları Figma'ya düzenlenebilir katmanlar olarak gönderebilir ve HTML/CSS de dışa aktarabilir.
Banani kodlama ajanlarıyla çalışıyor mu?
Evet. Banani, Claude Code, Cursor ve Codex gibi ajanlar için bir MCP bağlantısı sunuyor; fiyatlandırma SSS'si bunun her plana dahil olduğunu belirtiyor.
Banani'yi kim yapıyor?
Banani'yi Vlad Solomakha ve Vova Parkhomchuk kurdu; şirketi tasarımcılardan ve geliştiricilerden oluşan küçük bir ekip olarak tanımlıyorlar.
Kimler için
- Ürün yöneticileri
- Girişimciler
- Tasarımcılar
- Mühendisler
- Öğrenciler
Bu rehberlerde kullanılıyor
- Yapay zekâyla uygulama arayüzü tasarlamak: araştırma, ekranlar, prototip, kodAşama 3: Arayüz ekranları
- Yapay zekâyla uygulama arayüzü tasarlamak: araştırma, ekranlar, prototip, kodAşama 6: Koda geçiş ve teslim
Her rehber, bir işin aşamalarını ve her aşamada işe yarayan araçları listeler. Tüm rehberler
Yorumlar
Henüz yorum yok. Banani aracını kullandıysan, deneyimini diğer okurlarla paylaş.
Banani alternatifleri
| Araç | Ücretsiz plan | Başlangıç fiyatı | API |
|---|---|---|---|
 PenpotArayüz tasarımı, prototipleme ve tasarım sistemleri için kod inceleme ve MCP sunucusu sunan açık kaynaklı tasarım platformu. |
Evet | $7/ay | Evet |
 Auraİstemlerden tasarım üreten, şablonları, CMS'i ve HTML ya da Figma dışa aktarması olan yapay zekâ açılış sayfası oluşturucu. |
Evet | — | — |
 GetLayersWeb sitesi şablonlarını, 3B sahneleri, bölümleri ve gradyanları yapay zekâ kodlama araçları için istem olarak sunan kütüphane. |
Evet | — | — |
 MasterGoYapay zekâ ile prototip üretimi ve tasarımdan koda teslim sunan, ortak çalışmaya dayalı çevrimiçi arayüz tasarım platformu. |
Evet | — | Evet |
 Modao AI (墨刀AI)Prototip, PRD ve slayt sunumu üreten yapay zekâya sahip, Çin merkezli prototipleme ve ürün iş birliği platformu. |
Evet | — | — |
Banani ile aynı kategoride listelenenler. Başlangıç fiyatı yalnızca yapımcının fiyat sayfasında kontrol ettiğimiz yerlerde görünür; tire, kontrol edilmediği veya yayımlanmadığı anlamına gelir. Tüm UI ve UX tasarımı araçları