litany-lty/elidli-x-avatar-banner-fusion

Fusión de Avatar y Banner de X (Habilidad Universal)

Responsabilidades y Límites

Único objetivo: Generar un banner de fondo puro listo para usar en la página de inicio de X/Twitter, de modo que cuando el cliente de X superponga el avatar real, se cree una conexión visual natural en el borde superior del avatar donde se superpone.

• Solo se debe editar/generar el banner; no se puede modificar el avatar, su borde negro, la zona de perfil, la barra de estado, botones, ni el contenido de las publicaciones.
• El producto final no debe contener fotos de avatar, imágenes de marcador de posición de avatar, círculos completos, elementos de interfaz de usuario, nombres de cuenta, ni capturas de pantalla simuladas de la página de inicio; las imágenes de vista previa/medición no son parte del producto final.
• Relación fija 3:1, recomendado 1500×500 / 1536×512 / 3000×1000. La salida debe mantener el estilo visual y el tema solicitado por el usuario; no asumir que todos los temas son ovejas solo porque un ejemplo de referencia lo es.
• La mayor parte del avatar está por debajo del borde inferior del banner. No se debe colocar el centro del avatar dentro de la imagen, ni tratar el fondo y la página de inicio como un lienzo editable único.
• El borde negro es una superposición real del cliente: el banner no puede eliminarlo; solo se puede reducir la sensación de corte usando colores cercanos, arcos, brillo y dirección de flujo. No inventar que la mitad inferior del círculo del avatar también puede ser envuelta por el banner.

Cuándo Activar

El usuario quiere: que el avatar de la página de inicio de X interactúe con el fondo, que el borde superior del avatar se fusione, que el banner y el avatar se conecten como una sola pieza, corregir un halo desalineado, reducir la banda de tierra/oscura debajo del banner, generar un banner puro para subir; o proporcionar una captura de pantalla de la página de inicio con el banner original para solicitar calibración.

Flujo de Trabajo (Debe Ejecutarse en Orden)

1. Obtener Primero la Geometría Real, No Adivinar el Centro

Cuando el usuario tenga una captura de pantalla completa de la página de inicio que muestre el banner sin desplazamiento y aún no plegada:

1. Confirmar el rectángulo del banner visible en la captura (left, top, width, height); confirmar el centro real del avatar (cx,cy) y el radio del borde exterior r, todos en coordenadas de la captura. La línea de intersección entre el borde exterior del avatar y el fondo es clave.
2. Usar scripts/banner_fusion.py measure para transformar las coordenadas de la interfaz a las coordenadas del lienzo del banner original. Considerar object-fit: cover que escala proporcionalmente y centra recortando; no aplicar directamente las coordenadas x/y de la captura.
3. Verificar los resultados del cálculo: el centro del avatar suele estar por debajo del borde inferior del banner; el borde superior del avatar está por encima del borde inferior; la única área interactiva real es el arco estrecho en la parte superior. Si la estructura es diferente, basarse en la captura real, no forzar valores predeterminados.
4. Guardar layout.json; reutilizarlo para iteraciones posteriores en el mismo dispositivo/misma disposición de página; volver a medir para diferentes clientes/dispositivos, cambios de recorte o diseño de interfaz de usuario.

Sin captura de pantalla: usar references/example_layout.json como valores empíricos solo para el primer borrador. Proviene de un único caso exitoso en dispositivo móvil, no es una coordenada oficial fija para todos los usuarios de X. Generar el primer borrador; es mejor que el usuario suba una captura de pantalla de la aplicación una vez para una calibración real.

Ejemplo de medición (las coordenadas son ilustrativas, no representan la medición real de la pantalla del usuario):

python3 scripts/banner_fusion.py measure \
  --banner-box 0 0 1536 512 \
  --avatar 210 618 158 \
  --target 1536 512 \
  --out layout.json
python3 scripts/banner_fusion.py report --config layout.json

Si no hay coordenadas exactas pero se tiene una captura: primero generar una cuadrícula de ayuda con grid, luego marcar el borde inferior del banner y el borde exterior del avatar. No es necesario inventar valores de píxeles para una falsa precisión de ajuste automático.

2. Diseñar el Fondo Basado en el Arco Superior Visible del Avatar

Leer references/prompt_templates.md, completar tema, estilo, paleta de colores, sujeto, elementos de fusión. Antes de generar, incluir los datos de medición:

• En la esquina inferior izquierda, crear solo un arco bajo/aurora de energía cerca del borde inferior del banner, con una posición cercana a la parte superior teórica del avatar, siguiendo la dirección del arco circular real; evitar dibujar un disco oscuro grande y completo en la imagen.
• Desde el arco bajo, emitir cintas/humo/luz/pétalos/estelas de estrellas, etc., con continuidad visual real, hacia el centro, y luego conectar con el sujeto en el lado derecho.
• Colocar el sujeto principal hacia la derecha o centro-derecha, dejando la esquina inferior izquierda para la zona de contacto del avatar. La barra de estado/menú puede cubrir la parte superior y derecha; los detalles clave deben evitar estas áreas.
• La tierra, meseta negra o banda oscura en el borde inferior no debe ser demasiado gruesa; el arco brillante en la zona de contacto superior del avatar debe estar cerca del borde inferior real del banner. Pero no recortar sujetos importantes solo para buscar una posición baja.
• El arco brillante no es el borde real del avatar recortado; es una ilusión óptica lograda mediante la superposición del cliente. Se puede incluir un margen de desenfoque externo de 0 a 40 píxeles (convertido a 1536 píxeles de ancho), priorizando el ajuste basado en el efecto de la captura de pantalla de la aplicación.

3. Generar Fondo Puro + Vista Previa de Alineación Independiente

El archivo final debe ser 3:1, sin avatar. Las imágenes de calibración/vista previa son para revisión, no para subir como banner oficial.

python3 scripts/banner_fusion.py preview \
  --banner output/banner.png \
  --config layout.json \
  --out output/preview.png --guide
# Si el usuario proporciona su propia imagen de avatar cuadrada, usar para la vista previa: --avatar-image input/avatar.png

El script superpondrá una simulación del avatar sobre el área de perfil negra, sin escribir el avatar en el banner.

También se puede proporcionar una vista previa de posición usando la captura de pantalla de la aplicación (puede ser necesario especificar áreas de retención adicionales para iconos de interfaz de usuario; la captura de pantalla después de la aplicación real es la aceptación final):

python3 scripts/banner_fusion.py screenshot-preview \
  --banner output/banner.png --screenshot input/home.png \
  --banner-box 0 0 691 230 --avatar 94 278 72 \
  --out output/screenshot_preview.png

4. Iterar Solo Modificando la Dimensión Correcta

• El borde superior del avatar está demasiado lejos del arco de energía (el arco está por encima del avatar) → Mantener el sujeto general, mover el arco bajo/las luces relacionadas hacia abajo; si es necesario, desplazar toda la imagen hacia abajo, comprimiendo la banda oscura más gruesa en la parte inferior.
• El arco bajo está demasiado cubierto por el avatar, apenas visible → Mover ligeramente el arco hacia arriba, no mover el avatar ni agrandar todo el círculo.
• El efecto de luz está desplazado a la izquierda/derecha → Revisar el centro x de la captura y mover horizontalmente los elementos de interacción local; no asumir que todos los dispositivos tienen la misma x.
• El borde negro visible se siente abrupto → Cambiar el arco a un degradado suave y niebla de luz, conectando a lo largo de la zona de contacto superior; no prometer "eliminar el borde negro".
• La oveja/persona/sujeto está cubierto por el menú → Ajustar la posición del sujeto o la jerarquía visual de la imagen, no modificar la interfaz de usuario del cliente.
• El recorte del banner cambia → Volver a ejecutar measure; no continuar iterando basándose solo en el desplazamiento de píxeles de la ronda anterior.

Desplazamiento ligero de la imagen ya generada (para verificar si es un problema de posición; al final, se recomienda retroalimentar el desplazamiento exitoso al modelo de generación de imágenes para una nueva generación de alta calidad):

python3 scripts/banner_fusion.py shift --input output/banner.png \
  --dy 32 --out output/banner_down32.png

--dy es el desplazamiento hacia abajo en píxeles del lienzo; la parte inferior se recorta, la superior se rellena según el borde, no es adecuado para movimientos grandes. Después de generar, volver a renderizar la vista previa.

5. Aceptación y Entrega

La tarea se considera completada solo si se cumplen todos los siguientes puntos:

1. El banner tiene una relación 3:1; el contenido no contiene avatar/texto/interfaz de usuario/círculo de marcador de posición completo.
2. En la vista previa, la geometría real del avatar coincide con el arco estrecho visible, no es un "avatar completo dentro del fondo" inventado.
3. Cerca de la parte superior del avatar existe un efecto de fusión de luz perceptible pero no forzado; el borde inferior del banner no tiene exceso de tierra negra o banda gruesa sin contenido.
4. El flujo de luz está razonablemente conectado con el sujeto, y el sujeto principal no está excesivamente cubierto por el avatar/botones.
5. Después de aplicar el banner en X, el usuario toma una captura de pantalla de la página de inicio sin plegar como evidencia final; si hay diferencias obvias, continuar la calibración precisa. Sin aplicación real, solo se puede decir "vista previa simulada aprobada", no afirmar que el cliente real será perfecto.
6. Entregar el banner puro, la vista previa opcional y el JSON de diseño; no entregar la vista previa por error como el banner.

Aprender de Casos Exitosos

• Los patrones de composición de casos exitosos se encuentran en references/geometry.md y references/success_case.md. Ejemplos visuales de fondo puro en assets/success_reference_1536x512.webp (sin avatar ni información personal). También se puede usar scripts/make_demo_banner.py para generar un fondo de demostración neutral.
• Práctica clave: un arco bajo a la izquierda (dejando espacio arriba para una pluma de energía), tierra/banda oscura delgada en la parte inferior, cintas coloridas de izquierda a derecha, sujeto en la derecha. No solo imitar los colores, se debe reutilizar la relación de posición.
• Coordenadas empíricas: ver references/example_layout.json y references/geometry.md. Las diferencias de dispositivo y cliente tienen prioridad sobre estos valores empíricos.

Índice de Archivos

• references/geometry.md: Fórmulas de transformación de coordenadas, límites y casos de fallo.
• references/prompt_templates.md: Indicaciones principales sustituibles, palabras negativas, indicaciones de iteración.
• references/example_layout.json: Parámetros de avatar de ejemplo (solo para el primer borrador predeterminado).
• scripts/banner_fusion.py: Cálculo, cuadrícula, vista previa, reemplazo de vista previa con captura, calibración de desplazamiento.
• assets/success_reference_1536x512.webp: Imagen de referencia de fondo puro subible de un caso exitoso, sin avatar real.
• examples/geometry_guide.svg: Diagrama de superposición avatar/banner (sin avatar real, sin fondo de producción).
• scripts/make_demo_banner.py: Genera un fondo de prueba 3:1 de ejemplo.
• README.md: Instrucciones de instalación y comandos.