Kullanıcı arayüzünün bir ekran görüntüsünü Qwen 3.7 Plus'a verin ve o da onu yeniden oluşturmak için ön uç kodunu yazsın. Model, görüntüleri ve kodları aynı anda okur, böylece bir tasarım maketi, bir rakibin sayfası veya bir Figma dışa aktarımı, tek bir çağrıda başlangıç React veya HTML bileşeni haline gelir. Bu kılavuz, iş akışını ve gerçekten yayınlayacağınız çıktıyı nasıl elde edeceğinizi gösterir.
Temel çağrıyı, önemli istem detaylarını, piksel hassasiyetine olan farkı kapatan görsel geri bildirim döngüsünü ve oluşturulan kullanıcı arayüzünü çalışan bir uygulamaya nasıl dönüştüreceğimizi ele alacağız. Modelin arka planı için Qwen 3.7 Plus genel bakışımıza, istek formatı için ise Qwen 3.7 Plus API kılavuzumuza bakın. Bu süreç boyunca API'yi ve kullanıcı arayüzünüzün çağırdığı uç noktaları Apidog'da test edeceksiniz.
ÖZET
Qwen 3.7 Plus'a bir ekran görüntüsü ve hassas bir istem gönderin ve hedef çerçevenizde kod isteyin. İlk deneme sizi yakınlaştırır; sonucu render ederek, ekran görüntüsü alarak ve modelden orijinaline göre farklılıkları düzeltmesini isteyerek iyileştirirsiniz. Plus, güçlü vizyonu sağlam kodlama ile birleştirdiği, büyük tasarımlar için 1M jeton bağlamını barındırdığı ve çağrı başına maliyeti düşük olduğu için buna uygundur. İş, istemde ve yinelemede yatar, API'de değil.
Bunun için neden Qwen 3.7 Plus?
Ekran görüntüsünden koda dönüştürme aynı anda iki şeye ihtiyaç duyar: görüntüyü doğru bir şekilde okumak, sonra doğru kodu yazmak. Plus, SWE-Bench Pro'da %60 ve Terminal-Bench'te %70.3 civarında puan alıyor, bu nedenle kodlama yeterli ve vizyonu yoğun kullanıcı arayüzü düzenlerini ele alıyor. 1M jetonluk bağlam, uzun, yüksek çözünürlüklü bir tasarımı kesmeden göndermenizi sağlar ve milyon girdi jetonu başına 0,40$ ile ucuza tekrarlayabilirsiniz. Bu görevin ajansı kuzeni için, yeniden inşa etmek yerine bir kullanıcı arayüzünü sürmek için bilgisayar kullanım ajanı kılavuzumuza bakın.
Temel çağrı
Görüntüyü bir metin talimatının yanında bir image_url bölümü olarak gönderin. İşte minimal bir jeneratör:
import os, 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):
b64 = base64.b64encode(open(png_path, "rb").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
print(screenshot_to_code("mockup.png", "Rebuild this UI as a React component."))
Yayınlamadan önce Model Studio belgelerinde mevcut model kimliğini onaylayın. Bu çalışır, ancak tek satırlık bir istem size tek satırlık kalitede bir sonuç verir. Kalite, istemde yatar.
Gönderilebilir kod sağlayan bir istem yazma
Muğlak istemler genel işaretlemeler üretir. Çerçeve ve kısıtlamalar konusunda spesifik olun:
Bu kullanıcı arayüzü ekran görüntüsünü Tailwind CSS kullanarak 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 duyarlı hale getirin.
- Girişler ve düğmeler için semantik HTML ve erişilebilir etiketler kullanın.
- Ekran görüntüsünde dinamik içerik gösteren yerlerde yer tutucu veriler kullanın.
- Yalnızca bileşen kodunu döndürün, metin değil.
Çerçevenin, stil sisteminin, kırılma noktalarının ve erişilebilirlik çubuğunun adını verin. Dinamik içeriği nasıl ele alacağını söyleyin ki bir arka uç icat etmesin. Tailwind CSS belgeleri, yayınlayacağı yardımcı program sınıfları için iyi bir referanstır. Modele bir bileşen spesifikasyonu veya kısa bir tasarım özeti verirseniz, çıktı daha da yaklaşır; design.md'nin kodlama ajanları için ne yaptığına dair yazımız, yazılı bir spesifikasyonun sonuçları neden değiştirdiğini açıklar.
Görsel geri bildirim döngüsü ile boşluğu kapatma
İlk deneme nadiren boşlukları ve rengi tam olarak tutturur. İşte burada Plus'ın vizyonu ikinci kez işe yarar. Oluşturulan bileşeni render edin, ekran görüntüsünü alın, ardından her iki görüntüyü geri gönderin ve modelden onları uzlaştırmasını isteyin:
Hedef tasarım (resim 1) ve mevcut renderım (resim 2) burada.
Görsel farklılıkları listeleyin, ardından resim 1'e daha yakından uyan
düzeltilmiş bileşen kodunu döndürün.
Bu turlardan iki veya üçü genellikle orijinalinden ayırması zor bir sonuç verir. Bu, tıklamalar yerine koda uygulanan bilgisayar kullanım ajanı arkasındaki aynı algıla ve düzelt fikridir.
Gerçek tasarımları ele alma
Üretim maketleri büyük ve detaylıdır, bu da iki sonuca yol açar:
- Jeton maliyeti. Tam sayfa, yüksek çözünürlüklü bir görüntü binlerce jetona mal olur. Metnin okunabilir olduğu en küçük boyuta küçültün ve oluşturduğunuz bölüme kırpın.
- Kapsam. Tek bir çağrıda tüm bir kontrol panelini istemeyin. Sayfayı bölümlere ayırın: başlık, kenar çubuğu, tablo ve her birini ayrı ayrı oluşturun, sonra birleştirin. 1M bağlam yardımcı olur, ancak daha küçük istekler daha temiz kod üretir.
Daha iyi çıktı alma
Birkaç istem ayarı en yaygın sorunları çözer:
- Yanlış renkler. Model tonları yaklaştırır. Tasarımınızdaki tam onaltılık değerleri yapıştırın ve bunları kullanmasını söyleyin.
- İcat edilmiş simgeler. Simge şekillerini tahmin eder. Lucide veya Heroicons gibi bir simge seti adı verin ve bu bileşenleri kullanmasını isteyin.
- Uydurma metin. Gerçek gibi görünen metinleri doldurursa, bunun yerine açıkça işaretlenmiş yer tutucu içerik kullanmasını söyleyin.
- Div çorbası. Açıkça semantik öğeler ve düz bir yapı isteyin, aksi takdirde aşırı iç içe geçmiş div'ler kullanma eğilimindedir.
Her biri isteme tek satırlık bir eklemedir ve birlikte, iyileştirme turlarınızı belirgin şekilde azaltırlar.
Kullanıcı arayüzünden çalışan bir uygulamaya
Oluşturulan ön uç kodu bir özelliğin yalnızca yarısıdır. Bileşen veri çekecek, formları gönderecek ve var olması ve davranması gereken uç noktaları çağıracaktır. İşte burada ekran görüntüsünden koda kısayolu gerçek mühendislikle buluşur.
Önce bu uç noktaları tasarlayın ve oluşturulan kullanıcı arayüzünün konuşabileceği sağlam bir şeye sahip olursunuz. Apidog, API sözleşmesini tanımlamanıza, yeni bileşenin gerçekçi verilerle hemen render edilmesi için onu taklit etmenize ve arka uç oluşturulmadan önce yanıtları test etmenize olanak tanır. Spec-first modu kılavuzumuz bu akışı detaylandırır ve bu yaklaşım, Cursor'da oluşturulan API'ler ile olduğu gibi yapay zeka tarafından oluşturulan ön uçlarla iyi eşleşir.
Qwen 3.7 Plus'ın oluşturduğu kullanıcı arayüzünün arkasındaki API'leri taklit etmek ve test etmek için Apidog'u indirin.
SSS
Qwen 3.7 Plus hangi çerçeveleri hedefleyebilir? İstemde adını verdiğiniz her şeyi: React, Vue, Svelte, düz HTML ve CSS, Tailwind veya bir bileşen kütüphanesi. Açık olun, çünkü varsayılan genel işaretlemedir.
İlk deneme ne kadar doğrudur? Yapıda yakın, tam boşluk ve renkte kaba. Görsel geri bildirim döngüsü, render etme ve yeniden gönderme, piksel hassasiyetine yakınlaşmayı sağlar.
Figma tasarımından çalışabilir mi? Evet, çerçeveyi resim olarak dışa aktarırsanız. Model, Figma dosyasının kendisini değil, render edilmiş tasarımı okur.
Jeton maliyetini nasıl düşük tutarım? Görüntüyü okunabilir en küçük boyuta küçültün, oluşturduğunuz bölüme kırpın ve sayfayı bir kerede değil, parça parça oluşturun.
Arka ucu da inşa ediyor mu? Hayır. API'leri bekleyen ön uç kodu üretir. Bunları ayrı olarak tasarlayın ve taklit edin, bu kısım Apidog tarafından ele alınır.
Sonuç
Qwen 3.7 Plus ile ekran görüntüsünden koda dönüştürme, hassas bir istem, ucuz bir multimodal çağrı ve kısa bir görsel geri bildirim döngüsüdür. Hızlı bir şekilde çalışan bir bileşen elde etmenizi sağlar, ancak kullanıcı arayüzünün altında hala gerçek API'lere ihtiyacı vardır. Ön ucu Plus ile oluşturun, ardından bitmiş özelliğin bir arada durması için uç noktaları Apidog'da tasarlayın, taklit edin ve test edin.