Convierte páginas web y diseños de IA en maquetas editables
Importa páginas web en vivo, áreas de página y diseños generados por IA a Moqups como diseños hi-fi totalmente editables o wireframes lo-fi.
Importación de páginas web
Trae cualquier página web en vivo a Moqups
Haz clic en el icono de la extensión para seleccionar una página completa, un área o elementos individuales. Pégalo directamente en Moqups como un diseño totalmente editable con cada objeto listo para personalizar.
- Importa la página completa o selecciona un área específica
- Captura elementos individuales usando la barra espaciadora
- Pega en un proyecto existente o ábrelo en uno nuevo
Importar como vista de escritorio, portátil o móvil
Elige el tamaño del viewport antes de importar. Así, el diseño se pega en Moqups en el formato y las dimensiones exactas que necesitas, no solo lo que se muestra en tu navegador.
Importación de diseños de IA
Captura diseños de IA y hazlos tuyos
Lleva borradores de IA directamente a Moqups. Edítalos con tu equipo en un espacio colaborativo – ¡y ahorra tokens también! Refina el texto, ajusta los diseños y corrige los detalles que la IA no capta bien. Luego exporta un PDF de la versión revisada para tu siguiente ronda con la IA.
- Haz clic en el iframe para copiar el diseño
- Importa como diseño hi-fi o wireframe lo-fi
- Funciona con cualquier herramienta de IA que renderice un iframe
Ayuda a la IA a reflejar tu marca y estilo
Extrae el estilo visual de cualquier ventana del navegador abierta – colores, tipografía, estilos de botones, estilos de inputs – y genera un briefing de diseño estructurado. Pega ese briefing en un prompt de IA para que los diseños generados reflejen con precisión tu branding y sistema de diseño.
Importa diseños con total fidelidad – o conviértelos en wireframes
Al convertir una página web o un diseño de IA, tienes dos opciones: importar el diseño exactamente tal como aparece – como un diseño hi-fi – o convertirlo en un wireframe lo-fi en escala de grises. En ambos casos obtienes una maqueta totalmente editable, pero una pone el foco en la marca y el estilo, y la otra en la estructura y el contenido. ¡Tú decides!
Cada elemento es tuyo para modificar
Los diseños importados llegan como diseños totalmente editables para que tú y tu equipo puedan empezar a editar, actualizar y personalizar en segundos.
Editar texto
Haz clic en cualquier bloque de texto para actualizar títulos, etiquetas y textos de botones.
Ajustar colores y fuentes
Cambia colores y tipografía en elementos seleccionados o en todo el diseño.
Reemplazar imágenes
Intercambia marcadores de posición y visuales por tus propios activos de tu biblioteca de imágenes.
Agregar componentes de UI
Arrastra botones, formularios, modales e iconos de la biblioteca de plantillas de Moqups.
Redimensionar y reorganizar
Mueve, reordena y redimensiona cualquier elemento usando guías y ajuste automático.
Comentar y colaborar
Trabaja con tu equipo en tiempo real y deja comentarios y anotaciones en el diseño.
Une a tu equipo para hacer un trabajo mejor
Comparte ideas y conversaciones significativas – tanto sincrónicas como asincrónicas – con cursores en tiempo real, notas adhesivas, anotaciones y comentarios con código de colores. Recopila feedback, especifica requisitos, construye consenso y toma grandes decisiones.
Preguntas frecuentes
¿Qué navegadores admite la extensión?
La extensión está disponible para Chrome y Firefox. Los usuarios de Brave pueden instalar la versión de Chrome directamente. Una extensión para Safari está en desarrollo y compartiremos una actualización cuando esté lista.
¿Es gratuita?
Sí, la extensión es gratuita para instalar y usar. Para pegar diseños importados en un proyecto necesitarás una cuenta de Moqups, que también es gratuita y no requiere tarjeta de crédito.
¿Funciona con cualquier herramienta de IA?
Sí. La extensión puede importar cualquier diseño de IA que se renderice como un iframe en tu navegador. Esto incluye artefactos de Claude, ChatGPT, Gemini y otros. Haz clic en el iframe para importar el diseño completo, o usa la barra espaciadora para seleccionar un elemento específico dentro de él.
¿Qué más puede hacer la extensión?
Algunas otras funciones que vale la pena conocer: Capturas de pantalla: Captura el área visible, una selección personalizada o la página completa y guárdala directamente en tu biblioteca de imágenes del equipo de Moqups. Útil para mood boards, investigación de competidores y referencias rápidas. Nota: las capturas de pantalla son imágenes, no diseños editables. Crear proyectos al instante: Haz clic en el icono de la extensión Moqups en tu navegador para crear un nuevo proyecto o ir directamente a tu panel de control sin cambiar de pestaña. Selector de color: Para versiones de Chrome anteriores a la 95, la extensión activa nuestro cuentagotas integrado para que puedas tomar cualquier color de tu navegador y aplicarlo a tus elementos de diseño.
¿Qué significa 'totalmente editable'?
Cuando importas una página web o un diseño de IA, no llega como una imagen plana. Cada componente – texto, botones, imágenes, elementos de navegación, campos de entrada – llega como objetos separados en tu proyecto de Moqups. Puedes hacer clic en cualquier elemento para seleccionarlo, ajustar colores y fuentes, reemplazar imágenes, mover cosas y agregar nuevos componentes de UI desde nuestra biblioteca de plantillas.
Ya tengo la extensión de Moqups. ¿Necesito actualizarla?
No, se actualiza automáticamente. Si la instalaste anteriormente, las nuevas funciones ya están disponibles.
Empieza a importar. Deja de reconstruir.
La extensión es gratuita y tarda unos diez segundos en instalarse.