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

Fusão de Avatar × Banner do X (Skill Universal)

Responsabilidade e Limites

Único objetivo: gerar um banner de fundo puro pronto para upload no perfil do X/Twitter, de modo que, quando o cliente X sobrepuser o avatar real, a borda superior do avatar na área de sobreposição crie uma conexão visual natural.

• Deve-se apenas editar/gerar o banner; não alterar o avatar, sua borda preta, área de informações do perfil, barra de status, botões ou conteúdo de postagens.
• No produto final é proibido incluir foto do avatar, placeholder de avatar, círculo completo, UI, texto da conta ou simulação de screenshot do perfil; imagens de visualização/medição não são consideradas produto final.
• Proporção fixa 3:1, recomendado 1500×500 / 1536×512 / 3000×1000. A saída deve manter o estilo visual e o tema solicitados pelo usuário, sem assumir que, porque o exemplo de referência mostra uma ovelha, todos os resultados devem conter ovelhas.
• A maior parte do avatar está abaixo da borda inferior do banner. Não se deve colocar o centro do avatar dentro da imagem, nem tratar o fundo e o perfil como uma tela editável única.
• A borda preta é sobreposta pelo cliente X de forma real: o banner não pode removê-la; apenas pode usar cores próximas, arcos, luminosidade e fluxo para reduzir a sensação de descontinuidade. Não se deve fingir que a metade inferior do avatar também pode ser envolvida pelo banner.

Quando Ativar

O usuário deseja: interação entre avatar e fundo no perfil do X, fusão na borda superior do avatar, banner e avatar conectados, correção de halos desalinhados, redução de faixas escuras/terra na parte inferior do banner, geração de banner puro para upload; ou fornece screenshot do perfil e banner original para solicitar calibração.

Fluxo de Trabalho (deve ser seguido na ordem)

1. Obter geometria real primeiro, não adivinhar o centro

Quando o usuário fornecer um screenshot completo do perfil mostrando o banner e o avatar sem rolagem:

1. Identificar no screenshot o retângulo do banner (left, top, width, height); identificar o centro real do avatar (cx, cy) e o raio da borda externa r, todos em coordenadas do screenshot. A interseção da borda externa do avatar com o fundo é o ponto chave.
2. Através de scripts/banner_fusion.py measure, recalcular as coordenadas da interface para as coordenadas da tela original do banner. Considerar object-fit: cover com escala proporcional e recorte centralizado; não aplicar diretamente as coordenadas x/y do screenshot.
3. Verificar os resultados: o centro do avatar geralmente está abaixo da borda inferior do banner; a borda superior do avatar está acima da borda inferior; a área realmente interativa é o arco estreito no topo. Se a estrutura for diferente, basear-se no screenshot real, não forçar valores padrão.
4. Salvar layout.json; reutilizá-lo para iterações no mesmo dispositivo/layout; medir novamente para diferentes clientes/dispositivos, alterações de recorte ou layout da UI.

Sem screenshot: usar references/example_layout.json como valor empírico apenas para o primeiro rascunho. Ele vem de um único caso de sucesso em dispositivo móvel, não é uma coordenada oficial fixa para todos os usuários do X. Produzir o primeiro rascunho e, de preferência, pedir que o usuário envie um screenshot real para calibração.

Exemplo de medição (coordenadas ilustrativas, não representam medição real do usuário):

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

Se não houver coordenadas exatas, mas houver screenshot: primeiro gerar uma grade auxiliar com grid, depois marcar a borda inferior do banner e a borda externa do avatar. Não inventar valores de pixels para um ajuste automático falso.

2. Projetar o fundo com base no arco visível no topo do avatar

Ler references/prompt_templates.md e preencher tema, estilo, paleta de cores, assunto, elementos de fusão. Antes de gerar, incluir os dados de medição:

• No canto inferior esquerdo, criar apenas um arco baixo/auréola de energia próximo à borda inferior do banner, com posição próxima ao topo teórico do avatar, seguindo a curva real da borda superior; evitar desenhar um disco escuro grande e completo na imagem.
• A partir do arco baixo, emitir fitas/fumaça/luz/pétalas/trilhas estelares para a direita, com continuidade visual real, conectando-se ao centro e depois ao assunto principal.
• Assunto principal posicionado à direita ou ligeiramente à direita do centro; o canto inferior esquerdo fica reservado para a área de contato com o avatar. A barra de status/menu pode cobrir o topo e a direita; detalhes importantes devem evitar essas áreas ocultas.
• A terra, plataforma escura ou faixa escura na borda inferior não deve ser muito espessa; o arco luminoso na área de contato do topo do avatar deve ficar próximo à borda inferior real do banner. Mas não cortar o assunto principal apenas para forçar uma posição baixa.
• O arco luminoso não é a borda real do avatar recortada; é uma ilusão de ótica obtida pela sobreposição do cliente X. O design pode incluir um buffer de brilho externo de 0 a 40px (convertido para largura de 1536px), ajustado prioritariamente com base no efeito real do screenshot.

3. Gerar fundo puro + visualização de alinhamento independente

O arquivo final deve ser 3:1, sem avatar. Imagens de calibração/visualização são para revisão, não para upload como banner oficial.

python3 scripts/banner_fusion.py preview \
  --banner output/banner.png \
  --config layout.json \
  --out output/preview.png --guide
# Se o usuário fornecer sua própria imagem quadrada do avatar, usar: --avatar-image input/avatar.png

O script sobrepõe o avatar simulado sobre a área de perfil escura, sem escrever o avatar no banner.

Também é possível fornecer um screenshot do aplicativo para visualização posicional (ícones da UI podem exigir áreas de preservação adicionais; o screenshot real após reaplicação é a validação 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 apenas ajustando as dimensões corretas

• Arco superior do avatar muito distante do arco luminoso (arco acima do avatar) → Manter o assunto principal, mover o arco baixo/faixas luminosas para baixo; se necessário, deslocar toda a imagem para baixo, comprimindo a faixa escura na parte inferior.
• Arco luminoso muito coberto pelo avatar, quase invisível → Mover o arco ligeiramente para cima, sem mover o avatar ou expandir o círculo.
• Efeito luminoso deslocado para a esquerda/direita → Reconfirmar o centro x do avatar no screenshot e mover horizontalmente os elementos de interação local; não assumir que todos os dispositivos têm o mesmo x.
• Borda preta visível parece abrupta → Alterar o arco para um gradiente suave e névoa de luz, conectando-se ao longo da área de contato superior; não prometer "remover a borda preta".
• Ovelha/pessoa/assunto coberto pelo menu → Ajustar posição do assunto ou hierarquia visual, não modificar a UI do cliente.
• Recorte do banner mudou → Executar measure novamente; proibido continuar iterando apenas com deslocamentos de pixels da rodada anterior.

Deslocamento leve da imagem já gerada (para verificar se é problema de posição; recomenda-se, após deslocamento bem-sucedido, realimentar o modelo gerador para produzir nova imagem de alta qualidade):

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

--dy é o deslocamento para baixo em pixels do banner; a parte inferior será cortada e a superior preenchida com a borda. Não adequado para grandes deslocamentos. Regenerar a visualização após o deslocamento.

5. Validação e Entrega

O trabalho só é considerado concluído quando todos os itens a seguir forem atendidos:

1. A proporção do banner é 3:1; o conteúdo não contém avatar/texto/UI/círculo placeholder completo.
2. Na visualização, a geometria real do avatar corresponde ao arco estreito visível, não a um "avatar completo" fictício dentro do fundo.
3. Existe um efeito de fusão luminosa perceptível, mas não artificial, próximo ao topo do avatar; a parte inferior do banner não tem excesso de terra preta ou faixa grossa sem conteúdo.
4. O fluxo de luz e o assunto principal estão conectados de forma razoável; o avatar/botões não cobrem excessivamente o visual principal.
5. Após aplicar o banner no X, o usuário captura um screenshot do perfil sem rolagem como evidência final; se houver diferença significativa, continuar calibrando precisamente. Sem aplicação real, só se pode dizer "visualização simulada aprovada", não afirmar que estará perfeito no cliente real.
6. Entregar o banner puro, a visualização opcional e o layout JSON; não entregar a visualização como banner por engano.

Referências de Casos de Sucesso

• Padrões de composição de casos de sucesso estão em references/geometry.md e references/success_case.md. Exemplos visuais de fundo puro em assets/success_reference_1536x512.webp (sem avatar ou informações pessoais); também é possível usar scripts/make_demo_banner.py para gerar um fundo de demonstração neutro.
• Abordagens-chave: arco baixo real no canto esquerdo (deixando espaço para plumas de energia acima), faixa de terra/escura fina na base, fitas coloridas da esquerda para a direita, assunto à direita. Não copiar apenas as cores; deve-se reutilizar as relações de posição.
• Coordenadas empíricas: ver references/example_layout.json e references/geometry.md. Diferenças de dispositivo e cliente têm prioridade sobre esses valores empíricos.

Índice de Arquivos

• references/geometry.md: Fórmulas de conversão de coordenadas, limites e casos de falha.
• references/prompt_templates.md: Prompts principais substituíveis, palavras negativas, prompts de iteração.
• references/example_layout.json: Parâmetros de exemplo do avatar (apenas para primeiro rascunho padrão).
• scripts/banner_fusion.py: Cálculo, grade, visualização, substituição de screenshot, calibração de deslocamento.
• assets/success_reference_1536x512.webp: Imagem de referência de fundo puro de caso de sucesso, sem avatar real.
• examples/geometry_guide.svg: Diagrama de sobreposição avatar/banner (sem avatar real, sem fundo de produção).
• scripts/make_demo_banner.py: Geração de fundo de teste 3:1 de exemplo.
• README.md: Instalação e instruções de comandos.