Cómo hacemos webs con Astro en BDB: el método de agencia y el prompt para copiar

# Buscar skills por tema
npx skills find diseño web
npx skills find gsap
npx skills find tailwind

# Instalar una (el nombre exacto te lo da la búsqueda)
npx skills add <autor>/<repositorio>

Antes de instalar una skill revisa quién la publica y cuánta gente la usa. Prefiere fuentes conocidas, como el repositorio oficial de Anthropic (anthropics/skills), que incluye la skill frontend-design.

Quiero que me construyas el sitio web de mi negocio con calidad de
agencia. Trabaja como un estudio de diseño web: primero entiende mi
referencia, luego arma un sistema de diseño, luego construye y al
final revisa todo. Explícame cada paso en lenguaje sencillo.

== 1. MI REFERENCIA (lo más importante) ==
En esta carpeta te dejo capturas del sitio que me gusta
(referencia-1.png, referencia-2.png...) [y su enlace: URL].
- Antes de escribir código, descríbeme qué ves en la referencia:
orden de secciones, tamaño y peso de los títulos, espacios,
cómo son las tarjetas, los botones y el movimiento.
- Replica esa ESTRUCTURA con fidelidad: mismo orden, misma
jerarquía, mismas proporciones. No la cambies por algo
"equivalente". Si por técnica conviene cambiar algo, pregúntame
ANTES de construirlo.
- La PIEL es la mía: mis colores, mi logo, mis textos y mis fotos.
De la referencia NO copies textos, imágenes ni logos.

== 2. MI MARCA ==
- Logo: [nombre del archivo del logo].
- Colores: [tus colores en código, o "sácalos de mi logo"].
La paleta sale del color DOMINANTE del logo, nunca de un detalle
suelto. Muéstrame la paleta antes de aplicarla.
- Cómo quiero que se sienta: [tres palabras, ej. cercano, premium,
directo].

== 3. TECNOLOGÍA ==
- Astro, sitio estático. Sin base de datos y sin WordPress.
- Tailwind para los estilos.
- Tokens de diseño en un solo archivo: colores, escala tipográfica,
espacios, radios y sombras con nombre. Ningún color escrito a
mano dentro de las páginas: todo sale de los tokens.
- Componentes reutilizables (botón, tarjeta, sección, encabezado).

== 4. TIPOGRAFÍA EDITORIAL ==
- Máximo dos familias tipográficas; de preferencia una sola grotesca
con contraste de pesos. No mezcles cursiva y normal en el mismo
título.
- Títulos grandes con interletrado ligeramente cerrado, textos de
lectura entre 16 y 18 px con buen interlineado y líneas de no más
de 70 caracteres.
- Fuentes autohospedadas y precargadas, con font-display: swap.

== 5. ANIMACIÓN NIVEL AWWWARDS (con propósito) ==
- GSAP con ScrollTrigger y scroll suave con Lenis.
- Hero: el título principal entra letra por letra (subida con
máscara). Agrupa las letras POR PALABRA en un contenedor con
white-space: nowrap, para que ninguna palabra se parta a la mitad.
Los envoltorios que se animan van con display: inline-block.
Espera a que carguen las fuentes (document.fonts.ready) antes de
dividir el texto, y oculta el título hasta que la animación
arranque para que no parpadee.
- Secciones que aparecen con suavidad al llegar a ellas; nada que
rebote ni distraiga. Cada animación debe tener una razón.
- Si el usuario tiene activado "reducir movimiento"
(prefers-reduced-motion), quita las animaciones y el scroll suave
y muestra todo en su estado final.
- Anima solo transform y opacity, para que vaya fluido en celular.
- Sin video de fondo en el hero: hace lenta la carga. Si quiero
movimiento, que sea con la tipografía.
- Si hay carriles horizontales de tarjetas, el ajuste automático
(scroll-snap) va solo en celular; en computadora se recorren libre,
con flechas y con teclado.

== 6. SECCIONES ==
[Ajusta la lista a tu negocio. Ejemplo:]
1. Hero con mensaje claro de qué hago y para quién, y un botón de
 contacto visible sin hacer scroll.
2. Servicios o productos.
3. Por qué elegirnos / cómo trabajamos.
4. Testimonios reales (si no hay, omite la sección; no inventes).
5. Preguntas frecuentes.
6. Contacto: formulario y WhatsApp.

== 7. CONTACTO ==
- Botón flotante de WhatsApp con enlace wa.me a [tu número con lada
de país] y un mensaje inicial: "[Hola, vi su sitio y quiero
información]".
- Formulario con Netlify Forms (nombre, teléfono, correo, mensaje),
con protección contra spam (campo honeypot), página de gracias y
avisos a [tu correo].

== 8. SEO Y BUSCADORES DE IA ==
- Título y descripción únicos por página, URL canónica, Open Graph
y tarjeta de redes con imagen de 1200x630.
- Sitemap con @astrojs/sitemap.
- Datos estructurados JSON-LD (LocalBusiness u Organization, con mi
dirección, horario y teléfono; FAQPage en las preguntas).
- Un solo H1 por página y encabezados en orden.
- robots.txt que permita a todos los buscadores y que liste por
nombre a los de IA (GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot,
Claude-SearchBot, Claude-User, Google-Extended, Applebot-Extended,
PerplexityBot, Perplexity-User), y que termine con la línea del
sitemap.
- llms.txt en la raíz: resumen de mi negocio, contacto, lista de
páginas y qué NO debe inventar un asistente (por ejemplo precios
o disponibilidad que no publico).

== 9. IMÁGENES ==
- Usa mis fotos reales; optimízalas a WebP o AVIF con el componente
de imágenes de Astro, con tamaños responsivos, ancho y alto
definidos, carga diferida (excepto la del hero) y texto
alternativo descriptivo.
- Nunca generes caras de personas con IA. Con IA solo fondos,
texturas, ilustraciones o íconos, y avísame cuando lo hagas.

== 10. MÓVIL PRIMERO Y ACCESIBILIDAD ==
- Diseña primero para 390 px de ancho y luego para computadora.
- Botones de al menos 44 px, contraste suficiente (WCAG AA),
navegación con teclado con foco visible, etiquetas en el
formulario e idioma de la página declarado.
- Que nada se desborde a lo ancho en ninguna pantalla.

== 11. PUBLICACIÓN ==
- Publica primero como BORRADOR en Netlify (netlify deploy, sin
--prod) y dame el enlace.
- NO publiques en producción hasta que yo diga "apruébalo". Entonces
publicas con netlify deploy --prod y me explicas paso a paso cómo
conectar mi dominio.

== 12. ANTES DE DARME EL ENLACE, REVISA ==
- Captura el sitio en 390 px y en 1280 px, en modo claro y oscuro si
el diseño lo tiene, y compáralo lado a lado con mi referencia.
Dime qué quedó igual y qué no.
- Corre Lighthouse en móvil y dame los números de rendimiento,
accesibilidad, buenas prácticas y SEO. Si alguno baja de 90,
arréglalo antes de entregarme.
- Revisa que no haya textos de relleno ni faltas de ortografía, que
todos los enlaces funcionen y que el formulario y WhatsApp sirvan.

== MI NEGOCIO ==
[Pega aquí tus textos: qué haces, para quién, servicios, precios si
los publicas, testimonios reales, dirección y horario.]

== HERRAMIENTAS ==
Si tienes skills instaladas de diseño de interfaz, diseño nivel
Awwwards, jerarquía visual, animación con GSAP o tipografía web,
úsalas. Si no las tienes, sigue estas instrucciones tal cual.

Lo que va entre corchetes es tuyo. El resto déjalo igual: las secciones de referencia, publicación en borrador y revisión son las que hacen que el resultado salga como de agencia y que tú tengas el control.

CELULAR (390 px)
[ ] El mensaje principal y el botón se ven sin hacer scroll.
[ ] Nada se sale de la pantalla ni obliga a mover de lado.
[ ] Ninguna palabra del título se parte a la mitad.
[ ] El botón de WhatsApp no tapa contenido importante.
[ ] Los botones se tocan fácil con el pulgar.

COMPUTADORA (1280 px)
[ ] Se parece de verdad a mi referencia, no a "algo parecido".
[ ] Los carriles de tarjetas se mueven con el trackpad y con flechas.

CLARO Y OSCURO (si el diseño lo tiene)
[ ] Los textos se leen bien en los dos modos.
[ ] El logo se ve en los dos fondos.

VELOCIDAD
[ ] Carga rápido con datos móviles, no solo con wifi.
[ ] Lighthouse móvil arriba de 90 en todo.

MOVIMIENTO
[ ] Las animaciones se sienten suaves, no lentas ni mareadoras.
[ ] Con "reducir movimiento" activado, todo se ve sin animación.

TEXTOS Y DATOS
[ ] Cero lorem ipsum, cero faltas de ortografía.
[ ] Teléfono, correo, dirección y horario correctos.
[ ] Las fotos son reales y ninguna cara es generada con IA.

QUE FUNCIONE
[ ] Mandé una prueba por el formulario y me llegó.
[ ] El WhatsApp abre con el mensaje inicial.
[ ] Al compartir el enlace aparece la imagen y el título correctos.

Cada casilla que falle se la pides a la IA con tus palabras, por ejemplo: en celular el título parte la palabra servicios a la mitad, arréglalo. No necesitas palabras técnicas.