Direção de arte de frontend de imagem
Crie composições planas de sites que um desenvolvedor possa ler rapidamente. Dê a cada composição uma hierarquia clara, um grid consistente, espaçamento proposital e um gesto tipográfico ou fotográfico distinto. Trate a imagem como uma referência para implementação. Use HTML e CSS ao vivo para texto de produção, UI e medidas exatas quando a implementação for solicitada.
1. Escolha o workflow
Leia a solicitação e as orientações disponíveis do projeto, como AGENTS.md, CLAUDE.md, o guia de estilo, tokens de design e ativos visuais relevantes. Siga primeiro as instruções explícitas do usuário, depois as referências aprovadas dentro de suas funções atribuídas e, em seguida, os padrões do projeto. Use a direção de arte para preencher lacunas.
| Solicitação | Workflow |
|---|---|
| Nova página, hero ou seção | Projete a partir do briefing. Escolha uma direção visual coerente. |
| Outra seção do mesmo site | Reutilize o sistema visual e crie uma composição adequada ao novo conteúdo. |
| Mobile a partir de desktop aprovado | Recomponha o conteúdo e os componentes aprovados para o novo viewport. |
| Remover, substituir, recolorir ou corrigir um item | Edite a imagem aprovada no local e defina o que preservar. |
Gere diretamente quando o briefing fornecer direcionamento suficiente. Se um alvo de edição essencial ou ativo aprovado não puder ser recuperado, solicite essa entrada específica.
2. Atribua a cada referência um papel
Numere as entradas e identifique cada uma pelo nome do arquivo ou conteúdo visual. Carregue esses papéis no prompt de imagem real.
- Base para editar — A imagem aprovada que receberá a alteração. Coloque-a primeiro ao usar uma edição de API.
- Desktop aprovado — Fonte de conteúdo, ordem, estilos de componentes e as identidades de imagens e logotipos para uma versão responsiva.
- Apenas estilo — Herde características nomeadas, como paleta, tratamento tipográfico, granulação e classificação de fotos. Mantenha a composição e a cópia da nova seção independentes.
- Apenas escala e espaçamento — Herde apenas medidas ou relações nomeadas, como margens laterais, linhas finas, tamanho do rótulo ou escala de numerais de exibição.
- Ativo exato — Mantenha a foto, produto, ambiente ou logotipo fornecido reconhecível. Preserve detalhes distintivos e especifique o corte ou a classificação permitida.
Para páginas com várias fatias, leve adiante uma âncora visual aprovada e um registro compacto da paleta, funções tipográficas, gutters, espaçamento, regras, tratamento de CTA e imagens. Indique quais seções aparecem em cada fatia e onde ela começa e termina. Use o mesmo sistema visual em toda a página. Introduza um cabeçalho ou rodapé apenas onde ele pertence.
3. Dirija a arte e faça o prompt
Para conceitos originais, escolha uma postura (artesanal, clareza, calor, teatro ou expressão ousada), um layout (editorial offset, dividido, full bleed, grid modular disciplinado ou liderado por tipografia) e um acabamento (digital limpo, granulação de filme sutil, meio-tom ou papel texturizado). Escolha apenas os componentes que servem ao conteúdo. Um menu de jantar pode ser liderado por tipografia com regras e bastante espaço para respirar. Um hero pode usar um único corte decisivo. Mantenha as bordas dos painéis retangulares ou use divisores horizontais simples. Evite painéis em losango, diamante ou paralelogramo inclinado, a menos que sejam explicitamente solicitados.
Use blocos curtos rotulados para um briefing complexo. Para uma solicitação simples, use apenas as linhas relevantes.
- Entregável — Nomeie a página ou seção, viewport alvo, enquadramento e tela. Especifique uma composição de site plana, de ponta a ponta, a menos que uma moldura de dispositivo seja solicitada.
- Referências — Mapeie as entradas para suas funções individuais e indique quais detalhes cada uma controla.
- Layout — Dê a ordem de leitura, margens das bordas, âncoras do grid, limites das seções, alinhamento e o ponto focal. Descreva um movimento de design marcante em termos visíveis.
- Cópia — Cite o texto exato, especifique o posicionamento e renderize cada string uma vez, a menos que a repetição seja necessária. Preserve cabeçalhos, preços, nomes, datas e placeholders fornecidos. Para um conceito aberto, use cópia breve e fundamentada e evite inventar alegações para uma organização real.
- Sistema visual — Especifique a hierarquia tipográfica, quebras de linha onde necessário, funções de cor, imagens e corte, acabamento e estilo dos componentes. Use referências de estúdio nomeadas como abreviação para características visíveis.
- Restrições — Nomeie as poucas exclusões que importam. Evite imagens com aparência de banco de imagens, brilho sem motivação, grids de cartão repetitivos e cópia de preenchimento, a menos que o briefing peça esses tratamentos.
4. Recomponha para mobile
Use a largura de viewport CSS solicitada, ou cerca de 390 px CSS por padrão. Trate as dimensões de pixel renderizadas como uma configuração de tela separada. Use uma única coluna quando apropriado, refluir o conteúdo aprovado em sua ordem especificada e preserve rótulos, ativos exatos, estilos de CTA, regras e componentes placeholder. Deixe o texto quebrar, aumente o espaço de toque e ajuste os cortes de imagem apenas conforme permitido. Adicione elementos fixos apenas quando solicitado ou parte do design aprovado. Divida composições longas em limites de seção lógicos antes que o texto se torne ilegível.
5. Edite uma área específica
Anexe a imagem aprovada como base de edição. Declare a ação, identifique o elemento pela aparência e localização e, em seguida, declare o que preservar. Converta coordenadas percentuais em um localizador em linguagem simples medido a partir do canto superior esquerdo e use ambos no prompt. Preserve a tela, cópia, corte, geometria, paleta e conteúdo próximo, a menos que a alteração os afete explicitamente.
Exemplo:
Edite a imagem 1 no local. Em x=43,4%, y=29,6% a partir do canto superior esquerdo, remova apenas o preenchimento local atrás do rótulo e continue a textura da seção adjacente para essa área. Preserve a letra, linha fina, escala tipográfica, painéis ao redor e a tela inteira. Mantenha o fundo da seção opaco.
Distinga a remoção de um preenchimento local da criação de um recorte alfa. Use um fundo transparente apenas quando solicitado ou necessário para o ativo pretendido. Se a preservação estrita de pixels for necessária, use um workflow de composição aprovado, quando disponível, e verifique a região não tocada em relação ao original. Instruções de prompt e marcação generativa por si só não podem garantir um resultado idêntico em pixels.
6. Use o backend de imagem disponível
Prefira a ferramenta de geração e edição de imagem do host quando presente. Forneça imagens de referência por meio de seu mecanismo de entrada suportado e expresse controles não suportados como intenção no prompt. Relate o backend ou as configurações reais apenas quando conhecidos. Se nenhum backend de imagem estiver disponível, forneça um prompt pronto para executar e identifique as entradas necessárias.
Quando uma integração da API OpenAI Image estiver disponível, use estes pontos de partida:
| Uso | Modelo | Qualidade | Complexidade |
|---|---|---|---|
| Conceito original rápido | gpt-image-2.6-flare | medium | medium |
| Layout detalhado, cópia exata pequena ou correspondência de referência exigente | gpt-image-2.6-sunburst | high | medium ou high |
| Edição direcionada | gpt-image-2.6-sunburst | medium ou high | low |
Ajuste a qualidade para detalhes e legibilidade. Ajuste a complexidade para planejamento e composição. Use gerações para novas composições e edições para bases de imagem existentes. Omita input_fidelity em edições do GPT Image 2.6. Para edições guiadas por marcação, use uma sobreposição PNG transparente correspondendo às dimensões de pixel da primeira entrada. Forneça marcação ou máscara separadamente, conforme suportado, nunca ambos na mesma solicitação guiada por marcação. Mantenha as anotações fora da arte final.
Escolha tamanhos suportados próximos à proporção alvo. Para tamanhos personalizados da API GPT Image 2.6, use dimensões divisíveis por 16 e verifique os limites atuais do modelo. Exemplos de telas incluem 1536×960 para um hero 16:10, 1536×1024 para uma seção 3:2, 1088×1920 para uma fatia de página alta e 1088×2352 para uma composição de telefone. Preserve a proporção e as dimensões solicitadas como alvos quando o host gerenciar o dimensionamento da tela. Verifique as dimensões reais antes de reivindicar uma exportação exata.
Use PNG para composições detalhadas e ativos alfa. Quando o backend suportar, solicite a geração SVG ou GIF apenas para um ativo vetorial ou estudo de movimento que o usuário deseje. Inspecione a saída vetorial e a continuidade do loop antes da entrega.
Referências da API: Image generation · Image prompting
7. Inspecione e corrija
Inspecione a imagem real na visão normal e amplie para letras pequenas ou a região de edição. Compare-a com o briefing e as entradas aprovadas:
- Verifique toda cópia bloqueada, datas, preços, rótulos, logotipos e detalhes de ativos reconhecíveis.
- Verifique a contagem de seções solicitada e a ordem de leitura, hierarquia visual, gutters, alinhamento, tipografia, linhas finas e continuidade dos componentes. Verifique se o layout se encaixa no viewport solicitado.
- Verifique se os papéis de referência permaneceram separados. Sinalize layouts emprestados, cópia não relacionada, substituições de ativos ou painéis não solicitados.
- Para edições, compare a área alterada e seus arredores com a base aprovada. Para recortes, inspecione o canal alfa quando disponível.
Trate qualquer violação de um requisito bloqueado como uma verificação falha. Faça no máximo uma passagem corretiva automática por solicitação. Para uma edição de imagem aprovada, tente novamente a partir da base aprovada se o candidato se desviou. Para uma nova composição com um defeito localizado, edite o candidato. Regere apenas quando a própria composição precisar ser reconstruída. Reinspecte após a correção e divulgue qualquer discrepância material restante ou verificação indisponível. Retorne o visual selecionado com uma breve nota quando ele adicionar contexto.