Página web para barbería con IA: los 2 prompts que usé

Recursos del video: los 2 prompts para la página web de la barbería

Son los prompts exactos del video, listos para copiar. Para cambiarlos a tu barbería, solo cambia la sección «Datos del negocio»: nombre, dirección, horario, servicios y barberos. Lo demás no se toca.

• Prompt 1, el de Claude: dirección de arte, las 8 secciones de la página y el espacio para el calendario de reservas. Este lo pegué directo en AI Studio.
• Lo que le pedí a Ask AI: mi petición para que mejorara el prompt 1. Pégala en tu Ask AI con el prompt 1 debajo y te devuelve tu propia versión mejorada.
• Prompt 2, el que me devolvió Ask AI: la versión «premium luxury», con reglas, fases de trabajo, criterios de aceptación y las fotos que generó Ask AI. Con este salió la web que más me gustó.

Los tres están completos al final de este artículo, en «Los prompts completos para copiar».

Para usar AI Studio y Ask AI necesitas una cuenta de HighLevel. Si aún no la tienes, aquí puedes probar HighLevel 30 días gratis.

Paso a paso

1. Entra a la subcuenta donde vas a crear la web y copia el prompt 1 (01:20).
2. Abre Ask AI y pídele que revise el prompt y te lo regrese mejorado (01:44).
3. En AI Studio, crea un proyecto desde cero y pega el prompt (02:31).
4. Revisa la primera versión y ajústala con Visual Edits, con el código o con un prompt (04:10).
5. Si AI Studio te pide conectar un calendario, sáltalo por ahora: el de servicios se incrusta después (06:28).
6. Publica la web y conecta tu dominio (12:44).

Dos formas de hacer la misma página web con IA

Hice el mismo experimento de dos formas, en igualdad de condiciones, para que veas qué cambia (01:27):

• Forma 1: el prompt que hice con Claude, pegado directo en AI Studio.
• Forma 2: el mismo prompt, pero antes se lo pasé a Ask AI para que encontrara todas las áreas de mejora.

Ask AI es la inteligencia artificial que ya viene dentro de tu cuenta de GoHighLevel. Le pedí que se viera «luxury», con una foto en el hero de la barbería o de la gente trabajando y con las fotos de los barberos (01:44). Fíjate en un detalle: Ask AI generó las imágenes él solo y las dejó dentro del prompt. Yo no descargué nada; nada más copié y pegué.

AI Studio es la IA de GoHighLevel que te permite hacer aplicaciones y sitios web. Creas un proyecto desde cero, pegas el prompt y se pone a trabajar (02:31). Las dos IA piensan un rato antes de entregar, así que no te desesperes si no ves nada de inmediato.

Qué lleva un buen prompt para una web

Lo que hace que la web no salga como plantilla no es la IA, es lo que le das. El prompt 1 ya trae las decisiones tomadas: la paleta (negro carbón, crema y latón), dos tipografías, qué está prohibido («Bienvenidos a…», tarjetas con sombra todas iguales, emojis), cómo se comporta cada sección y un solo objetivo: que el visitante reserve. También le prohíbe inventar datos: si falta la dirección o el teléfono, deja el espacio entre corchetes.

Imagínate que le pides a un diseñador «hazme una web para una barbería». Te va a entregar lo primero que se le ocurra. Si le das la dirección de arte, el recorrido y los datos, te entrega algo que se parece a lo que tenías en la cabeza. Con la IA pasa exactamente lo mismo.

Cómo editar tu web de AI Studio: 3 formas

La web del prompt de Claude salió bien, pero con dos detalles: mucho aire arriba del título y sin menú de navegación a la vista (03:45). Son justo el tipo de cosas que vas a querer corregir en cualquier proyecto, y AI Studio te deja hacerlo de tres maneras.

1. Visual Edits

Le das a Visual Edits, seleccionas el contenedor o el texto que quieres y lo cambias ahí mismo. En el video cambié «El filo» por «La navaja», lo guardé y se aplicó (04:10). Es lo más rápido para un texto o un color.

2. El código

También lo puedes hacer a nivel de código. Buscas el componente en las carpetas del proyecto (en mi caso, routes → index y luego el Hero), cambias el texto y guardas (04:25). Cambié «Guadalajara, Jalisco» por «Mérida, Yucatán» y se reflejó en la página. No necesitas saber programar para un cambio así, pero sí saber dónde buscar.

3. Con prompts (la que yo uso)

La tercera es la que a mí más me gusta: escribirle lo que quieres en el chat (05:39). Le dije que el hero tenía demasiado espacio arriba y que me creara un menú de navegación con enlaces a cada sección y un botón «Reservar cita». Lo hizo: el menú ya lleva a cada parte de la página y el botón baja al espacio de la reserva.

Te recomiendo pedir un cambio por mensaje. Si le mandas cinco cosas juntas, es más fácil que se le pase alguna.

Si AI Studio te pide conectar un calendario

Mientras trabajaba, AI Studio me pidió conectar un calendario (06:28). No lo hice, y ojo con esto: los calendarios que te ofrece ahí son calendarios personales. Para una barbería lo que quieres es un calendario de servicios, donde el cliente elige si quiere corte, barba o corte y barba, y con qué barbero. Ese se incrusta en el espacio que el prompt ya dejó listo, y lo armamos en el siguiente video de la serie.

¿Cuál quedó mejor: Claude o Ask AI?

La web que salió con el prompt de Ask AI me gustó más (07:47). Trae el menú de navegación desde el principio, se esconde cuando bajas y vuelve a aparecer cuando subes. Tiene las fotos que generó Ask AI en el hero, en la sección de los barberos y en el cierre, el mapa y un final con su botón de reservar.

La realidad es que las dos sirven como punto de partida. La diferencia está en lo que agregó Ask AI al prompt: reglas que «ganan sobre cualquier otra parte del documento», un orden de trabajo en tres fases y una lista de criterios para revisar al terminar. Un prompt más preciso deja menos cosas a la suerte (08:45).

Y si no quieres complicarte, también puedes empezar al revés: pedirle a Ask AI que te haga todas las preguntas necesarias para crear tu landing page, y usar lo que te entregue como prompt.

Un detalle importante si se la vas a entregar a un cliente: las fotos de los barberos las generó la IA. El prompt 2 las marca para cambiarlas por fotos reales del local y del equipo, porque la gente quiere reconocer a quien le va a cortar el pelo.

Animaciones y componentes de 21st.dev

A esto le puedes hacer muchísimas cosas con prompts. Le pedí que en la sección «Conoce a tu barbero» las fotos de Carlos y Diego aparecieran con una animación de entrada (09:26). En la vista previa no se veía; al publicarla y abrirla en una ventana nueva, ahí estaba. Si un cambio no aparece, revisa la versión publicada antes de volver a pedirlo.

Si quieres algo más elaborado, en 21st.dev hay componentes de React con su prompt listo para copiar (10:16). Eliges uno, por ejemplo un hero, copias el prompt (te pide iniciar sesión) y lo pegas en AI Studio.

Ahí me pasó algo que te va a pasar: AI Studio creó el componente, pero no se veía en la página (13:46). El componente existía en el código, solo que no estaba montado en ninguna ruta. Se lo dije claro, que hiciera lo necesario para que se viera en la página de inicio, y lo colocó. A veces AI Studio es un poco terco: dile exactamente qué ves y qué esperas.

Cuánto cuesta y cómo publicarla con tu dominio

El costo

Cada prompt cuesta centavos. En el video, Ask AI consumió menos de un centavo de dólar por mensaje, y cada cambio en AI Studio, unos pocos centavos más (10:53). Ese día, contando otras pruebas que había hecho para otros videos, el total fue de unos 3 dólares (11:16). Para una web que le puedes vender a un negocio, no es mucho.

Ten en cuenta que en HighLevel también puedes asignarle un paquete de inteligencia artificial a cada usuario de tu agencia (11:21). Así esa persona usa la IA en distintas subcuentas sin que tengas que contratarla en cada una. Cada plan tiene sus límites; yo lo llevo usando bastante y todavía me queda margen.

Publicar y conectar tu dominio

Publicar es darle Publish. Para usar tu dominio, en la misma ventana pones tu custom domain y AI Studio te dice qué registros agregar en tu proveedor de dominio (12:44):

• si usas un subdominio, te da solo un registro CNAME;
• si usas el dominio principal, te da un registro A y un CNAME.

Si ese dominio ya tenía registros, te va a pedir que los borres primero. Si nunca has movido los DNS de un dominio, aquí te explico cómo configurar un dominio en GoHighLevel.

Varias páginas en el mismo sitio

Mucha gente pregunta si en AI Studio se puede hacer la página de contacto, la de nosotros o un blog. Sí se puede: cada una se crea en otra ruta del proyecto (14:39).

Lo que sigue: que la web trabaje para la barbería

Una web bonita es el principio. Lo que hace que una barbería la quiera es que le llene la agenda y no tenga que contestar cada mensaje. El siguiente paso es conectar lo que llega de la web con tus automatizaciones: te explico cómo en formularios de AI Studio con tus workflows. Si también quieres que te escriban por WhatsApp desde la página, aquí está cómo poner un chat de WhatsApp en tu página web. Y si vas a medir anuncios, te va a servir instalar el pixel de Meta en AI Studio.

Puedes hacer cosas tan sencillas como esta o mucho más complejas, todo depende de lo que pidas. Si quieres ver más de lo que puedes construir con IA en HighLevel, ahí están todos los tutoriales del tema.

Los prompts completos para copiar

Aquí están completos. Cópialos tal cual y cambia solo los datos del negocio.

Prompt 1: el de Claude (directo a AI Studio)

Actúa como director de arte y desarrollador front-end senior. Vas a crear el sitio de una barbería que no se parezca a ninguna plantilla: una experiencia de una sola página, con dirección de arte propia, interacciones que sirvan para algo y una sección lista para reservar sin salir del sitio. Lee todo antes de empezar. Las decisiones de diseño (paleta, tipografía, estructura, objetivo) ya están aquí: no hace falta que me hagas preguntas de diseño.

1. DATOS DEL NEGOCIO (usa solo estos; no inventes ninguno)

• Nombre: Barbería El Filo
• Ciudad y dirección: [DIRECCIÓN], Guadalajara, Jalisco
• Horario: martes a sábado de 10:00 a 20:00, domingo de 10:00 a 15:00, lunes cerrado
• Teléfono: [TELÉFONO] · Instagram: [INSTAGRAM]
• Servicios (nombre · duración · precio · una línea):
• Corte · 40 min · $250 · tijera y máquina, lavado y peinado
• Barba · 30 min · $180 · perfilado con navaja y toalla caliente
• Corte + barba · 60 min · $380 · el servicio completo
• Barberos (nombre · qué hace):
• Carlos · cortes clásicos y fade
• Diego · barba y afeitado con navaja
• Reservas: un calendario de servicios de HighLevel (los 3 servicios, con Carlos y Diego). Te paso su código para incrustarlo después.
• Preguntas frecuentes:
• ¿Puedo llegar sin cita? Sí, pero con cita no esperas.
• ¿Cuánto dura un corte? 40 minutos; corte y barba, una hora.
• ¿Cómo pago? Efectivo, tarjeta o transferencia.
• ¿Puedo cambiar mi cita? Sí, desde el mensaje de confirmación que te llega por WhatsApp.

2. EL OBJETIVO Y EL RECORRIDO

Un solo objetivo: que el visitante reserve. Cada sección lo acerca a la sección «Reserva».

Curva de emoción: entra con impacto (orgullo de oficio) → calma y confianza (servicios claros, precios a la vista) → cercanía (conoce a su barbero) → el momento cumbre: la reserva, con los servicios a la vista y su hora a un clic, sin salir de la página → tranquilidad (dónde y cuándo) → cierre limpio.

3. DIRECCIÓN DE ARTE

Concepto: «oficio de navaja». Editorial y cinematográfico, como la portada de una revista de oficio, no como una plantilla de barbería.

• Paleta: negro carbón (#0E0D0B), crema hueso (#EDE6D8), latón cepillado (#B08D57) como único acento; un rojo de poste de barbería (#9E2B25) solo en detalles mínimos. Contraste AA en todo el texto.
• Tipografía: dos familias de Google Fonts. Títulos: «Bodoni Moda» (alto contraste, tamaños grandes, interlineado apretado, tracking negativo). Texto: «Manrope». Nada de una tercera fuente.
• Textura: grano fino de película sobre el fondo oscuro (muy sutil), filetes de 1 px en latón, números de capítulo pequeños (01–08) junto a cada sección.
• Composición: asimétrica y con aire. Títulos enormes que se cruzan con las fotos. Ritmo de espacios: mucho aire antes de cada sección y poco entre título y texto. En celular, composición propia (no la de escritorio encogida).
• Imágenes: usa las fotos que te adjunto, con un tratamiento de color cálido y contrastado igual para todas. Si no te adjunto fotos, usa imágenes de barbería sin rostros reconocibles y márcalas para cambiarlas después.
• Prohibido: el hero centrado con degradado genérico, tarjetas con sombra todas iguales, emojis, glassmorphism, iconos de stock en cada sección, textos de relleno, «Bienvenidos a…».

4. SECCIONES (cada una se comporta distinto; nunca dos seguidas con el mismo efecto)

01 · Hero. Foto a pantalla completa que se desplaza más lento que el texto (parallax suave) y se oscurece poco a poco al bajar. El titular «[TITULAR CORTO SOBRE EL OFICIO]» se revela al cargar como una pasada de navaja: una máscara diagonal que lo descubre de izquierda a derecha en ~900 ms. Debajo, el botón principal «Reservar» y el horario de hoy.

02 · El oficio. Una frase grande que se ilumina palabra por palabra conforme el visitante hace scroll (de crema al 20 % a crema al 100 %).

03 · Servicios. Como la carta de una barbería clásica: nombre, línea de puntos que se dibuja al entrar en pantalla, duración y precio. Al pasar el mouse (o tocar en celular) cada servicio se expande y muestra su descripción y un botón «Reservar este servicio» que baja suave a la sección Reserva.

04 · El equipo. Carlos y Diego en retratos verticales grandes. En escritorio, la foto se inclina 3–4° siguiendo el puntero; en celular, un carrusel con deslizamiento. Cada uno con su especialidad y el botón «Reservar con [nombre]», que baja suave a la sección Reserva.

05 · RESERVA (el momento cumbre). Título «Escoge tu hora». Aquí va a ir un calendario de servicios de HighLevel que te voy a pasar después como código para incrustar. Por ahora NO incrustes ningún calendario, no inventes uno, no construyas un sistema de reservas propio y no conectes nada: solo deja listo el espacio.

• Un contenedor con id="calendario-reservas", del ancho de su columna (máximo 760 px), con alto mínimo de 720 px en escritorio y 900 px en celular, marco de 1 px en latón y fondo crema al 4 %.
• Dentro, mientras no tenga el código, un aviso discreto centrado: «Aquí va el calendario de reservas».
• Ese contenedor y sus padres, sin animaciones ni transformaciones (nada de parallax, tilt ni efectos al entrar): el calendario tiene que verse quieto y completo.
• Junto al contenedor (abajo en celular), un resumen fijo: los 3 servicios con duración y precio, los dos barberos y «Te llega la confirmación por WhatsApp».

06 · Dónde y cuándo. Mapa embebido de Google Maps con la dirección, el horario completo y una etiqueta viva «Abierto ahora» / «Cerrado · abre [día] a las [hora]» calculada con la hora de Guadalajara (America/Mexico_City).

07 · Preguntas frecuentes en acordeón (uno abierto a la vez, con animación de altura).

08 · Cierre: frase final grande y el botón «Reservar»; pie con logo, dirección, teléfono, Instagram y horario.

Elementos de todo el sitio:

• Un indicador de avance de lectura en forma de poste de barbería: una franja vertical delgada en el borde derecho con rayas diagonales rojo, crema y latón que se llena con el scroll (en celular, una franja horizontal arriba).
• Menú fijo y discreto que aparece al subir; en celular, una barra inferior fija con «Reservar» que se oculta cuando la sección Reserva está en pantalla.
• Todos los botones «Reservar» llevan a la sección 05. Ningún botón queda sin destino ni apunta a «#».

5. MOVIMIENTO E INTERACCIÓN

• Cada animación enseña algo o guía la vista; nada de animación por adorno.
• Solo transform y opacity, con IntersectionObserver o la posición del scroll; sin librerías pesadas. Nada de secuestrar el scroll ni de scroll suave forzado.
• Curvas de salida suaves (cubic-bezier(.2,.7,.1,1)), duraciones de 300–900 ms.
• Con prefers-reduced-motion, todo aparece quieto y completo.
• En celular, cada efecto de mouse tiene su versión táctil o se quita.

6. TÉCNICO

• Componentes pequeños: ninguno de más de 300 líneas (uno por sección).
• Rendimiento: la foto del hero carga primero; las demás, diferidas. Fuentes con display=swap. Que la página cargue rápido en un celular con datos.
• HTML semántico (header, main, section, footer), foco visible, textos alternativos, acordeón accesible con teclado.
• SEO en español de México: title «Barbería El Filo · Guadalajara», meta description, og:title, og:description y lang="es-MX".
• Si falta un dato, deja el espacio marcado entre corchetes para llenarlo después; no lo inventes. Todo el texto, en español de México.

Al terminar, dime en una lista corta qué espacios quedaron por llenar.

Lo que le pedí a Ask AI para mejorarlo

Pega esto en Ask AI y, debajo, el prompt 1 completo:

Necesito que revises este prompt que creé con Claude Code e identifiques todas las áreas de mejora que tenga. Quiero un aspecto visual muy atractivo que se vea luxury. Compleméntamelo con fotos. Puedes poner una foto en el hero de la barbería o de la gente trabajando. Ponme las fotos de los barberos. Mejora el prompt y quiero que sea un aspecto visual y estético excelente. Premium luxury.

Prompt 2: el que me devolvió Ask AI

Trae las fotos que generó Ask AI para este ejemplo. Si lo usas para tu barbería, Ask AI te genera las tuyas, y antes de publicar cámbialas por fotos reales del local.

PROMPT · Barbería El Filo · versión 2 (Premium Luxury)

Actúa como director de arte y desarrollador front-end senior. Vas a crear el sitio de una barbería de lujo que no se parezca a ninguna plantilla: una sola página, con dirección de arte propia, interacciones que sirvan para algo y una sección lista para reservar sin salir del sitio.

Lee todo antes de empezar. Las decisiones de diseño ya están tomadas: no me hagas preguntas de diseño. Si algo falta, déjalo entre corchetes; no lo inventes.

0. Reglas inviolables y orden de trabajo

Estas reglas ganan sobre cualquier otra parte del documento:

• La sección Reserva (05) es sagrada: sin animaciones, sin transformaciones, sin filtros, sin overflow: hidden ni will-change en el contenedor ni en ninguno de sus ancestros.
• No incrustes, no inventes ni conectes ningún calendario ni sistema de reservas. Solo se deja listo el espacio.
• Ningún dato del negocio fuera de la sección 1. Ningún texto de relleno.
• Con prefers-reduced-motion, todo aparece quieto y completo.
• Todo el texto en español de México, tuteando.

Trabaja en tres fases y al cerrar cada una verifica lo que corresponda:

• Fase A · Fundamentos: tokens (color, tipografía, espacios), rejilla, grano, filetes, imágenes optimizadas, indicador de avance, menú y barra inferior.
• Fase B · Secciones 01 a 08, una por una, cada una en su propio componente.
• Fase C · QA contra los criterios de aceptación de la sección 9.

1. Datos del negocio (usa solo estos)

• Nombre: Barbería El Filo
• Dirección: [DIRECCIÓN], Guadalajara, Jalisco
• Horario: martes a sábado de 10:00 a 20:00 · domingo de 10:00 a 15:00 · lunes cerrado
• Teléfono: [TELÉFONO] · Instagram: [INSTAGRAM] · WhatsApp: [WHATSAPP]
• Año de fundación: [AÑO] (solo se muestra si me lo das; si no, no aparece)
• Servicios:
• Corte · 40 min · $250 · tijera y máquina, lavado y peinado
• Barba · 30 min · $180 · perfilado con navaja y toalla caliente
• Corte + barba · 60 min · $380 · el servicio completo
• Barberos:
• Carlos · cortes clásicos y fade
• Diego · barba y afeitado con navaja
• Reservas: un calendario de servicios de HighLevel (los 3 servicios, con Carlos y Diego). Me pasarán el código para incrustarlo después.
• Preguntas frecuentes:
• ¿Puedo llegar sin cita? Sí, pero con cita no esperas.
• ¿Cuánto dura un corte? 40 minutos; corte y barba, una hora.
• ¿Cómo pago? Efectivo, tarjeta o transferencia.
• ¿Puedo cambiar mi cita? Sí, desde el mensaje de confirmación que te llega por WhatsApp.

2. Objetivo y recorrido emocional

Un solo objetivo: que el visitante reserve. Cada sección lo acerca a la sección Reserva.

Curva: impacto y orgullo de oficio (01–02) → calma y confianza, precios a la vista (03) → cercanía, conoce a su barbero (04) → momento cumbre, escoge su hora sin salir de la página (05) → tranquilidad, dónde y cuándo (06–07) → cierre limpio (08).

3. Dirección de arte · «Oficio de navaja»

Concepto: portada de revista de oficio, editorial y cinematográfica. Piensa en una barbería de hotel de lujo: sobria, cálida, silenciosa, con cada detalle cuidado. El lujo se comunica con contención, escala, aire y precisión, no con adornos.

Paleta (única, sin añadir colores)

• Carbón #0E0D0B (fondo) · Crema hueso #EDE6D8 (texto y superficies claras)
• Latón cepillado #B08D57: único acento. Úsalo solo sobre fondo oscuro (contraste aprox. 6:1). Sobre crema NO cumple AA: ahí usa carbón.
• Rojo poste #9E2B25: solo en detalles decorativos mínimos (franja del indicador, un punto). Nunca como texto (no cumple AA).
• Texto secundario: crema al 72 % mínimo sobre carbón. Nunca por debajo de AA.

Tipografía (solo dos familias, Google Fonts, display=swap)

• Títulos: Bodoni Moda con eje óptico (opsz) activado, pesos 400–500, cursiva para una palabra clave por título. Tamaños enormes con clamp() (escritorio hasta ~11rem), interlineado 0.9–0.95, tracking −0.02 a −0.035em, text-wrap: balance.
• Texto: Manrope 400/500. Microtipografía en mayúsculas con tracking 0.16–0.2em para etiquetas, números de capítulo y pies de foto.
• Números de precio y duración en Bodoni, cifras alineadas.

Textura y detalle

• Grano de película muy sutil (opacidad 4–6 %) en un pseudo-elemento fijo con pointer-events: none, que NO cubra la sección Reserva.
• Filetes de 1 px en latón al 60 %. Viñeta suave en los bordes de las fotos.
• Números de capítulo 01–08 en latón, pequeños, junto a cada título, con un filete que sale de ellos.
• Pies de foto editoriales discretos («Fig. 01 · [descripción]») en las fotos grandes.

Composición

• Rejilla de 12 columnas, asimétrica. Márgenes laterales generosos. Títulos enormes que se cruzan con las fotos (el título va por encima, sobre la zona oscura de la foto para mantener contraste).
• Ritmo de espacios: 160–220 px de aire antes de cada sección en escritorio; poco entre título y texto.
• Celular: composición propia, no la de escritorio encogida. Títulos en 2–3 líneas, fotos a sangre, recortes verticales, barra inferior fija.

Prohibido: hero centrado con degradado genérico, tarjetas con sombra todas iguales, emojis, glassmorphism, iconos de stock, textos de relleno, «Bienvenidos a…», sliders automáticos, cursor personalizado, modales.

4. Fotografía

Todas con el MISMO tratamiento: tonos cálidos, contraste alto, negros carbón, luces crema, reflejos latón, grano fino. Aplícalo de forma consistente (un único filtro CSS estático contrast() saturate() sepia() suave más una capa mix-blend-mode: multiply en latón al 8–12 %). El filtro estático está permitido; solo se restringen las animaciones.

Fotos entregadas (descárgalas a /assets/img/, conviértelas a AVIF y WebP, genera srcset de 480/800/1280/1920 px, declara width y height para evitar saltos de diseño):

• hero.* · 01 Hero, fondo a pantalla completa · 16:9 · https://storage.googleapis.com/crm-conversations-ai-production/ask-ai-images/1792078649313/b8276acb-9f54-4407-9986-444cb3d5f5d8.png
• oficio.* · 02 El oficio y/o 06, foto de apoyo · 3:2 · https://storage.googleapis.com/crm-conversations-ai-production/ask-ai-images/1792078652527/965b9be1-aa4a-413a-b22a-0584d6f33a7d.png
• carlos.* · 04 Retrato de Carlos · 3:4 · https://storage.googleapis.com/crm-conversations-ai-production/ask-ai-images/1792078650733/4f0f17e6-2037-41cb-87ac-d98200521ee1.png
• diego.* · 04 Retrato de Diego · 3:4 · https://storage.googleapis.com/crm-conversations-ai-production/ask-ai-images/1792078652463/0e728517-cf54-43d0-975a-2a7983858035.png
• detalle.* · 08 Cierre, foto de fondo/apoyo · 4:5 · https://storage.googleapis.com/crm-conversations-ai-production/ask-ai-images/1792078650862/16f51030-eb50-4eab-a38a-35f3e1ed86a9.png

Reglas de uso:

• Son imágenes de referencia generadas con IA. Márcalas en el código con data-reemplazar="foto-real" y con un comentario HTML, para cambiarlas por fotos reales del local y de los barberos antes de publicar (los clientes tienen que reconocer a quien los atiende).
• Hero: fetchpriority="high", sin loading="lazy", con <link rel="preload">. Recorte con object-position pensado para celular (el sujeto a la derecha y el titular a la izquierda en escritorio; en celular, recorte vertical con el titular abajo).
• El resto: loading="lazy" y decoding="async".
• Textos alternativos descriptivos en español (ej. «Manos de barbero asentando una navaja sobre madera oscura»), nunca «foto de…».

5. Secciones (cada una se comporta distinto; nunca dos seguidas con el mismo efecto)

01 · Hero. Foto a pantalla completa (100svh) que se desplaza más lento que el texto (parallax suave, solo transform) y se oscurece poco a poco al bajar (una capa carbón cuya opacity sube con el scroll). Titular propuesto: «[TITULAR]» con estas alternativas para elegir y dejar una: «Navaja, tijera y paciencia.» / «El oficio se afila a diario.» / «Cada línea, a mano.» Se revela al cargar como una pasada de navaja: un panel carbón inclinado que se desplaza con transform de izquierda a derecha y descubre el titular en ~900 ms (no uses clip-path). Debajo: botón principal «Reservar» (latón, relleno) y el horario de hoy calculado en vivo («Hoy · 10:00 a 20:00»). Número 01 y pie de foto.

02 · El oficio. Una frase grande que se ilumina palabra por palabra con el scroll (de crema al 20 % a crema al 100 %, con opacity). Frase propuesta: «Un buen corte no se apura: se mide, se afila y se firma con la navaja.» El texto completo debe estar en el HTML como un solo párrafo legible por lectores de pantalla; las palabras son span con aria-hidden en copia visual o equivalente. Sin JavaScript o con movimiento reducido, todo en crema al 100 %. Foto de apoyo (oficio.*) en una columna lateral, con la frase cruzando su borde.

03 · Servicios. Como la carta de una barbería clásica, en una sola columna ancha y asimétrica: nombre en Bodoni grande, línea de puntos que se dibuja al entrar en pantalla (scaleX desde la izquierda), duración y precio a la derecha. Cada fila es un <button> con aria-expanded y aria-controls: al pasar el mouse, al enfocar con teclado o al tocar en celular se expande y muestra la descripción y el botón «Reservar este servicio» (baja a la sección Reserva). La expansión usa la técnica de filas de rejilla (grid-template-rows: 0fr → 1fr) y opacity. Filas sin tarjetas ni sombras, solo filetes de 1 px.

04 · El equipo. Carlos y Diego en retratos verticales grandes (3:4), desfasados verticalmente entre sí. Nombre enorme en Bodoni que cruza la foto. Especialidad y botón «Reservar con Carlos» / «Reservar con Diego» (bajan a la sección Reserva). Escritorio (media query «(hover: hover) and (pointer: fine)»): la foto se inclina 3–4° siguiendo el puntero (transform, con requestAnimationFrame). Celular: carrusel con scroll-snap nativo, con un vistazo de la siguiente tarjeta, indicadores y operable con teclado. Sin tilt en táctil.

05 · RESERVA (el momento cumbre). Título «Escoge tu hora». Fondo carbón liso, sin grano encima.

• Contenedor id="calendario-reservas", ancho de su columna (máximo 760 px), alto mínimo 720 px en escritorio y 900 px en celular, marco de 1 px en latón, fondo crema al 4 %. Preparado para recibir un <iframe> al 100 % de ancho y sin borde, sin que el sitio cambie de tamaño al cargarlo.
• Mientras no tenga el código, un aviso discreto centrado: «Aquí va el calendario de reservas».
• Ese contenedor y todos sus padres: sin animaciones, sin transformaciones, sin filter, sin overflow: hidden, sin will-change, sin parallax ni efectos al entrar. El calendario se ve quieto y completo.
• Junto al contenedor (debajo en celular), un resumen fijo y sobrio: los 3 servicios con duración y precio, los dos barberos y «Te llega la confirmación por WhatsApp». En escritorio la columna del resumen puede ser position: sticky (el sticky no es animación y no afecta al contenedor).
• El indicador de avance y la barra inferior nunca deben tapar el calendario.

06 · Dónde y cuándo. Mapa embebido de Google Maps (loading="lazy", title descriptivo; una vez que me des la dirección), enlace «Cómo llegar» y el horario completo en una tabla editorial con el día de hoy resaltado. Etiqueta viva «Abierto ahora» / «Cerrado · abre [día] a las [hora]» calculada con Intl.DateTimeFormat y la zona America/Mexico_City (hora de Guadalajara, no la del visitante). Considera: lunes cerrado, domingo hasta las 15:00, y el minuto exacto de apertura y cierre. Efecto de esta sección: los filetes se dibujan al entrar (distinto del de 05 y 07); el mapa se ve sin movimiento.

07 · Preguntas frecuentes. Acordeón accesible (botones con aria-expanded, paneles con role="region"), uno abierto a la vez, flechas ↑↓, Inicio/Fin y Enter/Espacio. Animación de altura con la técnica de filas de rejilla y opacity. Preguntas en Bodoni, respuestas en Manrope.

08 · Cierre. Frase final enorme que sube línea por línea desde una máscara (transform), propuesta: «Tu silla ya está lista.» Botón «Reservar». Foto de detalle (detalle.*) como apoyo. Pie con logo (texto «El Filo» en Bodoni, sin inventar un símbolo), dirección, teléfono (tel:), Instagram, WhatsApp y horario.

6. Elementos de todo el sitio

• Indicador de avance de lectura en forma de poste de barbería: franja vertical de 6–8 px en el borde derecho con rayas diagonales rojo, crema y latón que se llena con el scroll (scaleY, origen arriba). En celular, franja horizontal de 4 px arriba (scaleX). Debe ser decorativo: aria-hidden="true".
• Menú fijo y discreto: se oculta al bajar y aparece al subir. Enlaces: El oficio, Servicios, Equipo, Dónde, Preguntas, y «Reservar».
• Celular: barra inferior fija con «Reservar», con env(safe-area-inset-bottom), que se oculta cuando la sección Reserva está en pantalla (IntersectionObserver). Deja padding-bottom en el pie para que no tape contenido.
• Todos los botones «Reservar» llevan a #reserva. Ningún botón sin destino ni apuntando a #. El desplazamiento suave se aplica solo al hacer clic (con scrollIntoView) y se desactiva con movimiento reducido; no hay scroll suave forzado ni secuestro del scroll. Usa scroll-margin-top para que el título no quede bajo el menú, y mueve el foco a la sección de destino.
• Foco visible en latón (2 px, con desplazamiento), enlace «Saltar al contenido».

7. Movimiento e interacción

• Cada animación enseña algo o guía la vista; nada de adorno.
• Técnica por efecto (esto resuelve los puntos donde pedir «solo transform y opacity» choca con el diseño):
• Pasada de navaja: panel inclinado con translateX.
• Línea de puntos, filetes e indicador de avance: scaleX / scaleY.
• Oscurecer el hero y encender palabras: opacity.
• Expansión de servicios y acordeón: filas de rejilla + opacity (única excepción aceptada; es un cambio de diseño, no de width ni top).
• Tilt y parallax: transform.
• IntersectionObserver o posición de scroll con requestAnimationFrame y listeners passive. Sin librerías pesadas.
• Curvas cubic-bezier(.2,.7,.1,1), duraciones de 300 a 900 ms.
• Con prefers-reduced-motion: reduce: todo en su estado final, sin parallax, sin tilt, sin máscara; el carrusel sigue funcionando por deslizamiento.
• En celular cada efecto de mouse tiene versión táctil o se quita.

8. Técnico, rendimiento, SEO y accesibilidad

• Stack: HTML, CSS y JavaScript sin dependencias (módulos ES). Un archivo HTML/CSS/JS por sección y ninguno de más de 300 líneas.
• Rendimiento: foto del hero primero; las demás diferidas. Fuentes con display=swap, preconnect, solo los pesos usados. Presupuesto: JS total menor a 40 KB comprimido, LCP menor a 2.5 s en 4G, CLS menor a 0.05.
• HTML semántico: header, nav, main, section con aria-labelledby, footer. Un solo h1. Jerarquía de encabezados correcta.
• SEO en español de México: lang="es-MX", <title>Barbería El Filo · Guadalajara</title>, meta description (máx. 155 caracteres), og:title, og:description, og:locale="es_MX", og:image (hero recortado 1200×630), theme-color #0E0D0B, URL canónica [URL]. Datos estructurados HairSalon/BarberShop en JSON-LD solo con los datos de la sección 1 (nombre, ciudad, horario); teléfono y dirección solo si ya existen.
• Accesibilidad: contraste AA, objetivos táctiles de 44 px mínimo, todo operable con teclado.

9. Criterios de aceptación (verifícalos al terminar)

• Ningún ancestro de #calendario-reservas tiene transform, filter, will-change, overflow: hidden ni animaciones (compruébalo con un script de prueba).
• Sin desbordamiento horizontal a 360 px de ancho.
• Todo botón «Reservar» lleva a #reserva; no existe href="#".
• Con movimiento reducido, todo se ve completo y quieto.
• Navegación completa con teclado: menú, servicios, carrusel, acordeón.
• «Abierto ahora» correcto en los límites: lunes, domingo 14:59/15:00, martes 09:59/10:00, sábado 19:59/20:00.
• Ningún componente supera 300 líneas.
• Ninguna fuente fuera de Bodoni Moda y Manrope; ningún color fuera de la paleta.

10. Entrega

Al terminar, dame:

• Una lista corta de los espacios que quedaron por llenar (dirección, teléfono, Instagram, WhatsApp, año, titular elegido, URL canónica, código del calendario, fotos reales).
• Una nota con cada decisión que tomaste por tu cuenta.