Sobre esta plantilla
Mind AI se capturó a 1920x1414 y se conserva como especificación, no como imagen de galería. El color se limita a #F6EAF2 de base, #000000 para la tipografía y índigo #A069C9 para los acentos y la página se compone en Questrial. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1920x1414 antes de escribir código. La página reduce el movimiento a transiciones de 4.042s, cubic-bezier(.16,1.3,1) y un vídeo en bucle de fondo. Sirve de referencia cuando construyas este tipo de landing page para un producto de salud o bienestar y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Quien usa un generador con IA y quiere un brief que ya incluya easing cubic-bezier(.16,1.3,1) en vez de dejarlo todo al modelo.
- Pensado para agencias que presentan propuestas de salud y necesitan incluir un único archivo HTML autocontenido en la primera respuesta al cliente.
- Si le pasas el brief a un modelo en lugar de a un diseñador, toma como punto de partida landing page y deja que el prompt recoja un breakpoint de 520px.
Qué incluye
- La barra sigue la cuadrícula. La barra reúne la marca, los enlaces de la sección y un botón en #A069C9, medida en tipografía de 14px a 28px y secciones de 100vh, así nunca acaba convertida en una segunda cabecera. Las etiquetas son lo bastante cortas para caber en una línea a 520px, y el elemento activo se marca con peso y no con una píldora.
- Vídeo a marco completo, sin panel. El vídeo de 1920x1414 se reproduce en bucle durante 5s detrás del texto, silenciado y en línea, sin ninguna capa de tinte entre ambos. Exporta a 1920x1414 o más ancho y el recorte de cobertura sigue funcionando. Exporta a 1920x1414 o más ancho para que el recorte siga siendo honesto.
- Lista, no muro de tarjetas. Las funciones se componen como una lista en Questrial y no como un muro de tarjetas. El espaciado entre filas hace la agrupación, así que no hacen falta cajas. Filas, no tarjetas.
- Una fila, sin desplegables. Diseña el estado colapsado antes de añadir un sexto enlace. La captura de la referencia es de 1920x1414.
Movimiento e interacción
Un bucle, no una secuencia
El movimiento ambiente viene del bucle de 5s en 1920x1414 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. Nada más en la página se anima de forma continua, así que el medio es lo único que pide atención.
La escena es todo lo visual
Aquí la decisión de diseño es renderizar en tiempo real (un lienzo WebGL), y la maquetación se construye para dejarle sitio. El render es lo último en estar listo, así que la página tiene que funcionar en el estado previo a su carga.
El reflujo de landing page
Este tipo de landing page se compone a 1920x1414 y luego se recompone para anchos estrechos: la tipografía se limita entre 14px y 28px, la maquetación cambia a 520px y la sección se mantiene a 100vh, así que la versión de móvil es una decisión y no un apretujón. El orden es lo último que cambia.
El brief de salud se sostiene
La afirmación se hace una sola vez, en tamaño de display. En esta clase de landing page todo lo demás se ordena alrededor de esa línea: navegación, el titular, la insignia de anuncio, la fila de cifras y la lista de funciones, y ninguna segunda promesa compite por la primera lectura. Da a quien lee páginas de salud el camino más corto y honesto hasta la oferta.
Cómo ordena Mind AI la primera lectura
Aquí el orden es el diseño: navegación, el titular, la insignia de anuncio, la fila de cifras y la lista de funciones se colocan para que la oferta llegue antes que la prueba, y la distancia entre ambas la marcan tipografía de 14px a 28px y secciones de 100vh. Quien busca salud recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Mind AI?
El brief capturado ocupa 37.004 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Cuánto de Mind AI depende de un único archivo HTML autocontenido?
Mind AI se construyó en un único archivo HTML autocontenido, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿Por qué no se imprime aquí el prompt de Mind AI?
Todo lo que se cita en la página procede del brief capturado de 37.004 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
