Páginas de lançamento de produto
Testa um título, uma oferta e um formulário de inscrição antes do dia de lançamento.
Gerador de mockups de sites com IA
Descreva um site ou anexe um esboço. O Manus transforma-o num mockup de site clicável e de alta fidelidade para computador e telemóvel.
Exemplo de maquete de site: um briefing, dois ecrãs
Um bom briefing indica a marca, as secções, o estilo e os ecrãs. Aqui está um que cobre os quatro pontos.
Um design ilustrativo para uma marca fictícia. O teu mockup segue o teu próprio briefing.
Entradas do gerador de maquetes de sites: uma frase, um esboço ou uma captura de ecrã
Use o que já tem. Adicione imagens com o botão + na caixa acima.
Já tens o design no Figma? Usa o Figma to code para transformar um frame numa aplicação web funcional.
Ideias de mockups para sites, lojas e apps
Escolha um exemplo para colocar o seu pedido na caixa acima e, depois, altere os detalhes.
Lojas online
Vê uma página inicial, uma página de produto e um carrinho antes de escolher uma plataforma.
Ecrãs de aplicação web
Mostre a investidores ou engenheiros o aspeto que os ecrãs principais devem ter.
Portefólios
Experimente algumas formas de apresentar o seu trabalho antes de escrever cada estudo de caso.
Restaurantes e negócios locais
Coloca o menu, o horário de funcionamento e o botão de reserva onde os clientes olham primeiro.
Propostas a clientes
Leve duas direções de design para a primeira reunião com o cliente.
Wireframe vs mockup vs prototipo
Um wireframe mostra a estrutura, um mockup mostra o aspeto final e um prototype mostra o comportamento.
Mostre o seu site num portátil e num telemóvel
Transforme uma captura de ecrã numa maquete de dispositivo para apresentações, portefólios e publicações de lançamento.
Anexe uma captura de ecrã e indique que dispositivos e cena deseja. Obtém um ficheiro de imagem para uma apresentação, um portefólio ou uma publicação de lançamento.
- Escolha os dispositivos: portátil, monitor de computador, tablet ou telemóvel
- Descreva a cena: uma mesa, um fundo de estúdio simples ou uma mão
- Indique o tamanho, como 16:9 para diapositivos ou 4:5 para publicações nas redes sociais
Precisa de um logótipo, um banner ou gráficos para redes sociais a condizer? Experimente o design com IA.
Transforme a maquete aprovada num site ativo
O mockup já é uma página web, por isso podes continuar a construí-lo depois de o design ser aprovado.
Vê como o criador de sites Manus adiciona inícios de sessão, bases de dados e pagamentos, ou começa um site completo com o gerador de sites com IA ou uma única página com o criador de landing pages.
Perguntas frequentes
O que é uma maquete de site?
Um mockup de site é uma imagem realista de uma página antes de ser construída: o layout real, as cores, as fontes, as imagens e o texto. Fica entre um wireframe, que mostra apenas a estrutura, e o site final.
Como crio um mockup de website com IA?
Descreva a página na caixa no topo desta página: para quem é, as secções que precisa e o estilo que gosta. O Manus cria o mockup como uma página web que pode abrir no computador e no telemóvel, e depois pede alterações na mesma tarefa.
Este gerador de mockups de sites é gratuito?
Cada pedido é executado como uma tarefa Manus, e as tarefas consomem créditos. Pode consultar as opções de créditos na página de preços.
Posso transformar um esboço ou uma captura de ecrã num mockup?
Sim. Anexe uma foto de um esboço feito à mão, de um quadro branco ou uma captura de ecrã do seu site atual, e diga o que manter e o que alterar. O Manus usa a imagem como layout inicial.
O mockup vai funcionar em dispositivos móveis?
Pede uma página responsiva e o Manus organiza-a tanto para ecrãs de computador como de telemóvel. Abre a pré-visualização no teu telemóvel, ou pede um mockup móvel separado se quiseres comparar os dois.
Qual é a diferença entre um wireframe e um mockup?
Um wireframe usa caixas e espaços reservados cinzentos para definir a estrutura. Um mockup adiciona o design visual, para que as pessoas possam avaliar o aspeto real da página. Um prototótipo vai um passo mais além e permite que as pessoas naveguem pelo fluxo.
Posso editar o mockup e manter o código?
Sim. Peça alterações na tarefa, ou use o modo de edição de design para ajustar o layout, as cores, a tipografia e o espaçamento sem código. Pode descarregar o código completo em qualquer momento ou continuar a construir a página até ser um site ao vivo.
Posso criar um mockup de dispositivo do meu site?
Sim. Anexe uma captura de ecrã do seu site e peça-o num portátil, telemóvel ou tablet, no cenário que desejar. O Manus gera a imagem para você descarregar.
Crie o seu próximo mockup de site
Descreva a página ou anexe um esboço, e reveja-a no computador e no telemóvel.