Barbershop Landing Page Skill

Habilidad de Página de Aterrizaje para Barbería

Activación explícita

Desencadenante principal:

/LANDINGPAGE

Alias:

/LANDINGBARBERIA

Los comandos se tratan sin distinción entre mayúsculas y minúsculas.

Ejemplos:

• /LANDINGPAGE
• /LANDINGBARBERIA
• /LANDINGPAGE quiero una web para una barbería premium en Quito
• /LANDINGBARBERIA nombre: Black Crown

Cuando se invoca uno de estos comandos:

1. Activa esta habilidad de inmediato.
2. Entra en Modo de Entrevista de Descubrimiento.
3. Lee primero el mensaje actual del usuario y el contexto de la conversación.
4. Pregunta solo la información faltante.
5. No comiences la implementación hasta que el resumen crítico del negocio esté suficientemente completo.
6. Una vez que el resumen esté completo, procede automáticamente sin preguntar "¿Quieres que empiece?".

Plano maestro incluido — obligatorio

Esta habilidad incluye el plano completo original de diseño/conversión en:

references/master-barbershop-landing-prompt.md

Antes de planificar o implementar la página de aterrizaje, lee ese archivo.

Trátalo como el plano base canónico para:

• arquitectura de página,
• estructura CRO,
• AIDA,
• TOFU / MOFU / BOFU,
• progresión de contenido,
• héroe,
• servicios,
• galería,
• experiencia,
• planes,
• antes/después,
• equipo,
• testimonios,
• Instagram/prueba social,
• ubicación,
• FAQ,
• CTA final,
• flujo de reserva,
• WhatsApp,
• pie de página,
• comportamiento responsivo,
• animaciones,
• rendimiento,
• accesibilidad,
• SEO local,
• tecnología recomendada,
• dirección fotográfica,
• tono de redacción,
• distribución de CTA.

NO reutilices marcadores de posición ficticios del plano cuando haya información real del negocio disponible.

El plano es un sistema estructural, no una fuente de datos falsos del negocio.

Habilidades de diseño complementarias

Esta habilidad es la orquestadora.

Antes del diseño/implementación visual, verifica si estas habilidades complementarias ya están disponibles:

1. Impeccable
2. Taste Skill / design-taste-frontend

Si faltan y la ejecución de shell está disponible, instala desde la raíz del proyecto:

npx impeccable install
npx skills add Leonxlnx/taste-skill

No reinstales si ya están presentes.

Si la instalación requiere aprobación, solicita solo la aprobación necesaria para el entorno.

Si la ejecución de shell no está disponible:

• continúa usando esta habilidad,
• aplica los mismos principios manualmente,
• nunca afirmes que las habilidades fueron instaladas.

Separación de roles

Esta habilidad posee

• descubrimiento,
• comprensión del negocio,
• verdad del negocio,
• oferta,
• estrategia de conversión,
• arquitectura de página,
• AIDA,
• TOFU/MOFU/BOFU,
• CRO,
• copia,
• lógica de CTA,
• jerarquía de contenido,
• estrategia de activos,
• requisitos de implementación,
• SEO,
• rendimiento,
• accesibilidad,
• QA.

Taste Skill asiste con

• dirección visual premium,
• decisiones de diseño no genéricas,
• escala tipográfica,
• ritmo de espaciado,
• personalidad de componentes,
• lenguaje de movimiento,
• gusto en el frontend.

Impeccable asiste con

• crítica de UI,
• refinamiento,
• jerarquía,
• espaciado,
• pulido,
• consistencia,
• calidad responsiva,
• presentación consciente de la accesibilidad.

Las habilidades complementarias pueden mejorar la presentación, pero no deben anular:

• la información real del negocio del usuario,
• las limitaciones de la marca,
• los objetivos de conversión,
• las limitaciones legales/éticas,
• el contenido crítico de reserva.

Modo de Entrevista de Descubrimiento

La entrevista debe ser simple para el usuario aunque el sistema interno sea avanzado.

Cuando haya poca información disponible, haz un cuestionario compacto agrupado.

No interrogues una pregunta por turno a menos que solo falte un dato crítico.

No repitas preguntas ya respondidas.

A. Identidad del negocio

Pregunta por:

• nombre de la barbería,
• ciudad / barrio,
• dirección completa,
• enlace de Google Maps si está disponible,
• horario de apertura,
• WhatsApp / teléfono,
• correo electrónico si es relevante,
• Instagram,
• TikTok,
• otros perfiles sociales.

B. Servicios y precios

Pregunta:

• qué servicios se ofrecen,
• precio exacto de cada servicio,
• duración aproximada,
• qué servicio debe promocionarse con más fuerza,
• paquetes/ofertas,
• membresías,
• promociones para primera visita,
• ofertas de temporada.

Nunca inventes precios cuando el negocio sea real.

C. Reserva y conversión

Pregunta:

• cómo reservan los clientes actualmente,
• WhatsApp / teléfono / formulario / plataforma de reserva / entrada sin cita,
• solo con cita, solo entrada sin cita, o ambos,
• CTA principal,
• CTA secundario,
• si el usuario quiere un flujo de reserva funcional simulado cuando no exista backend.

D. Audiencia y posicionamiento

Pregunta:

• cliente ideal,
• edad/segmento si es relevante,
• posicionamiento premium / urbano / clásico / lujo / streetwear / antiguo / familiar / moderno,
• qué hace diferente a la barbería,
• por qué la eligen los clientes,
• objeciones comunes,
• disponibilidad de estacionamiento,
• experiencia del servicio,
• alguna garantía o tranquilidad.

E. Identidad de marca

Pregunta:

• logotipo,
• colores,
• tipografías,
• eslogan,
• símbolos visuales,
• texturas,
• detalles característicos,
• personalidad de marca,
• ambiente deseado.

Ejemplos:

• premium,
• masculino,
• editorial,
• cinematográfico,
• industrial,
• clásico,
• minimalista,
• lujo,
• urbano.

F. Activos visuales reales

Pide al usuario que comparta cuando estén disponibles:

• logotipo,
• fotos exteriores,
• fotos interiores,
• fotos del equipo/barberos,
• fotos de clientes,
• fotos de cortes de pelo,
• trabajo de barba,
• imágenes de antes/después,
• fotos de productos,
• fotos de servicios,
• premios/certificaciones.

Prioriza los activos reales sobre imágenes generadas o de stock.

Nunca presentes personas/interiores generados como personal real, clientes o instalaciones reales.

G. Testimonios y pruebas

Pregunta por:

• capturas de pantalla de reseñas,
• Google Reviews,
• testimonios,
• calificación de estrellas,
• número de reseñas,
• menciones en prensa,
• prueba social,
• citas de clientes.

Nunca fabriques testimonios de aspecto real al construir una página de negocio real.

Si no hay reseñas reales disponibles y el usuario solo quiere un prototipo:

• márcalos claramente internamente como marcadores de posición,
• estructuralos para su reemplazo posterior,
• no los representes como reseñas reales verificadas.

H. Referencias visuales — pregunta obligatoria

Pregunta:

¿Tienes referencias visuales de barberías o sitios web que te gusten?

El usuario puede proporcionar:

• sitios web,
• imágenes de Pinterest,
• Behance,
• Dribbble,
• referencias de Instagram,
• capturas de pantalla,
• moodboards,
• fotos de galerías de diseño,
• fotos de barberías físicas,
• otras referencias de marca.

Cuando sea útil, pregunta qué les gusta de cada una:

• héroe,
• tipografía,
• paleta,
• fotografía,
• menú,
• tarjetas de servicio,
• precios,
• galería,
• movimiento,
• CTA,
• atmósfera,
• sensación general.

Regla de referencias

Usa las referencias para extraer:

• composición,
• jerarquía,
• ritmo visual,
• densidad espacial,
• relaciones tipográficas,
• tratamiento fotográfico,
• patrones de componentes,
• ideas de movimiento,
• relaciones de color,
• dirección editorial.

No copies un sitio web de terceros literalmente.

No reproduzcas logotipos de terceros, copias propietarias, activos de marca únicos o obras de arte distintivas a menos que el usuario los posea o tenga permiso.

Entrevista compacta recomendada

Cuando se llame a /LANDINGPAGE sin suficiente contexto, pregunta algo cercano a:

1. ¿Cómo se llama la barbería y dónde está ubicada?
2. ¿Qué servicios ofrece y qué precio tiene cada uno?
3. ¿Cuál es el servicio o paquete que más quieres vender?
4. ¿Cuál es el horario?
5. ¿Cómo quieres que la gente reserve?
6. ¿Cuál es tu WhatsApp, teléfono y redes?
7. ¿A qué tipo de cliente quieres atraer?
8. ¿Qué hace diferente a tu barbería?
9. ¿Qué colores, tipografías, logo y estilo visual usan?
10. ¿Puedes compartir fotos del local, barberos, clientes y trabajos?
11. ¿Tienes reseñas o screenshots de comentarios reales?
12. ¿Tienes promociones, paquetes o membresías?
13. ¿Tienes referencias visuales de webs, Pinterest, Behance, Dribbble o screenshots que te gusten?
14. ¿Hay algo que NO quieres que aparezca en la web?

No menciones la metodología interna a menos que el usuario pregunte.

Finalización progresiva

Después de cada respuesta del usuario:

• marca los campos conocidos internamente,
• pregunta solo por la información crítica faltante,
• no reinicies el cuestionario,
• no repitas preguntas ya respondidas.

Cuando haya suficiente información, procede automáticamente a la ejecución.

Resumen interno del negocio y la marca

Antes de diseñar, construye un resumen estructurado interno:

business:
  name:
  category: barbershop
  city:
  neighborhood:
  address:
  maps_url:
  hours:
  phone:
  whatsapp:
  email:
  social:

conversion:
  primary_goal: booking
  primary_cta:
  secondary_cta:
  booking_channel:

audience:
  ideal_customer:
  positioning:
  objections:

brand:
  logo:
  colors:
  typography:
  slogan:
  visual_signatures:
  personality:

services:
  - name:
    description:
    price:
    duration:
    priority:

offers:
  packages:
  memberships:
  promotions:

assets:
  local_photos:
  team_photos:
  client_photos:
  haircut_photos:
  before_after:
  reviews:

references:
  - source:
    liked_for:

technical:
  current_stack:
  booking_backend:
  analytics:

Esto es interno a menos que el usuario pida verlo.

Adaptación del plano

Después de que el resumen del negocio esté listo:

1. Lee references/master-barbershop-landing-prompt.md.
2. Extrae el sistema estratégico/de página completo.
3. Reemplaza todos los valores ficticios con datos reales del usuario cuando estén disponibles.
4. Elimina las secciones irrelevantes.
5. Agrega secciones específicas del negocio faltantes cuando sea útil.
6. Preserva el viaje de conversión:
   • impacto,
   • propuesta de valor,
   • servicios,
   • prueba de trabajo,
   • beneficios,
   • experiencia,
   • precios,
   • testimonios,
   • equipo,
   • ubicación,
   • objeciones,
   • reserva.
7. No expongas etiquetas AIDA/TOFU/MOFU/BOFU en la interfaz de usuario.

Embudo predeterminado

TOFU / Atención

Típico:

• encabezado,
• héroe,
• prueba visual,
• diferenciador clave,
• primer CTA.

MOFU / Interés + Deseo

Típico:

• servicios,
• galería,
• experiencia,
• diferenciación,
• equipo,
• precios,
• antes/después,
• prueba social.

BOFU / Acción

Típico:

• reseñas,
• ubicación,
• FAQ,
• reserva,
• WhatsApp,
• CTA final.

Adapta este orden cuando el negocio o las referencias justifiquen una secuencia mejor.

Redacción

Tono:

• seguro,
• masculino,
• directo,
• elegante,
• premium.

Prefiere:

• titulares cortos,
• lenguaje de servicio concreto,
• relevancia local,
• pruebas,
• diferenciación real,
• verbos fuertes.

Evita:

• copia genérica de IA,
• clichés vagos de lujo,
• "Bienvenido a nuestra barbería",
• superlativos sin fundamento,
• párrafos largos.

Dirección visual

Dirección visual base del plano incluido:

• premium,
• masculino,
• editorial,
• moderno,
• urbano,
• sofisticado,
• cinematográfico,
• minimalista,
• exclusivo sin ser pretencioso.

Pero la marca real del usuario y las referencias tienen prioridad.

Evita:

• estéticas de plantilla SaaS,
• degradados azules/morados tecnológicos,
• tarjetas excesivamente redondeadas,
• ilustraciones de dibujos animados,
• iconos excesivos,
• clichés baratos de barbería,
• desorden visual.

Estrategia de activos

Prioridad:

1. Activos comerciales reales proporcionados por el usuario.
2. Activos de marca propiedad del usuario.
3. Referencias proporcionadas por el usuario como inspiración.
4. Activos decorativos/conceptuales generados.
5. Activos de stock solo si es necesario.

Si existe generación de imágenes nativa:

• úsala para imágenes decorativas o de apoyo conceptual cuando sea útil,
• no fabriques clientes reales, miembros del equipo, reseñas o instalaciones reales.

Implementación técnica

Requisito de frontend dinámico

Esta habilidad debe crear un frontend interactivo real, no un mockup estático.

Orden de implementación preferido:

1. Si el proyecto existente ya usa Next.js

   • mantén Next.js,
   • preserva la arquitectura actual cuando sea razonable,
   • construye la página de aterrizaje dentro del proyecto existente.

2. Si el proyecto existente ya usa React

   • mantén React cuando la migración no sea necesaria,
   • preserva las convenciones de enrutamiento/construcción,
   • agrega la página de aterrizaje como componentes React listos para producción.

3. Si no existe un proyecto de frontend

   • crea un nuevo proyecto Next.js usando:
     • Next.js
     • React
     • TypeScript
     • Tailwind CSS
   • usa el App Router a menos que el contexto del proyecto requiera lo contrario.

Bibliotecas de soporte predeterminadas cuando sean útiles:

• Framer Motion para movimiento/interacciones premium,
• Lucide React para iconos de UI discretos.

No agregues dependencias sin un propósito claro.

Interactividad requerida

La página debe incluir comportamiento interactivo real cuando sea relevante, como:

• navegación pegajosa/translúcida,
• superposición de menú móvil a pantalla completa o animada,
• navegación suave de secciones,
• galería/lightbox,
• comparación antes/después,
• carrusel de testimonios/comportamiento de deslizamiento,
• acordeón de FAQ,
• modal/cajón de reserva,
• interfaz de reserva de varios pasos,
• CTA móvil pegajoso responsivo,
• estados de hover/focus,
• soporte de movimiento reducido.

No implementes interacciones falsas que parezcan cliqueables pero no hagan nada.

Arquitectura de componentes

Componentiza limpiamente. Componentes típicos:

• Navbar
• MobileMenu
• Hero
• ValueProposition
• Services
• Gallery
• Experience
• Pricing
• BeforeAfter
• Barbers
• Testimonials
• SocialProof
• Location
• FAQ
• BookingModal
• FloatingWhatsApp
• MobileStickyCTA
• Footer

Adapta los componentes al negocio real. No crees secciones no utilizadas solo porque existan en el plano de referencia.

Inspección del proyecto

Antes de codificar:

• inspecciona la raíz del proyecto,
• detecta el gestor de paquetes,
• inspecciona package.json,
• detecta las convenciones de Next.js/React/Tailwind,
• identifica el sistema de diseño/componentes existente,
• preserva las convenciones útiles,
• evita reescrituras destructivas.

Si el proyecto está vacío, inicializa el frontend en lugar de producir solo fragmentos HTML.

Sistema de reserva

Si no existe backend:

• crea una UI de reserva funcional simulada,
• soporta selección de servicio,
• selección de barbero,
• fecha,
• hora,
• datos del cliente,
• estado de confirmación.

Nunca afirmes falsamente que una cita se almacenó de forma remota si no existe backend.

Si existe un backend/integración real:

• usa la arquitectura existente,
• preserva la lógica de disponibilidad real,
• valida estados de éxito/fallo.

WhatsApp

Si se usa WhatsApp:

• crea un CTA de reserva claro,
• completa previamente un mensaje útil cuando corresponda,
• optimiza para móvil,
• no inventes el número de teléfono.

Mapas

Cuando exista una URL/dirección de Maps:

• muestra la dirección real,
• enlaza a indicaciones,
• incrusta un mapa cuando sea adecuado.

SEO local

...