Geben Sie Qwen 3.7 Plus einen Screenshot einer Benutzeroberfläche, und es kann den Front-End-Code zum Wiederaufbau schreiben. Das Modell liest Bilder und Code gleichzeitig, sodass ein Design-Mockup, die Seite eines Konkurrenten oder ein Figma-Export in einem einzigen Aufruf zu einer Start-React- oder HTML-Komponente wird. Dieser Leitfaden zeigt den Arbeitsablauf und wie Sie eine Ausgabe erhalten, die Sie tatsächlich versenden würden.
Wir behandeln den grundlegenden Aufruf, die wichtigen Prompt-Details, die visuelle Feedbackschleife, die die Lücke zur Pixelfehlerfreiheit schließt, und wie Sie die generierte Benutzeroberfläche in eine funktionierende App verwandeln. Für den Modellhintergrund siehe unsere Qwen 3.7 Plus Übersicht, und für das Anforderungsformat den Qwen 3.7 Plus API Leitfaden. Sie werden die API und die Endpunkte, die Ihre Benutzeroberfläche aufruft, unterwegs in Apidog testen.
TL;DR
Senden Sie einen Screenshot plus einen präzisen Prompt an Qwen 3.7 Plus und bitten Sie um Code in Ihrem Ziel-Framework. Der erste Durchlauf bringt Sie nah heran; Sie verfeinern, indem Sie das Ergebnis rendern, einen Screenshot davon machen und das Modell bitten, die Unterschiede zum Original zu beheben. Plus eignet sich dafür, weil es eine starke Vision mit solider Codierung paart, einen 1M-Token-Kontext für große Designs hält und pro Aufruf wenig kostet. Die Arbeit liegt im Prompt und in der Iteration, nicht in der API.
Warum Qwen 3.7 Plus dafür?
Screenshot-zu-Code erfordert zwei Dinge gleichzeitig: das Bild genau lesen und dann korrekten Code schreiben. Plus erzielt etwa 60% auf SWE-Bench Pro und 70,3 auf Terminal-Bench, sodass die Codierung gut ist und seine Vision dichte UI-Layouts verarbeitet. Der 1M-Token-Kontext ermöglicht es Ihnen, ein hohes, hochauflösendes Design ohne Abschneiden zu senden, und mit 0,40 $ pro Million Eingabe-Tokens können Sie günstig iterieren. Für den agentenbasierten Verwandten dieser Aufgabe, eine UI zu steuern statt sie neu aufzubauen, siehe unseren Leitfaden zum Computer-Nutzungs-Agenten.
Der grundlegende Aufruf
Senden Sie das Bild als `image_url`-Teil zusammen mit einer Textanweisung. Hier ist ein minimaler Generator:
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."))
Bestätigen Sie die aktuelle Modell-ID in den Model Studio-Dokumenten vor der Bereitstellung. Das funktioniert, aber ein einzeiliger Prompt liefert Ihnen ein Ergebnis von Einzeilen-Qualität. Die Qualität liegt im Prompt.
Einen Prompt schreiben, der versandfähigen Code liefert
Vage Prompts erzeugen generisches Markup. Seien Sie spezifisch bezüglich des Stacks und der Einschränkungen:
Convert this UI screenshot into a single React component using Tailwind CSS.
Requirements:
- Match the layout, spacing, and color palette as closely as you can.
- Make it responsive down to a 375px mobile width.
- Use semantic HTML and accessible labels for inputs and buttons.
- Use placeholder data where the screenshot shows dynamic content.
- Return only the component code, no prose.
Nennen Sie das Framework, das Styling-System, die Breakpoints und die Barrierefreiheits-Leiste. Sagen Sie ihm, wie es mit dynamischen Inhalten umgehen soll, damit es kein Backend erfindet. Die Tailwind CSS-Dokumentation ist eine gute Referenz für die Utility-Klassen, die es ausgeben wird. Wenn Sie dem Modell eine Komponentenspezifikation oder ein kurzes Design-Briefing geben, kommt die Ausgabe noch näher; unser Artikel darüber, was eine design.md für Coding-Agenten leistet, erklärt, warum eine geschriebene Spezifikation die Ergebnisse verändert.
Die Lücke schließen mit einer visuellen Feedbackschleife
Der erste Durchlauf trifft selten Abstand und Farbe genau. Hier zahlt sich die Vision von Plus ein zweites Mal aus. Rendern Sie die generierte Komponente, machen Sie einen Screenshot davon und senden Sie dann beide Bilder zurück, um das Modell zu bitten, sie abzugleichen:
Here is the target design (image 1) and my current render (image 2).
List the visual differences, then return the corrected component code
that matches image 1 more closely.
Zwei oder drei solcher Runden führen normalerweise zu einem Ergebnis, das kaum vom Original zu unterscheiden ist. Es ist dieselbe Wahrnehmungs- und Korrektur-Idee, die hinter einem Computer-Nutzungs-Agenten steckt, angewendet auf Code statt auf Klicks.
Umgang mit echten Designs
Produktions-Mockups sind groß und detailliert, was zwei Konsequenzen hat:
- Token-Kosten. Ein vollflächiges, hochauflösendes Bild umfasst Tausende von Tokens. Skalieren Sie es auf die kleinste Größe herunter, bei der der Text im Design noch lesbar ist, und schneiden Sie den Abschnitt zu, den Sie erstellen.
- Umfang. Fordern Sie nicht ein ganzes Dashboard in einem einzigen Aufruf an. Teilen Sie die Seite in Abschnitte, Kopfzeile, Seitenleiste, Tabelle, generieren Sie jeden einzeln und setzen Sie sie dann zusammen. Der 1M-Kontext hilft, aber kleinere Anfragen erzeugen saubereren Code.
Bessere Ausgabe erhalten
Einige Prompt-Anpassungen beheben die häufigsten Probleme:
- Falsche Farben. Das Modell nähert Farbtöne an. Fügen Sie die genauen Hex-Werte aus Ihrem Design ein und weisen Sie es an, diese zu verwenden.
- Erfundene Icons. Es errät Icon-Formen. Nennen Sie ein Icon-Set wie Lucide oder Heroicons und bitten Sie es, diese Komponenten zu verwenden.
- Erfundener Text. Wenn es real aussehenden Text einfügt, weisen Sie es an, stattdessen klar gekennzeichneten Platzhalterinhalt zu verwenden.
- Div-Suppe. Fordern Sie explizit semantische Elemente und eine flache Struktur an, sonst neigt es dazu, Wrapper-Divs zu überverschachteln.
Jede ist eine einzeilige Ergänzung zum Prompt, und zusammen reduzieren sie Ihre Verfeinerungsrunden spürbar.
Von der UI zur funktionierenden App
Generierter Front-End-Code ist nur die halbe Miete. Die Komponente wird Daten abrufen, Formulare absenden und Endpunkte aufrufen, die existieren und funktionieren müssen. Hier trifft die Screenshot-zu-Code-Verknüpfung auf echte Ingenieurarbeit.
Entwerfen Sie diese Endpunkte zuerst, und die generierte Benutzeroberfläche hat etwas Solides, womit sie kommunizieren kann. Apidog ermöglicht es Ihnen, den API-Vertrag zu definieren, ihn zu mocken, sodass die neue Komponente sofort mit realistischen Daten gerendert wird, und die Antworten zu testen, bevor das Backend erstellt wird. Unser Leitfaden zum Spec-First-Modus führt durch diesen Workflow, und der Ansatz passt gut zu KI-erstellten Front-Ends, genauso wie zu APIs, die in Cursor erstellt wurden.
Laden Sie Apidog herunter, um die APIs hinter der von Qwen 3.7 Plus generierten Benutzeroberfläche zu mocken und zu testen.
FAQ
- Welche Frameworks kann Qwen 3.7 Plus ansprechen? Was immer Sie im Prompt nennen: React, Vue, Svelte, einfaches HTML und CSS, Tailwind oder eine Komponentenbibliothek. Seien Sie explizit, da der Standard generisches Markup ist.
- Wie genau ist der erste Durchlauf? Nahe an der Struktur, grob bei exaktem Abstand und Farbe. Die visuelle Feedbackschleife, das Rendern und erneute Senden, ist das, was es annähernd pixelfrei macht.
- Kann es mit einem Figma-Design arbeiten? Ja, wenn Sie den Frame als Bild exportieren. Das Modell liest das gerenderte Design, nicht die Figma-Datei selbst.
- Wie halte ich die Token-Kosten niedrig? Skalieren Sie das Bild auf die kleinste lesbare Größe herunter, schneiden Sie den Abschnitt zu, den Sie erstellen, und generieren Sie die Seite in Teilen statt auf einmal.
- Baut es auch das Backend? Nein. Es erzeugt Front-End-Code, der APIs erwartet. Entwerfen und mocken Sie diese separat, was Apidog übernimmt.
Das Fazit
Screenshot-zu-Code mit Qwen 3.7 Plus ist ein präziser Prompt, ein kostengünstiger multimodaler Aufruf und eine kurze visuelle Feedbackschleife. Es liefert Ihnen schnell eine funktionierende Komponente, aber die Benutzeroberfläche benötigt immer noch echte APIs darunter. Generieren Sie das Frontend mit Plus, dann entwerfen, mocken und testen Sie die Endpunkte in Apidog, damit die fertige Funktion zusammenhält.