Tasarım için Gemini CLI.

Gemini CLI gerçekte 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ı çalıştırır, web’den içerik çeker ve yanıtları Google Search ile temellendirebilir — yalnızca satırları tamamlamak yerine doğal dildeki görevlerden işi planlar ve doğrular. Aynı motor, VS Code içindeki Gemini Code Assist ajanına da güç verir.

Tasarım çalışması için iki özellik öne çıkar. Modelleri doğuştan çok kiplidir; bir ekran görüntüsü verebilirsiniz ve gerçek yerleşim üzerine akıl yürütür. Bağlam penceresi ise 1M tokene kadar ulaşır; bu, bütün tasarım sisteminizi, bileşen kütüphanenizi ve referans kümenizi özetleyip silmek yerine aynı anda içinde 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ı, tokenlarınızı ve inceleme kontrol listelerinizi yazmak için doğal yer. Kişisel ve ekip ayarları bunun üstüne katmanlanır.
• Yerleşik araçlar + MCP: Kutudan çıktığı haliyle dosya, kabuk, web-getirme ve Google Search araçlarıyla gelir; ayrıca canlı bir Figma dosyası gibi dış bağlam eklemek için MCP sunucularını (~/.gemini/settings.json içinde yapılandırılır) destekler.
• Ücretsiz başlangıç: 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 ya da Vertex AI kullanabilirsiniz.

• Sağlayıcı: Google
• Kimlik bilgisi: Google hesabı (ücretsiz katman) ya da AI Studio’dan Gemini API anahtarı (BYOK) ya da Vertex AI
• Lisans: Apache-2.0, açık kaynak

Çok kipli modeller ve devasa bağlam tasarıma neden uyar

Gemini CLI’nin tasarımdaki üstünlüğü iki model özelliğinden gelir — ama her ajanda olduğu gibi, zevkin yine de sağlanması gerekir.

• Güçlü çok kipli anlama: Gemini modelleri doğuştan çok kipli olduğundan ajan referans ekran görüntülerini iyi okur — düzyazı bir tarifle tahmin yürütmek yerine işlenen çıktısını bir görselle karşılaştırır.
• 1M tokenlık bağlam penceresi: Büyük bir bağlam, bütün tasarım sisteminin, tokenların ve birçok referans durumunun aynı anda sığması demektir; böylece ajan tek seferlik stiller uydurmak yerine gerçek temel öğelerinizi yeniden kullanır.
• GEMINI.md içindeki kurallar: Bir GEMINI.md (artı Figma MCP sunucusu) ajanı tokenlarınıza, bileşenlerinize ve gerçek spesifikasyonlarınıza yönlendirir; böylece varsayılan bir görünüme değil, bir markaya göre çalışır.

Çıkarılacak ders, her ajanın öğrettiğiyle aynıdır: Gemini CLI varsayılan olarak zevke sahip değildir. Ona kısıtlamalar verdiğinizde — bir tasarım sistemi, bir estetik skill ve somut referanslar — iyi tasarım üretir. Open Design tam da bu girdileri paketler; ikisinin birbirine uymasının nedeni budur (aşağıda daha fazlası).

Tasarım çalışması için Gemini CLI’yi sıfırdan kurun

İşte temiz bir makineden, arayüz kurup doğrulayabilen bir Gemini CLI’ye giden tam yol.

# 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

• Tasarım kurallarınızı yazın: Tokenlarınızı, temel öğelerinizi ve kurallarınızı GEMINI.md içine koyun ve Gemini’yi onlara yönlendirin; böylece çıktı sıradan bir görünüme düşmek yerine bir markayla eşleşir.
• Tarayıcı doğrulaması ekleyin: Bir Playwright ya da tarayıcı MCP’si bağlayın; böylece Gemini gerçek bir tarayıcıda işler ve yalnızca derlemenin geçtiğini onaylamak yerine çıktısını farklı kırılma noktalarında denetler.

Ekran görüntüsünden arayüze iş akışı

Gemini CLI ile en yüksek getirili tasarım döngüsü, bir referans görselini çalışan, duyarlı bir arayüze dönüştürmek ve eşleşene dek yinelemektir — çıktıyı referansla karşılaştırmak için çok kipli modele dayanarak.

1. Elinizdeki en net görsel referanslarla başlayın — ve tek bir kahraman görselle değil, birden çok durumu (masaüstü ve mobil, üzerine gelme, boş, yükleniyor) dahil edin.
2. İstemde belirgin olun; belirsiz istemler güçlü bir modelle bile sıradan arayüz üretir.
3. Tasarım sisteminizi ve kurallarınızı GEMINI.md içinde tutun ve Gemini’ye tokenların ve kanonik temel öğelerin nerede olduğunu söyleyin.
4. Bir dev sunucusu çalıştırın ve Gemini’ye gerçek bir tarayıcıda işletip kırılma noktalarına yeniden boyutlandırarak sonucu kontrol ettirin.
5. Gemini’ye uygulamasını yalnızca derlendiğini onaylamak yerine ekran görüntüleriyle karşılaştırtarak yineleyin.

Bir görseli isteme eklemek için @ ile referans verin, ardından somut kısıtlamalar verin:

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.

İstemleri küçük ve odaklı tutun, iyi yinelemeleri commit edin ve kötü olanları geri alın (geri aldığınızda Gemini’ye söyleyerek); böylece her geçiş temiz bir temel üzerine kurulur.

GEMINI.md, MCP ve uzantılar

Üç genişletme noktası, Gemini CLI’yi sürekli tasarım çalışması için kullanışlı kılar ve üçü de açık bir tasarım iş akışına temiz biçimde oturur.

• GEMINI.md bağlamı: Proje kuralları depo kökündeki bir GEMINI.md içinde yaşar (genel ve ekip katmanlarıyla). Her çalıştırmada okunan, tasarım kurallarınız için kalıcı yuvadır.
• MCP sunucuları: MCP sunucularını ~/.gemini/settings.json altında yapılandırın — tasarım bağlamını ve dış araçları, en çok da Figma MCP sunucusunu, yalnızca Gemini’de değil ajanlar arasında işe yarayacak şekilde taşımak için taşınabilir yol.
• 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, çoklu ajan yetenekleridir — tam olarak Open Design’ın her projede yeniden yaratmak yerine düzenlemek için kurulduğu türden şeyler.

Tasarım için Gemini CLI vs Codex vs Claude Code vs Cursor

Tasarım çalışması için tek bir kazanan yoktur — her ajanın farklı bir güçlü yanı vardır ve deneyimli ekipler onları üst üste yığar. Adil bir özet:

Toplulukta sürekli tekrarlanan kanı, zevkin insanlardan geldiğidir: hepsi skill, referans ve kısıtlama olmadan sıradan bir estetiğe düşer. Çözülmesi gereken asıl sorun budur — ve bu model biçiminde değil, tasarım aracı biçimindedir.

Tuzaklar ve “yapay zeka döküntüsü” görünümünden nasıl kaçınılır

Yapay zekayla üretilen tasarım hakkındaki en yaygın yakınma, sıradan görünmesidir — yumuşak gradyanlar, havada duran paneller, aşırı büyük yuvarlatılmış köşeler, dramatik gölgeler, “bunu bir yapay zeka yaptı diye bağıran” bir Inter-ve-mor havası. Bildirilen diğer sorunlar arasında bozuk mobil yerleşimler ve arayüz metnine sızan talimatlar yer alır. Bunların hiçbiri yalnızca Gemini CLI’ye özgü değildir; herhangi bir ajan özenle seçilmiş bir tasarım bağlamı olmadan çalıştığında olan şeylerdir.

• Bir estetik skill ekleyin: Özenle seçilmiş bir tasarım skill’i, ajanı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.
• Gerçek bir tarayıcıda doğrulayın: Çok kipli modeli kullanarak farklı kırılma noktalarında işleyip kendini denetleyin; böylece yerleşimler 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 içine yazın: “Kahraman kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” gibi stil kurallarını 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ı elle, her proje için sürdürmek, Open Design’ın ortadan kaldırdığı zahmettir.

Open Design içinde Gemini CLI ile tasarım

Open Design, yukarıdaki iş akışının sürekli istediği açık kaynaklı tasarım katmanıdır. Gemini CLI’yi birinci taraf bir adaptör olarak ele alır ve onu özenle seçilmiş bir skill ve tasarım sistemi kütüphanesiyle, yapılandırılmış bir işleme hattıyla ve yerel bir masaüstü arayüzüyle sarmalar — böylece Gemini’yi iyi yapan tasarım bağlamı, her seferinde elle kurulmak yerine ilk çalıştırmadan itibaren oradadır. İkisi de açık kaynaklı ve yerel önceliklidir; bu da eşleşmeyi doğal kılar.

1. Open Design’ı yükleyin ve ajanınız olarak Gemini CLI’yi seçin.
2. Google hesabınız ya da Gemini API anahtarınızla (BYOK) kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden geçirilmez.
3. Bir tasarım sistemi ve bir skill seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları üretin.
4. Her çıktı ve DESIGN.md dosyası, barındırılan bir bulutta değil, kendi deponuzda yaşar.

Aynı Gemini CLI ajanı, aynı anahtar — artı çevresinde gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve Apache-2.0’dır; bu yüzden çalışmanızla ya da kimlik bilgilerinizle ilgili hiçbir şey makinenizden çıkmaz.

Sıkça sorulan sorular

1. 01 Gemini CLI gerçekten tasarım işi yapabilir mi? +

   Evet — bağlamda bir estetik skill, bir tasarım sistemi ve gerçek referans görseller olduğunda Gemini CLI üretim kalitesinde, duyarlı bir arayüz üretir ve güçlü çok kipli modelleri çıktıyı referanslarla karşılaştırarak doğrular. Bu bağlam olmadan sıradan bir görünüme düşme eğilimindedir; Open Design’ın doldurduğu boşluk da budur.

2. 02 Gemini CLI ile tasarım yapmak için ödeme yapmam gerekiyor mu? +

   Hayır — bir Google hesabıyla oturum açmak cömert bir ücretsiz katman sağlar; ayrıca bir Gemini API anahtarı getirebilir (BYOK) ya da Vertex AI kullanabilirsiniz. Open Design her iki durumda da kimlik bilgilerinizi asla aracı olarak geçirmez.

3. 03 Gemini CLI’yi özellikle tasarım için iyi kılan nedir? +

   İki şey: modelleri güçlü biçimde çok kiplidir, bu yüzden referans ekran görüntülerini iyi okur; ve 1M tokenlık bağlamı, bütün bir tasarım sistemini ve referans kümesini aynı anda tutabilir. İkisi de yardımcı olur — ama zevk yine de sizin sağladığınız tasarım sisteminden, skill’den ve referanslardan gelir.

4. 04 Ön uç tasarımı için Gemini CLI mi Claude Code mu? +

   İkisi de güçlüdür. Claude Code, belirli, kod tabanı farkında tasarım kararlarıyla bilinir; Gemini CLI’nin üstünlüğü ise çok kipli anlama, artı devasa bir bağlam ve ücretsiz bir katmandır. Birçok ekip ikisini de kullanır — Open Design, tasarım iş akışınızı değiştirmeden ajanları değiştirmenize olanak tanır.

5. 05 Gemini CLI’yi Figma’ya nasıl bağlarım? +

   Figma MCP sunucusunu ~/.gemini/settings.json içindeki mcpServers altına ekleyin. Gemini bu sayede gerçek tasarım bağlamını — bileşenler, değişkenler, yerleşim verileri — çekebilir; böylece üretilen kod, kaynağı yaklaştırmak yerine ona uyar.

6. 06 Open Design, Google ile bağlantılı mı? +

   Hayır. Gemini CLI bir Google ürünüdür; Open Design, onu birinci taraf bir adaptör olarak destekleyen bağımsız, açık kaynaklı bir projedir. Gemini, Google’ın ticari markasıdır.

7. 07 Dosyalarım ve kimlik bilgilerim güvende mi? +

   Evet — Open Design yerel öncelikli ve Apache-2.0’dır. Dosyalarınız, çıktılarınız ve DESIGN.md’niz kendi deponuzda kalır; Google kimlik bilgileriniz ise doğrudan ajanınız tarafından kullanılır, asla Open Design sunucularına yönlendirilmez.