Google Stitch CLI: Terminal Üzerinden Yapay Zeka ile Arayüz Tasarımı

İki tasarım yan yana duruyor ve farkı görmek için uzman olmaya gerek yok: biri sıradan bir sayfa gibi dururken diğeri dengeli boşlukları, net hiyerarşisi ve tutarlı renkleriyle hemen öne çıkıyor. Güzel olanın sırrı, anlatıcının yayımlandığını söylediği Stitch CLI adlı yeni araçta yatıyor ve sunumun tamamı bu farkın nasıl üretildiğini adım adım gösteriyor.

Önce zemini kuralım: Stitch, Google tarafından geliştirilen ve yazılan komutlardan web ile mobil arayüz üreten tasarım platformudur; arka planda Gemini modelleri çalışır. Anlatıcı siteyi kelime oyunu ve haber sitesi gibi gerçek işlerde uzun süredir kullandığını söylüyor; bu çalışma modları ve Figma ile HTML/CSS çıktısı codecademy.com adresindeki adım adım öğreticide ayrıntılı biçimde doğrulanmaktadır ve ücretsiz katmanın üretim sınırları orada açıkça listelenmektedir.

Stitch CLI ajanların içine giriyor

Asıl yenilik CLI katmanındadır: Stitch web arayüzünün arkasındaki yetenekler , beceri paketleri, API çağrıları ve tasarım kuralları artık görsel panele bağlı kalmadan Claude Code, Codex, Cursor veya Antigravity gibi ajanların içinden kullanılabiliyor. Anlatıcının asistana verdiği ilk prompt özellikle sadedir ve yine de araç doğru komutları çağırır. Geliştiricilere dönük bu programatik yüzeyin nasıl çağrılacağı npmjs.com üzerindeki resmi paket sayfasında örnek kodlarla belgelenmiştir ve araç listeleme ile proje oluşturma işlevleri orada açıkça tanımlanmaktadır.

Kurulum şaşırtıcı derecede basittir: bilgisayarda Node.js 20 veya üstü bulunmalı, ardından tek npm komutuyla araç kurulur ve stitch login komutuyla bir Google hesabı bağlanır; ücretli planlı bir hesap limitler açısından daha güvenlidir. Sürüm kontrolü ve yaklaşık elli komutluk liste terminalden doğrulanır, asistana verilen prompt sonrası yalnızca tek onay istenir. Bu beş dakikalık kurulum akışı justinmckelvey.com adresindeki uygulamalı rehberde adım adım anlatılmaktadır ve ücretsiz kotayla günlük kullanımda üç ila beş kat hızlanma sağlandığı orada aktarılmaktadır.

Mevcut siteyi baştan tasarlama ve dışa aktarma

Sunumun en ikna edici anı mevcut bir sitenin yeniden tasarımıdır: ajan kaynak kodu okur, koyu tema uygular, sayfayı baştan kurar ve sonucu Stitch tarafına kaydeder; beğenilmeyen yönler ek komutlarla değiştirilir. Bu sonsuz tuval üzerinde paralel fikirleri deneme ve DESIGN.md dosyasıyla tasarım kurallarını taşıma yaklaşımı blog.google adresinde yayımlanan resmi duyuruda ayrıntılı biçimde anlatılmaktadır ve sesli komutlarla gerçek zamanlı düzenleme imkanı orada vurgulanmaktadır.

Kaydedilen projeler ekran seçilip tek tıkla AI Studio , Figma, Netlify veya Lovable gibi platformlara gönderilir; yani tasarım ister kod projesine, ister yayına, ister ortak çalışma dosyasına dönüşür. Stitch üzerinden AI Studio üretim moduna uzanan bu yirmi ila kırk beş dakikalık uçtan uca akış mindstudio.ai adresindeki kapsamlı rehberde örnekleriyle açıklanmaktadır ve Material Design 3 bileşenlerinin kod üretimindeki rolü orada net biçimde işlenmektedir.

Kapanışta anlatıcı bir kıyas sitesi için üretilen iki farklı tasarımı gösterir: liderlik tablosu ve puan matrisi baştan yorumlanmış, renk skalası modele bırakılmış, detay sayfalar ise isteğe bağlı bırakılmıştır ve her şey ücretsiz katmanda denenmiştir. Tasarımın kod tarafına taşınmasındaki aynı köprü mantığı developers.google.com üzerindeki uygulamalı codelab belgesinde örneklenmektedir ve MCP protokolü üzerinden tasarım verisinin çekilmesi orada adım adım gösterilmektedir.