Usar o prompt
Adicione seu briefing
Adicione seu contexto abaixo. Ele será incluído no prompt quando você copiar ou baixar.
Crie um site HTML responsivo usando a stack existente do projeto para [PROJECT] e [AUDIENCE]. A tarefa é: página de produto sustentável.
Conteúdo e estrutura obrigatórios
Apresente informações sobre materiais, origem, cuidados, reparo e compra em um layout bem planejado.
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 for fornecido, comece com esta direção: tipografia preta marcante, painéis em amarelo quente e composições geométricas bem definidas; contraste controlado. Mantenha consistentes as funções da tipografia, do espaçamento e 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
Reúna a composição dos materiais, a origem, os cuidados, as opções de reparo e as evidências que sustentem qualquer declaração ambiental. Registre o escopo de cada alegação, como a embalagem ou um material específico.
Layout e comportamento
Explique o produto e seus cuidados por meio de detalhes concretos. Posicione as evidências comprobatórias perto das declarações de sustentabilidade e facilite a localização das orientações de reparo ou manutenção.
Verificação de aceitação específica da tarefa
- Fundamente as alegações ambientais com as evidências fornecidas e um escopo preciso.
- Substitua alegações ecológicas vagas por descrições fundamentadas em fontes.
- Verifique se uma declaração sobre um componente não é apresentada como uma alegação sobre todo o produto ou seu ciclo de vida completo.
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.
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 a página de produto sustentável. Antes de desenvolver, 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: apresente informações sobre materiais, origem, cuidados, reparo e compra em um layout bem planejado. Ao traduzir a imagem em elementos editáveis, use as seguintes orientações de layout específicas da tarefa: explique o produto e seus cuidados por meio de detalhes concretos. Posicione as evidências comprobatórias perto das declarações de sustentabilidade e facilite a localização das orientações de reparo ou manutenção.
Direção visual do briefing de exemplo
Tipografia preta marcante, painéis em amarelo quente e composições geométricas bem definidas; contraste controlado.
Especificação de interação
A referência é um conceito estático: o comportamento abaixo é um requisito a ser implementado, não uma prova de que a imagem já funciona. Copie o prompt personalizado para seu projeto de trabalho. Comece pela tarefa principal: apresentar informações sobre materiais, origem, cuidados, reparo e compra em um layout bem planejado. Fundamente as alegações ambientais com as evidências fornecidas e um escopo preciso. Para cada controle visível, especifique seu acionador, o estado afetado e o feedback; implemente alterações locais mantendo o estado consistente entre as visualizações relacionadas. Faça com que buscas e filtros retornem resultados reais, que os controles de seleção tenham um estado ativo explícito e que as ações de salvar exibam feedback visível de processamento/sucesso/falha quando pertinente. Não adicione fluxos de trabalho não relacionados. Use links adequados para navegação, botões para ações e nomes acessíveis para controles de ícones. Não dê a entender que uma operação no backend foi concluída com sucesso quando apenas uma demonstração local foi alterada.
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 para página de produto sustentável
Use este prompt de design de página de produto sustentável para apresentar informações sobre materiais, origem, cuidados, reparo e compra em um layout bem planejado.
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.
Explique a alegação sobre o material e seu escopo
Uma página de produto sustentável precisa de informações concretas sobre materiais, origem, cuidados e reparo.
Uma paleta verde e uma linguagem ambiental genérica não comprovam um benefício mensurável. Explique o produto e seus cuidados com detalhes concretos. Posicione as evidências de apoio próximas às declarações de sustentabilidade e facilite a localização das orientações de reparo ou manutenção.
Do prompt
Explique o produto e seus cuidados com detalhes concretos.
Personalize
Use os detalhes de [MATERIAL_RECORDS], [ORIGIN] e [CARE_REPAIR] ao lado do produto. Delimite cada declaração ambiental com o escopo e a fonte fornecidos, em vez de adicionar alegações genéricas de superioridade.
Prepare o conteúdo da página de produto sustentável
A página do produto identifica os materiais e a origem em blocos separados; exija comprovação para cada alegação de sustentabilidade.
Reúna a composição dos materiais, a origem, os cuidados, as opções de reparo e as evidências que sustentem qualquer declaração ambiental. Registre o escopo de cada alegação, como a embalagem ou um material específico.
Do prompt
Apresente informações sobre materiais, origem, cuidados, reparo e compra em um layout bem planejado.
Personalize
Para [PROJECT], use [APPROVED_CONTENT] como fonte desta página de produto sustentável. Reúna a composição dos materiais, a origem, os cuidados, as opções de reparo e as evidências de apoio para qualquer declaração ambiental. Registre o escopo de cada alegação, como a embalagem ou um material específico. Identifique as informações ausentes antes de substituí-las por conteúdo demonstrativo.
Analise uma declaração ambiental
As instruções de cuidados e as opções de reparo favorecem a longevidade do produto; forneça procedimentos reais e as peças de reposição disponíveis.
Verifique exatamente qual material, etapa ou comparação ela abrange. Não inclua na página uma alegação sem comprovação, mesmo que pareça coerente com a direção visual. Substitua alegações ambientais vagas por descrições baseadas em fontes. Verifique se uma declaração sobre um componente não está sendo apresentada como uma alegação sobre todo o produto ou seu ciclo de vida completo.
Do prompt
Fundamente as alegações ambientais com as evidências fornecidas e um escopo preciso.
Personalize
Revise a página de produto sustentável de acordo com este requisito: sustente as alegações ambientais com as evidências fornecidas e um escopo preciso. Substitua alegações ambientais vagas por descrições baseadas em fontes. Verifique se uma declaração sobre um componente não está sendo apresentada como uma alegação sobre todo o produto ou seu ciclo de vida completo. Preserve o conteúdo aprovado e revise apenas as partes que não atendam a esta verificação.
Revise o resultado da sua página de produto sustentável
O texto, as rotas e a estrutura visual gerados precisam ser revisados. Não conecte formulários reais, pagamentos ou serviços externos sem implementar e testar esses fluxos.
- Substitua alegações ecológicas vagas por descrições fundamentadas em fontes. Verifique se uma declaração sobre um componente não é apresentada como uma alegação sobre todo o produto ou seu ciclo de vida completo.
Prompt de acompanhamento
Use isto após o primeiro resultado. Assim, a revisão se concentra na parte mais importante desta tarefa.
Aprimore a página atual do produto sustentável. Substitua alegações ecológicas vagas por descrições fundamentadas em fontes. Verifique se uma declaração sobre um componente não é apresentada como uma alegação sobre todo o produto ou seu ciclo de vida completo. Preserve o conteúdo aprovado e a direção visual; altere apenas as partes necessárias para resolver esses problemas.
