Ekran görüntülerini çalışan koda dönüştürün
Screenshot-to-code, ekran görüntüsü dosyalarını analiz ederek bunları temiz HTML, Tailwind, React veya Vue koduna dönüştüren bir yazılım aracıdır. Geliştiricilerin arayüz tasarımlarını hızlıca çalışan kod bloklarına (code snippets) çevirmesine olanak tanır.
Güncelleme
- 18 Eylül 2026: Yıldız 75.377 → 79.191.
Ne kazandırır?
- Ekran görüntülerini ve tasarım dosyalarını temiz HTML veya React koduna çevirir
- Web sitesi kayıtlarını işlevsel prototiplere dönüştürür
- Tailwind CSS ve çeşitli popüler arayüz kütüphanelerini destekler
Kurulum
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --buildcd frontend
pnpm install
pnpm devKod bilmiyorsanız
Ekran görüntüsünü analiz et ve görseldeki tasarımı birebir yansıtan, temiz ve işlevsel bir kod yapısı oluştur. Çıktıyı Tailwind CSS kullanarak HTML veya React formatında hazırla. Görseldeki gerçek logoları ve varlıkları ayıklayarak koda dahil et, tasarımın tüm öğelerini duyarlı (responsive) bir şekilde kodla.
Depo: https://github.com/abi/screenshot-to-code. Kurulum ve çalıştırmada bu deponun README dosyasındaki resmî talimatları esas al.
Başlamadan önce hangi işletim sisteminde çalıştığımızı ve gerekli araçların (ör. Python, Node.js, Git, Docker) kurulu olup olmadığını kontrol et; eksik olanları bu sisteme göre adım adım kur.
Çalışmak için yeni ve boş bir klasör oluştur. Bu klasörün dışındaki dosyalarıma dokunma, hiçbir şeyi silme. Her komutu çalıştırmadan önce ne yapacağını bir cümleyle söyle.
Her adımın sonunda ekranda ne görmem gerektiğini söyle. Bir hata oluşursa hata mesajını sana olduğu gibi yapıştıracağım, birlikte düzeltelim.
Bağlantılar
TreScout bu aracı geliştirmedi · GitHub trendlerinde keşfedip Türkçe tanıttı. Tanıtım metni deponun kendi belgelerinden yapay zekâ ile hazırlandı. Bu sayfa deponun 2026-08-28 tarihindeki hâlini anlatır: Yıldız sayısı ve yazdığımız metin o güne aittir, depo sonrasında değişmiş olabilir. Güncel durum için depo bağlantısına bakın.