Sobre esta plantilla
Price Calculator se capturó a 800x648 y se conserva como especificación, no como imagen de galería. “Get premium website within your budget” es la línea que la maquetación está pensada para sostener. La paleta es negro #000000 de base y rojo #FF5656 para los acentos. La entrega es un único componente: una página, sin plugins y sin herramientas de build entre tú y el diseño. Es más útil cuando cada sección de precios de Fintech tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Equipos de producto que escriben los textos de Precios y necesitan que cada línea respete la longitud para la que se dimensionó la tipografía de display.
- Desarrolladores front-end que reconstruyen esto en un único componente y quieren las transiciones especificadas y no adivinadas.
- Los responsables de producto que tengan que presupuestar la implementación leerán el acento rojo #FF5656 como el alcance real del trabajo.
Qué incluye
- Aquí nada se hereda. La maquetación se resuelve con valores fijos (pasos de espaciado de 98px), y eso es lo que mantiene compuesta la primera pantalla a cualquier ancho. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente. Conserva los valores citados cuando traslades la página.
- Color con una función asignada. El color se raciona a un solo acento: rojo #FF5656 en las acciones y negro #000000 en todo lo demás. Todo lo demás se apoya en negro #000000, y eso es lo que mantiene legible una paleta saturada.
- La composición es el contenido. La composición está completa en 800x648: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 800x648, y por eso se sostiene cuando cambia el texto. Conserva el marco; cambia el tema.
- El brief nombra los pasos. El espaciado se cita igual (pasos de espaciado de 98px), no como una escala que crece sola.
Movimiento e interacción
Movimiento que no estorba
Esta se entrega como composición estática en 800x648, así que la jerarquía tiene que funcionar sin movimiento, y funciona. La composición se queda quieta, así que la jerarquía tiene que sostener la página, y lo hace.
Casi nada de movimiento
El brief deja fuera la animación y deja que la maquetación de 800x648 sostenga la página, con el hover y la pulsación como únicos cambios.
Cómo ordena Price Calculator la primera lectura
El brief ocupa 3.168 caracteres y nombra el orden de lectura sin rodeos: el titular y la cuadrícula de tarjetas, con pasos de espaciado de 98px entre medias. Quien busca fintech recibe la oferta antes que las opciones.
Las cifras detrás de sección de precios
Cada relación de esta página es un valor que puedes comprobar: pasos de espaciado de 98px. Eso es lo que hace que Price Calculator se pueda reconstruir y no solo reproducir. Nada de este tipo de sección de precios depende de un valor por defecto.
Hacer tuyo este tipo de sección de precios
Una plantilla te pide que aceptes su maquetación; esta referencia te pide que la conserves y cambies todo lo de dentro. La diferencia es que pasos de espaciado de 98px se quedan fijos mientras el tema se mueve. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue.
Preguntas frecuentes
¿El prompt de Price Calculator es una especificación cerrada o un punto de partida?
El brief capturado ocupa 3.168 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é la ficha nombra un único componente?
La referencia está construida en un único componente, pero la maqueta no depende de esa decisión: el espaciado, la escala tipográfica y los valores de movimiento pasan a lo que ya uses.
¿Puedo publicar una página reconstruida a partir de Price Calculator sin acreditar nada?
El prompt lo publicó motionsites.ai de forma pública, y la vista previa de esta página es la captura original. Tómalo como referencia de estructura y movimiento, revisa las condiciones del sitio de origen y rehaz la composición con tu propio texto, tus medios y tu paleta antes de publicarla.
