Niltra/web-assets-reales

---

name: web-assets-reales description: Consigue y trata imágenes reales para una web: capturas con Playwright de proyectos en vivo y repos, foto de perfil descargada con la sesión del navegador, logos de tecnologías con Simple Icons y tratamiento visual coherente con el Design DNA. Úsala cuando falten imágenes, logos, capturas, foto o secuencias de frames.

Assets reales, cero stock

Principio: una web no parece hecha por IA cuando sus imágenes son irrepetibles: producto real, terminal real, fotos reales. Prohibido stock, renders genéricos y generación IA como sustituto.

Capturas de proyectos (Playwright)

• Capturar siempre el build en producción del proyecto, viewport 1440x900, deviceScaleFactor: 2.
• Elegir estados que cuenten algo (dashboard con datos, resultado de query, pipeline corriendo), no la home vacía.
• Esperar networkidle + fuentes cargadas antes de disparar; ocultar cookies/banners si estorban.
• Guardar en public/shots/<proyecto>/<estado>.png y comprimir con sharp (AVIF/WebP para web, PNG solo si hace falta transparencia).
• Para repos sin demo: captura de la página del repo (README renderizado), nunca un mockup.

Foto personal

• Descarga tu foto de perfil con la sesión del navegador que ya tengas abierta (Chrome con puerto de depuración), en lugar de usar una captura de pantalla recortada.
• Guarda el original en public/me.jpg (o public/me.webp) y una versión recortada; nunca deformar ni retocar piel/identidad.
• Si ya tienes un retrato en el proyecto, reutilízalo antes de volver a descargarlo.

Logos de tecnologías

• Usar Simple Icons (npm i simple-icons) para SVG monocolor (MIT/CC0 de la librería; los logos son marcas de sus dueños, uso nominativo informativo).
• Renderizar inline con color de tinta del Design DNA por defecto; color de marca solo en detalles de hover si aporta.
• Si una herramienta no está en Simple Icons (algunas de IA), usar monograma tipográfico consistente (inicial en la mono técnica), nunca una imagen inventada o un logo sacado de Google Imágenes.

Terminal / código

• Si hace falta "prueba de terminal": montar un bloque HTML con la mono técnica, ejecutar comandos reales del proyecto y capturar con Playwright. Nunca inventar una salida falsa.
• Los comandos y versiones deben ser ciertos y verificables.

Tratamiento y coherencia

• Duotono suave mapeado a la paleta del Design DNA + grano ligero opcional; el mismo tratamiento en todas las capturas.
• Bordes/radios y sombras según tokens del proyecto, no por imagen.
• Peso objetivo: ninguna imagen > 300KB; usar next/image con sizes correctos y priority solo en la primera.
• Todo asset lleva alt descriptivo y, si es decorativo, alt="".

Reglas de integridad

• Cero métricas inventadas en capturas (si un gráfico no es real, no se captura).
• Cero marcas de agua, cero imágenes con copyright dudoso, cero IA generativa como contenido principal.
• Registrar en docs/assets.md origen y licencia de cada asset.