Screenshot to CodeNedir?
Vibe CodingBir ekran görüntüsünü, tasarım taslağını ya da ekran kaydını HTML, React veya Vue koduna çeviren açık kaynak araç. Kendi bilgisayarına ücretsiz kurabilir ya da hazır web sürümünü aylık ücretle kullanabilirsin.
Mindi Ne Düşünüyor?✅ Ekran görüntüsünü, Figma taslağını, hatta kısa bir ekran kaydını çalışan arayüz koduna çeviriyor. Kodu MIT lisanslı olduğu için kendi makinende ücretsiz kurabiliyorsun.
⚠️ Sadece ön yüzü (görünen kısmı) üretiyor. Kendin kurarsan kod ücretsiz ama model kullanımı için OpenAI, Anthropic ya da Gemini faturası sana çıkar.
🔀 v0 fikri yazıyla anlatıp tüm uygulamayı kurdururken, Screenshot to Code eldeki bir görseli olabildiğince birebir kopyalamaya odaklanıyor.
Screenshot to Code Hakkında
✓ Screenshot to Code Kimler İçin?
✕ Screenshot to Code Kimler İçin Uygun Değil?
Screenshot to Code Detaylı İnceleme
Screenshot to Code, Abi Raja'nın Kasım 2023'te GitHub'da yayımladığı açık kaynak bir proje. Fikir basit: bir web sayfasının ekran görüntüsünü veriyorsun, yapay zeka o sayfayı aynı görünecek şekilde baştan kodluyor. Proje kısa sürede geliştiricilerin en çok yıldız verdiği yapay zeka depolarından biri oldu ve hazır web sürümünün sayfasına göre 72 binin üzerinde GitHub yıldızına ulaştı. Bugün hem kendi bilgisayarına kurabileceğin ücretsiz bir sürümü hem de New York merkezli WhimsyWorks şirketinin işlettiği ücretli bir web sürümü var.
Aracın asıl işi "görüntüden koda" geçiş. Ekran görüntüsü, tasarım taslağı ya da Figma'dan aldığın bir kare yeterli. Kodun hangi teknolojiyle yazılacağını sen seçiyorsun, sonuç beğenmediğin yerde de yazışarak düzeltme isteyebiliyorsun. v0, Bolt.new ve Lovable gibi araçlar bir fikirden yola çıkıp tüm uygulamayı kurmaya çalışırken, Screenshot to Code eldeki görseli olabildiğince birebir yeniden üretmeye odaklanıyor. Yani hayal ettiğin şeyi değil, gösterdiğin şeyi kodluyor.
Temel Özellikler
Görüntüden kod üretme aracın merkezinde duruyor. Çıktıyı altı seçenekten biriyle alabiliyorsun: HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap ve Ionic + Tailwind. Tailwind •hazır sınıflarla hızlı tasarım yapmayı sağlayan bir CSS kütüphanesi• seçeneklerin çoğunda varsayılan olarak geliyor.
Ekran kaydından prototip çıkarma, aracı benzerlerinden ayıran özelliklerden biri. Bir sitede menü açılırken ya da bir butona tıklanırken neler olduğunu kaydedip yüklediğinde, araç bu hareketi de taklit eden bir prototip kurmaya çalışıyor. Bu özellik için Gemini anahtarı gerekiyor.
Model seçimi sende. Kendin kurduğunda OpenAI, Anthropic ya da Google Gemini anahtarlarından en az birini eklemen yeterli. Birden fazla anahtar eklersen araç aynı görüntü için farklı modellerden sonuç üretip karşılaştırmana izin veriyor. Proje sahibi en iyi sonuç için Gemini'yi öneriyor, çünkü Gemini ekran görüntüsündeki gerçek logo ve görselleri ayıklayıp koda yerleştirebiliyor.
Görselleri tamamlama da işin içinde. Ekran görüntüsünde fotoğraf olan yerlere benzer görseller üretmek, arka plan silmek ve görsel düzenlemek için Replicate hesabı bağlanabiliyor. Bu hesap olmadan bu üç özellik çalışmıyor.
Kullanım Senaryoları
Bir tasarımcıdan Figma taslağı geldi ve hızlıca çalışan bir ön yüz görmek istiyorsan, taslağın ekran görüntüsünü vererek iskeleti dakikalar içinde çıkarabilirsin. Kodu sonra kendi projene taşıyıp düzenlersin.
Beğendiğin bir sayfanın düzenini incelemek isteyen öğrenciler için de işe yarıyor. Sayfanın hangi bloklardan oluştuğunu, Tailwind sınıflarının nasıl kullanıldığını üretilen koda bakarak görebilirsin.
Müşterisine hızlı prototip göstermesi gereken serbest çalışanlar için ekran kaydı özelliği değerli. Rakip bir sitenin akışını kaydedip "bunun gibi bir şey" diyen müşteriye kısa sürede tıklanabilir bir taslak gösterebilirsin.
Nasıl Başlanır?
En kısa yol hazır web sürümü. screenshottocode.com'a girip hesap açıyorsun, bir plan seçip görüntünü yüklüyorsun.
Kendin kurmak istersen depodaki talimatları izliyorsun. Uygulamanın ön yüzü React ve Vite, arka ucu ise Python ile yazılmış FastAPI. İkisini ayrı ayrı çalıştırabilir ya da depodaki Docker Compose dosyasıyla tek komutla ayağa kaldırabilirsin. Anahtarlarını bir ayar dosyasına ya da uygulamanın içindeki ayarlar ekranına giriyorsun. Ollama ile açık modelleri de bağlamak mümkün, fakat proje sahibi sonuçların zayıf kaldığını söyleyip bunu önermiyor.
Fiyatlandırma
Kendin kurduğun sürüm MIT lisansıyla ücretsiz. Burada ödediğin tek şey seçtiğin modelin API kullanımı. Hazır web sürümünün fiyat sayfasında ücretsiz bir plan görünmüyor, iki ücretli plan var:
| Plan | Aylık fiyat | Ne veriyor |
|---|---|---|
| Hobby | $15/ay | Ayda 100 kredi, sohbetle destek |
| Pro | $40/ay | Ayda 500 kredi, sohbetle destek |
Her yeni üretim ve her düzeltme 1 kredi harcıyor. Krediler her ayın 1'inde yenileniyor ve kullanmadığın krediler bir sonraki aya devretmiyor. Yıllık ödemeyi seçersen fiyat yarıya iniyor. Şirket iade yapmıyor, bu yüzden önce aylık planla denemek mantıklı.
Dikkat Edilecekler
- Sadece görünen kısmı kodluyor. Giriş sistemi, veritabanı ya da ödeme altyapısı gibi arka uç işleri senin işin.
- Arayüz İngilizce. Ekran görüntüsündeki Türkçe metinleri koda olduğu gibi aktarıyor, ama ayarlar ve menüler İngilizce.
- Başkasının sitesini birebir kopyalamak telif ve marka sorunlarına yol açabilir. Aracı kendi tasarımların ya da ilham almak için kullanmak daha güvenli.
- Kendi kurduğun sürümde birden fazla modelle karşılaştırma yapmak keyifli, ama her deneme ayrı API faturası demek.