---
name: sitios-web-med
description: Diseñar y construir sitios web, landings y páginas de servicio premium con HTML, CSS y JavaScript portable, o en WordPress/Oxygen/GHL cuando el proyecto lo requiera. Usar cuando se pida crear, estructurar, mejorar, rediseñar o generar código para una página web o landing de cliente; cuando se mencione diseño web, secciones, wireframes, layouts, ritmo visual, "que no parezca hecho por IA", SEO, AEO o Schema. Parte de estrategia, copy y activos reales. Aplica un gate anti-slop verificable antes de entregar.
---

# Sitios Web 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, Oxygen o
GHL son rutas opcionales según el proyecto.

**"Terminado" incluye "no parece hecho por IA".** Un sitio que funciona pero se ve
como plantilla genérica no está terminado — está reprobado. El gate de
`references/gate-preflight.md` es obligatorio antes de entregar, no pulido opcional.

## Flujo obligatorio

1. Definir estrategia, oferta, público, objetivo y página requerida.
2. **Declarar la lectura de diseño en una línea** → `references/design-read.md`.
   Formato: *"Leo esto como: {tipo de página} para {audiencia}, con lenguaje
   {vibe}, tirando a {familia estética}."* Fijar los tres diales.
3. Crear o recibir el copy. Para una landing, respetar la secuencia de `landing-krafter`.
4. Revisar y aprobar el copy antes de diseñar.
5. Auditar activos disponibles: logo, fotos reales, video, testimonios, capturas.
6. Proponer dirección de arte y wireframe textual, con el ritmo de cada sección
   → `references/layout-y-ritmo.md`.
7. Presentar plan visual numerado para los activos faltantes. Indicar sección,
   propósito, estilo, encuadre y si conviene stock, foto del cliente, video o
   imagen generada.
8. **Esperar aprobación expresa de los activos.** Generar sólo los aprobados;
   preferir fotos reales del cliente. Para generar → `higgsfield-generate`.
9. Construir en HTML, CSS y JavaScript (o el stack acordado → `references/stacks.md`).
10. Añadir movimiento sólo cuando la versión estática ya sea clara y aprobada.
11. **Correr el gate anti-slop** → `references/gate-preflight.md`. Arreglar todo hit.
12. 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
- Marca, logo, colores, CTA y datos de contacto
- Fotos, videos, referencias visuales y prueba social disponibles
- **Qué se construyó para este cliente antes** (para no repetir paleta ni estructura)

## Referencias

Cargar sólo la que corresponde al paso en curso.

| Cuándo | Abrir |
|---|---|
| Antes de diseñar nada | `references/design-read.md` — lectura del brief + 3 diales |
| Al definir tipografía, color, materialidad | `references/tipografia-y-color.md` |
| Al estructurar secciones y decidir ritmo | `references/layout-y-ritmo.md` |
| Siempre, mientras se construye | `references/anti-slop.md` — los tells de IA |
| SEO, AEO, Schema, GEO, entidades | `references/seo-aeo-geo.md` |
| Antes de entregar — **obligatorio** | `references/gate-preflight.md` |
| Elegir stack: HTML, WordPress, Oxygen, GHL | `references/stacks.md` |
| Construir o publicar en WordPress | `references/wordpress.md` |

## Reglas duras

Estas no dependen del brief. Fallar cualquiera es entregar trabajo roto.

1. **Prohibido el guion largo (—)** en cualquier texto visible. Usar guion normal.
2. **El hero cabe en la primera pantalla.** Titular máx. 2 líneas, subtexto máx.
   20 palabras, CTA visible sin scroll. Máx. 4 elementos de texto en total.
3. **Máx. 1 eyebrow por cada 3 secciones.** Es la regla más violada.
4. **Máx. 2 secciones seguidas** con el patrón imagen+texto alternado. La tercera reprueba.
5. **Una familia de layout se usa una sola vez** por página. Ocho secciones = mínimo
   cuatro familias distintas.
6. **Un solo color de acento**, bloqueado para toda la página.
7. **Un solo radio de esquina** para toda la página.
8. **Nada de UI falsa hecha con divs.** Ni dashboards, ni terminales, ni listas de
   tareas simuladas. Foto real, imagen generada, o nada.
9. **Nada de datos genéricos.** Ni "Juan Pérez", ni "Acme", ni 99.99%.
10. **Móvil explícito por sección.** Declarar el fallback en 375-390 px, no asumir.
11. **Movimiento motivado y con `prefers-reduced-motion`.** Un efecto de firma por
    página, no dos.
12. **No inventar datos del cliente.** Si no está en la ficha, se pregunta.
13. **Header y footer son globales.** Se definen una vez por sitio y todas las
    páginas los heredan. Nunca se repiten dentro del contenido de una página.
14. **Una plantilla por página.** No se meten varias páginas en una plantilla
    condicional.
15. **Credenciales en variables de entorno.** Nunca escritas en un archivo del
    proyecto ni del skill.

## Entrega

- Wireframe aprobado
- Bloque HTML/CSS/JS (o el formato del stack acordado)
- Activos aprobados o sus especificaciones
- Notas SEO/AEO
- Lista breve de implementación
- **Gate anti-slop corrido, con los hits documentados y resueltos**
- Checklist de QA: móvil, visual, accesibilidad, rendimiento, conversión

## Créditos

La capa de criterio anti-slop está adaptada de `design-taste-frontend` (Hermes
Agent, MIT) vía el repo `higgsfield-ai/skills`. El flujo de cliente, el ritmo
visual y las rutas de stack son metodología Med Toledo.
