Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Sección de tarifas editorial sobre papel cálido para un coworking ficticio de Brenmar. Dos conmutadores segmentados con pulgar de muelle cambian el periodo (mensual o anual con descuento) y los impuestos (con IVA o base imponible para autónomos). Al cambiar, cada dígito rueda en su tambor con un escalonado de derecha a izquierda, los decimales aparecen en superíndice, el precio anterior se tacha y la nota calcula el pago anual y el ahorro. El plan central es una tarjeta oscura con un borde de conic-gradient animado con @property que apunta siempre al cursor y gira solo en táctil. Debajo, una comparativa de 13 filas que se despliega y una garantía con sello circular giratorio. Encaja en webs de coworking, gimnasios, estudios, software, asesorías o cualquier servicio con cuota. Funciona en terracota, verde oliva o azul añil cambiando tres colores.
Encaja bien en webs de
- Prompt
- ≈16.393 tokens · con Lite
- Librerías
- ninguna
- Demo
- 38,2 KB · ligero
- Prueba en frío
- 9,8/10 · 30-09-2026
Antes de copiar
Tu marca, dentro del prompt
Cambia lo que quieras y copia: el prompt sale ya con el nombre, los colores y los textos de tu cliente. Lo que dejes en blanco se queda como en la demo.
Mete tu marca y tus colores en el prompt
Con Pro o con tu llave de regalo. Esto es lo que puedes cambiar:
- Nombre del negocio
- Ciudad
- Barrio o zona
- Entradilla bajo el titular
- Precio mensual del plan 1 (IVA incl.)
- Precio mensual del plan destacado (IVA incl.)
- Precio mensual del plan 3 (IVA incl.)
- Descuento del pago anual (%)
- Tipo de IVA (%)
- Días de garantía
- Teléfono
- Color del fondo (papel)
- Color de la tinta y del plan destacado
- Color de acento
Índice del prompt
Qué hay dentro del prompt
Qué trae el prompt, por apartados
- 01Qué es
- 02Librerías y esqueleto
- 03Tokens de diseño
- 04Estructura y contenido
- 05Movimiento
- 06Código clave
- 07Interacción
- 08Adaptación a móvil y tablet
- 09Accesibilidad y movimiento reducido
- 10Rendimiento
- 11Personalización
- 12Comprobación final
- Completo
- 7.423 palabras · ≈16.393 tokens
- Lite
- 1.670 palabras · ≈3.137 tokens
- Librerías
- ninguna
- Peso de la demo
- 38,2 KB (ligero)
- Resolución máxima (DPR)
- 2
- Se pausa fuera de pantalla
- sí
- Respeta «menos movimiento»
- sí
Tokens estimados para español (≈3,6 caracteres por token): sirven para orientarte, no son exactos.
prompt.md Pro
El prompt está en Pro
7.423 palabras en el Completo y 1.670 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.
Prueba en frío
Lo que salió al pegarlo en frío
Pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos el resultado con la demo. Prueba hecha el 30-09-2026.
Prompt CompletoFiel a la demo9,8/10
Prácticamente un calco: maquetación, tipografía, color, cuentakilómetros, borde de luz que sigue al cursor, comparativa plegable y sello giratorio salen idénticos en escritorio y móvil. Como el prompt trae el código casi literal, lo que se mide aquí es sobre todo la fidelidad de la copia, no la interpretación.
Prompt LiteFiel a la demo7,4/10
El ambiente, los textos, el cuentakilómetros con sus retardos, el borde de luz con amortiguación y el sello giratorio se reconocen enseguida. Cambian los detalles: los dos conmutadores van en una sola fila, los checks son círculos rellenos y las ventajas no llevan separadores, la tabla no tiene la cabecera «Incluye» y va con otro encuadre, la comparativa y la garantía entran sin animación, y en móvil «Tarifas 2026» baja a otra línea y la nota de los controles sigue visible.
Solo publicamos lo que hemos probado. Otras herramientas (ChatGPT, Gemini, Lovable…) pueden dar resultados distintos.
Paso a paso
Cómo usarlo en 4 pasos
- 01
Personaliza
Rellena el formulario de arriba con el nombre, los colores y los textos de tu cliente. Se meten en el prompt al copiar. - 02
Copia el Completo o el Lite
El Completo, para Claude, ChatGPT, Gemini o Cursor. El Lite, más corto, para Lovable, Bolt o v0, que aceptan menos texto. - 03
Pega e itera
Pégalo en una conversación nueva. Si quieres cambiar algo, pídelo con una frase corta:- «Añade un cuarto plan «Empresa» con precio «A medida» y botón de contacto»
- «Que el pago anual sea «2 meses gratis» en lugar de un porcentaje»
- «Cambia el acento a verde oliva y el plan destacado a azul noche»
- «Haz que las cifras rueden más despacio y con más rebote»
- 04
Publica
Guarda el resultado como HTML (o en tu proyecto) y súbelo a Vercel, Netlify o tu hosting de siempre. Tienes los pasos en la guía.
Licencia en claro
Qué puedes hacer con esta pieza
Todas las piezas incluyen licencia de uso comercial. Usa el resultado tal cual en tus productos, encargos freelance o webs de clientes, sin atribución.
Puedes
- Usarlo en tus webs y en las de tus clientes, también si cobras por ellas.
- Cambiarlo todo lo que quieras.
- Publicar el resultado sin citarnos.
No puedes
- Revender o regalar el prompt, la demo o el código como plantilla o biblioteca.
- Compartir tu cuenta Pro.
Es la misma licencia para lo gratis y lo Pro. La tienes entera en licencia de uso.
Preguntas frecuentes
Lo que suele preguntarse
¿Puedo usar precios con decimales o de cuatro cifras?
El cuentakilómetros tiene tres huecos para la parte entera y dos para los decimales. Para cuatro cifras basta con crear cuatro huecos en crearOdo y cambiar el 3 de «i - (3 - e.length)» por un 4. Los decimales solo se muestran en la vista sin IVA; con IVA los precios deben ser enteros.
¿Qué pasa si mi negocio vende a particulares y no quiero el conmutador de IVA?
Elimina el segundo fieldset y deja st.iva fijo en «con». La etiqueta «IVA incluido» se mantiene, que es lo que exige la normativa de consumo para particulares.
¿Sirve para un impuesto con otra tasa, como un IVA reducido?
Sí: pon el porcentaje (p. ej. 10 %) en la variable del IVA; si tu impuesto tiene otro nombre, sustituye la palabra «IVA» en los textos del conmutador, la etiqueta y el pie.
¿El borde de luz funciona en móvil?
En táctil no hay cursor que seguir, así que el brillo gira solo, una vuelta cada 7 segundos. Con movimiento reducido activado se queda quieto.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈16393 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3137 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
