DAHA FAZLA OKUMA
Gemini İçin Ek Okumalar
Yayımlanan kılavuzda listelendiği gibi, tasarım çalışmaları için derlenmiş Gemini CLI eğitimleri, belgeler ve anlatımlar.
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.
BU GEMINI CLI KILAVUZUNA ÜÇ GİRİŞ YOLU
Gemini CLI için Giriş Noktanızı Seçin
BU KILAVUZ · UI TASARIMI
Gemini CLI ile Bir Ürün Arayüzü Oluşturun
Buradaki temel yol: bir brief, referans görseller, bağlamda tutulan tasarım kuralları ve kendi incelediğiniz bir HTML çıktısı.
Bu kılavuzu okuyun KURULUMGemini'ı Sıfırdan Kurun
Temiz bir makineden başlayın ve kendi UI çıktısını oluşturup kontrol edebilen bir Gemini CLI'a ulaşın.
Kuruluma git KARŞILAŞTIRMAGemini'yi Diğer Ajanlarla Karşılaştırın
Gemini CLI'ın multimodal ve geniş bağlam güçlerinin Codex, Claude Code ve Cursor karşısındaki konumu ve başka bir iş akışının ne zaman daha uygun olduğu.
Karşılaştırmayı görünUçtan Uca Bir Gemini Tasarım Görevi
Bir Gemini Görevi: Beyaz Tahta Brief'inden İşlenmiş Arayüze
Bir görevi tüm döngüsü boyunca takip edin: Gemini'ye verdiğiniz brief ve kısıtlamalar, geri döndürdüğü çıktı ve bitmiş saymadan önce size kalan kontroller. Aşağıdaki arayüz, bu sayfa için oluşturulmuş örnek bir çalışmadır, kaydedilmiş bir Gemini çalıştırması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefEkteki beyaz tahta fotoğrafını bir operasyon panosuna dönüştürün: dört ana sayı, haftalık hacim grafiği ve bir olay kuyruğu. Masaüstünde tek ekran, telefonda kaydırılabilir bir özet.
- Tasarım sistemiOpenDesign'dan Paper canvas: Albert Sans, tek bir yeşil vurgu
- Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma yok
- EtkileşimlerTarih aralığı kontrolü, olay filtreleri ve kuyrukta klavye ile gezinme
- ÇıktıSabit
data-od-idkancalarına sahip kendi kendine yeterli tek bir HTML dosyası
2Kim Ne Yapar: Siz, Gemini CLI ve OpenDesign
- Siz
Brief'i siz yazarsınız, tasarım sistemini seçersiniz ve kabul kriterlerini belirlersiniz.
- Gemini
Gemini CLI düzeni planlar, HTML, CSS ve JavaScript'i 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şiyi, 8px ızgaradaki boşlukları, her iki kırılma noktasını ve her etkileşimi kontrol edersiniz.
3Gemini'nin Çıktısı: 1440px ve 390px'te Operasyon Panosu
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
Dört kart, grafik ve kuyruk hepsi tek bir 8px ızgarada oturur; 1440 veya 390'da hiçbir şey çakışmaz.
Hiyerarşi
Görsel Hiyerarşi
Tarama sırası ana sayılar, ardından grafik, ardından kuyruk şeklindedir; vurgu tek bir çubuğa ve tek bir kritik hapa dokunur.
Duyarlı
Mobil Düzen
Mobilde, satır başına iki sayı, altında grafik, kuyruk liste olarak; tarih aralığı bir sayfaya daralır.
Etkileşim
Etkileşim Kontrolleri
Aralığı değiştirin, yalnızca kritik olanlara filtreleyin ve kuyrukta ok tuşlarıyla gezinin.
Uygunluk
Gemini CLI Tasarım Görevinize Nerede Uyar — ve Nerede Uymaz
Gemini Şu Durumlarda Uygundur
- Multimodal ekran görüntüsü → UI. Gemini'nin görüntü anlama yeteneği, bir referans görüntüyü duyarlı işaretlemeye dönüştürür ve çıktıyı buna karşı karşılaştırabilir.
- 1M token bağlam. Tüm bir tasarım sistemi, bileşen kütüphanesi ve referans seti tek bir pencereye sığar, böylece çıktı yeni stiller icat etmek yerine gerçek ilkel öğelerinizi yeniden kullanır.
- GEMINI.md + MCP. GEMINI.md bağlam dosyası her çalıştırmada kurallarınızı taşır; Figma MCP sunucusu gerçek tasarım bağlamını koda çeker.
- Açık ve başlaması ücretsiz. Apache-2.0, bir Google hesabı üzerinden cömert bir ücretsiz katman ve Gemini API'si aracılığıyla BYOK.
Şu Durumlarda Başka Bir Workflow Seçin
- Düzenlenebilir vektör dosyalarına ihtiyacınız var. Geri dönen şey HTML'dir, düzenlenebilir bir tasarım belgesi değil. Varlık formatınız gerektiriyorsa ayrı bir vektör iş akışına bakın.
- Referansınız ve kısıtlamanız yok. Üzerinde çalışılacak bir tasarım sistemi veya örnek olmadan Gemini genel bir görünüme yönelir; üretmeden ö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'da çalışıyor. Bu ajanların kendi sayfaları var; çalışma alanının kendisi değişmez, ancak kurulum değişir. İlgili ajanlar bölümüne bakın.
Uyumluluk
Başlamadan Önce Gemini Gereksinimleri
Bu sayfa, Gemini'yi OpenDesign masaüstü uygulaması aracılığıyla bağlanan bir ajan olarak ele alır. Yayımlanmış referanslar 6 Eylül 2026'da kontrol edilmiştir.
Araç KapsamıGemini, Google tarafından
Google, Gemini CLI'ı açık kaynaklı (Apache-2.0) bir terminal yapay zeka ajanı olarak sunar. Kod tabanlarını okur, dosyaları düzenler, komutlar çalıştırır, web'i getirir ve yanıtları Google Search ile temellendirir. Bu sayfa, Gemini ile OpenDesign aracılığıyla arayüz tasarlamaya odaklanır, Gemini'nin kendi arayüzüne değil. OpenDesign'ın kurulum notları mevcut ajanları listeler.
Hesaplar ve Kimlik DoğrulamaGoogle hesabı (ücretsiz katman) veya Gemini API
Kimlik bilgisi seçenekleri: bir Google hesabı (ücretsiz katman) veya bir Gemini API anahtarı (BYOK). İkisinden biriyle kimlik doğrulayın; kimlik bilgileri makinenizde kalır. Bu sayfa herhangi bir kota veya fiyat vaat etmez.
Sistem ve SürümlerMasaüstü uygulama veya kaynak kod
Masaüstü sürümleri indirme sayfasında görünür. Kaynak hızlı başlangıcındaki Node.js ve pnpm gereksinimleri yalnızca kaynaktan çalıştırırken geçerlidir; bir masaüstü paketi kurarken değil. Minimum uyumlu Gemini sürümü: burada doğrulanmadı.
Bağlantı KontrolüBaşarı sinyali
Kurulu sürümünüzde gösterilen bağlantı talimatlarını kullanın, ardından küçük bir görev deneyin. Gemini'nin bunu işlediğini ve artefaktın açıldığını doğrulayın. İndirme tek başına çalışan bir bağlantıyı kanıtlamaz.
Masaüstü uygulamasıyla başlayın
Üç Adımda Gemini Kurulumu
Önce uygulamayı indirin, kurduğunuz sürüm için Gemini kurulumunu tamamlayın, ardından küçük bir sonucu kontrol edin. Bu yol, OpenDesign'ı kaynaktan derlemeyi gerektirmez.
- 1
OpenDesign Masaüstü Uygulamasını İndirin
Bilgisayarınız için paketi seçin, kurun ve uygulamayı açın.
OpenDesign'ı indirinKONTROL NOKTASIMasaüstü uygulaması açılır. Zaten kuruluysa sonraki adıma geçin; yeniden indirmeniz gerekmez. - 2
Gemini Bağlantınızı Hazırlayın
Kurulu sürümünüzle birlikte gelen Gemini talimatlarını, kullandığı herhangi bir GEMINI.md proje bağlamı kuralı dahil olmak üzere izleyin. Google hesabınızla veya bir Gemini API anahtarıyla (BYOK) kimlik doğrulayı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_KEYBu yayımlanmış kılavuzdaki Gemini kurulum notlarından alınmıştır; güncel komutu satıcı belgelerinde doğrulayın.
KONTROL NOKTASIAracının ve hesabın amaçladığınız şeyle eşleştiğinden emin olun. Aracı kullanılamıyorsa, daha büyük bir göreve girişmeden önce uyumluluğu kontrol edin. - 3
Küçük Bir Gemini Görevi Çalıştırın
Açılış brifini, bir revizyon dahil tüm döngüyü değerlendirebilecek kadar ölçülü tutun.
Başlangıç brief’iBir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluştur. Tasarım kurallarımı uygula. Masaüstü ve mobil genişliklerde doğrula.
KONTROL NOKTASIArtefaktı açın, kaydetme durumunu deneyin ve belirli bir değişiklik isteyin. İnceleme, oluşturulan dosyayla başlar; orada bitmez.
OpenDesign'ı kaynaktan çalıştırmayı düşünüyorsanız, bunun yerine teknik hızlı başlangıcı kullanın.
Gemini tasarım iş akışı
Gemini'nin Tasarım Döngüsünde Beş Adım
İlk istemden kontrol edilmiş bir dosyaya kadar izlenen tek bir operasyon gösterge paneli brifi. Her adımda girdinizi, Gemini CLI'nin eylemini, OpenDesign'ın katkısını ve inceleme görevinizi görürsünüz.
- 1
Tasarım Brief'i
Sade ve kısa tutun: üç ila altı satır. Ekranı kimin kullandığını, ne yapması gerektiğini ve nerede çalışacağını söyleyin.
- SizBrifi kendiniz yazın ve bir referans ekran görüntünüz olduğunda eklemek için @ kullanın.
- GeminiBrifi ve projenin GEMINI.md dosyasını okur; bir ayrıntı belirsizse tahmin etmek yerine sorar.
- OpenDesignProjeyi, terminal istem yüzeyini ve artefakt türüyle eşleşen beceriyi sağlar.
- KontrolBrifin kabul kriterlerini adlandırdığından emin olun. Bunları şimdi yazmak, tamamlanmış bir artefaktı düzeltmekten daha az maliyetlidir.
- 2
Tasarım Kısıtları
Bir tasarım sistemi artı birkaç kesin kural. Markaya özgü çıktı ile genel bir varsayılan arasındaki fark budur.
- SizBir tasarım sistemi seçin, ardından kesme noktalarınızı ve görünmesi gereken tüm bileşenleri adlandırın.
- GeminiBir satır yazmadan önce, DESIGN.md belirteçlerini ve GEMINI.md duruş kurallarını bağlama yükler.
- OpenDesignTasarım sistemi kitaplığını sunar ve seçtiğiniz sistemi beceri şablonuna bağlar.
- KontrolBelirteçlerin markayla eşleştiğini kontrol edin: bir vurgu rengi, doğru yazı tipleri, doğru yarıçap.
- 3
Arayüzü Oluştur
Gemini CLI; düzeni, stilleri, etkileşimleri ve kararlı kancaları kapsayan, kendi kendine yeten tek bir HTML dosyası yazar.
- SizBekleyin veya açıklayıcı bir soruyu yanıtlayın. Burada yapılandırılacak bir şey yok.
- GeminiBölümleri planlar, HTML, CSS ve JavaScript yazar, dosyayı çalıştırır ve başarısız olanı onarır.
- OpenDesignArtefaktı proje klasörüne kaydeder ve önizlemenin bulabilmesi için dizine ekler.
- KontrolHenüz bir şey yok. Dosyayı, kaynağını okuyarak değil, işlendikten sonra inceleyin.
- 4
Önizleme
OpenDesign, dosyayı belirttiğiniz genişliklerde işler. Tasarımın değerlendirildiği nokta burasıdır.
- SizGenişlikleri değiştirin, etkileşimleri deneyin ve belirli öğelere yorum ekleyin.
- GeminiGemini CLI, önizlemedeki yorumlarınızı okur ve bir sonraki turu hazırlar.
- OpenDesignÖnizlemeyi oluşturur ve yorumların ve düzenlemelerin öğeleri işaret edebilmesi için
data-od-idhedeflerini açığa çıkarır. - KontrolHiyerarşiyi, kontrastı, 390px'te taşmayı, odak durumlarını ve vurgu renginin ölçülü kalıp kalmadığını kontrol edin.
- 5
Revize Et ve Doğrula
Değişiklikleri önizleme öğelerini işaret ederek isteyin. Her revizyon yeni bir dosyadır; siz bilmeden hiçbir şeyin üzerine yazılmaz.
- SizYorumları değişiklik taleplerine dönüştürün ve görevin ne zaman bittiğine karar verin.
- GeminiDeğişiklikleri yerinde uygular ve dosyayı yeniden çalıştırır.
- OpenDesignSürümleri yan yana tutar, siz işiniz bittiğinde bir görsel veya HTML dışa aktarır.
- KontrolÖnce değişen alanı, ardından her kesme noktasında bir kez tüm sayfayı 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 CLI'nin OpenDesign içinde üretebileceği yapıt türleri; her türe bir beceri eşlenmiştir.
Tasarım Sistemleri
Gemini CLI herhangi bir çıktı yazmadan önce bağlanacak tasarım sistemi belirteçleri ve bileşenleri.
Şablonlar
Gemini CLI iş akışı içinde sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.
Sınırlamalar
Gemini CLI Sınırları, Manuel Kontroller ve Yedek Yollar
- KapsamBu sayfa, Gemini'nin tüm özellikleriyle değil, OpenDesign ile bağlantılı bir ajan olarak Gemini CLI ile ilgilidir.
- Kullanım SınırlarıKullanım sınırları ve maliyet, devredeki kimlik bilgisine göre değişir — Google hesabı (ücretsiz katman) veya Gemini API anahtarı (BYOK). Bu sayfa ücretsiz kotalarla ilgili hiçbir taahhüt vermez.
- 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ı kontrol edin.
- Çıktı HTML'dirYapıtlar HTML dosyalarıdır, düzenlenebilir vektör tasarım belgeleri değildir.
- Manuel İncelemeErişilebilirlik, gerçek içerik, marka uyumu ve etkileşim doğruluğu önizlemede sizin incelemenize bağlıdır. Gemini CLI'dan gelen herhangi bir öz kontrolü ilk geçiş olarak değerlendirin.
- Yedek ÇözümGemini CLI kullanılamıyorsa veya bir görev başarısız olursa, yüklü sürümün bağlantı talimatlarına ve kimlik doğrulamasına geri dönün. Yapılandırmayı değiştirmeden önce hatayı ve son çalışan çıktıyı koruyun.
SSS
Gemini ve OpenDesign Hakkında Sık Sorulan Sorular
Gemini CLI Gerçek Tasarım İşi Üretebilir 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.
Tasarım için En Çok Hangi Gemini CLI Özellikleri Önemlidir?
İ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.
Ön Uç Tasarımı için Gemini CLI ve Claude Code Arasında Seçim Yapmak
İ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 Figma'ya Nasıl Bağlanır?
~/.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.
Pratikte Gemini CLI Nedir?
Gemini CLI, Google'ın terminal için sunduğu açık kaynaklı (Apache-2.0) bir yapay zeka ajanıdır. Deponuzu okur, dosyaları düzenler, kabuk komutlarını çalıştırır, web'i getirir ve yanıtları Google Search ile temellendirebilir — yalnızca satırları tamamlamak yerine doğal dil görevlerinden işleri planlar ve doğrular. Aynı motor, VS Code içindeki Gemini Code Assist ajanına da güç verir.
Tasarım çalışmaları için iki özellik öne çıkar. Modelleri yerel olarak çok modludur, böylece ona bir ekran görüntüsü verebilirsiniz ve gerçek düzeni değerlendirir. Bağlam penceresi 1M token'a kadar ulaşır; bu, tüm tasarım sisteminizi, bileşen kitaplığınızı ve referans kümenizi özetleyip yok etmek yerine aynı anda tutacak kadar büyüktür.
Bağlam dosyaları: Gemini CLI, kalıcı proje bağlamı için bir GEMINI.md dosyasını okur — tasarım kurallarınızı, token'larınızı ve inceleme kontrol listelerinizi kodlamak için doğal yer. Kişisel ve ekip ayarları üstüne eklenir.
Yerleşik araçlar + MCP: Dosya, kabuk, web-getirme ve Google Search araçlarını kutudan çıktığı haliyle sunar ve canlı bir Figma dosyası gibi harici bağlam eklemek için MCP sunucularını (~/.gemini/settings.json içinde yapılandırılır) destekler.
Başlaması ücretsiz: Kişisel bir Google hesabıyla oturum açmak, cömert bir ücretsiz Gemini istek katmanı sağlar; ayrıca bir Gemini API anahtarı getirebilir veya Vertex AI kullanabilirsiniz.
Kimlik bilgisi: Google hesabı (ücretsiz katman) veya AI Studio'dan Gemini API anahtarı (BYOK) veya Vertex AI
Sağlayıcı: Google
Lisans: Apache-2.0, açık kaynak
Tasarım çalışmaları için iki özellik öne çıkar. Modelleri yerel olarak çok modludur, böylece ona bir ekran görüntüsü verebilirsiniz ve gerçek düzeni değerlendirir. Bağlam penceresi 1M token'a kadar ulaşır; bu, tüm tasarım sisteminizi, bileşen kitaplığınızı ve referans kümenizi özetleyip yok etmek yerine aynı anda tutacak kadar büyüktür.
Bağlam dosyaları: Gemini CLI, kalıcı proje bağlamı için bir GEMINI.md dosyasını okur — tasarım kurallarınızı, token'larınızı ve inceleme kontrol listelerinizi kodlamak için doğal yer. Kişisel ve ekip ayarları üstüne eklenir.
Yerleşik araçlar + MCP: Dosya, kabuk, web-getirme ve Google Search araçlarını kutudan çıktığı haliyle sunar ve canlı bir Figma dosyası gibi harici bağlam eklemek için MCP sunucularını (~/.gemini/settings.json içinde yapılandırılır) destekler.
Başlaması ücretsiz: Kişisel bir Google hesabıyla oturum açmak, cömert bir ücretsiz Gemini istek katmanı sağlar; ayrıca bir Gemini API anahtarı getirebilir veya Vertex AI kullanabilirsiniz.
Kimlik bilgisi: Google hesabı (ücretsiz katman) veya AI Studio'dan Gemini API anahtarı (BYOK) veya Vertex AI
Sağlayıcı: Google
Lisans: Apache-2.0, açık kaynak
Çok modlu modeller ve devasa bir bağlam tasarıma neden uygundur
Gemini CLI'nin tasarım avantajı iki model özelliğinden gelir — ancak her ajanda olduğu gibi, zevkin yine de sağlanması gerekir.
Güçlü çok modlu anlayış: Gemini modelleri yerel olarak çok modlu olduğundan, ajan referans ekran görüntülerini iyi okur — düz yazı açıklamasından tahmin etmek yerine işlenmiş çıktısını bir görüntüyle karşılaştırır.
1M token'lık bağlam penceresi: Geniş bir bağlam, tüm tasarım sisteminin, token'ların ve birçok referans durumunun aynı anda sığması anlamına gelir; böylece ajan tek seferlik stiller icat etmek yerine gerçek temel yapı taşlarınızı yeniden kullanır.
GEMINI.md içindeki kurallar: Bir GEMINI.md (artı Figma MCP sunucusu), ajanı token'larınıza, 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, sizin sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görüntüleri.
Ders her ajanın öğrettiği aynı ders: Gemini CLI varsayılan olarak zevke sahip değildir. 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ı).
Güçlü çok modlu anlayış: Gemini modelleri yerel olarak çok modlu olduğundan, ajan referans ekran görüntülerini iyi okur — düz yazı açıklamasından tahmin etmek yerine işlenmiş çıktısını bir görüntüyle karşılaştırır.
1M token'lık bağlam penceresi: Geniş bir bağlam, tüm tasarım sisteminin, token'ların ve birçok referans durumunun aynı anda sığması anlamına gelir; böylece ajan tek seferlik stiller icat etmek yerine gerçek temel yapı taşlarınızı yeniden kullanır.
GEMINI.md içindeki kurallar: Bir GEMINI.md (artı Figma MCP sunucusu), ajanı token'larınıza, 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, sizin sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görüntüleri.
Ders her ajanın öğrettiği aynı ders: Gemini CLI varsayılan olarak zevke sahip değildir. 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ı).
Sıfırdan Tasarım İşi için Gemini CLI Kurulumu
Kurulum sırası: yükle → kimlik doğrula → GEMINI.md'yi yapılandır → bir beceri ekle → tarayıcı doğrulamasını etkinleştir.
Tasarım kurallarınızı kodlayın: Token'larınızı, primitiflerinizi ve kurallarınızı GEMINI.md'ye koyun ve Gemini'yi bunlara yönlendirin; böylece çıktı, genel bir görünüme dönmek yerine bir markayla eşleşir.
Tarayıcı doğrulaması ekleyin: Bir Playwright veya tarayıcı MCP bağlayın; böylece Gemini gerçek bir tarayıcıda işler ve yalnızca derlemenin geçtiğini doğrulamak yerine çıktısını kesme noktaları arasında kontrol eder.
Komutlar ve değişebilecek sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın.
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
Tasarım kurallarınızı kodlayın: Token'larınızı, primitiflerinizi ve kurallarınızı GEMINI.md'ye koyun ve Gemini'yi bunlara yönlendirin; böylece çıktı, genel bir görünüme dönmek yerine bir markayla eşleşir.
Tarayıcı doğrulaması ekleyin: Bir Playwright veya tarayıcı MCP bağlayın; böylece Gemini gerçek bir tarayıcıda işler ve yalnızca derlemenin geçtiğini doğrulamak yerine çıktısını kesme noktaları arasında kontrol eder.
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 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_KEY
# 3. Generate project context
/init # scaffolds a GEMINI.md for this project
# 4. Wire the Figma MCP server (optional, for design handoff)
# add it under "mcpServers" in ~/.gemini/settings.jsonÖnceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
Gemini CLI ile Ekran Görüntülerini UI'ya Dönüştürmek
Gemini CLI ile en yüksek kaldıraçlı tasarım döngüsü, bir referans görselini çalışan, duyarlı bir arayüze dönüştürmek ve eşleşene kadar yinelemektir — çıktıyı referansla karşılaştırmak için çok kipli modele yaslanarak.
Elonuzdaki en net görsel referanslardan başlayın — ve yalnızca tek bir ana görseli değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
İstemde belirli olun; belirsiz istemler, güçlü bir modelle bile genel arayüz üretir.
Tasarım sisteminizi ve kurallarınızı GEMINI.md'de tutun ve Gemini'ye token'ların ve kanonik primitiflerin nerede olduğunu söyleyin.
Bir geliştirme sunucusu çalıştırın ve Gemini'nin sonucu kontrol etmek için kesme noktalarına yeniden boyutlandırarak gerçek bir tarayıcıda işlemesini sağlayın.
Gemini'nin uygulamasını ekran görüntüleriyle karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini doğrulamasını değil.
Bir görseli @ ile referans vererek isteme ekleyin, ardından somut kısıtlamalar verin:
İstemleri küçük ve odaklı tutun, iyi yinelemeleri commit'leyin ve kötüleri geri alın (geri aldığınızda Gemini'ye söyleyin), böylece her geçiş temiz bir taban üzerine kurulur.
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
Elonuzdaki en net görsel referanslardan başlayın — ve yalnızca tek bir ana görseli değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
İstemde belirli olun; belirsiz istemler, güçlü bir modelle bile genel arayüz üretir.
Tasarım sisteminizi ve kurallarınızı GEMINI.md'de tutun ve Gemini'ye token'ların ve kanonik primitiflerin nerede olduğunu söyleyin.
Bir geliştirme sunucusu çalıştırın ve Gemini'nin sonucu kontrol etmek için kesme noktalarına yeniden boyutlandırarak gerçek bir tarayıcıda işlemesini sağlayın.
Gemini'nin uygulamasını ekran görüntüleriyle karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini doğrulamasını değil.
Bir görseli @ ile referans vererek isteme ekleyin, ardından somut kısıtlamalar verin:
İstemleri küçük ve odaklı tutun, iyi yinelemeleri commit'leyin ve kötüleri geri alın (geri aldığınızda Gemini'ye söyleyin), böylece her geçiş temiz bir taban üzerine kurulur.
gemini
# in the prompt:
> @reference-desktop.png @reference-mobile.png
Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens from GEMINI.md.
Match spacing, layout, and hierarchy; make it responsive.
Render it in the browser and iterate until it matches the references
across breakpoints.Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
GEMINI.md, MCP Sunucuları ve Uzantılar
Üç uzantı noktası, Gemini 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.
GEMINI.md bağlamı: Proje kuralları, depo kökünde bir GEMINI.md dosyasında yaşar (genel ve ekip katmanlarıyla birlikte). Tasarım kurallarınız için kalıcı bir yuvadır ve her çalıştırmada okunur.
MCP sunucuları: MCP sunucularını ~/.gemini/settings.json altında yapılandırın — tasarım bağlamını ve harici araçları getirmenin taşınabilir yolu; en ilgili olarak, yalnızca Gemini'de değil, ajanlar arasında çalışan Figma MCP sunucusu.
Uzantılar ve yerleşik araçlar: Gemini CLI uzantıları ve yerleşik Google Search, dosya, kabuk ve web-getirme araçları, terminalden çıkmadan referans toplamasını ve doğrulama döngüsünü çalıştırmasını sağlar.
Bunlar taşınabilir, çok ajanlı yeteneklerdir — tam olarak OpenDesign'in her projede yeniden oluşturmak yerine düzenlemek için tasarlandığı türden şeyler.
GEMINI.md bağlamı: Proje kuralları, depo kökünde bir GEMINI.md dosyasında yaşar (genel ve ekip katmanlarıyla birlikte). Tasarım kurallarınız için kalıcı bir yuvadır ve her çalıştırmada okunur.
MCP sunucuları: MCP sunucularını ~/.gemini/settings.json altında yapılandırın — tasarım bağlamını ve harici araçları getirmenin taşınabilir yolu; en ilgili olarak, yalnızca Gemini'de değil, ajanlar arasında çalışan Figma MCP sunucusu.
Uzantılar ve yerleşik araçlar: Gemini CLI uzantıları ve yerleşik Google Search, dosya, kabuk ve web-getirme araçları, terminalden çıkmadan referans toplamasını ve doğrulama döngüsünü çalıştırmasını sağlar.
Bunlar taşınabilir, çok ajanlı yeteneklerdir — tam olarak OpenDesign'in her projede yeniden oluşturmak yerine düzenlemek için tasarlandığı türden şeyler.
Tasarım için Gemini CLI vs Codex vs Claude Code vs Cursor
Tasarım işleri için tek bir kazanan yok — her ajanın farklı bir güçlü yönü vardır ve deneyimli ekipler bunları üst üste kullanır. Adil bir özet:
Gemini CLI — Güçlü çok kipli görüntü anlama ve 1M token bağlam; ücretsiz katmanı olan açık kaynak — Ekran görüntüsü ağırlıklı işler ve tüm bir tasarım sistemini bağlamda tutma
Codex — Bir frontend becerisiyle güçlü görsel cilalama; korumalı alanlı asenkron derlemeler — Devredilen asenkron derlemeler ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, aralık, tipografi) ve kod tabanı farkındalıklı 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 yap-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması
Topluluğun yinelenen kararı, zevkin insanlardan geldiğidir: hepsi, beceriler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak döner. Çözülmesi gereken asıl sorun budur — ve bu, modele değil tasarım aracına ait bir şekildir.
Ajan — Tasarım gücü — En uygun olduğu
Gemini CLI — Güçlü çok kipli görüntü anlama ve 1M token bağlam; ücretsiz katmanı olan açık kaynak — Ekran görüntüsü ağırlıklı işler ve tüm bir tasarım sistemini bağlamda tutma
Codex — Bir frontend becerisiyle güçlü görsel cilalama; korumalı alanlı asenkron derlemeler — Devredilen asenkron derlemeler ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, aralık, tipografi) ve kod tabanı farkındalıklı 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 yap-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması
Topluluğun yinelenen kararı, zevkin insanlardan geldiğidir: hepsi, beceriler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak döner. Çözülmesi gereken asıl sorun budur — ve bu, modele değil tasarım aracına ait bir şekildir.
Ajan — Tasarım gücü — En uygun olduğu
Yaygın Tuzaklar ve “AI çöpü” Görünümünden Nasıl Kaçınılır
Yapay zekâ tarafından üretilen tasarımla ilgili en yaygın şikayet, jenerik görünmesidir — yumuşak degradeler, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, abartılı gölgeler, “bir AI bunu yaptı diye bağıran” bir Inter ve mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve talimatların arayüz metinlerine sızması yer alır. Bunların hiçbiri Gemini CLI'ye özgü değil; bunlar herhangi bir ajanın özenle seçilmiş bir tasarım bağlamı olmadan çalıştığında olan şeylerdir.
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: Çok modlu modeli kullanarak farklı kırılma noktalarında işleyin ve kendi kendinizi denetleyin; böylece düzenler mobilde sessizce bozulmaz.
Token ve referans sağlayın: Gerçek tasarım tokenları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük tek kaldıraçtır.
Kuralları GEMINI.md'ye kodlayın: “hero kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzındaki kuralları ajanın her çalıştırmada okuduğu yere koyun.
Dikkat edin: Her önlem, ajana özenle seçilmiş bir tasarım bağlamı vermekle ilgilidir. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı angaryadır.
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: Çok modlu modeli kullanarak farklı kırılma noktalarında işleyin ve kendi kendinizi denetleyin; böylece düzenler mobilde sessizce bozulmaz.
Token ve referans sağlayın: Gerçek tasarım tokenları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük tek kaldıraçtır.
Kuralları GEMINI.md'ye kodlayın: “hero kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzındaki kuralları ajanın her çalıştırmada okuduğu yere koyun.
Dikkat edin: Her önlem, ajana özenle seçilmiş bir tasarım bağlamı vermekle ilgilidir. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı angaryadır.
OpenDesign İçinde Ajan Olarak Gemini CLI Kullanmak
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynaklı tasarım katmanıdır. Gemini CLI'yi birinci taraf bağdaştırıcı olarak ele alır ve onu özenle seçilmiş bir beceri ve tasarım sistemi kütüphanesi, yapılandırılmış bir render hattı ve yerel bir masaüstü arayüzüyle sarar — böylece Gemini'yi iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her seferinde elle birleştirilmez. İkisi de açık kaynaklı ve yerel önceliklidir; bu da eşleşmeyi doğal bir uyum haline getirir.
Google hesabınızla veya Gemini API anahtarınızla (BYOK) kimlik doğrulayın — 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ı üretin.
Her eser ve DESIGN.md dosyası, barındırılan bir bulutta değil, kendi deponuzda yaşar.
Aynı Gemini CLI ajanı, aynı anahtar — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve Apache-2.0'dır, böylece işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
OpenDesign'i yükleyin ve ajanınız olarak Gemini CLI'yi seçin.
Google hesabınızla veya Gemini API anahtarınızla (BYOK) kimlik doğrulayın — 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ı üretin.
Her eser ve DESIGN.md dosyası, barındırılan bir bulutta değil, kendi deponuzda yaşar.
Aynı Gemini CLI ajanı, aynı anahtar — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve Apache-2.0'dır, böylece işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
OpenDesign'i yükleyin ve ajanınız olarak Gemini CLI'yi seçin.
OpenDesign Google ile bağlantılı mı?
Hayır. OpenDesign bağımsızdır; Gemini, Google'ın ticari markasıdır.