Designer Gráfico de Fotos & Diretor de Arte

Habilidade de Designer Gráfico de Fotos & Diretor de Arte Profissional

Esta habilidade transforma fotografias brutas em artes gráficas de nível profissional para redes sociais, cartões postais e pôsteres comemorativos. Em vez de usar geração de imagem por IA sobre fotos (que distorce rostos, altera céus e bagunça a tipografia tailandesa), este fluxo de trabalho utiliza HTML5 + CSS3 + Arte Vetorial SVG Personalizada + Google Fonts, renderizado em resolução 4K Retina (--force-device-scale-factor=2) via Headless Chrome e composto com Python Pillow (subsampling=0).

---

Fluxo de Trabalho Principal (6 Fases)

Fase 1: Inspeção da Foto e Análise Visual Automatizada

1. Visualizar a Foto Alvo: Sempre chame read_file na imagem alvo primeiro para entender visualmente o assunto, humor, iluminação e obstáculos (ex.: rostos, hastes de barraca, cabos de vento, horizontes, árvores).
2. Executar o Script de Análise da Foto: Execute analyze_photo.py na imagem alvo para extrair:
   • Dimensões exatas em pixels, proporção e metadados EXIF.
   • Um Mapa de Luminância e Espaço Negativo em Grade 3×3 (identifica quais zonas são escuras, médias ou claras, e quais zonas têm baixo detalhe adequado para tipografia).
   • Paleta de Cores Extraída (cores hexadecimais de fundo dominantes + cores de destaque de alto contraste recomendadas).

   python ".agents/skills/photo-graphic-designer/scripts/analyze_photo.py" "<caminho_da_imagem>"
   

---

Fase 2: Descoberta Interativa de Estilo e Direção

Antes de gerar gráficos, consulte style_catalog.md e use ask_question para permitir que o usuário escolha entre direções de design curadas e adaptadas à sua foto:

1. Seleção de Estilo de Design (Apresente 3–5 estilos mais adequados dos 12+ estilos em style_catalog.md, além de uma opção para gerar vários estilos para comparar):
   • Romântico Estrelado & Celestial (Serifa dourada luxuosa, linhas de constelação, brilho de estrelas, bordas de astrolábio)
   • Editorial Minimalista / Cartão Postal de Revista (Layout Kinfolk / GO OUT / NatGeo, grades finas, cabeçalho de metadados, carimbo de localização)
   • Doodle Quente e Fofo Desenhado à Mão (Luzes de fadas aconchegantes, bordas tracejadas de esboço, corações flutuantes, setas curvas, letra cursiva)
   • Filme Vintage e Kodachrome Analógico (Brilho de halação, moldura de filme, carimbo de data, serifa retrô)
   • Glassmorfismo Moderno e UI Flutuante (Cartões de vidro fosco, player de música / barra de memória, sem serifa elegante)
   • Aventura ao Ar Livre e Distintivo Retrô (Emblema de Parque Nacional / Acampamento, linhas topográficas, vetores de bússola e pinheiro)
   • Pôster Minimalista Japonês (Estilo Zakka / Muji) (Tipografia vertical/assimétrica, bastante espaço em branco, arte linear delicada)
   • Letterbox Cinematográfico e Legendas de História (Barras anamórficas, bloco de créditos de título de filme, legenda bilíngue poética)
2. Proporção e Formato de Saída:
   • Proporção original (ex.: 3:2 Paisagem 3600×2400)
   • Feed Social Retrato (4:5 2400×3000)
   • Quadrado (1:1 2800×2800) ou História/Reel (9:16 2160×3840)

---

Fase 3: Oficina de Redação Multitonal (Crucial!)

Citações genéricas ou excessivamente piegas muitas vezes soam não naturais ("ไม่ใช่ตัวเอง"). Antes de finalizar o texto—ou quando o usuário pedir ideias de redação—leia copywriting_tones.md e use ask_question para permitir que o usuário selecione ou misture e combine palavras por seção e tom de personalidade:

• Divida o texto em espaços modulares:
  1. Distintivo Superior / Sobrancelha (ex.: título em inglês ou etiqueta de ocasião)
  2. Manchete Principal (saudação primária em Tailandês/Inglês)
  3. Subtítulo / Âncora Central (frase-chave calorosa)
  4. Mensagem Corporal / Caixa de Citação (mensagem sincera de 2 linhas—ou opção de omitir para um visual mais limpo)
  5. Chamada para o Sujeito / Nota com Seta (etiqueta curta e fofa ao lado de uma seta desenhada à mão apontando para a pessoa/sujeito—ou opção de omitir)
• Ofereça 5–6 tons de personalidade distintos por espaço:
  • สายลุย-ชิลล์ๆ (Ao Ar Livre / Companheiro Descolado): Tom natural, relaxado, de parceiro de aventura.
  • แมนๆ จริงใจ ไม่เลี่ยน (Sincero e Pé no Chão): Honesto, caloroso, zero vergonha alheia.
  • อบอุ่น-เรียบง่าย (Caloroso e Clássico): Gentil, apreciativo, atemporal.
  • กวนนิดๆ กันเอง (Brincalhão e Provocador): Brincadeira de casal de verdade com afeto.
  • โรแมนติก-ลึกซึ้ง (Poético e Romântico): Luz das estrelas, destino, emoção profunda.
  • สั้นกระชับ-มินิมอล (Curto e Impactante): Impacto minimalista.

---

Fase 4: Composição, Fluxo Direcional e Regras de Teoria das Cores

Consulte composition_and_color.md ao criar a sobreposição HTML/CSS/SVG. Sempre aplique estas regras de ouro:

1. Zona de Proteção do Sujeito e Obstáculos:
   • Mapeie as coordenadas exatas do retângulo (x, y) de rostos, corpos e linhas estruturais (como hastes de barraca ou cabos de vento diagonais).
   • Nunca deixe que texto, corações flutuantes, estrelas ou setas cruzem rostos ou intersectem cabos de vento de forma estranha. Desloque os elementos de chamada para um lado limpo de qualquer corda/linha.
2. Fluxo Direcional do Olhar (Vetorização Visual):
   • Guie o olhar do espectador do Bloco de Tipografia Primário (no espaço negativo aberto) -> através de Ornamentos Secundários / Setas de Chamada -> diretamente para o Rosto/Sorriso do Sujeito Humano.
   • Use caminhos SVG curvos (<path d="M ... Q ...">), orientação de lua crescente ou ângulos de estrela cadente que apontem em direção ao sujeito ou emoldurem o texto para dentro, nunca levando o olhar para fora da borda da tela.
3. Harmonia de Cores e Legibilidade Adaptativa:
   • Regra de Cores 60-30-10:
     • 60% Tom ambiente base da foto (ex.: Azul Meia-Noite Profundo #0A1530 ou Verde Floresta).
     • 30% Cor da Tipografia Primária (Marfim Quente de Alto Contraste #FFFAF0 ou Branco Puro Nítido #FFFFFF).
     • 10% Cor de Destaque amostrada ou harmonizada com a cena (ex.: Dourado Luz de Fada Quente #FFE299, Champanhe #F0CA86, ou Coração Coral Suave #FF7B93).
   • Sempre coloque um gradiente radial/linear sutil e invisível (rgba(8, 16, 38, 0.38)) ou um recipiente de vidro fosco (backdrop-filter: blur(4px)) atrás do texto do corpo para que a tipografia permaneça 100% legível sobre estrelas, nuvens ou folhagem.
4. Perfeição da Tipografia Tailandesa:
   • Use white-space: nowrap em linhas de citação tailandesa com múltiplas frases ou quebras de linha explícitas <br> nos limites naturais das frases para que palavras tailandesas (como "ฉัน" ou "วัน") nunca sejam quebradas sozinhas em uma linha órfã.
   • Deixe pelo menos 35px–50px de preenchimento claro entre texto grande de exibição tailandês (que possui vogais superiores altas/marcas de tom como ั ิ ี ึ ื ่ ้ ๊ ๋ ์ e vogais inferiores ุ ู) e estrelas, luas ou bordas SVG ao redor.

---

Fase 5: Pipeline de Renderização 4K Retina

Use render_graphic.py para renderizar qualquer template HTML/CSS/SVG sobre a foto alvo em resolução 4K:

python ".agents/skills/photo-graphic-designer/scripts/render_graphic.py" `
  --photo "DSC03461.jpg" `
  --html "caminho/para/design.html" `
  --output "DSC03461_Saida.jpg" `
  --width 1800 --height 1200 --scale 2

• Por que --scale 2 e --virtual-time-budget=3000 são importantes:
  • Projetar em 1800×1200 pixels CSS com --force-device-scale-factor=2 produz uma saída Retina ultra-nítida de 3600×2400.
  • --virtual-time-budget=3000 garante que o Google Fonts termine de baixar e aplicar antes que o Chrome capture o quadro (evitando fallback de fonte do sistema).
  • Salvar com quality=96, subsampling=0 preserva 100% das bordas nítidas em texto colorido e linhas vetoriais finas.

---

Fase 6: Verificação de Qualidade Visual Obrigatória

Após renderizar cada imagem, você DEVE inspecionar o arquivo .jpg gerado usando read_file e verificar esta lista antes de mostrá-lo ao usuário:

• Verificação de Fonte: As fontes do Google Fonts pretendidas carregaram corretamente (sem fallback para Tahoma/Arial)?
• Sem Quebras de Palavras Órfãs: Todas as frases tailandesas estão quebradas limpidamente nos pontos <br> intencionais, sem palavras isoladas no final?
• Verificação de Zero Colisão: Alguma estrela, lua, coração, borda ou seta toca ou sobrepõe vogais/marcas de tom tailandesas, rostos humanos ou cordas de barraca?
• Equilíbrio Visual e Contraste: Cada linha de texto é facilmente legível tanto em visualização de miniatura quanto em tela cheia?

Se algum problema for detectado durante a inspeção read_file, ajuste imediatamente as coordenadas CSS/SVG e renderize novamente antes de apresentar o resultado.

---

Modelos de Referência e Documentação

• Catálogo de Estilos e Pares de Fontes: references/style_catalog.md
• Guia de Composição, Fluxo Direcional e Cores: references/composition_and_color.md
• Matriz de Redação Tailandesa e Inglesa: references/copywriting_tones.md
• Modelos de Referência HTML/SVG Prontos para Uso:
  • examples/style_starry_romantic.html
  • examples/style_minimal_magazine.html
  • examples/style_warm_cute_doodle.html