Sobre esta plantilla
Prosthetics Hero muestra una forma de construir este tipo de sección hero para un producto de salud o bienestar y publica las instrucciones que lo generaron. Toda la página se construye sobre blanco #FDFCFC de base. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. El presupuesto de movimiento se agota en transiciones de 200ms. Cuando prepares el brief de cada sección hero de salud, parte de esta composición y sustituye el tema.
Pensado para
- Quien usa un generador con IA y quiere un brief que ya incluya un marco de 640x464 en vez de dejarlo todo al modelo.
- Si tres personas tienen que editar el diseño de sección hero, dales a los responsables de contenidos tipografía de 12px a 14px y pasos de espaciado de 13px en vez de una captura.
- Pensado para un fundador en solitario que saca un único diseño de sección hero para un producto de salud o bienestar y no tiene ningún sistema de diseño detrás.
Qué incluye
- Fila superior, una acción. La barra es una fila de texto y una acción, medida en tipografía de 12px a 14px y pasos de espaciado de 13px, así que se lee como franja y no como banda. Las etiquetas son lo bastante cortas para caber en una línea en cualquier ancho que cubra el brief.
- La composición es el contenido. Toda la composición cabe en una pantalla y se entrega como React y Tailwind CSS, con el texto, los medios y los controles nombrados en el brief. La página es una sola composición a 640x464, y por eso se sostiene cuando cambia el texto.
- La barra sigue la cuadrícula. Una serie corta de enlaces y una única acción se sitúan sobre sección hero, sostenidas en tipografía de 12px a 14px y pasos de espaciado de 13px, de manera que la barra nunca compite con la composición que tiene detrás.
- Una escala para tipo y marco. El brief fija tipografía de 12px a 14px, pasos de espaciado de 13px y transiciones de 200ms y deja el resto a la disposición, que es lo contrario de una escala que crece sola. Las proporciones del marco se registran junto a los tamaños, así un remontaje también acierta con el formato. Donde el brief calla, calla a propósito.
Movimiento e interacción
Rápido, pero deliberado
Las transiciones están fijadas en 200ms, y ese es el tiempo que deben cumplir los controles. Las duraciones son tan cortas que la respuesta se lee como reacción y no como animación.
Movimiento que no estorba
Aquí no hay librería de scroll: la composición de 640x464 se queda quieta y solo se mueven los elementos que responden a ti. El movimiento se trata como respuesta y no como adorno.
Qué cambiar primero en Prosthetics Hero
Si tu marca gasta una paleta más pesada, pruébala contra el marco antes de decidir. Como blanco #FDFCFC sostiene la página, un acento más oscuro necesita más contraste del que usa la referencia. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue.
Las cifras detrás de sección hero
El coste de una escala fija es menos margen para improvisar. Con tipografía de 12px a 14px y pasos de espaciado de 13px la composición se mantiene coherente, pero un elemento nuevo hay que encajarlo y no simplemente colocarlo. Nada de este tipo de sección hero depende de un valor por defecto.
Por qué esta composición funciona para salud
En esta página hay una sola promesa, y tipografía de 12px a 14px y pasos de espaciado de 13px la sostienen en su sitio. Nada por debajo de la primera pantalla tiene que cargar también con la oferta. Da a quien lee páginas de salud el camino más corto y honesto hasta la oferta.
Preguntas frecuentes
¿El prompt de Prosthetics Hero es una especificación cerrada o un punto de partida?
El brief capturado ocupa 3.421 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.
¿Por qué no se imprime aquí el prompt de Prosthetics Hero?
Todo lo que se cita en la página procede del brief capturado de 3.421 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 hero de Prosthetics Hero con otro stack?
Prosthetics Hero 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.
