Sobre esta plantilla
Rocket Pricing resuelve el problema de cada sección de precios de un producto de IA o SaaS con un solo brief capturado. El titular de la propia página dice “Clear pricing plans that scale with you”, y la composición se construye alrededor de esas palabras exactas. El esquema de color es negro #0E0D0E de base, y la página está compuesta en Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 640x472 antes de escribir código. Cuando prepares el brief de cada sección de precios de SaaS, parte de esta composición y sustituye el tema.
Pensado para
- Equipos que construyen este tipo de sección de precios para un producto de IA o SaaS y quieren el detalle medido (pasos de espaciado de 11px) en lugar de una captura que copiar.
- Los responsables de estudio que llevan varios proyectos a la vez usarán este diseño de sección de precios como patrón que copian las demás páginas.
- Quien le pase el brief de sección de precios a un modelo usará el prompt de 8.841 caracteres como punto de partida.
Qué incluye
- Aquí nada se hereda. Toda medida del brief es un número que puedes volver a medir: pasos de espaciado de 11px. Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado. Sustituye la tipografía o el texto, no la escala.
- La píldora de anuncio. Una insignia, un mensaje: la píldora se sitúa sobre el titular en Inter al paso más pequeño, y nada más compite por ese hueco. La píldora se compone en el paso más pequeño del brief, así se lee como etiqueta y no como un segundo título.
- La composición es el contenido. La composición está completa en 640x472: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 640x472, 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 11px), no como una escala que crece sola.
Movimiento e interacción
La interacción está en los controles
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, y eso es lo que evita que una primera pantalla densa se sienta cargada. El hover y el foco están especificados juntos, así que el puntero y el teclado reciben la misma información. Unos pocos estados fiables valen más que una lista larga de efectos.
Movimiento que no estorba
El brief deja fuera la animación y deja que la maquetación de 640x472 sostenga la página, con el hover y la pulsación como únicos cambios. Solo se mueven los elementos que responden al puntero.
Hacer tuyo este tipo de sección de precios
Cambiar la paleta de entrada es el error habitual. Altera el tono sin tocar la composición, y la maquetación sigue apoyada en pasos de espaciado de 11px; haz primero el texto y el material, y la paleta al final. Reescribe la línea de display antes de tocar el color.
El brief de SaaS se sostiene
Podrías reconstruirlo como una pila de tarjetas sueltas y perderías solo el argumento. Esta clase de sección de precios se lee como una única decisión: la insignia de anuncio, la fila de cifras, la cuadrícula de tarjetas y la lista de funciones en una sola secuencia. Rocket Pricing enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
El orden detrás de sección de precios
Comprometerse con un solo recorrido de lectura cierra los demás. El brief lo acepta, fija la insignia de anuncio, la fila de cifras, la cuadrícula de tarjetas y la lista de funciones en su sitio y gasta pasos de espaciado de 11px en hacer obvio el camino. Quien busca SaaS recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Rocket Pricing?
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 640x472. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Rocket Pricing depende de React y Tailwind CSS?
Rocket Pricing 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.
¿De dónde sale el diseño de Rocket Pricing?
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 640x472.
