Gerador de mockup de site com IA

Apresente o site em todas as telas. Desktop, tablet e celular juntos.

Todos os modelos de imagem

Em um só workspace

Imagens de site que você pode criar

Crie um mockup de site em três passos

  1. 01

    Abra o Morphic

    Cadastre-se e comece a criar em uma tela visual infinita e fluida.

  2. 02

    Envie suas telas

    Solte as capturas de desktop, tablet e celular e descreva o conjunto de dispositivos e o cenário.

  3. 03

    Gere e exporte

    Cada tela entra no seu dispositivo, na mesma cena, com luz suave. Teste outros arranjos e exporte.

Casos de uso

Apresentações de web design

Entregue ao cliente um site com cara de pronto, não um layout chapado. Mostre o design em desktop, tablet e celular numa única imagem e deixe claro como ele se adapta a cada tela. A proposta parece construída, não rabiscada, e isso costuma ajudar na aprovação.

Apresentações de web design

Portfólio e estudos de caso de freelancers

Apresente trabalhos antigos como fotos de produto. Use um monitor em destaque na capa do estudo de caso e um conjunto responsivo para provar que o site funciona em qualquer tela. Com o mesmo conjunto de dispositivos em todos os projetos, o portfólio parece obra de um só autor e fica pronto para o feed do Instagram ou para o PDF enviado ao cliente.

Portfólio e estudos de caso de freelancers

Propostas e apresentações de agência

Encha a apresentação com imagens de capa que vendem o trabalho. Uma janela de navegador flutuando sobre um degradê suave rende um bom slide de abertura. Um par notebook e celular conta a história multitela em uma página só. Troque as telas e gere de novo a cada rodada de revisão.

Propostas e apresentações de agência

Vitrines de design responsivo

Prove que o layout se sustenta do monitor largo ao celular, seja num site institucional ou numa loja virtual. Uma imagem empilhada alinha a mesma página em três larguras, e quem aprova vê os breakpoints sem abrir as ferramentas de desenvolvedor. Envie uma captura para cada dispositivo e o conjunto mostra o comportamento adaptável de verdade.

Vitrines de design responsivo

Exemplos de prompt

Site exibido como conjunto de desktop, tablet e celular sobre uma superfície de estúdio

Conjunto responsivo completo

Mostre meu site como um conjunto de monitor desktop, tablet e celular sobre uma superfície limpa de estúdio, luz suave e uniforme

Edit prompt
Tela desktop em um monitor fino sobre uma mesa organizada, vista de frente

Monitor desktop em destaque

Enquadre minha tela desktop em um monitor fino sobre uma mesa organizada, de frente, luz do dia suave, brilho discreto

Edit prompt
Página web em uma janela de navegador flutuante sobre um degradê claro

Janela de navegador flutuando

Mostre minha página em uma janela de navegador flutuante, com sombra suave sobre um degradê claro, topo de landing page limpo

Edit prompt
Notebook ao lado de um celular mostrando as versões desktop e mobile sobre uma mesa

Par notebook e celular

Coloque minha tela desktop em um notebook ao lado de um celular com a versão mobile, mesa de trabalho, luz quente

Edit prompt
Telas de desktop, tablet e celular sobrepostas para mostrar o layout responsivo

Responsivo empilhado

Empilhe minhas telas de desktop, tablet e celular sobrepostas em uma superfície suave para mostrar o layout responsivo

Edit prompt
Tablet segurado com as duas mãos em leve ângulo, exibindo uma página web

Tablet nas mãos

Mostre a versão tablet segurada com as duas mãos em leve ângulo, ambiente desfocado ao fundo, luz suave de janela

Edit prompt

Tudo no Morphic

Sua central completa de mockups

Preços simples

Comece grátis hoje mesmo, com a opção de fazer upgrade ou cancelar quando quiser.

Basic

$19/ mês
cobrado como $228 por ano

2400 mensal créditos

1 apenas usuário

Todos os modelos

Workflows

Standard

$24/ mês
cobrado como $288 por ano

3625 mensal créditos

1 apenas usuário

Todos os modelos

Workflows

Pro

$45/ mês
cobrado como $540 por ano

6350 compartilhado mensal créditos

1 usuário

+ até 4 mais com custo adicional

Todos os modelos

Workflows

Max

$170/ mês
cobrado como $2040 por ano

24650 compartilhado mensal créditos

1 usuário

+ até 9 mais com custo adicional

Todos os modelos

Workflows

Enterprise

Para limites maiores

Personalizado

termos de preços e cobrança

Créditos de alto volume
Limites de vagas personalizados
Todos os modelos
Workflows
Pricing Gradient

Free

Para experimentar

$0

grátis para sempre

Até 20 créditos
apenas 1 usuário
Modelos limitados
Workflows

Perguntas frequentes

Como funciona o gerador de mockup de site?
Você envia capturas de tela do site e descreve o conjunto de dispositivos que quer. O modelo monta as telas (monitor, notebook, tablet, celular ou uma mistura) e encaixa cada captura no display certo, no ângulo certo. Cenário, superfície e luz são gerados em volta do conjunto, então o resultado parece foto de produto, não quadros chapados.
Dá para mostrar desktop, tablet e celular juntos?
Dá, e essa é a imagem principal da ferramenta. Envie a versão desktop, a do tablet e a mobile, e o gerador organiza tudo em um conjunto responsivo. Quem vê entende de relance como o site se adapta a cada tela. Se um dispositivo só conta melhor a história, peça apenas o desktop ou o par notebook e celular.
Que cenários e enquadramentos posso usar?
Uma superfície limpa de estúdio para a capa do portfólio, uma mesa organizada para um clima mais acolhedor ou uma janela de navegador flutuando sobre um degradê suave para o topo de uma landing page. Descreva o arranjo e a luz, e a cena se forma em volta das suas telas. Assim, a proposta da agência e o estudo de caso do freelancer ganham, cada um, um visual sob medida.
As telas ficam nítidas e no dispositivo certo?
Cada envio entra com a nitidez original e é inclinado para caber no display. A captura do desktop preenche o monitor, e a do celular cabe no aparelho sem esticar. Use o print com a proporção certa para cada dispositivo e o layout se mantém fiel. Se um reflexo cobrir parte da tela, gere de novo com luz mais suave.
Dá para criar um mockup de site grátis e em português?
Dá, os dois. Você escreve o prompt em português, envia as telas e exporta o resultado direto no navegador, sem programa de design e sem alinhar molde de dispositivo à mão. Contas novas no Morphic incluem créditos para testar alguns arranjos antes de decidir.
Qual a diferença para um template de mockup de site?
Um template prende você a um único arranjo de dispositivos sobre um único fundo. Aqui, o conjunto, a superfície e a luz são gerados a cada imagem. As mesmas telas viram um conjunto responsivo completo, um destaque de desktop ou um par notebook e celular, sem trocar de arquivo. O que fica fixo são as telas que você envia.

Você também pode gostar