Açılış sayfaları
Her yapay zeka tarafından üretilmiş başlangıç sayfası gibi görünmeyen bir şey istedim. Bu yüzden "temiz modern açılış sayfası" istemek yerine üslup ve his üzerine odaklandım.
Çıktı gerçekten iyiydi. Burada görebilirsiniz:
Düzen gerçek hiyerarşiye sahipti, hover durumları çalıştı ve gradyan animasyonu sorunsuzdu. Her zamanki beyaz arka plan ve mavi CTA butonuna geçiş yapmadı. Yazı tipi eşlemesini değiştirdim ama başlangıç noktası olarak bu ayarla en az bir saatlik hazırlık süresi kazandım.
Yazdığım bir istem burada:
Modern bir mimarlık stüdyosu için açılış sayfası. Sayfanın tüm bölümlerinde aynı kirli beyaz arka planı kullanın. Editoryal başlıklar kullanın, önce görüntülere ve içeriğe odaklanın. Genel his soğuk bir kısıtlama: kendini açıklamaya ihtiyaç duymayan bir stüdyo.
SaaS tasarımları
Bunda veri, gezinme ve birden fazla durum içeren daha karmaşık bir arayüzü nasıl yönettiğini görmek istedim. Gemini 3.1 Pro'nun neler yapabileceğini gerçekten gösterdiği yer burası!
Bileşen yapısı temiz, kartlar uygun aralıklara sahip ve durum rozetleri farklı durumlar için farklı renkler kullanıyor. Çizgi grafiği doğru şekilde render edildi ve veriler gerçekçi görünüyordu.
Bu test için yazdığım istem:
Bir içerik pazarlama web uygulaması için SaaS analiz panosu. Neon yeşil aksan ile açık bir tema kullanın. Linear veya Notion gibi his versin. Düzen yoğun olmalı, ancak içerikle aşırı yüklenmemiş.
Sol tarafta bir kenar çubuğu gezinme, üstte bir arama alanı + avatar olsun. Ana içerik alanında üstte üç metrik kart (toplam gönderiler, ortalama etkileşim ve aylık erişim gösteren), altında 30 gün boyunca trafik gösteren yığılmış çubuk grafik ve daha sonra durum rozetleri bulunan son gönderilerin bir tablosu ayrı bir bölümde olsun.
Linear veya Notion referansları oldukça iyi yerine oturdu. Gemini, genellikle AI panolarını modası geçmiş gösteren kaba çerçeveler ve yoğun gölgelerden kaçındı.
Mobil tasarımlar
Masaüstü tasarımları test etmenin dışında, Gemini 3.1'in mobil ve uygulama tasarımlarını nasıl yapabileceğini görmek istedim.
Bunu yapmak için, tekrar istemde referans kullandım, Uber'i belirttim ve bu kez ayrıntılara girmeden, ek bir bağlam verilmeden ne kadar ileri gidebileceğini görmek istedim.
Kullanılan istem:
Uber'den ilham alan mono siyah renk paleti ile ışık modu sürüş sipariş uygulaması ana ekranı.
Gördüğünüz gibi, temiz bir düzen var, çok açık ve kalın dokunma alanlarıyla. Her etkileşimli öğe cömertçe boyutlandırılmış ve vurması kolay. Hiçbir şey dikkat için yarışmıyor, hiyerarşi işini yapıyor.
Deck slayt tasarımları
UI testlerinin yanı sıra, Gemini 3.1'in sunum slaytlarını nasıl yönetebileceğini merak ettim.
Çıktı oldukça temizdi. Büyük başlık, uygun boşluk, büyük bir sayı ile ve altında sessiz bir etiketle stilize edilmiş istatistik. Gerçekten paydaşlar veya takım arkadaşları önünde gösterebileceğiniz bir şey gibi görünüyordu.
Kullanılan istem:
SaaS ürün tanıtımı için tek bir sunum slaytı tasarlayın. Minimal düzen, bol nefes alanı. Pitch.com düşünün, PowerPoint değil.
Slayt "Neden Şimdi?" başlıklı olmalı ve piyasa zamanlaması için gerekçe sunmalı. Koyu arka plan, sol tarafta kalın, büyük başlık, sağda önemli bir istatistik, "Bu için hala elektronik tablolar kullanan takımların %73'ü" gibi bir şey.
Gemini 3.1 Pro Nasıl Kullanılır
Google AI Studio'da veya API aracılığıyla kullanabilirsiniz, ancak UI tasarımı için en iyi yolu modeli entegre eden özel araçlar aracılığıyladır.
Banani
Banani, yakın zamanda Gemini 3.1 Pro'yu entegre eden bir tuval tabanlı UI oluşturma aracıdır. Basit metin istemlerinden UI tasarımları oluşturmanızı ve düzenlemenizi sağlar.
Bu makaledeki çoğu örnek, doğrudan orada Gemini kullanılarak oluşturuldu.
Figma benzeri UI ve Gemini, GPT, Claude gibi AI modelleriyle etkileşim kurma yeteneği istiyorsanız harika bir seçimdir.
Ayrıca düzenli iş akışınızı korur, tasarımları Figma'ya kopyalayıp yapıştırmanıza, kod olarak dışa aktarmanıza veya diğer kodlama ajanlarıyla MCP üzerinden bağlantı kurmanıza olanak tanır.
Gemini Tuval
Gemini 3.1 Pro'ya erişmenin en doğrudan yolu Gemini uygulaması aracılığıyladır. Uygulama, modelin oluşturduğunu önizlemenize olanak tanıyan bir tuval özelliğine sahiptir.
Daha spesifik bir araca geçmeden önce tasarım için modelin neler yapabileceğini keşfetmek isterseniz güzel bir başlangıç noktasıdır.
Bölgesel kilitli olabilir (bu makaleyi yazarken olduğu gibi), bu yüzden ABD dışında iseniz bu önizleme/tuval özelliğini henüz kullanamayabilirsiniz.
Stitch
Stitch, Google Labs'tan deneysel bir AI destekli tasarım aracıdır. Metin istemlerini veya yüklenen görüntüleri alır ve tamamlanmış UI tasarımları ile dışa aktarılabilir kodlar üretir. Hem 3.0 hem de 3.1 Thinking buradan kullanılabilir.
Bir değerlendirme Yazdım Stitch yanı sıra UI oluşturma için kullanabileceğiniz alternatiflerin değerlendirmesi.
En İyi Gemini 3.1 Pro İstemleri
Gemini 3.1 Pro'dan en iyi UI tasarımı sonuçlarını elde etmek için istemlerinizi nasıl değiştireceğiniz üzerinde çalışmanız gerekiyor. Vibe, düzen ayrıntıları ve referanslara odaklanın.
Bol ayrıntı ekleyin
Gemini tarafından oluşturulan son tasarımın kalitesi sağladığınız ayrıntıların miktarına yüksek ölçüde bağlıdır.
Ekranda tasarlanmasını istediğiniz bazı unsurlar zaten varsa, çok spesifik olun. Bu ayrıntıları yazın. Model düşüncelerinizi okuyamaz.
Hissi tarif edin
Sadece "mavi başlık" istemeyin. Gemini kodu ve görsel öğeleri anlayabilen çok-modal bir modeldir.
Tasarım için keşfetmek istediğiniz soyut bir tema veya atmosferi tarif edebilirsiniz. Örneğin: "Kişisel portföy için bir açılış sayfası oluşturun. Vibe kasvetli, Viktoryan ama modern olmalı: serif yazı tiplerini, derin kömür paleti kullanın."
Ekstra bağlam verin
İlk noktaya benzer şekilde, ne kadar fazla verirseniz, o kadar iyi sonuçlar alırsınız. Mobbin'den beğendiğiniz görüntü referansları, UI'lar, mevcut UI'nizin ekran görüntüleri veya hatta peçete eskizleri iliştirin.
Gemini'ye şöyle diyebilirsiniz: "Bu ekranları mümkün olduğunca yakın bir şekilde kopyalayın. Düzeni, unsurları ve stilleri eşleştirin." Görsel rumuzlar yüksek öncelikli talimatlar olarak kabul edilir.
Thinking Kullan
Gemini Uygulamasını kullanıyorsanız, karmaşık düzenler için düşünce seviyesini Yüksek olarak ayarlayabilirsiniz. Oluşturması daha uzun sürecektir, ancak model görselleri ve düzen yapısını düşünerek daha fazla zaman harcar.
Bu tasarımda çok daha iyi düzenler ve görsellerle sonuçlanır.
Reddit Ne Diyor
Reddit'teki vibe-coding ve tasarım toplulukları, son lansman öncesi model üzerinde stres testi yapmaktadır ve fikirler karışıktır.
İyi Yönler
Birçok kullanıcı, Gemini 3.1 Pro'nun özellikle ön yüz ve tasarım için tüm diğer sınır modellerinden daha yüksek puan aldığını bildiriyor.
Bir kullanıcı, 10 kategoride 50 farklı site oluşturdu ve "SVG mantığı ve dolgu tutarlılığı çok daha iyi," olduğunu ve "nihayet 10 istem revizyonu gerektirmeden 'estetik' talimatları anladığını" belirtti.
Bir başka kullanıcı, onu doğrudan Claude Opus 4.6 ile web tasarımı için karşılaştırdı ve Gemini'nin çıktısının "bir seviye daha az AI tasarımı" gibi göründüğünü ve daha iyi kontrast ve dengeye sahip olduğunu not etti.
Kötü Yönler
Ancak, mükemmel değil.
Ana şikayet "sonsuz düşünce döngüsü." Karmaşık görevlerde, kod üretmeden önce uzun ve tekrarlayıcı bir nedenleme yazarken sonsuz planlama aşamasına takılabilir.
Bazı kullanıcılar ayrıca tek çekim düşünmede harika olsa da, karmaşık uygulamalar için otonom kodlama ajanı olarak kullanıldığında, Claude Opus 4.6'nın "planlama kabalığı" eksikliği ve güvenilirliği nedeniyle hala tercih edildiğini belirttiler.
Sonuçlar
Tasarımla ilgili çoğu görev için günlük sürücüm olarak kullandım ve AI kullanarak UI üretirken genellikle buradan başlıyorum.
Gemini 3.1 Pro, diğer modellerin ürettiği genel mor gradyan UI'larından bıktıysanız kesinlikle zamanınıza değer.
"Mekansal anlama" konusunda güçlüdür, bu da onu prototipleme ve hızlı düzen fikirleri için güçlü bir AI tasarım modeli yapar.
