Publicado：2026-09-28
Palabras clave：Nano Banana Pro, Nano Banana, sitio oficial de Nano Banana, landing SaaS, Hero de landing, nanobanana prompts
Los equipos que construyen sitios B2B, herramientas para desarrolladores o SaaS de flujos de IA lo saben: antes de que el visitante llegue a precios, lo que decide si sigue bajando suele ser si el Hero del primer pantallazo se ve profesional y si las ilustraciones de funciones parecen el mismo sistema de diseño. Si el Hero, las tarjetas de funciones y la placa de prueba social pelean en temperatura de color o en la escala del Logo, el visitante siente que la página la pegaron tres empresas distintas. Muchos encargan el Hero a un diseñador, sacan las funciones de un banco de iconos y recortan la franja de beneficios de un Pitch Deck: alinear las tres cadenas suele costar varios días, y además el primer pantallazo móvil a menudo se corta hasta dejar «solo media pieza de producto».
Esta guía no es un artículo de diapositivas Pitch Deck, kit visual de webinar, cabeceras de Newsletter ni capturas ASO de App Store. Resuelve una sola cosa: cómo entrar desde el sitio oficial de Nano Banana a la aplicación creativa vía aplicación creativa de Nano Banana y, con Nano Banana / Nano Banana Pro, completar en medio día un kit visual de landing SaaS listo para publicar — cubriendo el Hero, las tarjetas de funciones y la franja de beneficios / prueba social sin tres cadenas de diseño externalizadas.
Obtendrás: tabla de planificación del kit (8 piezas), checklist de assets, flujo en cuatro pasos, 3 plantillas de prompt en inglés completas (placeholders reemplazables), recomendaciones de proporción para el primer pantallazo y los bloques, tres desgloses de casos, tabla de errores y criterios para elegir entre Nano Banana y Nano Banana Pro. Los cuerpos de prompt no se acortan aquí: el script de semilla inyecta los bloques ingleses completos para que puedas pegar y publicar el Hero, las tarjetas de funciones y la franja de beneficios.
1. ¿Por qué usar Nano Banana / Nano Banana Pro para el visual de una landing SaaS?
Externalizar el Hero, las ilustraciones de funciones y la franja de beneficios a proveedores distintos rompe el sistema de diseño. Los iconos de stock saltan de estilo y la prueba social parece de otra marca. En el flujo del sitio oficial de Nano Banana, Nano Banana sirve para probar composición y volumen rápido, y Nano Banana Pro bloquea color de marca, identidad de producto/UI y zona segura del titular en el cierre. Compara la matriz antes de gastar créditos:
| Capacidad | Mezcla externalizada tradicional | Nano Banana / Nano Banana Pro |
|---|---|---|
| Composición del Hero del primer pantallazo | Una revisión tarda un día | Lenguaje natural para probar 5 direcciones; Pro fija color de marca y producto/UI con más estabilidad |
| Espacio negativo de las ilustraciones de funciones | El estilo de bancos de iconos salta | Bocetos limpios de tarjeta; Pro deja más clara la zona segura de un título corto |
| Unidad de la serie | Hero, funciones y franja de beneficios se hacen por separado | Se reutiliza el mismo esqueleto de prompt; el flujo de la misma cuenta se mantiene continuo |
| Recorte móvil | Tras exportar descubres que se cortó la cara o el producto | Anclas fijas de zona segura; el contraste del cierre Pro encaja mejor en el primer pantallazo |
| Entrada y aprendizaje | Herramientas dispersas | El sitio oficial de Nano Banana tiene guías y casos; la página pilar de Pro explica la selección |
En una frase: usa Nano Banana para explorar composición y cantidad; usa Nano Banana Pro para cerrar color de marca, identidad de producto/interfaz y zona segura del título. Decisiones y entradas: empieza por las páginas de producto Nano Banana y Nano Banana Pro; créditos y planes, en Precios. Esto no es «una sola imagen bonita»: es un sistema visual reutilizable de producto para Hero, funciones y prueba social.
2. Plan del kit visual de landing SaaS (8 piezas recomendadas)
Antes de llenar Figma con ilustraciones de stock, define en una tabla «el trabajo visual de cada bloque». Ahorra créditos y evita que Hero, funciones y franja de beneficios parezcan tres marcas:
| N.º | Tipo de imagen | Propósito | Modelo recomendado |
|---|---|---|---|
| 1 | Placa Hero | Visual principal detrás del H1 + CTA del primer pantallazo | Nano Banana Pro |
| 2 | Primer plano de producto/UI | Demostrar que «esto es un producto real» | Nano Banana Pro |
| 3 | Ilustración de función A | Metáfora de automatización / eficiencia | Nano Banana / Pro |
| 4 | Ilustración de función B | Metáfora de colaboración / flujo de trabajo | Nano Banana / Pro |
| 5 | Ilustración de función C | Metáfora de analítica / seguridad | Nano Banana Pro |
| 6 | Franja de beneficios / prueba social | Base para citas o muro de Logos | Nano Banana Pro |
| 7 | Escena de contraste antes/después | Explicar «antes vs después» | Nano Banana Pro |
| 8 | Ambiente CTA inferior | Cerrar la conversión sin robar el botón | Nano Banana Pro |
Consejo del sitio oficial: En el sitio oficial de Nano Banana, abre primero Showcase y la guía de prompts y guarda casos de «ilustración comercial limpia / Hero de producto». Luego entra en aplicación creativa de Nano Banana: es más rápido que inventar el look desde cero. Este kit es para Hero de landing SaaS, tarjetas de funciones y franja de beneficios / prueba social, no para Pitch Deck, webinars, Newsletter ni capturas ASO.
3. Checklist de assets (lo que decide si toda la web «parece un solo producto»)
Antes de abrir la aplicación creativa, prepara lo siguiente. Saltarse el paso es la razón número uno de que Hero, tarjetas de funciones y franja de beneficios parezcan tres empresas pegadas:
- Referencia de marca (obligatorio): silueta clara del Logo; color primario y secundario en nombre de color en inglés o hex
- Referencia de producto o interfaz (muy recomendado): captura real de UI o foto del producto como Imagen 1; escribe «no rediseñar el texto de la interfaz hasta dejarlo ilegible»
- Tono de categoría: herramienta B2B de productividad / herramientas para desarrolladores / SaaS de flujo de IA — elige solo uno y escríbelo en la descripción de estilo
- Lista de bloques: Hero, 3 tarjetas de funciones, franja de beneficios, CTA inferior — fija la cantidad antes de generar
- Proporción y zona segura: Hero en 16:9; tarjetas de funciones en 1:1; reserva ~40% de espacio negativo limpio para el título
- Restricciones negativas: no watermark, no fake pricing, no melted UI text, no random stock faces
No hace falta dibujar botones en el mockup antes. Nano Banana Pro puede dejar la zona segura del titular y del CTA solo con la descripción; cuanto más limpio el fondo, más estable queda luego el copy real. Trata esta lista como el brief de «un solo producto» para todo el kit.
4. Flujo en cuatro pasos (del sitio oficial a una landing publicable)
Paso 1: Entrar a la creación desde el sitio oficial de Nano Banana
- Abre aplicación creativa de Nano Banana desde el sitio oficial de Nano Banana
- Prioriza Nano Banana Pro para el Hero, el primer plano de producto y la franja de beneficios; usa Nano Banana para explorar metáforas puras
- Sube la marca o la imagen de producto/UI como Imagen 1
Paso 2: Elige plantilla según el orden del kit
Más abajo hay tres esqueletos de prompt en inglés listos para copiar (no inventes stubs acortados: pega los bloques completos para el Hero, la tarjeta de función y la franja de beneficios):
- Plantilla A: placa Hero de landing (16:9, gran zona segura de titular)
- Plantilla B: tarjeta cuadrada de función (1:1, una metáfora de función)
- Plantilla C: franja de beneficios / prueba social (16:9, amplio espacio negativo)
Paso 3: Haz un «control de publicación» tras generar
- Tras el recorte móvil del primer pantallazo, ¿aún se reconoce el producto y el color de marca?
- ¿La zona segura de titular y CTA es lo bastante grande, sin texturas que la llenen?
- ¿Los bordes de UI/producto están intactos y las etiquetas no se derriten?
- ¿Hero, tarjetas de funciones y franja de beneficios comparten temperatura de color y lenguaje de composición?
- ¿Hay precios falsos, Logos de clientes inventados o marcas de agua?
Paso 4: Itera con frases cortas + exporta por bloque
Itera con ajustes conversacionales cortos, luego exporta Hero y franja de beneficios en 16:9 y las tarjetas en 1:1, y superpone el copy y los botones reales en la landing. Seguimientos habituales:
- “enlarge headline safe zone”
- “keep brand purple”
- “simplify UI chrome”
- “simpler background, larger headline zone”
- “preserve UI label legibility”
Tras el cierre, exporta Hero y franja de beneficios en 16:9 y las tarjetas de funciones en 1:1; luego compón el copy y los botones reales en la página — nunca incrustes precios falsos en la placa. Para patrones de fallo y reparación, usa la página Failures y el blog de fallos comunes en el sitio oficial de Nano Banana.
5. Plantilla de prompt A: placa Hero de landing
Subject: SaaS landing-page hero background, 16:9. Preserve brand identity from Image 1 100% — logo silhouette, primary colors, and product/UI shape if present. Do not invent a different brand.
Composition: Product, UI frame, or abstract brand motif on the 【left third / right third】. Leave a large clean headline-safe zone on the opposite side (about 40% width) for H1 + subhead + CTA overlay later — no baked-in garbled text, no fake buttons with melted labels.
Style: 【B2B productivity / developer tools / AI workflow SaaS】; premium modern landing-page look; high contrast for above-the-fold readability on desktop and mobile.
Lighting: Soft studio key, gentle rim, subtle screen glow if UI is shown; avoid muddy midtones and neon overload.
Negative constraints: no watermark, no fake pricing numbers, no unreadable micro-UI text, no random stock faces, no cluttered dashboard spam.
Output: 16:9, 4K, Nano Banana Pro SaaS landing hero plate.
Cómo usarla
- Sube el Logo o la referencia de producto/UI como Imagen 1
- Pega el bloque inglés completo, rellena el tono de categoría y el lado de la zona segura
- Si el fondo es demasiado cargado, sigue con “simpler background, larger headline zone”
- Antes de cerrar, previsualiza el primer pantallazo una vez en escritorio y una vez en ancho móvil
6. Plantilla de prompt B: tarjeta cuadrada de función
Layout: Square SaaS feature illustration card, 1:1. Preserve brand accent from Image 1 as a quiet motif only. Communicate ONE feature metaphor — 【automation / collaboration / analytics / security】 — without baking long paragraphs.
Composition: One clear visual metaphor centered or left-weighted. Keep 40–50% calm negative space for a short feature title overlay later. Motif stays simple and icon-like, not a full comic scene.
Style: Minimal product-marketing illustration, Nano Banana Pro clean commercial plate, section-grid friendly.
Lighting: Even, low-drama; readable as a small card in a 3-column features row.
Negative constraints: no fake charts with readable numbers, no melted labels, no watermark, no stock photo collage, no unrelated mascot spam.
Output: 1:1, 4K, Nano Banana or Nano Banana Pro SaaS feature illustration.
Punto de aprendizaje: una tarjeta de función lleva una metáfora, no el párrafo entero de la función horneado en la imagen. El título real y los bullets van en la capa de copy de la web. Si solo quieres probar dirección rápido, empieza con Nano Banana y pasa a Nano Banana Pro para el cierre. Una tarjeta que intenta imprimir toda la explicación se vuelve ilegible en una fila de tres columnas.
7. Plantilla de prompt C: franja de beneficios / prueba social
Benefit strip / social proof backdrop for a SaaS landing page, 16:9 wide or 3:1 crop-friendly.
Identity: If a logo is uploaded as Image 1, preserve brand colors and silhouette 100%. Do not invent competitor logos. If a product shot is uploaded, preserve the SKU/UI 100%.
Composition: Soft brand-color gradient or quiet abstract geometry with a wide calm center band for future quote/logo-row overlay. Keep edges quiet so the strip can sit under a testimonials section.
Style: Consistent with the hero palette 【brand primary + charcoal/white】 so hero, feature cards, and benefit strip feel like one design system.
Lighting: Soft even wash, no harsh vignette that hides overlay text later.
Negative constraints: no fake customer logos, no watermark, no dense isometric city, no garbled testimonial text baked in.
Output: 16:9, 4K, Nano Banana Pro SaaS benefit-strip plate.
Punto de aprendizaje: la zona de prueba social necesita una placa silenciosa; Logos de clientes y citas reales se superponen con material auténtico. Logos falsos dañan la confianza y conllevan riesgo de cumplimiento. Preferir Nano Banana Pro cuando la paleta deba alinearse con el Hero. Más esqueletos de prompt están en la colección de prompts del sitio oficial de Nano Banana.
8. Proporciones, primer pantallazo y recomendaciones de exportación
| Uso | Proporción recomendada | Notas |
|---|---|---|
| Hero de escritorio | 16:9 | Reservar ~40% de espacio negativo para el título |
| Recorte Hero móvil | Cuidar la zona segura | El sujeto del producto no debe pegarse al borde |
| Tarjetas de funciones en tres columnas | 1:1 | Misma dirección de luz y misma paleta |
| Franja de beneficios / muro de Logos | 16:9 o recortable a 3:1 | Banda central ancha para superponer texto |
| Ambiente CTA inferior | 16:9 | No competir con el botón ni el formulario |
Aunque hayas exportado, previsualiza en los breakpoints objetivo. Muchos casos de «se ve premium en escritorio y en el móvil solo queda un bloque de color» vienen del contraste y del empaquetado de la zona segura — no del 4K en sí. Mantén limpia la zona del titular para que H1 y CTA sigan legibles.
9. Tres desgloses de casos (copia la estructura)
Caso 1: landing de herramienta B2B de productividad
- Objetivo: el Hero recuerda el púrpura de marca; tres tarjetas de funciones con el mismo lenguaje; la franja de beneficios deja sitio a citas de clientes
- Enfoque: plantilla A (producto a la derecha, zona de título a la izquierda) → B×3 (automatización / colaboración / informes) → C (banda ancha en degradado carbón)
- Resultado: el primer pantallazo y la zona de funciones parecen el mismo sistema de diseño
- Aprendizaje: no hornees precios falsos en el Hero; el precio va en el bloque de precios
Caso 2: home de documentación de herramienta para desarrolladores
- Objetivo: captura de UI legible, sin basura tipográfica; tono de «ingeniería creíble»
- Enfoque: primer plano de producto con Nano Banana Pro para bloquear la interfaz; tarjetas de funciones con poca decoración y mucho espacio negativo
- Resultado: visitantes técnicos dijeron que «no parece un SaaS de plantilla»
- Aprendizaje: en sitios para desarrolladores evita neón excesivo y efectos de ciencia ficción
Caso 3: rediseño de producto de flujo de trabajo con IA
- Objetivo: continuidad visual entre el sitio antiguo y el nuevo, pero con una mejora clara
- Enfoque: fija el color primario y la proporción de zona segura; solo cambia elementos de metáfora y un ajuste fino de la luz
- Resultado: los usuarios antiguos siguen reconociendo la marca; los nuevos perciben frescura
- Aprendizaje: cambia solo una clase de variable por vez para que la serie se mantenga estable
10. Errores comunes y cómo evitarlos
| Error | Consecuencia | Reparación |
|---|---|---|
| Llenar el Hero con números falsos de dashboard | Poco creíble y difícil de mantener | Hero = visual principal + zona de título solamente |
| Zona segura del titular llenada de textura | Al superponer H1/CTA el resultado se ensucia | “larger clean headline-safe zone” |
| Estilos de tarjetas de funciones sin relación | Toda la web parece un collage | Fija la descripción de paleta y de composición |
| Texto de UI derretido | El producto se siente falso | “preserve UI label legibility” + Nano Banana Pro |
| Generar Logos falsos de clientes en la franja de beneficios | Riesgo de confianza y de cumplimiento | Solo generar la placa; los Logos con material real |
| Cerrar el Hero solo con el modelo estándar | Bordes de producto borrosos | Hero y primer plano de producto: pasar a Nano Banana Pro |
Para una prevención sistemática, cruza Failures y las experimentos de parámetros del Lab en el sitio oficial de Nano Banana. La confianza de una landing SaaS se rompe más rápido con precios falsos, Logos inventados o UI derretida: trátalo como un freno duro antes de publicar.
11. Nano Banana vs Nano Banana Pro: ¿cómo elegir para una landing?
| Tarea | Mejor opción |
|---|---|
| Probar rápido 5 composiciones de Hero | Nano Banana |
| Cierre del Hero + bloqueo de color de marca y UI | Nano Banana Pro |
| Exploración de metáforas en tarjetas de funciones | Nano Banana / Pro |
| Placa silenciosa de franja de beneficios | Nano Banana Pro |
| Entrada de aprendizaje y explicación de producto | Sitio oficial de Nano Banana: páginas pilar y blog |
El detalle de la selección también está en el artículo de diferencias Nano Banana vs Pro y en la reseña del sitio oficial en el {{SITE_LINK}}. Regla práctica para landings: explora volumen en el modelo estándar, bloquea color de marca, identidad de producto/UI y zona segura del titular en Pro, luego compón el copy real fuera de la imagen — abre {{APP_LINK}} cuando estés listo para generar.
12. Tres pasos para empezar hoy (un boceto del primer pantallazo el mismo día)
- Abre el sitio oficial de Nano Banana → entra en aplicación creativa de Nano Banana → sube la marca o la imagen de producto/UI → elige Nano Banana Pro
- Ejecuta en orden la plantilla A (Hero) → B (tarjeta de función) → C (franja de beneficios); haz un control de publicación por pieza
- Exporta en 16:9 y 1:1, colócalas en el borrador de la landing y superpone el copy real; para créditos, consulta la guía de prueba gratuita y Precios en el sitio oficial
Entrar en la aplicación creativa
Cierre
Una landing SaaS no se gana con «una sola imagen mágica», sino con un sistema visual de producto reutilizable. Separa el Hero, las ilustraciones de funciones y la franja de beneficios; explora con Nano Banana, cierra con Nano Banana Pro, y apóyate en guías, casos y explicación de precios del sitio oficial de Nano Banana. Puedes estabilizar la calidad visual relacionada con la conversión del primer pantallazo sin alargar otra cadena de externalización.
Siguiente paso: revisa los antes/después verificados en Showcase o descarga el pack de plantillas Resources para guardar esqueletos de prompt, y lanza hoy este flujo de landing en aplicación creativa de Nano Banana.