Beğendiğin bir sitenin ekran görüntüsünü alıyorsun, bir araca yapıştırıyorsun ve karşına o sayfanın çalışan kodu çıkıyor. Bilim kurgu değil, GitHub’da 78.000’den fazla yıldız almış açık kaynak bir araç bu. Adı Screenshot to Code ve kurulumu bu yazının en kısa bölümü: linki yapıştır, “bunu kur” de. Adım adım anlatayım, üstelik hiç kurmadan denemenin yolunu da göstereceğim.
Bu araç tam olarak ne yapıyor?
Şöyle düşün: bir tasarımı koda çevirmek normalde bir front-end geliştiricinin saatlerini alır. Bu araç, yüklediğin ekran görüntüsüne bakıyor; yerleşimi, boşlukları, yazı tiplerini ve renkleri okuyor, sonra sayfanın kodunu yazıyor. Canlı önizleme alıyorsun ve aynı pencerede “butonu maviye çevir, başlığı büyüt” diyerek düzeltme yaptırıyorsun.
Sadece ekran görüntüsü de değil: Figma tasarımı ve ekran kaydı video bile verebiliyorsun. Çıktıyı da istediğin formatta alıyorsun: düz HTML, Tailwind, React, Vue veya Bootstrap. Tamamen açık kaynak, MIT lisanslı, yani ticari projede de kullanabilirsin.
Kurmadan denemek istersen
Aracın hazır bir internet sürümü var: screenshottocode.com adresine gir, ekran görüntünü yükle, sonucu gör. Önce burada bir dene, işine yarayacağına ikna ol, sonra kendi bilgisayarına kur. Kendi bilgisayarında kurulu olmasının avantajı şu: ekran görüntülerin kimsenin sunucusuna gitmez ve kullanım sınırına takılmazsın.
Başlamadan önce gereken iki şey
Birincisi Claude Code: Claude’un bilgisayarına dosya kurup komut çalıştırabilen sürümü, claude.com/claude-code adresinden indiriliyor. Kodlama bilmene gerek yok, kod bilen taraf o.
İkincisi bir API anahtarı. Bunu şöyle düşün: araç, sayfanın kodunu yazarken arka planda güçlü bir yapay zeka modeline danışıyor ve o modeller kullandığın kadar ücret alıyor. API anahtarı da senin ön ödemeli kartın gibi: OpenAI, Anthropic veya Google’dan bir tane alıyorsun, içine 5-10 dolar yüklüyorsun, araç o anahtarla çalışıyor. Nereden alacağını bilmiyorsan sorun değil, birazdan Claude’a soracaksın, sana adım adım aldıracak.
Kurulum: linki yapıştır, “bunu kur” de
Eğitimin kurulum bölümü geldi, hazır ol:
- Claude Code’u aç.
- Şu linki sohbet kutusuna yapıştır: github.com/abi/screenshot-to-code
- Yanına şunu yaz: “bunu kur, bittiğinde tarayıcıda aç”
- Enter’a bas.
Bitti. Claude repoyu indiriyor, gereken her şeyi kuruyor, senden API anahtarını istiyor ve aracı tarayıcında açıyor. Anahtarın yoksa “anahtarım yok, almama yardım et” de, seni adım adım yönlendirir. Bir yerde hata çıkarsa mesajı kopyalayıp “bunu çöz” demen yeterli.
Eskiden böyle bir kurulum için terminal komutlarıyla boğuşman gerekirdi. Artık rehberi okuyup uygulayan sen değilsin, Claude.
İlk denemen için üç fikir
- Kendi sitenin ekran görüntüsünü ver, kodunu nasıl yazdığına bak, kendi sitenle kıyasla.
- Beğendiğin bir landing page’in görüntüsünü ver, çıkan kodu kendi metinlerinle doldur.
- Figma’da çizdiğin bir tasarımı ver, koda çevrilmiş hâlini al.
Bir uyarı: başkasının tasarımını birebir kopyalayıp yayınlamak telif sorunu çıkarır. Bu aracı hazır tasarımları çalmak için değil, ilham aldığın düzenleri kendi içeriğinle yeniden kurmak ve tasarımdan koda geçen süreyi kısaltmak için kullan.
Özet
Önce screenshottocode.com’da dene. Beğendiysen Claude Code’u indir, github.com/abi/screenshot-to-code linkini yapıştır, “bunu kur” de, API anahtarını bağla. Ekran görüntüsünden çalışan koda giden yol artık bilgisayarında.