DAHA FAZLA OKUMA
Gemini İçin Ek Okumalar
Gemini ile tasarım yapmak için öğreticiler, dokümantasyon ve rehberler, yayımlanan kılavuzda listelendiği şekliyle.
Gemini 
OpenDesign Gemini ile
OpenDesign’da
tasarlayın.
OpenDesign'da Gemini CLI ile arayüz tasarlama: referans olarak bir beyaz tahta fotoğrafı, kural kitabı olarak GEMINI.md, brief'ten incelenmiş dosyaya bir operasyon paneli görevi ve başlamadan önce bilinmesi gereken sınırlar.
Briften arayüze01 / Gemini
FİKRİ SİZ GETİRİN↗
“Bir beyaz tahta fotoğrafından
okuyabileceğimiz bir panele.”
BU GEMINI KILAVUZUNA GİRMENİN ÜÇ YOLU
Gemini ile Nereden Başlayacağınızı Seçin
BU KILAVUZ · UI TASARIMI
Gemini ile Bir Ürün Arayüzü Oluşturun
Bu kılavuz: brief, referanslar, tasarım kuralları ve incelenmiş bir HTML sonucu.
Bu kılavuzu okuyun KURULUMGemini'ı Sıfırdan Kurun
UI oluşturup doğrulayabilen bir Gemini CLI'ya sıfır makineden ulaşmanın tam yolu burada.
Kuruluma git KARŞILAŞTIRMAGemini'yi Diğer Ajanlarla Karşılaştırın
Tasarım işleri için Gemini'nin Codex, Claude Code ve Cursor'dan farkı ve başka bir iş akışının ne zaman seçilmesi gerektiği.
Karşılaştırmayı görünUçtan Uca Bir Gemini Tasarım Görevi
Brief'ten Arayüze: Bir Gemini Tasarım Görevi
Baştan sona gösterilen tek bir görev: teslim ettiğiniz brief ve kısıtlar, geri gelen üretim ve tamamlanmadan önce yine de yaptığınız kontroller. Aşağıdaki arayüz, bu sayfa için hazırlanmış açıklayıcı bir örnektir, kayıtlı bir Gemini çalıştırması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefEkteki beyaz tahta fotoğrafından bir operasyon panosu tasarlayın: dört başlık sayısı, haftalık bir hacim grafiği ve bir olay kuyruğu. Masaüstünde bir ekran, telefonda kaydırılabilir bir özet.
- 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 yok
- EtkileşimlerTarih aralığı, olay filtreleri, kuyruk içinde klavye ile gezinme
- ÇıktıSabit
data-od-idkancalarına sahip kendi kendine yeterli tek bir HTML dosyası
2İş Bölümü: Siz, Gemini ve OpenDesign
- Siz
Brief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
- Gemini
Düzeni planlar, HTML, CSS ve JavaScript'i yazar ve talep üzerine gözden geçirir.
- OpenDesign
Tasarım sistemini ve skill'i sağlar, önizlemeyi oluşturur ve her sürümü projede bir dosya olarak saklar.
- İnceleme
Görsel hiyerarşi, 8px ızgaradaki boşluklar, her iki kesme noktası ve tüm etkileşimler teslimden önce kontrol edilir.
3Gemini Artifact: 1440px ve 390px'de Operasyonlar Panosu
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
Dört kart, grafik ve kuyruk aynı 8px ızgarayı paylaşır; 1440 veya 390'da hiçbir şey üst üste binmez.
Hiyerarşi
Görsel Hiyerarşi
Önce başlık sayıları, ardından grafik, ardından kuyruk okunur; vurgu rengi bir çubuğu ve bir kritik hapı işaretler.
Duyarlı
Mobil Düzen
Satır başına iki sayı, altta grafik, liste olarak kuyruk; tarih aralığı bir sayfaya katlanır.
Etkileşim
Etkileşim Kontrolleri
Aralığı değiştirin, kritik olana filtreleyin, kuyruk içinde ok tuşlarıyla gezinin.
Uygunluk
Gemini Görev İçin Ne Zaman Uygun, Ne Zaman Değil
Gemini Şu Durumlarda Uygundur
- Çok modlu ekran görüntüsü → UI. Güçlü görüntü anlama, bir referans görseli duyarlı markup'a dönüştürür ve sonucu ona göre kontrol eder.
- 1M-token bağlam. Tüm bir tasarım sistemi, bileşen kitaplığı ve referans seti aynı anda sığar, böylece çıktı gerçek temel bileşenlerinizi yeniden kullanır.
- GEMINI.md + MCP. Bağlam dosyaları kurallarınızı taşır; Figma MCP sunucusu gerçek tasarım bağlamını koda getirir.
- Açık ve başlamak ücretsiz. Apache-2.0 lisanslı ve bir Google hesabı üzerinden cömert bir ücretsiz katman, Gemini API üzerinden BYOK ile.
Şu Durumlarda Başka Bir Workflow Seçin
- Düzenlenebilir vektör dosyalarına ihtiyacınız var. Üretilen ürün HTML'dir, düzenlenebilir bir tasarım belgesi değildir. Gereken varlık formatı 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: Google hesabı (ücretsiz katman) veya Gemini API anahtarı (kendi anahtarınızı getirin). OpenDesign kimlik bilgisi sağlamaz veya aracılık etmez.
- Ekibiniz Antigravity veya Claude Code üzerinde çalışıyor. Bu ajanların kendi sayfaları vardır; çalışma alanı aynıdır, kurulum farklıdır. Bkz. ilgili ajanlar.
Uyumluluk
Başlamadan Önce Gemini Gereksinimleri
Bu kılavuz, OpenDesign masaüstü uygulaması üzerinden bağlanan Gemini'yi ele alır. Yayımlanmış referanslar 6 Eylül 2026 itibarıyla kontrol edilmiştir.
Araç KapsamıGemini, Google tarafından
Gemini CLI, Google'ın açık kaynaklı (Apache-2.0) terminal AI ajanıdır. Kod tabanınızı okur, dosyaları düzenler, komutları çalıştırır, web'den veri çeker ve yanıtlarını Google Search ile temellendirir. Bu sayfa, Gemini'nin kendi arayüzü hakkında değil, OpenDesign üzerinden Gemini ile arayüz tasarlamak hakkındadır. OpenDesign'ın kurulum notları mevcut ajanları listeler.
Hesaplar ve Kimlik DoğrulamaGoogle hesabı (ücretsiz katman) veya Gemini API
Google hesabı (ücretsiz katman) veya Gemini API anahtarı (BYOK). Google hesabınız veya Gemini API anahtarınız (BYOK) ile kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır. Bu sayfa bir kota veya fiyat taahhüdünde bulunmaz.
Sistem ve SürümlerMasaüstü uygulama veya kaynak kod
Masaüstü derlemeleri için indirme sayfasını kontrol edin. Kaynak hızlı başlangıçtaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırmaya uygulanır; masaüstü paketi kurulumuna değil. Uyumlu minimum Gemini sürümü: burada doğrulanmamıştır.
Bağlantı KontrolüBaşarı sinyali
Kurulu 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. Gemini'nin bunu ele aldığını ve üretilen dosyanın açıldığını doğrulayın. Yalnızca indirme işlemi, çalışan bir bağlantı kurmaz.
Masaüstü uygulamasıyla başlayın
Üç Adımda Gemini Kurulumu
Önce indirin, kurulu sürümünüz için Gemini kurulumunu tamamlayın, ardından küçük bir sonucu kontrol edin. Bu yolu izlemek için OpenDesign'ı kaynaktan derlemeniz gerekmez.
- 1
OpenDesign Masaüstü Uygulamasını İndirin
Bilgisayarınıza uygun paketi seçin, kurun ve uygulamayı açın.
OpenDesign'ı indirinKONTROL NOKTASIMasaüstü uygulaması açılır. Zaten kurulu mu? Sonraki adıma geçin; yeniden indirmenize gerek yok. - 2
Gemini Bağlantınızı Hazırlayın
Kurulu sürümünüzdeki Gemini talimatlarını izleyin. Google hesabınız veya Gemini API anahtarınız (BYOK) ile kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır.
Gemini CLI belgeleri# 1. Install Gemini CLI (Node 20+) npm install -g @google/gemini-cli # or run without installing: npx https://github.com/google-gemini/gemini-cli # 2. Start it in your project and authenticate on first run cd your-project gemini # sign in with your Google account, or set GEMINI_API_KEYYayımlanan kılavuzdaki Gemini kurulum notlarından alınmıştır; güncel komut için satıcı belgelerini kontrol edin.
KONTROL NOKTASIHedeflenen ajanı ve hesabı doğrulayın. Kullanılamıyorsa, daha büyük bir görev denemeden önce uyumluluğu kontrol edin. - 3
Küçük Bir Gemini 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’iBir 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 NOKTASISonucu 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.
Gemini tasarım iş akışı
Beş Adımda Gemini Tasarım İş Akışı
Aynı operasyon panosu görevi, brief'ten doğrulanmış dosyaya kadar adım adım. Her adımda sizin sağladığınız şey, Gemini'nin yaptığı şey, OpenDesign'ın kattığı şey ve sizin kontrol ettiğiniz şey listelenir.
- 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.
- GeminiBrief'i ve projenin talimat dosyasını okur; bir şey belirsiz olduğunda 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.
- 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.
- GeminiBir 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.
- 3
Arayüzü Oluştur
Gemini kendi kendine yeten bir HTML dosyası yazar: düzen, stiller, etkileşimler ve kararlı bağlantı noktaları.
- SizBekleyin veya netleştirici bir soruyu yanıtlayın. Yapılandırılacak bir şey yok.
- GeminiBö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.
- 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.
- GeminiÖnizleme üzerindeki yorumlarınızı okur ve sonraki revizyonu hazırlar.
- OpenDesignÖnizlemeyi render eder, yorumlar ve düzenlemeler için
data-od-idhedeflerini açığa çıkarır. - KontrolHiyerarşi, kontrast, 390px'de taşma, focus durumları ve vurgu renginin ölçülü kullanılıp kullanılmadığı.
- 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.
- GeminiDeğ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.
Kaynaklar
Gemini Tasarım Kaynakları
Skill'ler Skill'lere göz atın Tasarım sistemleri Sistemlere göz atın Şablonlar Şablonlara göz atın
Tasarım Skill'leri
Gemini'nin OpenDesign içinde üretebileceği artifact türleri, tür başına bir skill.
Tasarım Sistemleri
Gemini herhangi bir şey üretmeden önce bağlanması gereken marka token'ları ve bileşenleri.
Şablonlar
Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.
Sınırlamalar
Gemini Sınırlamaları, Manuel Kontroller ve Geri Dönüş Yöntemleri
- KapsamBu sayfa, Gemini'yi OpenDesign'a bağlı bir ajan olarak ele alır, her Gemini özelliğini değil.
- Kullanım SınırlarıKullanım sınırları ve maliyet, kullandığınız kimlik bilgisine (Google hesabı (ücretsiz katman) veya Gemini API anahtarı) göre değişir. Bu sayfa ücretsiz kotalar hakkında bir iddiada bulunmaz.
- AğYerel proje dosyaları, çevrimdışı çıkarım anlamına gelmez. Hassas girdileri paylaşmadan önce ajanınızın sağlayıcı ayarlarını ve veri politikalarını inceleyin.
- Çıktı HTML'dirArtifact'lar HTML dosyalarıdır, vektör tasarım dosyaları değildir.
- Manuel İncelemeErişilebilirlik, gerçek içerik, marka uyumu ve etkileşim doğruluğu önizlemede sizin tarafınızdan incelenir. Ajan tarafından yapılan herhangi bir kendi kendini kontrolü ilk geçiş olarak değerlendirin.
- Yedek ÇözümAjan kullanılamıyorsa veya bir görev başarısız olursa, kurulu sürümün bağlantı talimatlarını ve kimlik doğrulamasını kontrol edin. Yapılandırmayı değiştirmeden önce hatayı ve son çalışan üretilen dosyayı koruyun.
SSS
Gemini ve OpenDesign Hakkında Sık Sorulan Sorular
Gemini CLI Gerçekten Tasarım İşi Yapabilir mi?
Evet — bağlamda bir estetik skill, bir tasarım sistemi ve gerçek referans görsellerle Gemini CLI, üretim kalitesinde, duyarlı UI üretir ve güçlü multimodal modelleri çıktıyı referanslara göre doğrular. Bu bağlam olmadan genellikle sıradan bir görünüme yönelir; OpenDesign'ın doldurduğu boşluk da budur.
Gemini CLI ile Tasarım Yapmak İçin Ödeme Yapmam Gerekir mi?
Hayır — bir Google hesabıyla oturum açmak size cömert bir ücretsiz katman sunar ve ayrıca kendi Gemini API anahtarınızı (BYOK) getirebilir veya Vertex AI kullanabilirsiniz. OpenDesign, her iki durumda da kimlik bilgilerinizi asla proxy'lemez.
Gemini CLI'yi Özellikle Tasarım İçin İyi Yapan Ne?
İki şey: modelleri güçlü şekilde multimodaldir, bu yüzden referans ekran görüntülerini iyi okur, ve 1M-token bağlamı bir tasarım sisteminin ve referans setinin tamamını aynı anda tutabilir. Her ikisi de yardımcı olur — ancak zevk hâlâ sağladığınız tasarım sisteminden, skill'den ve referanslardan gelir.
Frontend Tasarım İçin Gemini CLI mi Claude Code mu?
İkisi de güçlüdür. Claude Code, kod tabanını bilen özgül tasarım kararlarıyla tanınır; Gemini CLI'nin avantajı multimodal anlayış, büyük bağlam ve ücretsiz katmandır. Birçok ekip her ikisini de kullanır — OpenDesign, tasarım iş akışınızı değiştirmeden ajan değiştirmenizi sağlar.
Gemini CLI'yi Figma'ya Nasıl Bağlarım?
~/.gemini/settings.json içindeki mcpServers altına Figma MCP sunucusunu ekleyin. Gemini böylece gerçek tasarım bağlamını — bileşenler, değişkenler, düzen verisi — çekebilir, böylece üretilen kod kaynağı yaklaşık olarak değil, tam olarak eşleştirir.
Gemini ile İlk Tasarım Görevine Başlayın
Küçük bir görevle başlayın, gidiş-dönüşü değerlendirin, ardından gerçek brief'i getirin. Kurulumunuza uyan seçeneği seçin; sayfa bunu algılamaz.