Sobre esta plantilla
Aquí no hay una captura sino un caso de landing page de Prisma Creative Studio, con el brief original al lado. El titular de la propia página dice “I have skills in color grading, visual effects, and narrative design”, y la composición se construye alrededor de esas palabras exactas. El esquema de color es negro #101010 de base y blanco #E1E0CC para la tipografía, y la página está compuesta en Instrument Serif. El montaje es React y Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. La página reduce el movimiento a transiciones de 0.08s. Es más útil cuando cada landing page de Agencias y estudios tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Los desarrolladores que necesiten que el diseño de landing page aguante una conexión lenta usarán 455x800 y la escala tipográfica como presupuesto de peso.
- Quien le pase el brief de landing page a un modelo usará el prompt de 8.432 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de Prisma Creative Studio.
Qué incluye
- Navegación sin fondo propio. La barra es una fila de texto y una acción, medida en pasos de espaciado de 10px y transiciones de 0.08s, así que se lee como franja y no como banda. La marca se trata como tipografía y no como un logotipo compuesto, lo que mantiene la fila superior en una sola línea base.
- La escala baja de golpe. El tipo es Instrument Serif en lo alto de la escala, con el texto de apoyo muy por debajo, así la jerarquía no necesita color para leerse. La fuente va con tamaños fijos, y eso es lo que mantiene relacionadas la línea display y el texto de interfaz.
- Una cuadrícula de tarjetas sostiene el centro. Donde iría un bloque de texto corrido, esta página coloca un conjunto de paneles, y eso es lo que mantiene landing page fácil de escanear. La cuadrícula colapsa a una sola columna sin cambiar el orden de los paneles. La captura de la referencia es de 455x800.
- La navegación es fina a propósito. Una barra fina ocupa la parte superior de landing page, con la marca a la izquierda y los enlaces compuestos en Instrument Serif, de modo que la composición se lee antes como contenido que como interfaz.
Movimiento e interacción
Tiempos cortos y parejos
Los cambios de estado están fijados en 0.08s, así que la respuesta de los controles es un valor de diseño y no el que trae el navegador por defecto. El easing se especifica junto a la duración (0.08s), así que una reconstrucción no puede colar otra sensación sin avisar.
Las secciones llegan con el scroll
Parallax es el único comportamiento de scroll del brief, lo que evita que la página se sienta como una sucesión de efectos sueltos. La composición no depende de que el efecto se dispare, así que pasar deprisa con el scroll no cuesta nada. La maquetación tiene que funcionar con el efecto desactivado.
El reflujo de landing page
Aquí el tipo se limita con clamp en lugar de ir a saltos (un clamp entre 100px y 10px), así que la línea de display no pega brincos entre anchos. Los controles siguen siendo lo bastante grandes para tocarlos y el texto mantiene su orden de lectura en cualquier ancho.
Por qué esta composición funciona para agencia
Si tu primera pantalla explica hoy tres cosas, esta es la versión que explica una. Aquí navegación, la insignia de anuncio, la cuadrícula de tarjetas y el clip de fondo se colocan en orden de lectura, con pasos de espaciado de 10px y transiciones de 0.08s marcando el ritmo. Prisma Creative Studio enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Hacer tuyo este tipo de landing page
Coloca el texto nuevo al tamaño de display que nombra el brief (pasos de espaciado de 10px y transiciones de 0.08s) y el resto de la escala se ajusta sin rediseñar nada. Conserva el recorte del material: hace tanto trabajo como la tipografía.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Prisma Creative Studio?
El brief capturado ocupa 8.432 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.
¿Puedo reconstruir este diseño de landing page de Prisma Creative Studio con otro stack?
Prisma Creative Studio 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.
¿Cuánto de Prisma Creative Studio está animado?
Las transiciones van asociadas a estados de la interfaz y no a una línea de tiempo de scroll, y se resuelven en el rango de 0.08s. El brief anota los valores para que un port no tenga que adivinarlos.
