Usar o prompt
Adicione seu briefing
Adicione seu contexto abaixo. Ele será incluído no prompt quando você copiar ou baixar.
Crie uma composição editável em HTML/CSS, com texto selecionável e uma folha de estilos para impressão; trate qualquer ilustração rasterizada como um recurso local separado para [PROJECT] e [AUDIENCE]. A tarefa é: Sistema de cartões de visita.
Conteúdo e estrutura obrigatórios
Crie layouts de frente e verso usando o nome real, o cargo, os dados de contato e os tokens da marca.
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: creme, carvão e verde-oliva; hierarquia editorial assimétrica com bastante espaço negativo. Mantenha a consistência da tipografia, do espaçamento e das 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 o nome real, o cargo, os dados de contato, o logotipo e as dimensões de impressão. Decida quais informações ficarão na frente e no verso antes de escolher um tratamento visual.
Layout e comportamento
Crie uma hierarquia que facilite encontrar a pessoa e o canal de contato preferencial. Preserve a área de respiro do logotipo e acomode nomes longos sem reduzir todo o texto de maneira uniforme.
Verificação de aceitação específica da tarefa
- Mantenha os dados de contato legíveis e não invente um código escaneável.
- Inspecione no tamanho real do cartão e confira cada caractere dos dados de contato.
- Não invente um código escaneável; apenas reserve espaço se forem fornecidos um destino verificado e um código gerado.
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.
Mantenha o texto exato e os créditos obrigatórios como texto ativo. Pergunte quais são as dimensões pretendidas quando elas não forem fornecidas. Não invente um QR code funcional, código de barras, assinatura ou selo oficial.
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 Sistema de cartões de visita. 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 template genérico. Conteúdo obrigatório da tarefa: crie layouts de frente e verso usando o nome real, o cargo, os dados de contato e os tokens da marca. Ao converter a imagem em elementos editáveis, siga estas orientações de layout específicas da tarefa: crie uma hierarquia que facilite encontrar a pessoa e o canal de contato preferencial. Preserve a área de respiro do logotipo e acomode nomes longos sem reduzir todo o texto de maneira uniforme.
Direção visual do briefing de exemplo
creme, carvão e verde-oliva; hierarquia editorial assimétrica com bastante espaço negativo.
Resultado e editabilidade
Recrie a arte finalizada 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 ou widgets de dashboard que não estejam presentes nela. Crie uma hierarquia que facilite encontrar a pessoa e o canal de contato preferencial. Preserve a área de respiro do logotipo e acomode nomes longos sem reduzir todo o texto de maneira uniforme. Confirme as dimensões desejadas e preserve a hierarquia do texto ao adaptar a arte. Mantenha os dados de contato legíveis e não invente um código escaneável.
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 sistema de cartões de visita
Use este prompt de design de sistema de cartões de visita para criar layouts de frente e verso usando o nome real, o cargo, os dados de contato e os tokens da marca.
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.
Dê aos dados de contato uma ordem de leitura estável
Um cartão de visita oferece pouquíssimo espaço para ambiguidades.
O destinatário precisa identificar a pessoa, seu cargo e um canal de contato utilizável sem precisar decifrar uma composição decorativa. Crie uma hierarquia que facilite encontrar a pessoa e o canal de contato preferencial. Preserve a área de respiro do logotipo e acomode nomes longos sem reduzir todo o texto de maneira uniforme.
Do prompt
Crie uma hierarquia que facilite encontrar a pessoa e o canal de contato preferencial.
Personalize
Coloque [NAME] e [ROLE] sobre uma linha de base consistente e agrupe [EMAIL], [PHONE] e [WEBSITE]. Especifique em qual lado ficará a marca e como as informações de contato extensas devem quebrar linha.
Prepare o conteúdo do sistema de cartões de visita
O cartão claro combina o nome do estúdio, o nome da pessoa, o cargo e os meios de contato. Use dados de contato aprovados e dimensione as menores linhas de texto de acordo com as dimensões de impressão pretendidas.
Forneça o nome real, o cargo, os dados de contato, o logotipo e as dimensões de impressão. Decida quais informações ficarão na frente e no verso antes de escolher um tratamento visual.
Do prompt
Crie layouts de frente e verso usando o nome real, o cargo, os dados de contato e os tokens da marca.
Personalize
Para [PROJECT], use [APPROVED_CONTENT] como fonte deste sistema de cartões de visita. Forneça o nome real, o cargo, os dados de contato, o logotipo e as dimensões de impressão. Decida quais informações ficarão na frente e no verso antes de escolher um tratamento visual. Identifique as informações ausentes antes de substituí-las por conteúdo de demonstração.
Revise os dados de contato reais
O verso escuro usa uma breve declaração de três linhas, um pequeno símbolo e um arco. Verifique o contraste, as margens de segurança e a sangria de impressão, mantendo este lado distinto do lado de contato.
Use o nome real e o e-mail mais longos do conjunto. Imprima nas dimensões desejadas; uma prévia ampliada e legível não comprova que o texto de contato será legível. Inspecione no tamanho real do cartão e confira cada caractere dos dados de contato. Não invente um código escaneável; apenas reserve espaço se forem fornecidos um destino verificado e um código gerado.
Do prompt
Mantenha os dados de contato legíveis e não invente um código escaneável.
Personalize
Revise o sistema de cartões de visita de acordo com este requisito: mantenha os dados de contato legíveis e não invente um código escaneável. Inspecione no tamanho real do cartão e confira cada caractere dos dados de contato. Não invente um código escaneável; apenas reserve espaço se forem fornecidos um destino verificado e um código gerado. Preserve o conteúdo aprovado e revise apenas as partes que não atenderem a esta verificação.
Revise o resultado do seu sistema de cartões de visita
Um conceito visual não é um arquivo pronto para impressão nem aprovado por plataformas. Verifique o texto exato, as dimensões, o tratamento de cores, as fontes, os direitos dos recursos e o posicionamento final.
- Inspecione no tamanho real do cartão e confira cada caractere dos dados de contato. Não invente um código escaneável; apenas reserve espaço se forem fornecidos um destino verificado e um código gerado.
Prompt de acompanhamento
Use isto após o primeiro resultado. Assim, a revisão se concentra na parte mais importante desta tarefa.
Refine o sistema atual de cartões de visita. Inspecione-o no tamanho real do cartão e confira cada caractere dos dados de contato. Não invente um código escaneável; apenas reserve espaço se forem fornecidos um destino verificado e um código gerado. Preserve o conteúdo aprovado e a direção visual; altere apenas as partes necessárias para resolver esses problemas.
