Usar o prompt
Adicione seu briefing
Adicione seu contexto abaixo. Ele será incluído no prompt quando você copiar ou baixar.
Crie um estudo de interação em HTML/CSS/JavaScript com estados explícitos de início, atividade e conclusão, além de uma alternativa legível com prefers-reduced-motion para [PROJECT] e [AUDIENCE]. A tarefa é: plano de fundo ambiente da marca.
Conteúdo e estrutura obrigatórios
Crie um plano de fundo abstrato com movimento lento usando as formas fornecidas da marca e mantendo uma área de texto visualmente tranquila.
Use [APPROVED_CONTENT] como fonte de nomes, datas, números, alegações e destinos. Liste as informações ausentes antes de substituir qualquer conteúdo. Se for necessária uma demonstração, identifique o conteúdo como fictício. Não invente depoimentos de clientes, classificações, logotipos de parceiros ou recursos do produto.
Direção de design
Use [BRAND_RULES] e o sistema de design já selecionado no projeto. Se nenhum sistema tiver sido fornecido, comece com esta direção: branco, grafite e destaques em verde vibrante; estados inicial, de transição e final claramente identificados. Mantenha consistentes a tipografia, o espaçamento e as funções das cores. Priorize a tarefa em vez de elementos decorativos e evite uma coleção genérica de cartões sem relação entre si.
Preparação do conteúdo
Forneça as formas e cores da marca e a área de texto que deve permanecer visualmente tranquila. Defina se a animação é decorativa e como ela deve parar.
Layout e comportamento
Mantenha o movimento lento e com baixo contraste visual, além de uma área de leitura estável. Evite posicionar uma borda em movimento ou uma forma brilhante atrás de textos essenciais.
Verificação de aceitação específica da tarefa
- Mantenha o movimento não essencial, leve e desativado quando a preferência por movimento reduzido estiver ativa.
- Verifique a leitura do primeiro plano em diferentes momentos e ative o movimento reduzido.
- A página deve comunicar a mesma mensagem com um plano de fundo estático, sem processamento excessivo nem repetição que cause distração.
Implementação e revisão
Mantenha o texto editável. Use estrutura semântica, controles descritivos, foco de teclado visível e estados vazios/de erro adequados. Verifique layouts estreitos e amplos. Respeite as preferências de movimento reduzido. Preserve o framework e as dependências existentes do projeto; não substitua a stack silenciosamente. Entregue os arquivos editáveis e explique qualquer comportamento incompleto ou informação de entrada não compatível. Revise esta tarefa específica antes de propor recursos adicionais.
Disponibilize todas as informações e ações sem depender de animação. Ofereça pausa ou opção de dispensar quando pertinente. Documente os acionadores e as transições; não substitua o progresso real por um cronômetro decorativo.
Anexo de referência e objetivo da reconstrução
Anexe o arquivo reference.webp do pacote de download deste prompt ao lado deste prompt no OpenDesign. Crie um resultado editável com composição e hierarquia semelhantes; não incorpore toda a imagem de referência como interface final. Preserve o conteúdo aprovado do projeto e as regras da marca caso entrem em conflito com rótulos fictícios de exemplo. Se a imagem estiver ausente ou ilegível, solicite-a em vez de alegar fidelidade visual.
Composição e conteúdo da referência
Use o arquivo reference.webp anexado como referência visual para o plano de fundo ambiente da marca. Antes de começar a criação, identifique as principais regiões de cima para baixo, suas larguras e alturas relativas, alinhamento, espaçamento, hierarquia tipográfica, cores das superfícies, bordas, imagens e componentes repetidos. Preserve essas relações, em vez de substituí-las por um modelo genérico. Conteúdo obrigatório da tarefa: crie um plano de fundo abstrato com movimento lento usando as formas fornecidas da marca e mantendo uma área de texto visualmente tranquila. Use as seguintes orientações de layout específicas da tarefa ao converter a imagem em elementos editáveis: mantenha o movimento lento e com baixo contraste visual, além de uma área de leitura estável. Evite posicionar uma borda em movimento ou uma forma brilhante atrás de textos essenciais.
Direção visual do briefing de exemplo
branco, grafite e destaques em verde vibrante; estados inicial, de transição e final claramente identificados.
Resultado e editabilidade
Recrie o design finalizado como camadas editáveis de texto, formas e imagens. A referência é uma composição, não uma interface de edição; não adicione navegação, formulários nem widgets de painel ausentes nela. Mantenha o movimento lento e com baixo contraste visual, além de uma área de leitura estável. Evite posicionar uma borda em movimento ou uma forma brilhante atrás de textos essenciais. Confirme as dimensões pretendidas e preserve a hierarquia do texto ao adaptar a arte. Mantenha o movimento não essencial, leve e desativado quando a preferência por movimento reduzido estiver ativa.
Comparação visual e entrega
- Compare o resultado com a imagem anexada nas mesmas proporções. Revise o posicionamento das principais regiões, os tamanhos relativos das imagens, as quebras de linha, o espaçamento, a hierarquia tipográfica, o contraste, os estados ativos e a densidade do conteúdo antes de aperfeiçoar os detalhes decorativos.
- Em seguida, teste o layout estreito sem comprimir o texto da versão para desktop em rótulos minúsculos.
- Mantenha logotipos, fotos e ícones como arquivos separados e todos os rótulos relevantes editáveis. Liste fontes/arquivos indisponíveis e qualquer diferença intencional. Entregue os arquivos funcionais com uma descrição concisa do comportamento implementado e das integrações pendentes; não prometa um resultado idêntico pixel a pixel apenas com base no prompt.
Baixar prompt + imagem
Inclui o prompt completo e a imagem de referência em tamanho real. Anexe ambos no OpenDesign para orientar o layout.
Como escrever um prompt de design de plano de fundo ambiente da marca
Use este prompt de design de plano de fundo ambiente da marca para criar um plano de fundo abstrato com movimento lento usando as formas fornecidas da marca e mantendo uma área de texto visualmente tranquila.
A referência é um conceito gerado por IA. As instruções abaixo descrevem o que criar e testar; a imagem não demonstra um comportamento funcional.
Proteja a área de texto em um plano de fundo em movimento
Um plano de fundo ambiente da marca dá suporte ao conteúdo em primeiro plano.
Se as formas atravessarem o título ou competirem com um botão, o movimento prejudicará a comunicação que deveria apoiar. Mantenha o movimento lento e com baixo contraste visual, além de uma área de leitura estável. Evite posicionar uma borda em movimento ou uma forma brilhante atrás de textos essenciais.
Do prompt
Mantenha o movimento lento e com baixo contraste visual, além de uma área de leitura estável.
Personalize
Mantenha [TEXT_SAFE_AREA] visualmente tranquila durante todo o loop. Mova [APPROVED_SHAPES] apenas pelo espaço restante, com [LOOP_DURATION] e uma composição estática de repouso especificados separadamente.
Prepare o conteúdo do plano de fundo ambiente da marca
O painel inicial mantém o título entre grandes formas periféricas. Defina a posição estável do texto e as formas que podem se mover antes de adicionar animação.
Forneça as formas e cores da marca e a área de texto que deve permanecer visualmente tranquila. Defina se a animação é decorativa e como ela deve parar.
Do prompt
Crie um plano de fundo abstrato com movimento lento usando as formas fornecidas da marca e mantendo uma área de texto visualmente tranquila.
Personalize
Para [PROJECT], use [APPROVED_CONTENT] como fonte para este plano de fundo ambiente da marca. Forneça as formas e cores da marca e a área de texto que deve permanecer visualmente tranquila. Defina se a animação é decorativa e como ela deve parar. Identifique os dados ausentes antes de substituí-los por conteúdo de demonstração.
Verifique todo o loop
O painel final retorna a uma composição legível, com as formas afastadas das palavras principais. Implemente um estado discreto de movimento reduzido; três imagens estáticas não conseguem demonstrar um ciclo nem sua duração.
Inspecione tanto o quadro mais carregado quanto o primeiro. O movimento reduzido deve revelar a composição estática sem remover a mensagem em primeiro plano. Verifique a leitura do primeiro plano em diferentes momentos e ative o movimento reduzido. A página deve comunicar a mesma mensagem com um plano de fundo estático, sem processamento excessivo nem repetição que cause distração.
Do prompt
Mantenha o movimento não essencial, leve e desativado quando a preferência por movimento reduzido estiver ativa.
Personalize
Revise o plano de fundo ambiente da marca segundo este requisito: mantenha o movimento não essencial, leve e desativado quando a preferência por movimento reduzido estiver ativa. Verifique a leitura do primeiro plano em diferentes momentos e ative o movimento reduzido. A página deve comunicar a mesma mensagem com um plano de fundo estático, sem processamento excessivo nem repetição que cause distração. Preserve o conteúdo aprovado e revise apenas as partes que não atenderem a esta verificação.
Revise o resultado do seu plano de fundo ambiente da marca
A prévia é um storyboard estático. Ela não demonstra animação funcional, desempenho medido nem acessibilidade. Teste a interação implementada e a experiência com movimento reduzido.
- Verifique a leitura do primeiro plano em diferentes momentos e ative o movimento reduzido. A página deve comunicar a mesma mensagem com um plano de fundo estático, sem processamento excessivo nem repetição que cause distração.
Prompt de acompanhamento
Use isto após o primeiro resultado. Assim, a revisão se concentra na parte mais importante desta tarefa.
Aprimore o plano de fundo ambiente atual da marca. Verifique a leitura do primeiro plano em diferentes momentos e ative o movimento reduzido. A página deve comunicar a mesma mensagem com um plano de fundo estático, sem processamento excessivo nem repetição que cause distração. Preserve o conteúdo aprovado e a direção visual; altere apenas as partes necessárias para resolver esses problemas.
