Transforme páginas web e layouts de IA em mockups editáveis
Importe páginas web ao vivo, áreas de página e layouts gerados por IA para o Moqups como designs hi-fi totalmente editáveis ou wireframes lo-fi.
Importação de página web
Traga qualquer página web ao vivo para o Moqups
Clique no ícone da extensão para selecionar uma página inteira, uma área ou elementos individuais. Cole diretamente no Moqups como um layout totalmente editável com cada objeto pronto para personalizar.
- Importe a página inteira ou selecione uma área específica
- Capture elementos individuais usando a barra de espaço
- Cole em um projeto existente ou abra em um novo
Importar como visualização de desktop, laptop ou telefone
Escolha o tamanho do viewport antes mesmo de importar. Assim, o layout é colado no Moqups no formato e nas dimensões exatas de que você precisa – não apenas o que é exibido no seu navegador.
Importação de design de IA
Capture layouts de IA e torne-os seus
Traga rascunhos de IA diretamente para o Moqups. Edite-os com sua equipe em um espaço colaborativo – e economize tokens também! Refine o texto, ajuste os layouts e corrija os detalhes que a IA erra. Em seguida, exporte um PDF da versão revisada para sua próxima rodada com a IA.
- Clique no iframe para copiar o design
- Importe como design hi-fi ou wireframe lo-fi
- Funciona com qualquer ferramenta de IA que renderize um iframe
Ajude a IA a refletir sua marca e estilo
Extraia o estilo visual de qualquer janela do navegador aberta – cores, tipografia, estilos de botões, estilos de inputs – e gere um briefing de design estruturado. Cole esse briefing em um prompt de IA para que os layouts gerados reflitam com precisão sua identidade visual e sistema de design.
Importe designs com total fidelidade – ou transforme-os em wireframes
Ao converter uma página web ou layout de IA, você tem duas opções: importar o design exatamente como aparece – como um layout hi-fi – ou convertê-lo em um wireframe lo-fi em escala de cinza. De qualquer forma, você obtém um mockup totalmente editável – mas um coloca o foco na identidade visual e no estilo, o outro na estrutura e no conteúdo. É você quem decide!
Cada elemento é seu para modificar
Os designs importados chegam como layouts totalmente editáveis para que você e sua equipe possam começar a editar, atualizar e personalizar em segundos.
Editar texto
Clique em qualquer bloco de texto para atualizar títulos, rótulos e textos de botões.
Ajustar cores e fontes
Altere cores e tipografia em elementos selecionados ou em todo o layout.
Substituir imagens
Troque marcadores de posição e visuais pelos seus próprios recursos da sua biblioteca de imagens.
Adicionar componentes de UI
Arraste botões, formulários, modais e ícones da biblioteca de stencils do Moqups.
Redimensionar e reorganizar
Mova, reordene e redimensione qualquer elemento usando guias e ajuste automático.
Comentar e colaborar
Trabalhe com sua equipe em tempo real e deixe comentários e anotações no design.
Reúna sua equipe para trabalhar melhor
Compartilhe ideias e conversas significativas – tanto síncronas quanto assíncronas – com cursores ao vivo, notas adesivas, anotações e comentários codificados por cores. Colete feedback, especifique requisitos, construa consenso e tome ótimas decisões.
Perguntas frequentes
Quais navegadores a extensão suporta?
A extensão está disponível para Chrome e Firefox. Os usuários do Brave podem instalar a versão Chrome diretamente. Uma extensão para Safari está em desenvolvimento e compartilharemos uma atualização quando estiver pronta.
É gratuita?
Sim, a extensão é gratuita para instalar e usar. Para colar designs importados em um projeto, você precisará de uma conta Moqups – que também é gratuita e não requer cartão de crédito.
Funciona com qualquer ferramenta de IA?
Sim. A extensão pode importar qualquer design de IA que seja renderizado como um iframe no seu navegador. Isso inclui artefatos de Claude, ChatGPT, Gemini e outros. Clique no iframe para importar o layout completo, ou use a barra de espaço para selecionar um elemento específico dentro dele.
O que mais a extensão pode fazer?
Algumas outras funcionalidades que vale conhecer: Capturas de tela: Capture a área visível, uma seleção personalizada ou a página inteira e salve diretamente na biblioteca de imagens da equipe do Moqups. Útil para mood boards, pesquisa de concorrentes e referências rápidas. Nota: as capturas de tela são capturas de imagem, não layouts editáveis. Criar projetos instantaneamente: Clique no ícone da extensão Moqups no seu navegador para criar um novo projeto ou acessar diretamente seu painel sem trocar de aba. Seletor de cores: Para versões do Chrome anteriores à 95, a extensão ativa nosso conta-gotas integrado para que você possa amostrar qualquer cor do seu navegador e aplicá-la aos seus elementos de design.
O que significa 'totalmente editável'?
Quando você importa uma página web ou design de IA, ele não chega como uma imagem plana. Cada componente – texto, botões, imagens, elementos de navegação, campos de entrada – chega como objetos separados no seu projeto Moqups. Você pode clicar em qualquer elemento para selecioná-lo, ajustar cores e fontes, substituir imagens, mover coisas e adicionar novos componentes de UI da nossa biblioteca de stencils.
Já tenho a extensão Moqups. Preciso atualizá-la?
Não, ela se atualiza automaticamente. Se você a instalou anteriormente, os novos recursos já estão disponíveis.
Comece a importar. Pare de reconstruir.
A extensão é gratuita e leva cerca de dez segundos para instalar.