Antigravity ve Stitch MCP ile Tasarımdan Koda Dönüştürme

1. Giriş

Bu codelab'de, yapay zeka destekli tasarımı aracı öncelikli bir geliştirme ortamıyla birleştirerek üretime hazır bir web sitesi oluşturacaksınız. Yüksek doğrulukta bir kullanıcı arayüzü oluşturmak için Google Stitch'i kullanacak, ardından Model Context Protocol (MCP) aracılığıyla Antigravity IDE'ye bağlayacaksınız. Son olarak, "Tasarım DNA'sını" getirmek ve piksel açısından mükemmel bir React uygulaması uygulamak için bağımsız bir aracı kullanacaksınız.

Yapacaklarınız

• Stitch'te kullanıcı arayüzü oluşturma: Google Stitch'te tam ölçekli bir web tasarımı oluşturmak için doğal dil kullanın.
• MCP ile köprü oluşturma: Model Context Protocol'ü kullanarak Antigravity'yi Stitch projenize bağlayın.
• Bağımsız Uygulama: Tasarım jetonlarını getirmek ve React/Tailwind projesi oluşturmak için Antigravity'nin "Agent Tab"ını kullanın.
• Doğrulama ve İyileştirme: Kodu orijinal tasarımla karşılaştırmak için entegre tarayıcıyı kullanarak "Vibe Check" yapın.

Neler öğreneceksiniz?

• Google Stitch'i kullanarak yüksek kaliteli kullanıcı arayüzü tasarımlarını hızlıca prototipleme
• Antigravity IDE'de MCP sunucularını yapılandırma
• Görsel tasarım meta verilerini modüler koda çevirmek için otonom aracıları kullanma

Gerekenler

• Chrome web tarayıcısı
• Antigravity IDE'nin yüklü olması
• Google Stitch hesabı
• Stitch API anahtarı
• Yerel olarak yüklenmiş Node.js (v18+)

Başlamadan önce

1. Google Cloud Console'daki proje seçici sayfasında bir Google Cloud projesi seçin veya oluşturun.
2. Cloud projeniz için faturalandırmanın etkinleştirildiğinden emin olun. Bir projede faturalandırmanın etkin olup olmadığını kontrol etmeyi öğrenin .

Google Cloud kredileri için: Antigravity'yi Google Cloud projeleriyle kullanmanıza yardımcı olmak üzere bu bağlantıyı kullanarak ücretsiz Google Cloud kredilerinizi kullanın. Krediyi etkinleştirmek ve yeni bir proje oluşturmak için buradaki talimatları uygulayabilirsiniz.

3. stitch.withgoogle.com adresine gidin ve oturum açabildiğinizden emin olun.
4. Antigravity IDE'nin yüklü olduğundan emin olun (antigravity.google adresinde mevcuttur).

2. Google Stitch'te tasarım oluşturma

Agent'ın takip etmesi için görsel bir "doğruluk kaynağı" gerekir. Kod yazmadan önce estetiği tanımlamamız gerekir.

1. Platforma erişme: stitch.withgoogle.com adresine gidin.
2. Proje Türünü Seçin: Ana kontrol panelinde Yeni tasarım başlat açma/kapatma düğmesini bulun. Tasarımınızın tarayıcı tabanlı düzenler için optimize edildiğinden emin olmak üzere Web'i tıklayın.
3. Modelinizi Seçin: İstem kutusunun içindeki model açılır menüsünü (şu anda 3.0 Flash gösteriliyor) tıklayın. En gelişmiş akıl yürütme ve düzen oluşturma için Gemini 3'ün seçildiğinden emin olun.
4. Vizyonunuzu Açıklayın: "Tasarımınızı açıklayın" etiketli metin alanına isteminizi girin:

"LaunchPad adlı bir uzay teknolojisi girişimi için modern bir SaaS açılış sayfası tasarla. Gece mavisi ve neon mor palet kullan. "Başlayın" düğmesi içeren bir lokomotif bölüm, 3 sütunlu bir özellikler tablosu ve cam benzeri fiyatlandırma tablosu ekleyin." 5. Oluştur: Oluşturma sürecini başlatmak için ok simgesini (model seçicinin yanında) tıklayın. 6. İyileştirme ve Adlandırma: Kullanıcı arayüzü oluşturulduktan sonra üstteki başlıkta projenize bir ad verin. LaunchPad olarak adlandırın. IDE'ye geçmeden önce belirli öğeleri hassaslaştırmak için sohbet kenar çubuğunu kullanabilirsiniz.

[!İPUCU] Ayrıca,

"Bu istemleri deneyin"

bölümüne göz atın.

3. Antigravity MCP'yi yapılandırma

Antigravity Agent'ın tasarımınızı "okumasına" izin vermek için güvenli bir API anahtarı oluşturmanız ve Stitch MCP sunucusunu eklemeniz gerekir.

Stitch API anahtarını oluşturma

1. Google Stitch'te sağ üst köşedeki profil resminizi tıklayın.
2. Açılır menüden Stitch ayarları'nı seçin.
3. API anahtarı bölümüne gidin.
4. Anahtar oluştur düğmesini tıklayın.
5. Anahtarı kopyalama: Oluşturulan anahtarı hemen kopyalayın ve güvenli bir şekilde saklayın. Sonraki adımda bu kimliğe ihtiyacınız olacak.

Antigravity'de Stitch MCP'yi yapılandırma

1. Antigravity IDE'yi açın.
2. Aracı Yöneticisi'ni açın.

İstediğiniz zaman CMD+E (Mac) veya CTRL+E (Windows) tuşlarına basarak ya da menü çubuğunun sağ üst kısmındaki Open Editor (Düzenleyiciyi Aç) ve Open Agent Manager (Ajan Yöneticisi'ni Aç) düğmelerini kullanarak Ajan Yöneticisi ile düzenleyici arasında geçiş yapabilirsiniz. .

3. + Çalışma alanını aç'ı tıklayın.

Çalışma alanında yeni bir görüşme başlatmak için Görüşme başlat sekmesinden istediğiniz çalışma alanını seçin veya kenar çubuğunda çalışma alanı adının yanındaki artı düğmesine basın.

4. Yeni Çalışma Alanı Aç'ı tıklayın, çalışma alanını LaunchPad-Project olarak adlandırın ve yerel bir dizin seçin. Bu sayede, Agent'ın diğer projeleri karıştırmadan dosyaları oluşturabileceği belirli bir kök klasörü olur.

Stitch MCP'yi yapılandırma

1. Yeni çalışma alanınızda Aracı Yöneticisi'ne (Mac için CMD+E veya Windows için CTRL+E) geri dönün ve MCP Sunucuları'nı seçin.

MCP mağazasını, düzenleyicinin aracı bölmesinin üst kısmındaki "..." açılır listesinden açın.

Antigravity, düzenleyicinin yerel araçlarınıza, veritabanlarınıza ve harici hizmetlerinize güvenli bir şekilde bağlanmasına olanak tanıyan bir standart olan Model Context Protocol'ü (MCP) destekler. Bu entegrasyon, yapay zekaya yalnızca düzenleyicinizde açık olan dosyaların ötesinde gerçek zamanlı bağlam sağlar.

MCP, Antigravity ile Google Stitch arasında köprü görevi görür. MCP, tasarım jetonlarını manuel olarak dışa aktarmak veya onaltılık kodları ve düzen meta verilerini düzenleyiciye kopyalamak yerine, Antigravity'nin gerektiğinde Tasarım DNA'sını doğrudan Stitch projenizden getirmesine olanak tanır.

2. "Stitch" ifadesini arayın ve Yükle'yi tıklayın.
3. İstendiğinde Stitch API anahtarınızı yapılandırma alanına yapıştırın.
4. Doğrulama: Aracı sohbetinde List my Stitch projects. yazın. LaunchPad döndürülürse hazırsınız demektir.

5. Doğrulama: Aracı sohbetinde List my Stitch projects. yazın. Aracı LaunchPad değerini döndürürse köprü başarıyla yapılandırılmıştır.

4. Tasarım Bağlamını Getirme

Aracının artık kod doğruluğunu sağlamak için tasarım meta verilerini alması gerekiyor.

1. Antigravity sohbetinde şunu yazın: "Use the Stitch MCP to fetch the ‘LaunchPad' project. Renk paletini ve tipografiyi çıkar, ardından kök dizinimde bir DESIGN.md dosyası oluştur."
2. İnceleme: Temsilcinin çıkardığı onaltılık kodları ve düzen kurallarını görmek için yeni oluşturulan DESIGN.md öğesini açın.

5. Uygulama (Derleme)

Tasarımı çalışan bir React uygulamasına çevirmek için ajanı kullanın.

1. "Oluştur" istemini girin:

"Bu web sitesinin tamamını şimdi oluşturmak istiyorum. React ve Tailwind CSS'yi kullanın. Bileşenlerin modüler olduğundan emin olun. İşlem tamamlandığında geliştirme sunucusunu çalıştır ve entegre tarayıcıda bana göster." 2. Temsilciyi izleyin: Terminalde projeyi iskelet haline getirir, bileşenleri düzenleyiciye yazar ve önizlemeyi entegre tarayıcıda açar.

6. İnceleme ve Geliştirme

Çıkışı doğrulayın ve görsel tutarsızlıkları düzeltmek için aracı kullanın.

1. Entegre Tarayıcı çıkışını orijinal Stitch tasarımınızla karşılaştırın.
2. Herhangi bir öğe (ör. düğme dolgusu veya yazı tipi ağırlığı) eşleşmiyorsa istemi şu şekilde yazın: "The ‘Get Started' button padding is slightly off. Refer back to the Stitch design and update the Tailwind classes." ("Başlayın" düğme dolgusu biraz yanlış. Stitch tasarımına geri dönün ve Tailwind sınıflarını güncelleyin.)
3. Temsilci, tasarım bağlamını yeniden getirir ve düzeltmeyi anında uygular.

7. Özet ve Sonraki Adımlar

Tebrikler! Antigravity ve Stitch MCP'yi kullanarak yüksek kaliteli tasarım ile işlevsel kod tabanı arasındaki boşluğu başarıyla doldurdunuz.

Yaptıklarınızın özeti:

• Gemini 3'ü kullanarak Stitch'te bir kullanıcı arayüzü tasarladı.
• Güvenli bir API anahtarı oluşturup Antigravity MCP'yi yapılandırdıysanız.
• React + Tailwind sitesi oluşturmak ve doğrulamak için bağımsız bir aracı kullanma