---
name: sitios-web-html-med
description: Diseñar y construir sitios web, landings y páginas de servicio premium con HTML, CSS y JavaScript. Usar cuando se solicite crear, estructurar, mejorar o generar una página web para un cliente, partiendo de estrategia, copy y activos reales; prioriza ritmo visual, SEO, móvil, dirección de arte y resultados que no se vean genéricos ni hechos por IA.
---

# Sitios Web HTML Med

## Principio

Construir primero el mensaje y la dirección de arte; después la interfaz. La salida principal es HTML, CSS y JavaScript portable. WordPress es una ruta opcional únicamente cuando el proyecto requiera el tema, plugin e integración API REST del cliente.

## Flujo obligatorio

1. Definir estrategia, oferta, público, objetivo y página requerida.
2. Crear o recibir el copy. Para una landing, respetar la secuencia aprobada de `landing-krafter`.
3. Revisar y aprobar el copy antes de diseñar.
4. Auditar activos disponibles: logo, fotos reales, video, testimonios, capturas y referencias.
5. Proponer dirección de arte y un wireframe textual, con el ritmo de cada sección.
6. Presentar un plan visual numerado para los activos faltantes. Indicar sección, propósito, estilo, encuadre y si conviene usar stock, foto del cliente, video o imagen generada.
7. Esperar aprobación expresa de los activos propuestos. Generar sólo los activos aprobados; preferir fotos reales del cliente.
8. Construir el sitio en HTML, CSS y JavaScript.
9. Añadir movimiento y animaciones por scroll sólo cuando la versión estática ya sea clara y aprobada.
10. Validar móvil, accesibilidad, velocidad, SEO, enlaces y CTA.

## Entradas necesarias

- Tipo de página y objetivo.
- Copy aprobado o información suficiente para elaborarlo.
- Keyword principal y secundarias; si faltan, proponerlas como sugerencias.
- Marca, logo, colores, CTA y datos de contacto cuando apliquen.
- Fotos, videos, referencias visuales y prueba social disponibles.

## Dirección de arte antes de código

Definir brevemente:

- Tipo de cliente y tono visual.
- Tipografía, color dominante, contraste, bordes y estilo de hero.
- Una idea visual memorable.
- Qué secciones serán densas y dónde habrá descansos visuales.

Usar este formato:

```text
[ SECCIÓN - propósito ]
  Contenido: titular, texto, CTA, prueba o formulario
  Activo: foto, video, collage, gráfico o ninguno
  Estilo: claro, oscuro, imagen con overlay, gradiente, split, etc.
  Movimiento: ninguno, entrada suave o parallax puntual
```

## Ritmo visual y capa decorativa

- Evitar bloques repetidos de texto o tarjetas iguales.
- Alternar fondos claros, oscuros, imagen, gradientes y espacios de respiro según el mensaje; no usar un patrón mecánico.
- Incorporar descansos visuales después de una o dos secciones densas: cita, métrica, franja oscura, collage, imagen a pantalla completa, textura o bloque de color.
- Añadir detalles decorativos con propósito: viñetas, líneas, marcos, formas, patrones, textura sutil, números grandes o acentos tipográficos. Deben ordenar, separar o dirigir la vista, nunca llenar espacio.
- Usar overlays claros u oscuros para asegurar contraste sobre imágenes. Mantener legibilidad AA.
- Usar parallax sólo cuando aporte profundidad a una hero, pausa visual o bloque clave. Respetar `prefers-reduced-motion`.
- No usar más de tres secciones visualmente similares consecutivas ni gradientes en secciones contiguas.

## Código

- Usar HTML semántico, CSS modular con variables y JavaScript mínimo.
- Encapsular estilos bajo una clase raíz específica.
- Diseñar mobile-first. En 375–390 px: navegación funcional, hero legible, CTA de al menos 48 px, formularios sin desbordamiento y grids apilados.
- Incluir menú hamburguesa funcional cuando haya navegación.
- Optimizar imágenes y preferir video corto optimizado sobre GIF pesado cuando sea viable.
- No usar fuentes, iconos, imágenes o claims sin autorización.
- Aplicar animaciones de entrada ligeras; no animar todo ni bloquear la interacción.

## SEO y conversión

- Incluir la keyword principal de forma natural en el H1.
- Usar keywords secundarias o variaciones semánticas en H2 y H3.
- Usar jerarquía de encabezados real, texto alternativo descriptivo y CTA claros.
- Añadir FAQ/AEO, título, meta descripción y Schema cuando el tipo de página lo justifique.
- Mantener el copy aprobado: no reescribirlo arbitrariamente durante el maquetado.

## Entrega

Entregar el wireframe aprobado, el bloque HTML/CSS/JS, los activos aprobados o sus especificaciones, notas SEO, una lista breve de implementación y checklist de QA móvil, visual, accesibilidad, rendimiento y conversión.

## WordPress opcional

Usar WordPress sólo si el proyecto requiere el plugin, tema e integración API REST ya definidos. Conservar el mismo flujo creativo y entregar el formato técnico compatible que se solicite.
