Wireframes
Welcome
A área de Wireframes permite que você projete e prototipe seus layouts de interface visualmente. Crie wireframes para planejar a estrutura do seu aplicativo antes de programar. Quando você abrir Wireframes pela primeira vez, verá a tela de boas-vindas com um cartão Criar Wireframe para começar, ou use o botão + Novo Wireframe no canto superior direito.
Recursos principais
Design manual
Crie wireframes manualmente usando o editor de canvas visual — arraste e solte componentes para projetar suas telas.
Geração com IA
Descreva o que deseja e deixe a IA gerar documentos e quadros de wireframe automaticamente para você.
Entrada de voz
Use o botão de microfone integrado ou clique do meio para ditar a descrição do wireframe com voz.
Wireframe para código
Quando seu wireframe estiver pronto, envie-o diretamente para geração de código — indo do design ao código funcional em um fluxo de trabalho contínuo.
Criando um wireframe
Clique em Criar Wireframe ou + Novo Wireframe para abrir o diálogo de criação. Você inserirá um título, selecionará a plataforma alvo (Móvel, Desktop ou Web), escreverá uma descrição do seu wireframe e escolherá entre o modo Manual ou Com IA.
Campos de configuração do projeto
Title
Dê um nome ao seu projeto de wireframe para poder identificá-lo depois na lista de wireframes.
Platform
Selecione a plataforma alvo — Mobile, Desktop ou Web — para adaptar o layout e as restrições do wireframe.
Descrição
Descreva o que você quer construir. Isso é usado pelo modo com IA para gerar documentação e quadros. Suporta entrada de voz pelo botão de microfone.
Mode
Escolha Manual para ir direto ao editor de canvas, ou Com IA para que a IA gere documentação e quadros para você.
Modo manual
Quando você seleciona a aba Manual e clica em Criar, será levado diretamente ao editor de canvas de wireframes onde pode começar a construir suas telas imediatamente. Esta é a melhor opção quando você já tem uma ideia clara do seu design e quer controle total desde o início.
Quando usar o modo manual
Você tem um design específico em mente e quer construí-lo você mesmo.
Você quer esboçar rapidamente um design preliminar antes de refiná-lo.
Você prefere controle total sobre cada elemento desde o início.
AI-Powered Mode
Quando você seleciona a aba Com IA, opções adicionais aparecem. Você pode digitar ou ditar sua descrição, opcionalmente definir quadros individuais, selecionar seu modelo de IA preferido no menu suspenso no topo e então clicar em Gerar para que a IA crie a documentação do wireframe para você.
Como funciona
Inserir detalhes
Preencha o título, selecione uma plataforma e escreva uma descrição do seu projeto.
Definir quadros (opcional)
Alterne para a aba Definir Quadros para especificar telas ou visualizações individuais que você quer que a IA gere.
Selecionar modelo de IA
Escolha seu modelo de IA preferido no dropdown (ex.: Claude Code, Opus 4.6).
Generate
Clique em Gerar para iniciar a geração de documentação com IA. O projeto de wireframe aparecerá na sua lista enquanto a documentação está sendo criada.
Construir quadros
Após a documentação ser concluída, você pode começar a gerar cada quadro individual a partir do editor de wireframe.
Aprimorar com IA
No modo Com IA, clicar no botão Aprimorar com IA abre um diálogo que permite melhorar sua descrição usando IA. Isso pega o que você escreveu no campo de descrição e o aprimora com base nas suas instruções — tornando-o mais detalhado, estruturado ou completo antes de gerar o wireframe.
Opções de aprimoramento
AI Model
Selecione o modelo de IA para aprimorar sua descrição (ex.: Claude Code, Opus 4.6).
Instruções de aprimoramento
Opcionalmente, forneça instruções específicas sobre como a IA deve melhorar a descrição. Suporta entrada de voz.
Aprimorar descrição
Clique para executar o aprimoramento. A IA reescreverá e melhorará sua descrição com base na sua entrada e instruções.
Geração de documentação
Após clicar em Gerar no modo Com IA, seu projeto de wireframe aparece na lista de wireframes com o status Gerando Documentação.... A IA está criando documentação estruturada para o seu projeto com base no título, plataforma, descrição e quadros que você definiu.
O que acontece a seguir
Geração de documentação
A IA cria um documento estruturado definindo cada tela, componente e layout com base na sua descrição.
Geração de quadros
Após a documentação ser concluída, você pode abrir o wireframe e começar a gerar cada quadro individual a partir do editor.
Refinamento
Após os quadros serem gerados, você pode ajustar manualmente, adicionar ou remover componentes no editor de canvas para refinar o design.