Cómo crear prototipos web con Gemini y Runway sin código

Mira, colega, si estás harto de perder horas montando prototipos con código o herramientas que prometen y no dan, te traigo la combinación que realmente funciona: Gemini para la lógica y Runway para los assets visuales. Sin una sola línea de código, tío. Directo al grano.

¿Por qué esta combinación?

Gemini no solo entiende lo que le pides, te genera estructuras, flujos de datos y hasta lógica condicional. Runway, por su parte, te pinta los assets: imágenes, animaciones, incluso vídeos. Juntos, montas un prototipo que parece producido por un equipo de diez.

Paso 1: Define la lógica con Gemini

No necesitas saber programar. Solo describe lo que quieres. Aquí tienes un prompt que uso siempre:

Eres un asistente experto en prototipado web. Genera la estructura lógica de una página de aterrizaje para una app de productividad. Incluye:

• Un formulario de registro con validación básica (nombre, email, contraseña)
• Un flujo condicional: si el usuario es nuevo, mostrar onboarding; si no, dashboard
• Tres secciones principales: hero, características, CTA
• Sin código, solo descripción funcional y diagrama de flujo en texto

Gemini te devuelve algo como: "Si usuario_estado = nuevo → mostrar onboarding con tarjetas interactivas; si no → dashboard con widgets de productividad". Tú copias eso y lo pasas a la siguiente fase.

Paso 2: Genera los assets visuales con Runway

Ahora, con esa lógica clara, pídele a Runway los elementos visuales. Otro prompt que clava:

Genera una imagen de alta calidad para el hero de una app de productividad. Estilo: minimalista, colores azul cian y blanco, un robot sonriente sosteniendo un calendario digital. Resolución 1920x1080, sin texto, fondo degradado suave. Formato PNG.

Runway te devuelve la imagen en segundos. Si necesitas animaciones, añade: "Genera un vídeo corto de 5 segundos con el robot saludando, loop infinito, fondo transparente". Y listo.

Paso 3: Monta el prototipo sin código

Aquí la clave: usa herramientas no-code como Webflow, Bubble o incluso un simple HTML generado por Gemini. Pero si quieres algo rápido, pídele a Gemini que te genere el código HTML/CSS listo para copiar-pegar:

Genera el código HTML y CSS completo de una landing page para una app de productividad. Usa la estructura: hero con imagen de fondo (deja espacio para insertar URL), sección de características con tres tarjetas, formulario de registro con campos nombre, email, contraseña. Estilo moderno, responsive, sin frameworks. Incluye los comentarios donde debo insertar las imágenes de Runway.

Pegas eso en un editor, subes las imágenes de Runway y ya tienes un prototipo funcional. Sin tocar código, tío.

Paso 4: Dale el toque final con Runway Gen-2

Si quieres interacciones más reales, usa Runway Gen-2 para generar pequeños vídeos de fondo o animaciones de botones. Por ejemplo:

Genera un vídeo corto de 3 segundos de un botón "Regístrate" que se ilumina en color dorado al pasar el ratón. Formato MP4, loop, fondo transparente.

Eso lo incrustas en tu prototipo y parece que lo ha hecho un diseñador de Apple.

Ejemplo completo: prototipo de e-commerce

Te dejo un flujo completo que puedes copiar:

Paso 1 (Gemini):

Describe la lógica de un carrito de compras para una tienda online minimalista: añadir productos, calcular total con IVA, mostrar descuento si el total supera 50€. Sin código, solo flujo.

Paso 2 (Runway):

Genera una imagen de producto para una camiseta negra con diseño de olas doradas. Estilo clean, fondo blanco, iluminación de estudio. 800x800px.

Paso 3 (Gemini):

Genera el HTML/CSS de una página de producto con el diseño anterior, incluye botón de añadir al carrito y área de total dinámico. Responsive, sin frameworks. Deja espacio para imagen.

Y ya tienes un prototipo funcional en menos de 10 minutos, colega.

La clave está en los prompts

No esperes resultados mágicos. Sé específico: cuanto más detalle des, mejor te responde Gemini y más preciso es Runway. Y recuerda, la lógica la pone Gemini, el arte lo pone Runway, tú solo pones las ideas.

Y tú, ¿qué herramientas usas para prototipar sin código? Cuéntamelo en los comentarios o en mi LinkedIn. Sin rodeos.