Kc1t/sites-pixel-perfect

Sitios pixel perfect

Un sitio de IA queda genérico por tres motivos: plan vago, activo de banco de imágenes y nadie revisando el resultado. Esta skill resuelve los tres: el activo se genera a medida en Higgsfield, el plan es un prompt pixel perfect con medidas concretas, y el resultado se revisa con capturas antes de entregar.

Sigue los pasos en orden, siempre.

1. Leer el pedido y decidir (sin interrogar)

Decide estas cinco cosas y comunícalas en un mensaje breve:

• Qué es y para quién: el producto o la persona, y a quién quiere convencer la página.
• El ambiente en tres palabras (ej.: "tranquilo, caro, nocturno").
• El efecto, uno solo, que es la firma de la página (recetas en references/efeitos.md):
  • cursor: un personaje gira la cabeza siguiendo el ratón (vídeo controlado por el ratón);
  • linterna: el cursor abre un círculo que muestra lo que hay dentro de la imagen;
  • bucle: foto que se convierte en vídeo en bucle, con paralaje en las capas.
• Salida: un único index.html (por defecto), o solo el prompt pixel perfect (cuando pidan solo el prompt).
• Alcance: solo el héroe (por defecto) o la landing completa.

Pregunta solo si no se puede continuar sin la respuesta (ej.: el nombre de una marca real).

2. Generar los activos en Higgsfield

El activo es lo que hace que la página parezca cara. Orden de preferencia:

1. Los activos del usuario.
2. Generar en Higgsfield, mediante el MCP, con la receta del efecto elegido en references/efeitos.md.
3. Sin posibilidad de generar: página solo de tipografía y movimiento. Nunca caja gris, banco de imágenes o URL inventada.

Reglas que aplican para cualquier efecto:

• Imagen primero, vídeo después. La imagen cuesta pocos créditos, el vídeo cuesta decenas. Solo genera el vídeo cuando las imágenes sean correctas. Indica el costo antes de generar vídeo.
• La segunda imagen es siempre edición de la primera (Nano Banana editando la base), con "keep everything identical" y el único cambio. Generar de nuevo desde cero desalinea todo.
• Dirección en relación al borde de la imagen, no al personaje ("head turned toward the LEFT edge of the image"). "Su izquierda" el modelo se equivoca.
• Nano Banana acepta un trabajo por vez. Envía uno, espera a que termine, envía el siguiente. Dos juntos devuelven error de límite.
• Mitad vacía para el texto: el sujeto en una mitad, la otra lisa.
• Fondo de la imagen = fondo de la página. Anota el hex del borde de la imagen; se convierte en --bg.

3. Escribir el prompt pixel perfect

Escribe el prompt en ocho partes, en este orden, con el modelo en references/especificacion.md: fuentes, colores, activos, estructura, animación, JavaScript, responsivo, verificación.

Todo con valor. Nada de "degradado bonito" o "animación suave": cada adjetivo debe incluir el número que lo produce. Escribe también el texto real de la página (título, subtítulo, navegación, botones).

Si pidieron solo el prompt, esa es la entrega: verifica con references/revision.md y detente aquí.

4. Montar

Monta exactamente lo que dice el prompt:

• Un index.html con <style> y <script> dentro, fuentes mediante enlace, bibliotecas desde CDN con versión fija.
• La primera regla CSS coloca el fondo en html, body, para que no parpadee en blanco.
• HTML semántico, <title> real, alt, foco visible y prefers-reduced-motion respetado.
• En móvil (sin ratón) y con movimiento reducido, el efecto se queda estático en un fotograma bonito.
• Sin lorem ipsum, sin cajas de placeholder, sin emoji como icono.

5. Revisar y corregir (obligatorio)

Toma captura de pantalla de la página en desktop (1440×900) y en móvil (390×844) y revisa las capturas. Con Playwright: npx playwright screenshot --viewport-size=1440,900 index.html desktop.png. Sin herramienta de captura, indica que la página no fue revisada visualmente y repasa el código contra references/revision.md.

Califica con la regla de references/revision.md, corrige los tres puntos más débiles con valores concretos y toma otra captura. Hasta tres rondas, o hasta que el promedio supere 8 sin ninguna nota por debajo de 7.

6. Publicar (si lo piden)

El MCP de Higgsfield sube el sitio a una dirección .higgsfield.app (create_website y deploy_website; los pasos están en get_workflow_instructions con website-builder-flow). Cada despliegue sale público: avisa antes y no dejes llaves ni datos personales en el sitio.

7. Entregar

• El archivo, y cómo abrirlo.
• La captura final del desktop.
• Dos o tres líneas sobre el efecto y las decisiones.
• Los créditos gastados en Higgsfield, por activo.
• Qué cambiar, si hay algo provisional.

Archivos

• references/efeitos.md: las tres recetas, con los prompts de generación y el código.
• references/especificacion.md: el modelo del prompt pixel perfect en ocho partes.
• references/revision.md: la regla de calificación y el ciclo de corrección.

Estructura (pedido → medios → especificación → montaje → captura) adaptada de MotionSites Web Builder, licencia MIT (ver LICENSE.md). Los prompts, recetas y código de esta skill son nuestros.