👤 3,313 total uses◯ Free: 5 uses/day • Resets in 9h 55m

Ekran Görüntüsünden Koda

Bir UI ekran görüntüsü yükleyin ve aynı düzeni render eden, yapıştırmaya hazır HTML + satır içi CSS alın. Figma dışa aktarımları, web sayfaları, uygulama mockup'ları, wireframe'lerde çalışır. Google Gemini Vision tarafından desteklenir. Tasarım öğelerini çalışan koda dönüştürmek, rakip UI analizleri yapmak veya eski arayüzleri yeniden inşa etmek için harikadır.

Daha Fazla Bilgi

Screenshot to Code, bir arayüz ekran görüntüsünü analiz eder ve aynı düzeni oluşturan satır içi CSS'li temiz HTML döndürür. Bir Figma dışa aktarımı, web sayfası, uygulama maketi veya tel çerçeve yükleyin ve yapıştırıp iyileştirebileceğiniz bir kod başlangıç noktası elde edin. Görseli işaretlemeye çevirmenin sıkıcı ilk aşamasını atlamak isteyen geliştiriciler ve tasarımcılar için yapılmıştır.

UI ekran görüntünüzü buraya bırakın
veya göz atmak için tıklayın — PNG, JPG, WebP 10 MB'a kadar. Hazır yapıştırılabilir HTML + CSS döndüreceğiz.

✓ Ücretsiz — kayıt yok, kredi kartı yok.

Geliştiriciler

Landing hero to code

Kickstart front-end coding from a design screenshot.

Girdi ve çıktı önizlemesini gör

Girdi

Content
A screenshot of a SaaS landing-page hero section with a headline, subtext, an email signup field, and a blue call-to-action button on a light background that needs to be turned into responsive HTML and CSS.

Çıktı (alıntı)

Generates a responsive HTML structure with a centered hero container: an h1 headline, a muted subheading paragraph, an inline email input, and a styled blue CTA button, plus matching CSS using flexbox, spacing, and a hover state. The markup mirrors the layout and is ready to paste into a project and refine.
Serbest çalışanlar

Pricing table markup

Rebuild a pricing-table design as editable front-end code.

Girdi ve çıktı önizlemesini gör

Girdi

Content
A screenshot of a three-column pricing table with tier names, monthly prices, feature lists, and a highlighted middle plan that needs to be converted into clean HTML and CSS.

Çıktı (alıntı)

Produces a three-column grid of pricing cards, each with a tier heading, a large price, a bulleted feature list, and a CTA button, with the middle card given a highlighted border and badge. The accompanying CSS handles the grid, card shadows, and a responsive stack on mobile, giving a working starting point to customize.
Öğrenciler

Login form to code

Learn front-end structure by generating code from a UI screenshot.

Girdi ve çıktı önizlemesini gör

Girdi

Content
A screenshot of a simple centered login form with email and password fields, a remember-me checkbox, and a sign-in button that needs to be turned into HTML and CSS.

Çıktı (alıntı)

Outputs a centered card containing a form with labeled email and password inputs, a remember-me checkbox row, and a full-width sign-in button, styled with clean spacing, rounded inputs, and a focus state. The semantic markup and CSS provide a ready-to-run login layout to study and extend.

Ekran Görüntüsünden Koda sonuçlarınız burada görünecek

Metin, nesneler, kişiler, ortam ve dikkat çekici ayrıntıları kapsayan ayrıntılı bir açıklama elde edersiniz.

Nasıl Kullanılır Ekran Görüntüsünden Koda

  1. Yeniden oluşturmak istediğiniz arayüzün net bir ekran görüntüsünü yükleyin.
  2. Görüntü modelinin düzeni ve öğeleri analiz etmesine izin verin.
  3. Sonuçtan oluşturulan HTML + satır içi CSS'i kopyalayın.
  4. Projenize yapıştırın ve yazı tiplerini, renkleri ve davranışı ince ayar yapın.

Kullanım Senaryoları

1

Bir Figma veya tasarım taslağını bir HTML başlangıç noktasına dönüştürün.

2

Referans veya yeniden oluşturma için mevcut bir web sayfasının düzenini yeniden oluşturun

3

Elle çizilmiş bir wireframe'i hızlıca çalışan işaretlemeye (markup) dönüştürün

4

Mantığı bağlamadan önce bir ekran görüntüsünden bir açılış sayfası prototipi oluşturun

5

Derin kodlama becerileri olmayan tasarımcıların ilk HTML taslağını üretmesine yardımcı olun

En İyi Sonuçlar İçin İpuçları

  • Küçük metinlerin ve boşlukların okunabilir olması için tam çözünürlükte yükleyin.
  • Karmaşadan kaçınmak için istediğiniz tek bileşene veya ekrana kırpın.
  • Bulanık telefon fotoğrafları yerine temiz, yüksek kontrastlı ekran görüntüleri kullanın.
  • Çıktıyı bir iskelet olarak ele alın — stili cilalamayı ve etkileşim eklemeyi bekleyin.

Sıkça Sorulan Sorular

Screenshot to Code ne yapar?

Bir kullanıcı arayüzü görseli yüklersiniz; araç, düzeni, boşlukları, renkleri ve metni ekran görüntüsünün izin verdiği ölçüde yakından yeniden üreten, satır içi CSS içeren HTML döndürür.

Hangi görsel formatlarını yükleyebilirim?

PNG veya JPG ekran görüntüleri yükleyin — Figma çıktıları, canlı web sayfaları, uygulama maketleri veya elle çizilmiş tel kafesler hepsi çalışır. Keskin, tam çözünürlüklü bir görüntü en doğru kodu verir.

Üretilen kod ne kadar doğru?

Güçlü bir yapısal başlangıç noktası üretir — düzen, renkler ve tipografi genellikle yakındır. Piksel mükemmelliğinde değildir ve etkileşimi veya arka uç mantığını yeniden oluşturmaz; bu nedenle işaretlemeyi iyileştirmeyi bekleyin.

JavaScript mi üretir yoksa yalnızca HTML/CSS mi?

Görsel düzeni oluşturan satır içi CSS ile statik HTML döndürür. Dinamik davranış, çerçeveler ve olay yönetimi üretilmez — bunları kendiniz eklersiniz.

Üretilen kodu ticari olarak kullanabilir miyim?

Evet. Çıktı, projelerinizde kullanmanız ve değiştirmeniz için size aittir. Ücretsiz katman kayıt gerektirmeden günde 5 kullanım sunar; Pro daha fazlası için aylık 19 dolardır.

Ekran görüntüm işlendikten sonra saklanıyor mu?

Hayır. Yüklenen görsel, kodu oluşturmak için işlenir ve ardından atılır — saklanmaz veya eğitim için kullanılmaz.

Tam yazı tiplerini ve marka renklerini eşleştirir mi?

Görünenden hareketle renkleri ve tipografiyi yaklaşık olarak belirler. Tam marka yazı tipleri ve kesin hex değerleri, kodu yapıştırdıktan sonra manuel ayarlama gerektirebilir.

🔒
Gizliliğiniz Korunuyor

Metninizi saklamıyoruz. İşlem gerçek zamanlı olarak gerçekleşir ve sonuç oluşturulduktan hemen sonra girişiniz silinir.

Sınırsız Erişimi Aç

Ücretsiz kullanıcılar: günde 10 kullanım | Pro kullanıcılar: Sınırsız

İlgili araçlar

Bu ajanı dene

SEO OptimizerResearch keywords, craft meta descriptions, generate title tags, and build a content outline — ready to…Bu ajanı dene →

İlgili iş akışı

Receipt → CFO Expense SummaryUpload a receipt photo → OCR + parse → categorize → 1-line CFO-ready summary.İş akışını çalıştır →

Daha fazla