Qwen 3.7 Plus ile Ekran Görüntüsünü Koda Dönüştürme

Kullanıcı arayüzünün ekran görüntüsünü Qwen 3.7 Plus'a verin; model görüntüyü analiz edip yeniden oluşturmak için ön uç kodu üretsin. Qwen 3.7 Plus görüntüleri ve kodu birlikte işleyebildiği için bir tasarım maketi, rakip sayfası veya Figma dışa aktarımı tek çağrıda React ya da HTML bileşeni için başlangıç noktasına dönüşebilir.

Apidog'u bugün deneyin

Bu yazıda temel API çağrısını, daha iyi sonuç veren istem yapısını, görsel geri bildirim döngüsünü ve üretilen kullanıcı arayüzünü çalışan bir uygulamaya bağlama adımlarını uygulamalı olarak ele alacağız. Modelin arka planı için Qwen 3.7 Plus genel bakışımıza, istek formatı için Qwen 3.7 Plus API kılavuzumuza bakabilirsiniz. Süreç boyunca API'yi ve kullanıcı arayüzünüzün çağırdığı uç noktaları Apidog'da test edeceksiniz.

Özet

Ekran görüntüsünü Qwen 3.7 Plus'a gönderin, hedef framework'ü net belirtin ve kod üretmesini isteyin. İlk çıktı genellikle yapıyı yakalar; piksel hassasiyetine yaklaşmak için bileşeni render edin, ekran görüntüsünü alın ve orijinal tasarımla birlikte modele geri göndererek farkları düzeltmesini isteyin.

Bu iş akışı üç parçadan oluşur:

1. Ekran görüntüsünü multimodal API çağrısıyla gönderme.
2. React, Tailwind, HTML veya başka bir hedef için net istem yazma.
3. Render edilen sonucu görsel olarak karşılaştırıp kodu yineleme.

Qwen 3.7 Plus bu senaryo için uygundur çünkü güçlü görsel anlama ile kod üretimini birleştirir, büyük tasarımlar için 1M jeton bağlamını destekler ve düşük maliyetli yinelemeye izin verir. Asıl kalite farkı API çağrısından değil, istem kalitesinden ve geri bildirim döngüsünden gelir.

Bunun için neden Qwen 3.7 Plus?

Ekran görüntüsünden koda dönüşüm iki beceri ister:

• Görsel düzeni doğru okumak.
• Okunan düzeni uygulanabilir ön uç koduna çevirmek.

Qwen 3.7 Plus, SWE-Bench Pro'da yaklaşık %60 ve Terminal-Bench'te %70.3 civarında puan alır. Bu da kodlama tarafında yeterli olduğunu gösterir. Görsel yetenekleri ise yoğun kullanıcı arayüzü düzenlerini analiz etmeye uygundur.

1M jetonluk bağlam, uzun ve yüksek çözünürlüklü tasarımları kesmeden göndermeyi kolaylaştırır. Milyon girdi jetonu başına 0,40$ maliyetle birkaç iyileştirme turu yapmak da pratik hale gelir.

Bir kullanıcı arayüzünü yeniden oluşturmak yerine doğrudan sürmek istiyorsanız, ilgili ajan senaryosu için bilgisayar kullanım ajanı kılavuzumuza bakabilirsiniz.

Temel çağrı

Ekran görüntüsünü metin talimatıyla birlikte image_url alanı olarak gönderin. Aşağıdaki örnek, yerel bir PNG dosyasını base64'e çevirip Qwen 3.7 Plus'a gönderir:

import os
import base64
from openai import OpenAI

client = OpenAI(
    api_key=os.environ["DASHSCOPE_API_KEY"],
    base_url="https://dashscope-intl.aliyuncs.com/compatible-mode/v1",
)

def screenshot_to_code(png_path, prompt):
    with open(png_path, "rb") as file:
        b64 = base64.b64encode(file.read()).decode()

    resp = client.chat.completions.create(
        model="qwen3.7-plus",
        messages=[
            {
                "role": "user",
                "content": [
                    {"type": "text", "text": prompt},
                    {
                        "type": "image_url",
                        "image_url": {
                            "url": f"data:image/png;base64,{b64}"
                        },
                    },
                ],
            }
        ],
    )

    return resp.choices[0].message.content

prompt = "Rebuild this UI as a React component."
print(screenshot_to_code("mockup.png", prompt))

Yayınlamadan önce model adını ve uyumlu API formatını Model Studio belgelerinde kontrol edin.

Bu minimal çağrı çalışır; ancak tek satırlık istem genellikle kaba bir çıktı üretir. Kullanılabilir kod için istemi açıkça yapılandırmanız gerekir.

Gönderilebilir kod sağlayan istem yazma

Muğlak istemler genel HTML veya fazla iç içe geçmiş div yapıları üretir. Hedef framework, stil sistemi, responsive davranış ve erişilebilirlik beklentisini net yazın.

Örnek istem:

Bu kullanıcı arayüzü ekran görüntüsünü Tailwind CSS kullanan tek bir React bileşenine dönüştürün.

Gereksinimler:
- Düzeni, boşlukları ve renk paletini olabildiğince yakından eşleştirin.
- 375px mobil genişliğe kadar responsive hale getirin.
- Girişler ve düğmeler için semantik HTML kullanın.
- Form alanları için erişilebilir label veya aria-label ekleyin.
- Ekran görüntüsünde dinamik içerik varsa yer tutucu veri kullanın.
- Backend, API veya veritabanı kodu icat etmeyin.
- Yalnızca bileşen kodunu döndürün; açıklama metni eklemeyin.

Daha iyi çıktı için isteme şu bilgileri ekleyin:

• Kullanılacak framework: React, Vue, Svelte, düz HTML/CSS.
• Stil sistemi: Tailwind CSS, CSS Modules, styled-components vb.
• Breakpoint'ler: 375px, 768px, 1024px.
• İzin verilen ikon seti: Lucide, Heroicons vb.
• Renk paleti: mümkünse hex değerleri.
• Veri davranışı: statik yer tutucu mu, prop tabanlı veri mi?

Tailwind sınıfları için Tailwind CSS belgeleri iyi bir referanstır. Modele ayrıca kısa bir bileşen spesifikasyonu verirseniz çıktı daha tutarlı olur. Yazılı spesifikasyonların kodlama ajanlarına etkisini görmek için design.md'nin kodlama ajanları için ne yaptığına dair yazımıza bakabilirsiniz.

Görsel geri bildirim döngüsü ile boşluğu kapatma

İlk deneme genellikle şu alanlarda sapar:

• Boşluklar
• Font boyutları
• Renk tonları
• Kart genişlikleri
• Gölge ve border değerleri
• Mobil düzen

Bunu düzeltmek için üretilen bileşeni çalıştırın, ekran görüntüsünü alın ve iki görseli tekrar modele gönderin:

1. Orijinal tasarım.
2. Render edilmiş mevcut çıktı.

Kullanabileceğiniz istem:

Resim 1 hedef tasarım.
Resim 2 mevcut React bileşenimin render çıktısı.

Önce görsel farklılıkları madde madde listeleyin:
- layout
- spacing
- typography
- color
- border
- shadow
- responsive behavior

Ardından yalnızca düzeltilmiş React + Tailwind bileşen kodunu döndürün.
Kod, resim 1'e daha yakın olmalıdır.

Bu döngüyü pratikte şöyle kullanabilirsiniz:

1. mockup.png dosyasını modele gönder.
2. React bileşenini üret.
3. Bileşeni lokal projede render et.
4. Playwright, Cypress veya tarayıcı ekran görüntüsü ile çıktı al.
5. Orijinal ve yeni ekran görüntüsünü modele birlikte gönder.
6. Düzeltilmiş kodu al.
7. 2-3 tur tekrar et.

İki veya üç tur çoğu zaman sonucu belirgin şekilde iyileştirir. Bu yaklaşım, tıklamalar yerine koda uygulanan bilgisayar kullanım ajanı mantığına benzer: algıla, karşılaştır, düzelt.

Gerçek tasarımları ele alma

Üretim tasarımları genellikle büyük, yoğun ve detaylıdır. Tüm ekranı tek seferde üretmek yerine tasarımı parçalara ayırın.

1. Görüntüyü küçültün ve kırpın

Tam sayfa yüksek çözünürlüklü görseller binlerce jeton tüketebilir. Görseli şu şekilde hazırlayın:

• Metin okunabilir kalacak kadar küçültün.
• Sadece oluşturacağınız bölümü kırpın.
• Gereksiz boş alanları kaldırın.
• Modal, tablo veya kart gibi tek bir bileşene odaklanın.

2. Sayfayı bölümlere ayırın

Tek çağrıda tüm dashboard'u istemek yerine parçalayın:

- Header
- Sidebar
- Filter bar
- Data table
- Empty state
- Pagination
- Modal

Her parçayı ayrı üretin, sonra ana layout içinde birleştirin. 1M bağlam büyük tasarımlarda yardımcı olur; ancak daha küçük istekler genellikle daha temiz ve düzenlenebilir kod üretir.

Daha iyi çıktı alma

Aşağıdaki sorunlar sık görülür. Her biri isteme eklenecek kısa bir kural ile azaltılabilir.

Yanlış renkler

Model renkleri yaklaşık tahmin eder. Tasarım sisteminizdeki hex değerlerini doğrudan verin:

Şu renkleri kullan:
- Primary: #2563EB
- Background: #F8FAFC
- Text primary: #0F172A
- Text secondary: #64748B
- Border: #E2E8F0

İcat edilmiş simgeler

Model ikon şekillerini tahmin edebilir. Kullanılacak ikon setini belirtin:

İkonlar için yalnızca lucide-react kullan.
Ekran görüntüsündeki arama, filtre ve bildirim ikonlarını Lucide bileşenleriyle eşleştir.

Uydurma metin

Gerçek gibi görünen ama tasarımda olmayan metinler üretebilir. Yer tutucu kuralı ekleyin:

Ekran görüntüsünde okunamayan veya dinamik olan metinler için açıkça işaretlenmiş placeholder kullan.
Örnek: "Kullanıcı Adı", "Ürün Başlığı", "Açıklama metni".

Div çorbası

Daha semantik çıktı için yapıyı sınırlayın:

Gereksiz iç içe div kullanma.
Header için <header>, navigasyon için <nav>, ana içerik için <main>, butonlar için <button> kullan.

Backend icadı

Model bazen sahte API çağrıları veya veri yapıları ekleyebilir:

API endpoint, fetch çağrısı veya backend kodu yazma.
Veriyi props veya lokal placeholder array üzerinden göster.

Bu küçük eklemeler, görsel düzeltme turlarının sayısını azaltır.

Kullanıcı arayüzünden çalışan bir uygulamaya

Üretilen ön uç kodu özelliğin yalnızca yarısıdır. Bileşen büyük olasılıkla:

• Veri çekecek.
• Form gönderecek.
• Liste veya tabloyu dolduracak.
• Hata ve boş durumları gösterecek.
• API uç noktalarına bağlanacak.

Bu nedenle ekran görüntüsünden koda iş akışını API tasarımıyla birleştirmeniz gerekir.

Önce bileşenin ihtiyaç duyduğu uç noktaları tanımlayın. Örneğin bir kullanıcı tablosu için:

GET /users
POST /users
GET /users/{id}
PATCH /users/{id}
DELETE /users/{id}

Ardından response şemasını belirleyin:

{
  "items": [
    {
      "id": "usr_123",
      "name": "Ayşe Yılmaz",
      "email": "[e-mail]",
      "role": "Admin",
      "status": "active"
    }
  ],
  "total": 1
}

Apidog, bu API sözleşmesini tanımlamanıza, mock yanıtlarla kullanıcı arayüzünü hemen gerçekçi verilerle render etmenize ve backend tamamlanmadan önce yanıtları test etmenize olanak tanır.

Spec-first yaklaşımı detaylı görmek için Spec-first modu kılavuzumuza bakabilirsiniz. Bu yaklaşım, Cursor'da oluşturulan API'ler ile olduğu gibi yapay zeka tarafından oluşturulan ön uçlarla da iyi eşleşir.

Qwen 3.7 Plus'ın oluşturduğu kullanıcı arayüzünün arkasındaki API'leri mock'lamak ve test etmek için Apidog'u indirin.

SSS

Qwen 3.7 Plus hangi framework'leri hedefleyebilir?

İstemde açıkça belirttiğiniz framework'leri hedefleyebilir: React, Vue, Svelte, düz HTML/CSS, Tailwind veya bir bileşen kütüphanesi. Belirtmezseniz daha genel markup üretir.

İlk deneme ne kadar doğru olur?

Genellikle yapı açısından yakındır; ancak boşluk, renk ve font detaylarında sapma olabilir. Render edip tekrar ekran görüntüsüyle geri göndermek sonucu piksel hassasiyetine yaklaştırır.

Figma tasarımından çalışabilir mi?

Evet, Figma frame'ini görsel olarak dışa aktarırsanız çalışabilir. Model Figma dosyasını değil, render edilmiş görseli okur.

Jeton maliyetini nasıl düşük tutarım?

Görseli okunabilir en küçük boyuta küçültün, sadece ilgili bölümü kırpın ve tüm sayfayı tek seferde değil, bileşen bazında üretin.

Arka ucu da inşa ediyor mu?

Hayır. API bekleyen ön uç kodu üretebilir; ancak gerçek API tasarımı, mock ve test adımları ayrı ele alınmalıdır. Bu bölüm için Apidog kullanabilirsiniz.

Sonuç

Qwen 3.7 Plus ile ekran görüntüsünden koda dönüşüm pratikte üç adımdır: net istem yazın, multimodal çağrıyı yapın, render edilen sonucu görsel geri bildirimle iyileştirin.

Bu yöntem hızlı şekilde çalışan bir bileşen üretmenizi sağlar; ancak tamamlanmış bir özellik için altında gerçek API sözleşmeleri gerekir. Ön ucu Qwen 3.7 Plus ile oluşturun, ardından uç noktaları Apidog'da tasarlayın, mock'layın ve test edin.