Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Una sección de reserva con aire editorial. A la derecha, un widget con raíl de progreso guía en cuatro pasos: tarjetas de servicio con duración y precio con IVA, un calendario propio con puntos de disponibilidad y días completos tachados, franjas de mañana y tarde, y un formulario con validación accesible. A la izquierda, un tique oscuro con muescas recoge cada elección con un fundido desde el desenfoque y genera un código de referencia. Los pasos se deslizan con la altura animada y el calendario se maneja con el teclado. Al enviar, abre WhatsApp o el correo con el mensaje escrito, o hace un POST a tu endpoint; después se dibuja una marca de éxito, se estampa el sello «Solicitada» y se ofrece un .ics para el calendario. Encaja en clínicas, centros de estética, peluquerías, asesorías o estudios. Funciona en verde pino, en terracota o en azul añil.
Encaja bien en webs de
- Prompt
- ≈19.401 tokens · con Lite
- Librerías
- ninguna
- Demo
- 38,9 KB · ligero
- Prueba en frío
- 9,6/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
- Actividad (antetítulo)
- Ciudad
- Dirección (para el .ics)
- Teléfono visible
- WhatsApp (solo cifras, con prefijo)
- Email de reservas
- Color principal
- Color de acento
- Color de fondo
- Color de texto y del tique
Í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.948 palabras · ≈19.401 tokens
- Lite
- 1.611 palabras · ≈3.061 tokens
- Librerías
- ninguna
- Peso de la demo
- 38,9 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.948 palabras en el Completo y 1.611 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,6/10
Prácticamente un calco: misma rejilla, tique con muescas, calendario con puntos y tachados, franjas, raíl y botón verde, con las mismas animaciones y el mismo guion de la vista previa. Solo cambia el momento del bucle en que cae cada captura.
Prompt LiteAceptable6,8/10
Conserva la estructura, los textos, los colores y el flujo de cuatro pasos con sus transiciones, pero se nota la reinterpretación: el tique alinea los valores a la izquierda con etiquetas en versalitas y muestra la hora sin la de fin, los días llevan fondo de tarjeta, el antetítulo es verde, la etiqueta de la vista previa va a la izquierda y el titular corta en otro sitio. Además, la vista previa empieza a escribir el nombre antes de que aparezca el paso 4.
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:- «Conecta la disponibilidad a mi Google Calendar en lugar de la simulada»
- «Añade un paso para elegir profesional antes del día»
- «Envía la solicitud a mi webhook de Make en vez de a WhatsApp»
- «Quita la vista previa automática y cambia el verde por azul añil»
- 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
¿Necesito un servidor para recibir las reservas?
No. Por defecto abre WhatsApp o el correo del cliente con el mensaje ya escrito y te llega como un mensaje normal. Si prefieres recibirlas en una hoja o en un CRM, pon la URL de tu webhook (Make, Zapier, n8n o un formulario) en CONFIG.endpoint y recibirás un JSON.
¿Los huecos del calendario son reales?
En la demo son simulados, pero estables: el mismo día muestra siempre los mismos huecos. Para usar tu agenda, sustituye la función huecos(d) por una consulta que devuelva las franjas libres de ese día.
¿Puedo cambiar los servicios, los precios y el horario?
Sí. Los servicios están en el array SERVICIOS (nombre, descripción, minutos, precio y etiqueta opcional) y el horario en la función franjas(). El domingo cerrado y los sábados solo por la mañana se cambian en esas mismas funciones.
¿Qué es la animación que se rellena sola?
Es una vista previa automática para enseñar el widget. Se detiene con el primer clic, toque o tecla y deja el formulario limpio. En tu web puedes desactivarla con escaparate: false.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈19401 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3061 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
