Geração de código e wireframe
Visão geral
Após anotar sua imagem com caixas delimitadoras e atribuir comportamentos, você pode gerar código de componente funcional ou um layout de wireframe. A IA usa as posições das caixas delimitadoras, tipos de elementos e direções de comportamento para produzir uma saída precisa.
Barra lateral do assistente de IA
O painel Assistente de IA é a barra lateral direita usada para configurar e acionar a geração de código ou wireframe. Ele contém os seguintes controles:
Seletor de modelo de visão
Escolha qual modelo de visão de IA usar para analisar suas imagens e gerar saída. Diferentes modelos podem produzir diferentes níveis de detalhe e precisão.
Seletor de framework
Escolha o framework alvo para geração de código (ex.: React, Vue, Svelte). O código gerado usará a sintaxe e os padrões do framework selecionado.
Abas Componentes / Wireframes
Alterne entre gerar código de componente (aba Componentes) ou layouts de wireframe (aba Wireframes) a partir das suas imagens anotadas.
Grupos de imagens
Lista todos os seus grupos de imagens para o projeto de engenharia reversa atual. Selecione um grupo para pré-visualizar suas imagens e configurar a geração. Cada grupo mostra sua contagem de imagens.
Gerar blocos
Clique para iniciar o processo de geração com IA. A IA analisa as imagens do grupo selecionado junto com quaisquer anotações de caixas delimitadoras e comportamentos para produzir a saída.
Modos de saída
Gerar código
Converta a imagem anotada em código de componente funcional para seu framework alvo (React, Vue, Svelte, etc.). O código gerado inclui o layout, estilização e quaisquer comportamentos que você definiu nas caixas delimitadoras.
Gerar wireframe
Exporte a imagem anotada como um layout de wireframe que abre na ferramenta de Wireframe. Cada caixa delimitadora se torna um elemento de wireframe que você pode refinar, reorganizar e conectar a outras telas.
Recursos de geração de código
Seleção de framework
Escolha seu framework alvo antes de gerar. Os frameworks suportados incluem React, Vue, Svelte, SolidJS, Angular e mais.
Mapeamento de comportamento
Os comportamentos atribuídos às caixas delimitadoras são traduzidos em manipuladores de eventos, lógica de navegação, modais e outros códigos interativos na saída.
Precisão do layout
A IA usa as posições e tamanhos das caixas delimitadoras da imagem para produzir um layout que corresponde de perto ao design visual original.
Salvar em blocos
Os componentes gerados podem ser salvos diretamente na sua Biblioteca de Blocos para reutilização entre projetos.
Adicionar ao projeto
Insira o código gerado diretamente no seu projeto atual como novos arquivos de componente.
Dicas
Para melhores resultados, use imagens de alta resolução com elementos de UI claros. Desenhe caixas delimitadoras precisas ao redor de cada elemento para geração de código mais precisa. Atribua comportamentos específicos em vez de descrições vagas — "abre modal de cadastro" funciona melhor que "faz algo". A IA funciona melhor com layouts web padrão e padrões de UI comuns.