Sobre esta plantilla
AI Trip Planner muestra una forma de construir este tipo de sección de precios para una marca de viajes y publica las instrucciones que lo generaron. “Where will you go next?” es la línea que la maquetación está pensada para sostener. El esquema de color es blanco #FAFAFA de base y negro #0A0A0A para la tipografía, y la página está compuesta en Geist. Se entrega como React y Tailwind CSS, así que el conjunto de sección de precios se puede trasladar a un proyecto sin traspaso de diseño. El presupuesto de movimiento se agota en un vídeo en bucle de fondo. Toma prestada la estructura, no el tema: las cifras y el orden de sección de precios pasan a tu marca sin cambios.
Pensado para
- Toma prestada la estructura de sección de precios entera y sustituye los textos línea a línea cotejando con un breakpoint de 760px.
- Este diseño de sección de precios sirve a equipos que tienen que justificar un marco de 1470x1080 ante alguien que no estaba en el kickoff.
- Equipos internos que amplían su sección de precios y necesitan que tipografía de 15px a 40px y pasos de espaciado de 15px pasen a los bloques nuevos sin tocar los valores.
Qué incluye
- Enlaces antes de la acción. Una serie corta de enlaces y una única acción se sitúan sobre sección de precios, sostenidas en tipografía de 15px a 40px y pasos de espaciado de 15px, de manera que la barra nunca compite con la composición que tiene detrás. Las etiquetas son lo bastante cortas para caber en una línea a 760px, y el elemento activo se marca con peso y no con una píldora.
- Un clip, no una ilustración. Un único clip silenciado y en bucle llena el marco a 1470x1080 y 6s, recortado para cubrir, con el texto apilado encima. El brief mantiene las superposiciones fuera del vídeo para que nada le reste color. Un fotograma de póster a 1470x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona. Exporta a 1470x1080 o más ancho para que el recorte siga siendo honesto.
- La píldora de anuncio. Una insignia, un mensaje: la píldora se sitúa sobre el titular en Geist al paso más pequeño, y nada más compite por ese hueco. Está colocada de modo que el titular conserva el centro de la composición.
- Un campo, una acción. Aquí solo hay una decisión: rellenar el formulario o marcharse. Todo lo demás de la pantalla sostiene esa decisión. La acción se sitúa justo bajo el último campo, así la decisión nunca queda a más de un vistazo. Especifica el estado de foco.
Movimiento e interacción
Los controles son la capa interactiva
La capa interactiva es pequeña y predecible: estados hover en los botones y los enlaces y no en todas las tarjetas. Todo lo demás se queda quieto, lo que mantiene el énfasis en la composición. El hover y el foco están especificados juntos, así que el puntero y el teclado reciben la misma información.
El bucle hace el trabajo ambiente
El movimiento ambiente es un clip de 6s en 1470x1080, en bucle discreto detrás del texto y sin reaccionar al puntero. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco.
Cómo ordena AI Trip Planner la primera lectura
Comprometerse con un solo recorrido de lectura cierra los demás. El brief lo acepta, fija navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas en su sitio y gasta tipografía de 15px a 40px y pasos de espaciado de 15px en hacer obvio el camino. Quien busca viajes recibe la oferta antes que las opciones.
El brief de viajes se sostiene
6.398 caracteres de brief producen una sola pantalla sin relleno. Los valores que contiene son explícitos (tipografía de 15px a 40px y pasos de espaciado de 15px), y por eso la composición se sigue leyendo cuando cambian las palabras. Da a quien lee páginas de viajes el camino más corto y honesto hasta la oferta.
Hacer tuyo este tipo de sección de precios
No hace falta rehacer este tipo de sección de precios para que sea tuyo. Sustituye el titular y el material, conserva la escala (tipografía de 15px a 40px y pasos de espaciado de 15px) y la maquetación seguirá leyéndose como fue diseñada. Conserva el marco y la escala; el tema es la parte que debe cambiar.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de AI Trip Planner?
El brief capturado ocupa 6.398 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.
¿Cómo está organizada esta ficha de AI Trip Planner?
Todo lo que se cita en la página procede del brief capturado de 6.398 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Puedo reconstruir este diseño de sección de precios de AI Trip Planner con otro stack?
AI Trip Planner 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.
