¿Qué hace site-inspirado?
Lo que separa un sitio común de un sitio memorable no es el código, es el proceso: referencia visual → preguntas → investigación → imágenes en el mismo estilo → página con movimiento → verificar que la persona aún ve el botón.
S=<ruta de esta skill> · T=<ruta del sitio> (uno por sitio; usa la que la persona indique, ej.: ~/mi-sitio; si no indica, ~/proyectos/output/site-inspirado/<slug>). Trabaja siempre dentro de T.
El sitio final NO usa el estilo INEMA (negro y amarillo). El estilo viene de las referencias de la persona. El estilo INEMA sirve solo para la guía del kit.
Los 6 pasos (en orden; cada uno tiene un portón)
| # | Paso | Tú produces | Portón |
|---|---|---|---|
| 1 | Referencias | T/refs/ (de 2 a 5 imágenes) | la persona confirmó que ese es el clima |
| 2 | Preguntas + investigación | T/BRIEF.md | todas las preguntas del bloque correcto respondidas; nada inventado |
| 3 | Estilo | T/estilo.json | paleta medida + prompt_estilo escrito mirando las refs; contraste del texto ≥ 4,5 |
| 4 | Imágenes | T/img/*.jpg + T/img/hoja.jpg | HAS MIRADO la hoja: mismo estilo, sin letra dibujada, sin mano torcida |
| 5 | Página | T/index.html | un data-cta en el botón principal; transiciones mediante movimiento.js |
| 6 | Portón + publicación | informe del portón, fotos | porton.js salga 0; luego publica (GitHub Pages / Vercel del cliente) |
1. Referencias
Pide de 2 a 5 imágenes: lo que la persona ya tiene (invitación, logo, foto de la tienda) + inspiración (Pinterest: "sitio panadería", "wedding website watercolor"). Si no tiene, genera 2 mediante Codex (image_gen) y muéstralas antes de continuar. Guárdalas en T/refs/.
2. Preguntas e investigación (antes de generar CUALQUIER cosa)
Dile esto a la IA (o hazlo tú): "Antes de generar nada, pregúntame todo lo que necesites e investiga lo que un sitio de este tipo suele tener." Usa el bloque de referencias/preguntas.md del tipo de sitio (evento, negocio local, servicio/consultoría, portafolio). Investiga lo que es HECHO (cómo llegar, clima de la temporada, paseos cercanos) y marca en el BRIEF lo que viene de la persona y lo que viene de la investigación. Decide el tipo de sitio en el BRIEF: negocio (el objetivo es una acción: encargar, agendar, llamar) o visual (evento, portafolio, invitación: puede tener más movimiento).
3. Estilo medido
python3 $S/scripts/estilo.py T/refs T/estilo.json --prompt "<estilo en inglés, mirando las refs>"
El script mide la paleta y sugiere fondo/tinta/acento con el contraste calculado. Tú decides los colores finales (oscurece la tinta si el contraste es < 4,5). El prompt_estilo describe TÉCNICA + LUZ + PALETA (ej.: "loose watercolor on cotton paper, burgundy, sage and cream, thin gold ink accents").
4. Imágenes en el mismo estilo
Escribe T/plan.json (una línea por imagen: nombre, prompt del ASUNTO, ancho, alto) y genera:
python3 $S/scripts/imagenes.py T/plan.json T/estilo.json T/img --refs T/refs
Cada imagen recibe las refs + la primera imagen generada (ancla) como referencia: la serie sale con la misma mano. Una por vez; el script espera si la memoria libre cae por debajo de 30 GB. Abre T/img/hoja.jpg y rehaz con --so nombre lo que desentone. Personas: de espaldas o pequeñas en el paisaje (rostro inventado de "novios reales" engaña).
Motor de vídeo (clip animado a partir de una imagen: Kling, Magnific, etc.) es opcional y solo con autorización de la persona para ese servicio. Sin él, el movimiento se hace en código (paso 5).
5. Página con movimiento
Una página por sitio, diseñada para el motivo (nunca copies otro piloto). Usa:
cp $S/runtime/movimiento.js T/y<script src="movimiento.js">(siempre dentro deT, antes del portón):data-revela(sube/surge/lado/zoom/cortina),data-parallax,data-intro(velo ≤ 1,2 s),data-cuenta,data-contador. Todo se detiene cuando el sistema pide "reducir movimiento".- El botón principal lleva
data-cta. Ennegocio, se queda en la primera pantalla, sin animación de entrada, y en móvil gana una barra fija. - Imágenes con
width/height,loading="lazy"debajo del pliegue yaltque describa la escena.
Medida de cuánto movimiento usar: referencias/visual-x-conversion.md.
6. Portón y publicación
node $S/scripts/porton.js T/index.html --tipo negocio|visual --fotos T/fotos
Comprueba, en 1440×900 y 390×844, con y sin "reducir movimiento": CTA (en la 1ª pantalla en 1,5 s si negocio), 0 error de consola, 0 archivo roto, sin desplazamiento lateral, imágenes cargadas, ninguna animación corriendo con "reducir movimiento", peso (negocio < 3 MB, visual < 8 MB). Solo publica con PASA.
Primera vez: cd $S/scripts && npm install && npx playwright install chromium.