Generador de mockups de sitios web con IA

SubirModeloResoluciónRelación de aspecto
Crea ahora

Muestra tu sitio en todos los equipos. Escritorio, tableta y celular a la vez.

Todos los modelos de imagen

Un solo espacio de trabajo
Nano Banana 2Google DeepMind
GPT Image 2.5OpenAI
Flux 2 ProBlack Forest Labs
Seedream 5.0 ProByteDance
Grok Imagine Image 2.0xAI
Recraft V4.1 ProRecraft
Ideogram 4.5Ideogram
Krea 2Krea
Qwen Image 2.1Alibaba

Tomas de sitios web que puedes crear

Crea ahora

Crea un mockup de sitio web en tres pasos

  1. 01

    Abre Morphic

    Regístrate y empieza a crear en un Canvas visual, libre e infinito.

  2. 02

    Sube tus pantallas

    Agrega una captura de escritorio, una de tableta y una de celular, y describe el set de dispositivos y la escena.

  3. 03

    Genera y exporta

    Cada pantalla se coloca en su dispositivo dentro de una escena con luz suave. Prueba más arreglos y luego exporta.

Crea ahora

Casos de uso

Presentaciones de diseño web

Entrega al cliente un sitio que parezca terminado, no un boceto plano. Muestra el diseño como un set de escritorio, tableta y celular para que vea en una sola imagen cómo se adapta a cada pantalla. Mándasela por WhatsApp y la propuesta se siente construida, lo que suele ayudar a que den el visto bueno.

Presentaciones de diseño web

Portafolios y casos de estudio freelance

Presenta tus proyectos anteriores como fotos de producto. Usa un monitor de escritorio como portada del caso de estudio y un set responsive para demostrar que el sitio funciona en cualquier pantalla. Con el mismo set de dispositivos en todos los proyectos, tu portafolio se ve como un trabajo pulido y consistente.

Portafolios y casos de estudio freelance

Pitches y presentaciones de agencia

Llena tu presentación con imágenes que vendan tu oficio. Una ventana de navegador flotando sobre un degradado suave sirve de diapositiva de portada, y una laptop junto a un celular cuenta la historia multidispositivo en una sola lámina. Cambia las pantallas y vuelve a generar mientras el diseño avanza en revisión.

Pitches y presentaciones de agencia

Demostraciones de diseño responsive

Demuestra que un layout se sostiene desde un monitor ancho hasta un celular. Una toma responsive apilada alinea la misma página en tres anchos, y quien decide ve los breakpoints sin abrir herramientas de desarrollo. Dale a cada dispositivo su propia captura y el set muestra el comportamiento real.

Demostraciones de diseño responsive

Ejemplos de prompts

Sitio web mostrado como un set de escritorio, tableta y celular sobre una superficie de estudio

Set responsive completo

Muestra mi sitio como un set de monitor de escritorio, tableta y celular sobre una superficie de estudio limpia, luz suave y pareja

Edit prompt
Pantalla de escritorio en un monitor delgado sobre un escritorio ordenado, vista de frente

Monitor de escritorio como portada

Enmarca mi pantalla de escritorio en un monitor delgado sobre un escritorio ordenado, de frente, luz de día suave, brillo sutil

Edit prompt
Página web en una ventana de navegador flotante sobre un degradado claro

Ventana de navegador flotante

Muestra mi página en una ventana de navegador flotante con sombra suave sobre un degradado claro, portada de landing limpia

Edit prompt
Laptop junto a un celular que muestran la vista de escritorio y la de celular sobre un escritorio

Laptop y celular

Coloca mi pantalla de escritorio en una laptop junto a un celular con la vista de celular, escritorio de trabajo, luz cálida

Edit prompt
Pantallas de escritorio, tableta y celular traslapadas para mostrar el layout responsive

Responsive apilado

Apila mis pantallas de escritorio, tableta y celular, traslapadas sobre una superficie suave, para mostrar el layout responsive

Edit prompt
Tableta sostenida con las dos manos en un ligero ángulo que muestra una página web

Tableta en las manos

Muestra mi vista de tableta sostenida con las dos manos en un ligero ángulo, cuarto desenfocado al fondo, luz suave de ventana

Edit prompt

Workflows relacionados

Cinematic storyboard

Cinematic storyboard

Share a scene description with character references. Get a full storyboard with shot angles and mood.

Prueba este workflow
Messages to cinematic scene

Messages to cinematic scene

Dramatize any text conversation into a cinematic multi-shot video.

Prueba este workflow
Title sequence

Title sequence

Generate a professional film title card from scratch, with optional cinematic animation.

Prueba este workflow
3x3 storyboard

3x3 storyboard

Feed in a single image. Get 9 cinematic beats laid out as a 3x3 storyboard grid.

Prueba este workflow
Chibi sprite animation

Chibi sprite animation

Turn any photo or description into an animated chibi sprite. Dance, jump, wave, attack, and more.

Prueba este workflow
Expressions

Expressions

Take any character image and generate 6 distinct facial expressions on a single reference sheet.

Prueba este workflow

Todo en Morphic

Tu central completa de mockups web

Modelos

Nano Banana 2, Flux 2 Pro, ChatGPT Images, Grok Imagine, Recraft, Seedream y más. Cambia de modelo cuando el texto de una pantalla o un reflejo necesiten un render más limpio.

Generador de mockups de laptop

Enfócate en una sola escena con laptop cuando un dispositivo cuente la historia mejor que un set completo.

Generador de mockups de celular

Muestra solo la vista de celular en un teléfono dentro de un entorno real, para una toma enfocada de tu app.

Image to image

Sube tus pantallas y genera el set de dispositivos y la escena a su alrededor, el método detrás de cada toma de esta página.

Precios simples

Comienza gratis hoy, con la opción de mejorar tu plan o cancelar cuando quieras.

Basic

$19/ mes
facturado como $0 por año

2400 mensual créditos

1 usuario

Todos los modelos

Workflows

Standard

$24/ mes
facturado como $0 por año

3625 mensual créditos

1 usuario

Todos los modelos

Workflows

Pro

$45/ mes
facturado como $0 por año

6350 compartidos mensual créditos

1 usuario

+ hasta 4 más con costo adicional

Todos los modelos

Workflows

Max

$170/ mes
facturado como $0 por año

24650 compartidos mensual créditos

1 usuario

+ hasta 9 más con costo adicional

Todos los modelos

Workflows

Enterprise

Para límites más altos

Personalizado

términos de precios y facturación

Créditos de alto volumen
Límites de asientos personalizados
Todos los modelos
Workflows
Pricing Gradient

Free

Para experimentar

$0

gratis para siempre

Hasta 20 créditos
Solo 1 usuario
Modelos limitados
Workflows
Comparar detalles de los planes

Preguntas frecuentes

¿Cómo funciona el generador de mockups de sitios web?
Subes capturas de tu sitio y describes el set de dispositivos que quieres. El modelo arma las pantallas, ya sea un monitor, una laptop, una tableta, un celular o una mezcla, y coloca cada captura en su display con el ángulo correcto. La escena, la superficie y la luz se generan alrededor, así que un set responsive se ve como una foto de producto y no como marcos planos.
¿Puedo hacer un mockup web gratis y sin software de diseño?
Sí, puedes empezar gratis. No hay una plantilla de dispositivo que alinear ni un objeto inteligente que reemplazar a mano. Subes las pantallas, describes el set y la escena, y exportas el render desde el navegador en Morphic. Las cuentas nuevas incluyen créditos para probar varias composiciones antes de decidir.
¿Puedo mostrar escritorio, tableta y celular juntos?
Sí, es la toma principal. Sube una vista de escritorio, una de tableta y una de celular, y el generador las acomoda como un solo set responsive para que se vea de un vistazo cómo el sitio se adapta a cada pantalla. También puedes pedir solo un monitor de escritorio o un par de laptop y celular cuando un solo dispositivo cuenta mejor la historia.
¿Qué escenas y encuadres puedo usar?
Una superficie de estudio limpia para la portada de un portafolio, un escritorio ordenado para un look más cálido o una ventana de navegador flotando sobre un degradado suave para el hero de una landing. Nombra el arreglo y la luz, y la escena se arma alrededor de tus pantallas. Así, la propuesta de una agencia y el caso de estudio de un freelance pueden tener cada uno su propio look.
¿Cada pantalla se verá nítida y en el dispositivo correcto?
Cada captura se coloca con toda su claridad y se ajusta en perspectiva a su pantalla, de modo que la de escritorio llena el monitor y la de celular encaja en el teléfono sin deformarse. Entrega a cada dispositivo una captura con las proporciones correctas y el layout se mantiene fiel. Si un reflejo tapa parte de la pantalla, genera de nuevo con una luz más suave.
¿Me sirve para mi portafolio o para mandarle la propuesta a un cliente por WhatsApp?
Sí. Exporta el render como imagen y compártelo por WhatsApp, por correo o en tu portafolio. Un monitor de escritorio como portada funciona para el caso de estudio, y un set responsive completo le muestra al cliente cómo se adapta el sitio a cada pantalla, sin abrir herramientas de desarrollo. A diferencia de una plantilla fija, el arreglo cambia en cada toma y lo único que se queda igual son tus pantallas.

También te puede gustar