Envie ao Qwen 3.7 Plus uma captura de tela de uma interface e peça para ele gerar o front-end correspondente. Como o modelo interpreta imagem e código na mesma chamada, você pode transformar um mockup, uma página de referência ou uma exportação do Figma em um componente React, HTML ou outro alvo inicial.
Neste guia, você vai montar o fluxo completo: chamada multimodal, prompt útil, ciclo de refinamento visual e integração da UI gerada com APIs reais. Para contexto do modelo, veja a visão geral do Qwen 3.7 Plus. Para o formato da requisição, consulte o guia da API Qwen 3.7 Plus. Você pode usar o Apidog para testar os endpoints que a UI gerada vai consumir.
TL;DR
O fluxo prático é:
- Exporte a tela como imagem.
- Envie a imagem para o Qwen 3.7 Plus com um prompt específico.
- Peça o código no framework desejado.
- Renderize o resultado localmente.
- Tire uma nova captura de tela.
- Envie a imagem original e a renderizada para o modelo corrigir diferenças.
- Conecte o componente a APIs reais ou simuladas.
A primeira geração normalmente acerta a estrutura geral. O refinamento visual é o que melhora espaçamento, cores e detalhes.
Por que usar Qwen 3.7 Plus para screenshot-to-code
Captura de tela para código exige duas capacidades ao mesmo tempo:
- interpretar corretamente uma interface visual;
- gerar código front-end utilizável.
O Qwen 3.7 Plus combina visão com geração de código. Segundo os dados citados, ele atinge cerca de 60% no SWE-Bench Pro e 70,3 no Terminal-Bench. O contexto de 1M de tokens ajuda em designs grandes, e o custo de US$ 0,40 por milhão de tokens de entrada permite iterar sem tornar o processo caro.
Para um caso relacionado, em que o modelo conduz uma interface em vez de reconstruí-la, veja o guia do agente de uso de computador.
1. Faça a chamada básica com imagem + texto
Envie a captura de tela como image_url junto com uma instrução textual. O exemplo abaixo usa a API compatível com OpenAI do DashScope:
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()
response = 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 response.choices[0].message.content
prompt = "Reconstrua esta UI como um componente React."
print(screenshot_to_code("mockup.png", prompt))
Antes de usar em produção, confirme o ID atual do modelo na documentação do Model Studio.
Esse prompt funciona, mas tende a gerar uma implementação genérica. Para obter código aproveitável, detalhe a pilha e as restrições.
2. Escreva um prompt que gere código utilizável
Evite instruções vagas como “crie essa tela em React”. Especifique framework, estilo, responsividade, acessibilidade e como tratar dados dinâmicos.
Exemplo de prompt:
Converta esta captura de tela da UI em um único componente React usando Tailwind CSS.
Requisitos:
- Corresponda ao layout, espaçamento e paleta de cores o mais próximo possível.
- Torne o componente responsivo até uma largura móvel de 375px.
- Use HTML semântico.
- Use rótulos acessíveis para inputs e botões.
- Use dados de placeholder onde a captura mostra conteúdo dinâmico.
- Não invente chamadas de API.
- Retorne apenas o código do componente, sem explicações.
Se você já sabe as cores, fontes ou tokens de design, inclua esses valores:
Use estas cores:
- Fundo principal: #F8FAFC
- Texto primário: #0F172A
- Texto secundário: #64748B
- Ação principal: #2563EB
Se a UI usa ícones, indique a biblioteca:
Use lucide-react para os ícones. Não desenhe ícones com SVG manual, exceto se necessário.
A documentação do Tailwind CSS pode servir como referência para as classes utilitárias. Se você também fornecer uma especificação escrita do componente, a saída melhora. Veja o artigo sobre o que um design.md faz pelos agentes de codificação.
3. Refine com um ciclo de feedback visual
A primeira tentativa geralmente não acerta tudo. O ciclo recomendado é:
- Gere o componente.
- Rode localmente.
- Capture uma imagem da renderização.
- Envie a imagem original e a renderizada ao Qwen 3.7 Plus.
- Peça para ele listar diferenças e devolver o código corrigido.
Prompt para refinamento:
Aqui está o design alvo na imagem 1 e minha renderização atual na imagem 2.
Tarefas:
1. Liste as diferenças visuais principais entre as duas imagens.
2. Corrija o componente para aproximar a imagem 2 da imagem 1.
3. Foque em espaçamento, alinhamento, tamanho de fonte, cores e proporções.
4. Retorne apenas o código atualizado.
Esse processo costuma exigir duas ou três rodadas. É a mesma lógica de perceber e corrigir usada em um agente de uso de computador, mas aplicada à geração de código.
4. Divida designs grandes em partes
Mockups reais podem ser grandes, com muitos detalhes. Evite pedir uma página inteira em uma única chamada.
Prefira quebrar a interface em componentes:
HeaderSidebarStatsCardsDataTableFiltersEmptyStateModalForm
Exemplo de prompt para uma seção:
Converta apenas a área da tabela desta captura em um componente React com Tailwind CSS.
Ignore o cabeçalho, a sidebar e os cards superiores.
O componente deve receber os dados via props.
Use placeholders para os valores.
Retorne apenas o código.
Isso gera código mais limpo e facilita a integração posterior.
5. Reduza custo e ruído da imagem
Imagens grandes aumentam o consumo de tokens. Para manter o processo eficiente:
- reduza a imagem para o menor tamanho em que o texto ainda fique legível;
- corte apenas a seção que será implementada;
- evite enviar telas inteiras quando só precisa de um componente;
- remova áreas irrelevantes, como barras do navegador ou margens vazias.
O contexto de 1M de tokens ajuda, mas prompts menores e imagens focadas geralmente geram resultados melhores.
6. Corrija problemas comuns com instruções simples
Alguns ajustes no prompt reduzem bastante o número de iterações.
Cores incorretas
Inclua os valores exatos:
Use exatamente estes valores de cor: #111827, #6B7280, #2563EB e #F9FAFB.
Ícones inventados
Defina uma biblioteca:
Use Heroicons para todos os ícones. Não crie ícones personalizados.
Texto inventado
Peça placeholders claros:
Quando houver conteúdo dinâmico, use placeholders como "Nome do usuário", "Título do item" e "Descrição".
Excesso de div
Peça semântica e estrutura plana:
Use elementos semânticos como header, main, section, nav, table, button e form quando apropriado.
Evite wrappers desnecessários.
Código difícil de integrar
Peça props:
O componente deve receber dados via props e não deve fazer fetch diretamente.
Exemplo:
type User = {
id: string;
name: string;
email: string;
role: string;
};
type UsersTableProps = {
users: User[];
};
export function UsersTable({ users }: UsersTableProps) {
return (
<section className="rounded-xl border border-slate-200 bg-white">
<table className="w-full text-left text-sm">
<thead className="border-b border-slate-200 text-slate-500">
<tr>
<th className="px-4 py-3 font-medium">Nome</th>
<th className="px-4 py-3 font-medium">Email</th>
<th className="px-4 py-3 font-medium">Função</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id} className="border-b border-slate-100">
<td className="px-4 py-3 text-slate-900">{user.name}</td>
<td className="px-4 py-3 text-slate-600">{user.email}</td>
<td className="px-4 py-3 text-slate-600">{user.role}</td>
</tr>
))}
</tbody>
</table>
</section>
);
}
7. Conecte a UI a APIs reais
O código gerado é só a camada visual. Para virar funcionalidade, o componente precisa:
- buscar dados;
- enviar formulários;
- lidar com estados de erro;
- respeitar contratos de API;
- trabalhar com respostas reais ou simuladas.
Uma abordagem prática é definir os endpoints antes de integrar a UI.
No Apidog, você pode:
- definir o contrato da API;
- simular respostas para o front-end;
- testar endpoints;
- validar se o backend retorna o formato esperado.
Esse fluxo combina bem com front-ends gerados por IA, porque o componente pode ser implementado com dados mockados enquanto o backend ainda está em construção. O guia do modo spec-first detalha esse processo. A mesma abordagem também se aplica a APIs construídas no Cursor.
Baixe o Apidog para simular e testar as APIs por trás da UI gerada pelo Qwen 3.7 Plus.
FAQ
Quais frameworks o Qwen 3.7 Plus pode gerar?
Qualquer framework que você especifique no prompt: React, Vue, Svelte, HTML com CSS puro, Tailwind CSS ou bibliotecas de componentes. Seja explícito para evitar uma saída genérica.
A primeira tentativa fica fiel ao design?
Normalmente fica próxima na estrutura, mas pode errar espaçamento, cores e proporções. O ciclo de feedback visual é o que melhora a precisão.
Funciona com Figma?
Sim, se você exportar o frame como imagem. O modelo lê o design renderizado, não o arquivo Figma diretamente.
Como reduzir o custo de tokens?
Reduza a escala da imagem, corte apenas a seção necessária e gere a página em partes.
O modelo também cria o backend?
Não. Ele gera o front-end. As APIs precisam ser projetadas, simuladas e testadas separadamente.
Resultado final
Screenshot-to-code com Qwen 3.7 Plus funciona melhor como um fluxo iterativo:
- envie a captura;
- gere o componente;
- renderize;
- compare visualmente;
- refine;
- conecte a APIs.
O modelo acelera a criação do front-end, mas a interface só vira produto quando conversa com endpoints confiáveis. Gere a UI com o Qwen 3.7 Plus e use o Apidog para projetar, simular e testar as APIs por trás dela.
Top comments (0)