AI İLE GERÇEK PROJE NASIL GELİŞTİRİLİR? | GOOGLE STITCH MCP | YAPAY ZEKA HATTI #2
Ömer Göçmen | Yapay Zeka & Otomasyon · 2026-04-20
💡 Hızlı Bilgi
1. Git'i bilgisayarınıza kurun ve kodları indirmek için kullanın.
2. Tasarımları (Stitch'ten) kod haline dönüştürmek için Open Code kullanın.
3. MCP (Machine Configuration Protocol) ile yapay zekanın dış servislerle (Stitch gibi) etkileşimini sağlayın.
4. Stitch'ten kod üretirken MCP ayarlarını yapın ve Open Code'a entegre edin.
5. Kodlama konusunda endişeleriniz varsa, AI Studio'yu alternatif olarak kullanın.
6. Open Code'a MCP konfigürasyonunu eklemek için komut istemini (CMD) kullanın.
7. Yapay zekaya projenin amacını ve gereksinimlerini anlatan detaylı plan (plan.md) ve ürün (product.md) dokümanları sağlayın.
8. Yapay zekadan, plan ve ürün dokümanlarına göre tasarımları (Stitch'ten) koda dönüştürmesini isteyin.
9. Oluşturulan kodu GitHub'a yükleyerek versiyonlayın ve projeyi güvence altına alın.
10. Dokümanları (plan.md, product.md vb.) ayrı bir klasöre taşıyarak projeyi düzenli hale getirin.
11. Proje için bir README dosyası oluşturarak kurulum ve kullanım bilgilerini ekleyin.
📊 Detaylı Açıklama
1. Git'i bilgisayarınıza kurun ve kodları indirmek için kullanın: Videonun başında, önceki bölümde geliştirme için kullanılan kodların bilgisayara indirilmesi gerektiği vurgulanıyor. Git'in bu işlem için temel bir araç olduğu belirtiliyor. Eğer bilgisayarda Git yüklü değilse, resmi web sitesinden indirip basit bir kurulumla (next next adımları) kurulabileceği anlatılıyor. Bu, projeye başlamak için ilk adımdır.
2. Tasarımları (Stitch'ten) kod haline dönüştürmek için Open Code kullanın: Bu bölümde temel amaç, daha önce Stitch'te oluşturulan tasarımların (hem light hem dark temalar için) otomatik olarak koda dönüştürülmesidir. Bu işlem için Open Code adlı yapay zeka tabanlı bir geliştirme aracı kullanılacaktır. Bu, tasarımın görsel unsurlarını (renkler, butonlar, yapılar) alıp web sitesi koduna çevirme sürecini hızlandırır.
3. MCP (Machine Configuration Protocol) ile yapay zekanın dış servislerle (Stitch gibi) etkileşimini sağlayın: MCP, yapay zekanın dış dünyadaki servislere bağlanabilmesini sağlayan bir mekanizmadır. Örneğin, yapay zeka Twitter'a tweet atmak istiyorsa, MCP aracılığıyla bu yetkiyi alabilir. Bu videoda, Open Code'un Stitch'teki tasarımlara erişebilmesi için MCP'nin kullanılması gerekmektedir.
4. Stitch'ten kod üretirken MCP ayarlarını yapın ve Open Code'a entegre edin: Stitch'ten tasarım kodları üretmek için öncelikle "MCP Ayarla" butonuna basılarak bir API anahtarı oluşturulur. Ardından, kullanılacak IDE (örneğin Open Code) seçilir ve verilen konfigürasyon kodu Open Code'a eklenir. Bu adım, Open Code'un Stitch'teki tasarımlara yetkiyle erişmesini sağlar.
5. Kodlama konusunda endişeleriniz varsa, AI Studio'yu alternatif olarak kullanın: Eğer kullanıcılar doğrudan kodlama ile uğraşmak istemiyorlarsa, Google'ın sunduğu AI Studio'yu kullanma seçeneği de sunuluyor. AI Studio, tasarımları otomatik olarak koda dönüştürmek için bir web tabanlı yapay zeka aracıdır ve büyük ölçüde ücretsizdir.
6. Open Code'a MCP konfigürasyonunu eklemek için komut istemini (CMD) kullanın: Oluşturulan MCP konfigürasyon kodunu Open Code'a eklemenin yolu, komut istemini (CMD) açıp "open code" yazarak Open Code'u çalıştırmak ve ardından kopyalanan kodu yapıştırmaktır. Bu, Open Code'un MCP'yi tanımasını sağlar.
7. Yapay zekaya projenin amacını ve gereksinimlerini anlatan detaylı plan (plan.md) ve ürün (product.md) dokümanları sağlayın: Yapay zekanın doğru ve kapsamlı bir kod üretmesi için, projenin ne amaçla yapıldığı, hangi teknolojilerin kullanılacağı, yapısal gereksinimler gibi bilgileri içeren "plan.md" ve "product.md" gibi dokümanlar oluşturulmalıdır. Bu dokümanlar, yapay zekanın kafasına göre değil, belirlenen plana göre hareket etmesini sağlar.
8. Yapay zekadan, plan ve ürün dokümanlarına göre tasarımları (Stitch'ten) koda dönüştürmesini isteyin: Ana prompt, yapay zekaya Stitch MCP aracılığıyla ilgili tasarımı koda dönüştürmesini, tasarımdaki stilleri, renkleri, butonları ve elementleri kullanmasını ve projenin gereksinimlerini "plan.md" ve "product.md" dosyalarına göre uygulamasını söylemektir. Bu, hem tasarımsal sadakati hem de proje mantığını birleştirir.
9. Oluşturulan kodu GitHub'a yükleyerek versiyonlayın ve projeyi güvence altına alın: Başarılı bir kod geliştirildikten sonra, projenin kaybolmaması ve geçmiş sürümlere dönülebilmesi için GitHub'a yüklenmesi öneriliyor. Yeni bir repository oluşturularak kodlar buraya push edilir. Bu, projenin güvenliğini sağlar ve ilerideki geliştirmeler için temel oluşturur.
10. Dokümanları (plan.md, product.md vb.) ayrı bir klasöre taşıyarak projeyi düzenli hale getirin: Projenin daha düzenli olması için, "plan.md", "product.md" gibi tüm doküman dosyaları "doc" adında ayrı bir klasöre taşınır. Bu, projenin yapısını daha anlaşılır hale getirir.
11. Proje için bir README dosyası oluşturarak kurulum ve kullanım bilgilerini ekleyin: GitHub repository'sinde projenin ne işe yaradığı, nasıl kurulduğu ve çalıştırıldığı gibi bilgileri içeren bir "README.md" dosyası oluşturulur. Bu dosya, projeyi kullanan veya inceleyen kişilere rehberlik eder.
🎯 Uzman Yorumu
Bu video, yapay zekanın tasarım ve kodlama süreçlerini nasıl devrimleştirebileceğine dair harika bir örnek sunuyor. Özellikle "AI-assisted development" (yapay zeka destekli geliştirme) alanında önemli bir adım atıldığını görüyoruz. Burada vurgulanan temel noktalar, yapay zekanın sadece kod yazmakla kalmayıp, aynı zamanda tasarım uyumluluğunu ve proje gereksinimlerini de anlayıp uygulayabildiğini gösteriyor.
MCP'nin Önemi ve Geleceği: MCP kavramı, yapay zekanın sadece soyut kod üreten bir araç olmaktan çıkıp, gerçek dünya servisleriyle entegre olabilen bir "akıllı asistan" haline gelmesinin anahtarı. Bu, gelecekte çok daha karmaşık ve entegre yapay zeka uygulamalarının önünü açacaktır. Düşünün ki, bir yapay zeka sadece bir web sitesi tasarlamakla kalmayacak, aynı zamanda o web sitesinin arka planındaki veritabanını güncelleyebilecek, e-posta gönderebilecek veya sosyal medyada paylaşımlar yapabilecektir. Bu, "low-code/no-code" platformlarının evrimleşmiş hali gibi düşünülebilir.
Dokümantasyonun Gücü: Yapay zekanın doğru ve etkili çalışması için detaylı dokümantasyonun ne kadar kritik olduğunu bir kez daha görüyoruz. "plan.md" ve "product.md" gibi dosyalar, yapay zekaya yol gösteren bir harita görevi görüyor. Bu, yapay zeka modellerinin sadece mevcut veriyi işlemekle kalmayıp, aynı zamanda verilen talimatları anlayıp yorumlayabilme yeteneğini de ortaya koyuyor. Gelecekte, bu dokümantasyonların daha da zenginleştiğini ve hatta doğal dil işleme ile daha da kolaylaştığını görebiliriz.
Versiyonlama ve Güvenlik: Geliştirilen kodun GitHub gibi platformlarda versiyonlanması, sadece bir yedekleme yöntemi değil, aynı zamanda bir kalite güvencesi ve işbirliği aracıdır. Bu, yapay zeka tarafından üretilen kodun da insan tarafından geliştirilen kod kadar değerli olduğunu ve aynı süreçlerden geçmesi gerektiğini gösteriyor. Bu, özellikle büyük projelerde ve ekip çalışmalarında hayati önem taşıyor.
Trendler ve Tahminler: Bu tür teknolojiler, yazılım geliştirme süreçlerini kökten değiştiriyor. Önümüzdeki 5-10 yıl içinde, yapay zeka destekli kodlama araçları standart hale gelecek. Geliştiriciler, daha çok "yapay zeka ile nasıl daha iyi çalışırım?" sorusuna odaklanacaklar. Tasarımcılar, yapay zekanın yeteneklerini daha iyi anlamak ve tasarımlarını daha "yapay zeka dostu" hale getirmek için çalışacaklar. Kodun kalitesi ve verimliliği, kullanılan yapay zeka modelinin kalitesiyle doğrudan orantılı olacak. Bu videodaki "Open Code'da kullandığın modelin kalitesi, sonucun kalitesini belirler" ifadesi bu trendin en net göstergesi.
Sonuç: Bu video, yapay zekanın sadece bir "kod yazma" aracı olmadığını, aynı zamanda bir "tasarım anlayabilen", "gereksinimleri yorumlayabilen" ve "dış servislerle entegre olabilen" bir geliştirme ortağı olabileceğini gösteriyor. Bu alandaki gelişmeler inanılmaz hızlı ve bu yeni araçları benimseyenler, geleceğin yazılım geliştirme dünyasında büyük bir avantaja sahip olacaklar.