Berikan tangkapan layar UI kepada Qwen 3.7 Plus dan ia dapat menulis kode front-end untuk membangun ulang. Model ini membaca gambar dan kode secara bersamaan, sehingga maket desain, halaman kompetitor, atau ekspor Figma menjadi komponen React atau HTML awal dalam satu panggilan. Panduan ini menunjukkan alur kerja dan cara mendapatkan keluaran yang benar-benar siap Anda gunakan.
Kami akan membahas panggilan dasar, detail prompt yang penting, umpan balik visual yang mendekatkan pada akurasi piksel, dan cara mengubah UI yang dihasilkan menjadi aplikasi yang berfungsi. Untuk latar belakang model, lihat ikhtisar Qwen 3.7 Plus kami, dan untuk format permintaan, lihat panduan API Qwen 3.7 Plus. Anda akan menguji API dan endpoint yang dipanggil UI Anda di Apidog sepanjang proses.
Ringkasan
Kirim tangkapan layar beserta prompt yang tepat ke Qwen 3.7 Plus dan minta kode dalam kerangka kerja target Anda. Hasil awal akan mendekati; Anda menyempurnakan dengan me-render hasilnya, mengambil tangkapan layar, dan meminta model untuk memperbaiki perbedaan terhadap yang asli. Plus cocok untuk ini karena menggabungkan visi yang kuat dengan pengodean yang solid, memiliki konteks 1M-token untuk desain besar, dan biaya per panggilan yang murah. Pekerjaan utamanya ada pada prompt dan iterasi, bukan API.
Mengapa Qwen 3.7 Plus untuk ini
Konversi tangkapan layar ke kode membutuhkan dua hal sekaligus: membaca gambar secara akurat, lalu menulis kode yang benar. Plus mencetak sekitar 60% pada SWE-Bench Pro dan 70,3 pada Terminal-Bench, jadi pengodeannya bagus, dan visinya menangani tata letak UI yang padat. Konteks 1M-token memungkinkan Anda mengirim desain tinggi beresolusi tinggi tanpa terpotong, dan dengan $0,40 per juta token masukan, Anda dapat melakukan iterasi dengan murah. Untuk tugas agen yang mirip dengan ini, yaitu mengendalikan UI alih-alih membangun ulangnya, lihat panduan agen penggunaan komputer kami.
Panggilan dasar
Kirim gambar sebagai bagian image_url bersama dengan instruksi teks. Berikut adalah generator minimal:
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."))
Konfirmasikan ID model saat ini di dokumen Model Studio sebelum menerapkan. Itu berhasil, tetapi prompt satu baris akan menghasilkan kualitas satu baris. Kualitas terletak pada prompt.
Menulis prompt yang menghasilkan kode siap pakai
Prompt yang tidak jelas menghasilkan markup generik. Jelaskan secara spesifik tentang stack dan batasan:
Konversi tangkapan layar UI ini menjadi satu komponen React menggunakan Tailwind CSS.
Persyaratan:
- Sesuaikan tata letak, spasi, dan palet warna sedekat mungkin.
- Buat responsif hingga lebar seluler 375px.
- Gunakan HTML semantik dan label yang dapat diakses untuk input dan tombol.
- Gunakan data placeholder di mana tangkapan layar menunjukkan konten dinamis.
- Kembalikan hanya kode komponen, tanpa prosa.
Sebutkan kerangka kerja, sistem gaya, breakpoint, dan standar aksesibilitas. Beri tahu cara menangani konten dinamis agar tidak membuat backend sendiri. Dokumen Tailwind CSS adalah referensi yang baik untuk kelas utilitas yang akan dihasilkannya. Jika Anda memberikan spesifikasi komponen atau ringkasan desain singkat kepada model, keluarannya akan semakin mendekati; artikel kami tentang apa yang dilakukan design.md untuk agen pengkodean menjelaskan mengapa spesifikasi tertulis mengubah hasilnya.
Menutup celah dengan umpan balik visual
Penyempurnaan pertama jarang sekali akurat dalam hal spasi dan warna. Di sinilah visi Plus kembali terbayar. Render komponen yang dihasilkan, ambil tangkapan layarnya, lalu kirim kembali kedua gambar tersebut dan minta model untuk merekonsiliasinya:
Ini adalah desain target (gambar 1) dan render saya saat ini (gambar 2).
Sebutkan perbedaan visualnya, lalu kembalikan kode komponen yang telah dikoreksi
yang lebih sesuai dengan gambar 1.
Dua atau tiga putaran ini biasanya menghasilkan sesuatu yang sulit dibedakan dari aslinya. Ini adalah ide yang sama, yaitu memahami dan mengoreksi, di balik agen penggunaan komputer, diterapkan pada kode alih-alih klik.
Menangani desain nyata
Maket produksi berukuran besar dan detail, yang memiliki dua konsekuensi:
- Biaya token. Gambar beresolusi tinggi satu halaman penuh dapat memakan ribuan token. Kecilkan ukuran ke ukuran terkecil di mana teks dalam desain masih terbaca, dan potong ke bagian yang sedang Anda bangun.
- Cakupan. Jangan meminta seluruh dasbor dalam satu panggilan. Bagi halaman menjadi beberapa bagian, seperti header, bilah sisi, tabel, dan hasilkan masing-masing, lalu gabungkan. Konteks 1M membantu, tetapi permintaan yang lebih kecil menghasilkan kode yang lebih bersih.
Mendapatkan keluaran yang lebih baik
Beberapa penyesuaian prompt mengatasi masalah paling umum:
- Warna yang salah. Model mendekati nuansa. Tempel nilai heksa yang tepat dari desain Anda dan perintahkan untuk menggunakannya.
- Ikon yang dibuat-buat. Model menebak bentuk ikon. Sebutkan set ikon seperti Lucide atau Heroicons dan minta untuk menggunakan komponen tersebut.
- Teks palsu. Jika model mengisi teks yang terlihat nyata, perintahkan untuk menggunakan konten placeholder yang ditandai dengan jelas.
- "Div soup". Minta secara eksplisit elemen semantik dan struktur datar, atau model cenderung terlalu banyak menyarangkan div pembungkus.
Masing-masing adalah tambahan satu baris pada prompt, dan bersama-sama mereka secara signifikan mengurangi putaran penyempurnaan Anda.
Dari UI menjadi aplikasi yang berfungsi
Kode front-end yang dihasilkan hanyalah separuh fitur. Komponen akan mengambil data, mengirim formulir, dan memanggil endpoint yang harus ada dan berfungsi. Di situlah jalan pintas tangkapan layar ke kode bertemu dengan rekayasa nyata.
Rancang endpoint tersebut terlebih dahulu dan UI yang dihasilkan akan memiliki sesuatu yang solid untuk diajak bicara. Apidog memungkinkan Anda menentukan kontrak API, memalsukannya sehingga komponen baru dapat di-render dengan data realistis segera, dan menguji respons sebelum backend dibangun. Panduan mode spec-first kami menjelaskan alur tersebut, dan pendekatan ini berpasangan dengan baik dengan front-end yang dibangun AI seperti halnya dengan API yang dibangun di Cursor.
Unduh Apidog untuk memalsukan dan menguji API di balik UI yang dihasilkan Qwen 3.7 Plus.
FAQ
Kerangka kerja apa yang dapat ditargetkan Qwen 3.7 Plus? Apa pun yang Anda sebutkan dalam prompt: React, Vue, Svelte, HTML dan CSS biasa, Tailwind, atau pustaka komponen. Bersikaplah eksplisit, karena defaultnya adalah markup generik.
Seberapa akurat hasil awal? Dekat pada struktur, kasar pada spasi dan warna yang tepat. Umpan balik visual, render ulang dan pengiriman ulang, adalah yang membuatnya mendekati akurasi piksel.
Bisakah itu bekerja dari desain Figma? Ya, jika Anda mengekspor bingkai sebagai gambar. Model membaca desain yang di-render, bukan file Figma itu sendiri.
Bagaimana cara menjaga biaya token tetap rendah? Kecilkan ukuran gambar ke ukuran terkecil yang terbaca, potong ke bagian yang sedang Anda bangun, dan hasilkan halaman secara bertahap daripada sekaligus.
Apakah itu juga membangun backend? Tidak. Ini menghasilkan kode front-end yang mengharapkan API. Rancang dan palsukan secara terpisah, yang merupakan bagian yang ditangani Apidog.
Intinya
Konversi tangkapan layar ke kode dengan Qwen 3.7 Plus adalah prompt yang tepat, panggilan multimodal yang murah, dan umpan balik visual yang singkat. Ini memberi Anda komponen yang berfungsi dengan cepat, tetapi UI masih membutuhkan API nyata di bawahnya. Hasilkan front-end dengan Plus, lalu rancang, palsukan, dan uji endpoint di Apidog agar fitur yang telah selesai dapat berfungsi bersama.