Páginas de lançamento de produto
Teste um título, uma oferta e um formulário de inscrição antes do lançamento.
Gerador de mockup de site com IA
Descreva um site ou anexe um esboço. O Manus transforma isso em um mockup de site clicável e de alta fidelidade para desktop e celular.
Exemplo de mockup de site: um briefing, duas telas
Um bom briefing menciona a marca, as seções, o estilo e as telas. Aqui está um que cobre os quatro pontos.
Um design ilustrativo para uma marca fictícia. Seu mockup segue seu próprio briefing.
Entradas do gerador de mockup de site: uma frase, um esboço ou uma captura de tela
Use o que você já tem. Adicione imagens com o botão + na caixa acima.
Já tem o design no Figma? Use Figma to code para transformar um frame em um app web funcional.
Ideias de mockup para sites, lojas e apps
Escolha um exemplo para colocar sua solicitação na caixa acima, depois altere os detalhes.
Lojas online
Veja uma página inicial, uma página de produto e um carrinho antes de escolher uma plataforma.
Telas de aplicativo web
Mostre a investidores ou engenheiros como as telas principais devem ficar.
Portfólios
Tente algumas formas de apresentar seu trabalho antes de escrever cada estudo de caso.
Restaurantes e negócios locais
Coloque o menu, horário de funcionamento e botão de reserva onde os clientes olham primeiro.
Pitches para clientes
Leve duas direções de design para a primeira reunião com o cliente.
Wireframe vs mockup vs prototype
Um wireframe mostra a estrutura, um mockup mostra a aparência final, e um prototype mostra como ele se comporta.
Mostre o seu site em um notebook e em um celular
Transforme uma captura de tela em um mockup de dispositivo para slides, portfólios e posts de lançamento.
Anexe uma captura de tela e informe quais dispositivos e cena você quer. Você recebe um arquivo de imagem para uma apresentação, um portfólio ou um post de lançamento.
- Escolha os dispositivos: notebook, monitor de desktop, tablet ou celular
- Descreva a cena: uma mesa, um fundo de estúdio liso ou uma mão
- Informe o tamanho, como 16:9 para slides ou 4:5 para posts de redes sociais
Precisa de um logotipo, um banner ou gráficos para redes sociais que combinem? Experimente o AI design.
Transforme o mockup aprovado em um site no ar
O mockup já é uma página web, então você pode continuar construindo em cima dele depois que o design for aprovado.
Veja como o criador de sites Manus adiciona logins, bancos de dados e pagamentos, ou comece 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 é um mockup de site?
Um mockup de site é uma imagem realista de uma página antes de ela ser construída: o layout real, as cores, as fontes, as imagens e os textos. Ele fica entre um wireframe, que mostra apenas a estrutura, e o site finalizado.
Como criar um mockup de site com IA?
Descreva a página na caixa no topo desta página: para quem é, as seções que você precisa e o estilo que você gosta. O Manus cria o mockup como uma página web que você pode abrir no desktop e no celular, depois você pede alterações na mesma tarefa.
Este gerador de mockup de site é gratuito?
Cada solicitação é executada como uma tarefa do Manus, e as tarefas consomem créditos. Você pode ver as opções de créditos na página de preços.
Posso transformar um esboço ou captura de tela em um mockup?
Sim. Anexe uma foto de um esboço desenhado à mão, um quadro branco ou uma captura de tela do seu site atual, e diga o que manter e o que mudar. O Manus usa a imagem como layout inicial.
O mockup vai funcionar no celular?
Peça uma página responsiva e o Manus organiza o layout tanto para desktop quanto para telas de celular. Abra a pré-visualização no seu celular, ou peça um mockup mobile separado se quiser comparar os dois.
Qual é a diferença entre um wireframe e um mockup?
Um wireframe usa caixas e espaços reservados cinzas para definir a estrutura. Um mockup adiciona o design visual, para que as pessoas possam avaliar como a página realmente vai ficar. Um protótipo vai um passo além e permite que as pessoas cliquem e 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 layout, cores, tipografia e espaçamento sem código. Você pode baixar o código completo em qualquer momento ou continuar construindo a página até um site no ar.
Posso fazer um mockup de dispositivo do meu site?
Sim. Anexe uma captura de tela do seu site e peça para vê-lo em um laptop, celular ou tablet na cena que você quiser. O Manus gera a imagem para você baixar.
Crie seu próximo mockup de site
Descreva a página ou anexe um esboço, e revise no desktop e no celular.