Resumen rápido: Midjourney v7 diseño web es la combinación que más ha acelerado mi fase de ideación visual en proyectos profesionales. En este artículo explico la fórmula de prompts que utilizo, qué parámetros mejoran los resultados y cómo integro todo en mi flujo con Figma y Webflow.
Midjourney v7 es un modelo de generación de imágenes por IA que, aplicado al diseño web, permite explorar direcciones visuales, maquetas de interfaces y componentes UI en minutos a partir de instrucciones de texto. No genera código ni entrega un diseño pixel-perfect, pero redujo de días a horas el tiempo que dedico a la exploración visual de un proyecto: en lugar de buscar referencias en Dribbble o Behance durante horas, genero veinte propuestas visuales en veinte minutos y selecciono la más prometedora para llevarla a Figma.
Este artículo recoge lo aprendido en esos proyectos: qué configuración de prompts produce layouts aprovechables, qué parámetros afinan el resultado y cómo encaja la herramienta en un flujo real con Figma y Webflow.
Cómo configurar Midjourney v7 para diseño web
Midjourney v7 es el modelo por defecto de la plataforma, disponible desde la web app o desde Discord sin configuración adicional. Si tienes un modelo anterior activo por algún ajuste de perfil, puedes forzar la versión añadiendo el parámetro --v 7 al final de cualquier prompt (Midjourney AI UK, 2025). La documentación oficial de versiones de Midjourney detalla las diferencias entre modelos disponibles.
Las mejoras de v7 más relevantes para trabajos de interfaz son mayor coherencia en detalles de UI (botones, tipografía simulada, espaciado entre secciones) y mejor respuesta a prompts de estilo específico. Según las notas de actualización oficiales de Midjourney, v7 pasó a ser el modelo por defecto: una señal de que la versión tiene la estabilidad suficiente para trabajo profesional.
Para exploración rápida, usa el modo Draft: genera resultados más rápido y a menor coste de créditos. Para la variante final que presentes al cliente o lleves a Figma, cambia al modo Standard. Antes de empezar cualquier proyecto, crea una carpeta específica en la web app de Midjourney para agrupar todas las variantes y comparar evoluciones sin perderlas entre otros trabajos.
Cómo estructurar prompts de Midjourney v7 para diseño web: de la idea al layout
Los mejores prompts de Midjourney v7 para diseño web siguen esta fórmula: tipo de interfaz + contexto del producto + estilo visual + paleta de color + parámetros técnicos. Añadir términos como ui/ux design, landing page o dashboard, junto con el sector del cliente, produce resultados notablemente más cercanos a interfaces reales que un prompt genérico de «website design».
Para una landing page SaaS: "modern saas landing page, project management software, minimalist ui design, blue and white color palette, clean sections, professional typography, --ar 16:9 --v 7". Para un dashboard de analítica: "web analytics dashboard ui, dark mode, data visualization, purple and grey palette, card layout, --ar 16:9 --v 7".
El sector o tipo de producto determina el registro visual del resultado. Midjourney v7 ajusta la estética según el contexto: un dashboard médico tiene una estética muy distinta a uno de marketing, y el modelo lo entiende cuando se lo indica de forma explícita en el prompt.
Según la guía de eBaq Design sobre Midjourney para diseño web y el artículo del UX Design Institute sobre Midjourney en UI design, el nivel de detalle en el prompt es el factor que más determina la calidad y usabilidad del resultado en proyectos de interfaz.
Consejo: Añade "flat vector illustration style" o "UI mockup, no realistic photography" al final del prompt cuando quieras resultados trasladables directamente a Figma. Los adjetivos realistic o photorealistic producen fondos fotográficos en lugar de layouts funcionales: evítalos en prompts de diseño de interfaz.
Qué aspect ratio y parámetros usar en Midjourney v7 para diseño web desktop y mobile
El aspect ratio es el parámetro que más impacto tiene en la utilidad inmediata de lo que genera Midjourney v7. Usa --ar 16:9 para layouts desktop completos: hero section, páginas de features, vistas de dashboard. Para diseños mobile o secciones de scroll largo, cambia a --ar 9:16. Para componentes aislados como tarjetas de producto, modales o formularios, usa --ar 4:3.
| Aspect Ratio | Uso recomendado | Ejemplo de sección |
|---|---|---|
--ar 16:9 | Layouts desktop completos | Hero, navbar con contenido inferior |
--ar 9:16 | Diseño mobile, secciones largas | Pantalla de app, scroll largo |
--ar 4:3 | Componentes y tarjetas | Cards de producto, modales |
--ar 3:2 | Banners y headers medios | Blog featured image, OG image |
--ar 1:1 | Iconos, avatares, thumbnails | Iconografía del design system |
El parámetro --quality (abreviado --q) controla el nivel de detalle y el coste en créditos. Para exploración inicial usa --q 1; para la variante final que lleves a Figma, sube a --q 2. En v7 el modo Standard produce calidad suficiente para la mayoría de usos de diseño sin necesidad de maximizar el quality en cada generación.
Cómo crear componentes UI con Midjourney v7: botones, tarjetas y formularios
Midjourney v7 genera componentes UI aislados con alta fidelidad cuando el prompt especifica el tipo de componente y su contexto visual. Para botones CTA: "primary CTA button, rounded corners, blue gradient, clean ui, white label text, dark background, --ar 3:1 --v 7". Para tarjetas de producto: "ecommerce product card ui, white background, soft shadow, price and add to cart button, minimalist design, --ar 3:4 --v 7". Para formularios de registro: "signup form UI, modern minimalist, dark mode, rounded input fields, blue submit button, --ar 4:3 --v 7".
El proceso para integrar componentes de Midjourney v7 en Figma es directo: genera varias variantes del componente, elige la que mejor encaja con la dirección del proyecto e impórtala como imagen de referencia en el canvas. Desde ahí, reconstruye la forma con los componentes reales del design system del cliente, usando la imagen solo como guía visual de proporciones y estilo. El PNG no va nunca directamente a producción.
Con Sketch el proceso es idéntico. Lo que cambia es el paso de reimplementación, que depende de las capacidades del design system montado en cada herramienta. En ambos casos, el valor de Midjourney v7 está en la velocidad de exploración, no en la entrega directa.
Cómo mantener consistencia de marca con –sref en Midjourney v7
El parámetro --sref (style reference) es la solución de Midjourney v7 para mantener coherencia visual entre múltiples imágenes generadas, documentado en las notas de actualización de style references para v7. Funciona cargando una imagen de referencia cuyo estilo se aplica a todas las generaciones siguientes.
La mecánica es simple: sube al chat de Discord o a la web app una imagen de la web existente del cliente, de su brand guide o de una referencia visual acordada. Copia su URL y añádela como --sref [url] al final del prompt. El resultado mantiene paleta, densidad visual y estética general con mucha mayor consistencia que cuando el estilo se describe solo con texto.
Para proyectos con varias secciones (hero, features, testimonios, footer), genera cada sección con el mismo valor de --sref. Las diferencias de estilo entre secciones bajan bastante y el cliente recibe un conjunto visual coherente desde la primera entrega, lo que reduce las rondas de revisión.
Cómo integrar Midjourney v7 en un flujo con Figma, Webflow o WordPress
El flujo de integración de Midjourney v7 en proyectos reales tiene cinco pasos. Primero, genera entre cinco y diez variantes de la sección principal con el aspect ratio correcto. Segundo, selecciona una o dos variantes y usa la opción Vary (Region) para ajustar elementos concretos sin regenerar todo. Tercero, exporta la imagen seleccionada e impórtala como marco de referencia en Figma.
Cuarto, reconstruye la estructura como componentes editables sobre la imagen: define grids, tipografía real, espaciados y colores del design system del cliente. Quinto, exporta los assets desde Figma a Webflow o a un tema de WordPress, con todos los elementos listos para el equipo de desarrollo.
En proyectos Webflow, Midjourney v7 sirve principalmente para validar la dirección visual con el cliente antes de empezar a construir, lo que ahorra una vuelta completa de revisiones. En WordPress, el equipo de desarrollo recibe una referencia visual clara para implementar el diseño en el theme sin malentendidos sobre la intención estética.
Limitaciones de Midjourney v7 para diseño web y cómo resolverlas
Midjourney v7 no genera texto legible ni editable. Cualquier texto visible en las imágenes es decorativo y sin valor real para el proyecto: todos los headers, botones y etiquetas de la interfaz tienen que reescribirse en Figma desde cero. Midjourney es un generador de imágenes, no un editor de texto; esa expectativa hay que ajustarla desde el primer uso.
Midjourney v7 tampoco produce código HTML ni CSS. El resultado es siempre una imagen estática, sin propiedades de interacción, hover, animación ni responsividad. Para clientes que no conocen el proceso, hay que establecerlo con claridad en el primer briefing: lo que se genera es una maqueta visual, no un prototipo interactivo.
La coherencia entre múltiples imágenes sin --sref es difícil de mantener: dos prompts casi idénticos producen resultados notablemente distintos en estilo. Aunque Midjourney v7 mejoró en consistencia de detalles respecto a versiones anteriores, sigue produciendo irregularidades en tipografía simulada y alineación de elementos cuando el prompt es demasiado complejo.
La estrategia más efectiva es tratar Midjourney v7 como una herramienta de exploración visual y prototipado conceptual, no de entrega final. Cuanto antes se integran los resultados en Figma o en el design system del proyecto, antes se dejan atrás las limitaciones del generador y se trabaja con elementos reales y editables.
Claves para usar Midjourney v7 en diseño web profesional
El valor real de Midjourney v7 en diseño web no está en los resultados directos, sino en la velocidad de ideación: lo que antes tardaba días en referencias y bocetos se resuelve en horas. Estos son los puntos clave para aprovecharlo en proyectos profesionales:
- Usar aspect ratios correctos desde el primer prompt acorta bastante el retrabajo posterior.
- El parámetro
--srefes lo que convierte a Midjourney v7 en una herramienta usable para proyectos de varios componentes: sin él, la coherencia visual es difícil de controlar. - Tratar los resultados como referencias para Figma, no como entregables finales, elimina la frustración con las limitaciones del generador.
- Prompts específicos con tipo de producto, paleta concreta y estilo definido producen resultados mucho más útiles que prompts genéricos de «website design».
Para empezar, aplica la fórmula con una sola sección de una landing: define el prompt con la estructura tipo de interfaz + contexto + estilo + paleta + parámetros técnicos, usa --ar 16:9 y un --sref de referencia, y lleva el resultado a Figma. Ese primer ejercicio práctico vale más que cualquier lectura adicional.
| característica | Draft | Standard |
|---|---|---|
| velocidad | más rápido | estándar |
| coste de créditos | menor | mayor |
| uso ideal | exploración rápida | versión final cliente |
| cuándo usarlo | fase de ideación | presentación o Figma |
Preguntas frecuentes
- ¿Cómo usar Midjourney v7 para crear diseños web profesionales paso a paso?
- Define en el prompt el tipo de interfaz y el sector del cliente, añade el aspect ratio correcto y los colores de marca, genera cinco o diez variantes en modo Draft y selecciona la más cercana a la dirección deseada. Importa esa imagen en Figma como referencia visual y reconstruye la interfaz con componentes reales del design system antes de pasar a Webflow o WordPress para la implementación final.
- ¿Se puede usar Midjourney v7 para diseñar una landing page completa y coherente?
- Sí, generando cada sección de la landing por separado (hero, features, testimonios, CTA) siempre con el mismo valor de
--srefpara mantener coherencia visual entre ellas. Intentar capturar toda la landing en una sola imagen produce resultados demasiado comprimidos para ser útiles. La técnica de sección por sección con referencia de estilo compartida es lo que hace viable el resultado en proyectos reales. - ¿Qué prompts funcionan mejor en Midjourney v7 para UI y UX de sitios web?
- Para sitios de servicios B2B:
"b2b services website ui, corporate design, teal and white palette, clear CTA sections, --ar 16:9 --v 7". Para onboarding de app móvil:"user onboarding flow screens, step by step, clean minimal ui, --ar 9:16 --v 7". Para páginas de precios:"saas pricing page, three column layout, highlighted plan, --ar 16:9 --v 7". La diferencia frente a prompts genéricos es especificar el tipo exacto de página y su función en el sitio. - ¿Qué aspect ratio usar en Midjourney v7 para diseño web desktop y mobile?
--ar 16:9para layouts desktop completos,--ar 9:16para mobile y secciones de scroll largo,--ar 4:3para componentes como tarjetas o modales y--ar 1:1para iconos y avatares. Para imágenes de Open Graph, las que se muestran al compartir en redes sociales, la proporción estándar de la especificación OG es 1.91:1, que puedes indicar directamente como--ar 1.91:1en el prompt.- ¿Cuáles son las limitaciones más importantes de Midjourney v7 para proyectos web?
- Las tres más críticas son: no genera código (solo imágenes estáticas sin interacción), el texto visible en las imágenes no es real ni editable, y mantener coherencia entre múltiples generaciones requiere gestionar activamente el parámetro
--sref. Para proyectos con presupuesto ajustado, conviene evaluar si el tiempo de iteración en Midjourney compensa frente a ir directamente a Figma con referencias de Dribbble o Behance.
