Sobre esta plantilla
No-Code Waitlist es un caso de bloque de CTA de SaaS: nace de un único brief escrito y esta página lo documenta. Abre con “A new way to think and create with computers” y le da el marco a esa línea en lugar de encogerla en una tarjeta. La paleta es índigo intenso #020004 de base, tono claro #FFFFFF para la tipografía y azul apagado #7C78C7 para los acentos, con la tipografía Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 988x720 antes de escribir código. El presupuesto de movimiento se agota en transiciones de 60ms y un vídeo en bucle de fondo. Cuando prepares el brief de cada bloque de CTA de SaaS, parte de esta composición y sustituye el tema.
Pensado para
- Si hay que renunciar al movimiento, el diseño de bloque de CTA sigue leyéndose porque tipografía de 13px a 64px y secciones de 100vh se encargan de la jerarquía.
- Este diseño de bloque de CTA sirve a fundadores que necesitan una pantalla de prueba de que los textos de SaaS aguantan 9,4s de vídeo en bucle.
- Quien le pase el brief de bloque de CTA a un modelo usará el prompt de 6.532 caracteres como punto de partida.
Qué incluye
- La navegación es fina a propósito. Los enlaces van en una sola línea y a un único tamaño, y la acción #7C78C7 cierra la fila por la derecha, de modo que el ojo termina donde acaba la navegación. Los enlaces se componen a un tamaño menor que la marca, y la acción en #7C78C7 es el único elemento de la barra con peso.
- Medido, no estimado a ojo. La maquetación se resuelve con valores fijos (tipografía de 13px a 64px, secciones de 100vh, pasos de espaciado de 14px y transiciones de 60ms), y eso es lo que mantiene compuesta la primera pantalla a cualquier ancho. Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado. Conserva los valores que parecen arbitrarios.
- Un clip, no una ilustración. Un único recurso de 9,4s sostiene toda la primera pantalla, y la página no tiene un segundo medio que mantener sincronizado. El bucle es lo bastante corto (9,4s) para que el ojo lo lea como textura y no como una línea de tiempo.
- La composición es el contenido. La composición de bloque de CTA está construida para que el texto llegue antes que nada: el tipo lleva la jerarquía, el marco de 988x720 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 988x720, y por eso se sostiene cuando cambia el texto. Nada decorativo tiene sitio por encima del pliegue.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El movimiento ambiente viene del bucle de 9,4s en 988x720 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. El clip es lo bastante corto para girar sin costura visible, y eso importa más que su resolución.
Cambios de estado medidos
Una sola duración cubre las interacciones (60ms), y eso hace que hover y pulsación se lean como un mismo sistema. Nada espera a una posición de scroll, así que la página responde en cuanto la tocas. Cambios de estado rápidos, sin líneas de tiempo de scroll.
Cómo ordena No-Code Waitlist la primera lectura
Una pantalla, una acción y navegación, el titular, la insignia de anuncio, la fila de cifras y el formulario entre medias. El brief fija ese orden en lugar de dejar la primera pantalla a una pila de secciones. Quien busca SaaS recibe la oferta antes que las opciones.
Qué se sostiene para IA y SaaS
Un hero genérico y este tipo de bloque de CTA usan las mismas piezas. Aquí el orden lo dan navegación, el titular, la insignia de anuncio, la fila de cifras y el formulario y todo se mide con tipografía de 13px a 64px, secciones de 100vh, pasos de espaciado de 14px y transiciones de 60ms, así que la pantalla se lee como una secuencia y no como un contenedor. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Qué cambiar primero en No-Code Waitlist
Empieza por el texto, no por el color. Reescribe “A new way to think and create with computers” como una sola frase sobre tu producto y colócala en Inter al tamaño que usa el brief. Reescribe la línea de display antes de tocar el color.
Preguntas frecuentes
¿El prompt de No-Code Waitlist es una especificación cerrada o un punto de partida?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 988x720. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de bloque de CTA de No-Code Waitlist con otro stack?
No-Code Waitlist se construyó en React y Tailwind CSS, 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.
¿Cómo trato los medios de No-Code Waitlist en un proyecto de cliente?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 988x720.
