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 estrutura existente do projeto para [PROJECT] e [AUDIENCE]. A tarefa é: Portfólio de Estúdio Criativo.
Conteúdo e estrutura obrigatórios
Apresente três projetos com disciplina, função, ano e links para os estudos de caso; use tipografia expressiva e uma grade de imagens assimétrica.
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: marfim quente, tipografia em tom de carvão e um único destaque verde-ácido discreto; espaçamento generoso e uma grade assimétrica. 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.
Conteúdo do projeto
Para cada um dos três projetos, inclua o título, uma descrição de uma frase, a disciplina, o ano, a função do estúdio, os créditos dos colaboradores, a imagem principal e o destino do estudo de caso. Comece pelo projeto mais forte; use os outros dois para demonstrar variedade. Termine com o canal de contato fornecido. Não invente narrativas de estudos de caso para destinos ausentes.
Layout e comportamento
Use a assimetria na escala e no posicionamento das imagens, com alinhamento consistente das legendas. Mantenha os nomes e créditos dos projetos fora das imagens. Preserve as proporções fornecidas das imagens, salvo se um corte for aprovado. Em dispositivos móveis, empilhe a introdução, o projeto principal, os projetos complementares e o contato, nessa ordem.
Verificação de aceitação específica da tarefa
- Teste um título longo, uma imagem em formato retrato e vários colaboradores.
- Garanta que todos os destinos dos projetos sejam acessíveis pelo teclado e mantenha todos os créditos visíveis sem passar o cursor.
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 o portfólio de estúdio criativo. Antes de criar, 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 três projetos com disciplina, função, ano e links para estudos de caso; use tipografia expressiva e uma grade assimétrica de imagens. Ao converter a imagem em elementos editáveis, siga estas orientações específicas de layout: dê destaque principal a um projeto e use os outros dois para demonstrar variedade. A assimetria deve vir da escala e do posicionamento das imagens, enquanto as legendas compartilham alinhamento e tamanho de fonte consistentes. Mantenha o nome, a disciplina e os créditos do projeto fora da imagem para que continuem legíveis sobre fotografias claras e escuras. Em uma tela estreita, retorne a uma sequência vertical intencional: introdução, projeto principal, projetos complementares e, por fim, contato. Preserve as proporções originais das imagens, salvo se um corte tiver sido aprovado.
Direção visual do briefing de exemplo
tela em marfim quente, tipografia suíça sem serifa em carvão e tamanho extragrande, pequenos detalhes em verde-ácido, amplo espaço negativo, grade assimétrica de projetos com fotografias arquitetônicas e esculturais e um painel discreto em azul-cobalto. Texto principal exato: 'Good ideas. Carefully made.'. Navegação: 'Work', 'About', 'Contact'. Legendas dos projetos: 'Objects / 2026', 'Spaces / 2026', 'Identity / 2026'. Direção de arte editorial elegante e profissional.
Especificação de interação
A referência é um conceito estático: o comportamento abaixo é um requisito de implementação, não uma prova de que a imagem já funciona. Copie o prompt personalizado para o projeto no qual deseja criar o portfólio. Solicite primeiro a página inicial; as páginas de estudos de caso devem usar o conteúdo fornecido para cada uma, em vez de narrativas de projeto inventadas. Garanta que todos os destinos dos projetos sejam acessíveis pelo teclado e mantenha todos os créditos visíveis sem passar o cursor. Para cada controle visível, especifique o acionador, o estado afetado e o feedback; implemente alterações locais com estado consistente entre visualizações relacionadas. Faça com que buscas e filtros apresentem resultados reais, que controles de seleção tenham um estado ativo explícito e que ações de salvar exibam feedback visível de processamento, sucesso ou falha, quando pertinente. Não adicione fluxos de trabalho sem relação com a tarefa. Use links adequados para navegação, botões para ações e nomes acessíveis para controles com ícones. Não dê a entender que uma operação de backend foi concluída 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 portfólio de estúdio criativo
Use este prompt de design para portfólio de estúdio criativo para apresentar três projetos com disciplina, função, ano e links para estudos de caso; use tipografia expressiva e uma grade assimétrica de imagens.
Recortes de detalhes do mesmo conceito gerado por IA; não são capturas de tela de um site funcional.
Descreva a hierarquia antes do estilo
“Good ideas. Carefully made.” ocupa a maior parte do lado esquerdo da introdução. A descrição do estúdio aparece em um bloco bem menor à direita; Work, About e Contact permanecem no topo. O fundo marfim e a tipografia em carvão reforçam essa hierarquia, enquanto o pequeno detalhe verde cria um ponto de atenção.
“Editorial” por si só deixa a composição aberta à interpretação. Indique o elemento dominante, onde o texto complementar deve ficar e quais detalhes devem permanecer discretos. Especifique seu título real separadamente: as palavras do exemplo são fictícias, e um título mais longo exigirá quebras de linha diferentes. Dê destaque principal a um projeto e use os outros dois para demonstrar variedade. A assimetria deve vir da escala e do posicionamento das imagens, enquanto as legendas compartilham alinhamento e tamanho de fonte consistentes. Mantenha o nome, a disciplina e os créditos do projeto fora da imagem para que continuem legíveis sobre fotografias claras e escuras. Em uma tela estreita, retorne a uma sequência vertical intencional: introdução, projeto principal, projetos complementares e, por fim, contato. Preserve as proporções originais das imagens, salvo se um corte tiver sido aprovado.
Do prompt
tela em marfim quente, tipografia suíça sem serifa em carvão e tamanho extragrande, pequenos detalhes em verde-ácido, amplo espaço negativo
Personalize
Use [STUDIO_NAME] e [APPROVED_HEADLINE]. Faça do título o elemento dominante à esquerda; posicione uma breve apresentação do estúdio à direita. Mantenha Work, About e Contact compactos acima deles. Use marfim quente e carvão com um único destaque discreto de [BRAND_RULES]. Permita que o título quebre linhas naturalmente, em vez de reduzi-lo para caber.
Transforme a grade de trabalhos em um contrato de conteúdo
As três imagens criam contraste por meio de seus temas e cores: um objeto escultural claro, um interior iluminado pelo sol e um painel de identidade em azul-cobalto. Suas legendas compartilham uma linha de base abaixo das imagens. A fileira visível se aproxima de três colunas iguais; ela não mostra um projeto principal significativamente ampliado, embora o prompt solicite uma hierarquia assimétrica.
Esta frase define o que o resultado deve conter, em vez de apenas esperar que uma galeria visualmente convincente inclua essas informações. A pequena imagem conceitual não mostra com clareza todas as funções ou todos os créditos obrigatórios dos colaboradores. Mantenha esses campos na implementação e verifique-os usando os registros reais dos seus projetos. Resolva também a diferença entre a referência e o briefing escrito: escolha uma fileira de três colunas iguais para maior fidelidade visual ou amplie deliberadamente um dos projetos.
Do prompt
Para cada um dos três projetos, inclua o título, um resumo de uma frase, a disciplina, o ano, a função do estúdio, os créditos dos colaboradores, a imagem principal e o destino do estudo de caso.
Personalize
Use exatamente estes três registros de projetos aprovados: [PROJECT_RECORDS]. Em telas de desktop, apresente as imagens principais em três colunas iguais para corresponder à referência. Mantenha título, disciplina, ano, função do estúdio e créditos dos colaboradores como texto editável abaixo de cada imagem. Atribua a cada projeto a URL fornecida para seu estudo de caso. Preserve as proporções de cada imagem; não invente créditos ou destinos ausentes.
Descreva o comportamento que a imagem não pode mostrar
O rótulo “View case study” sugere navegação, mas uma imagem estática não pode determinar para onde ele leva, se o foco do teclado fica visível ou o que acontece em um celular. Esses pontos precisam ser definidos por escrito. Evite adicionar busca, filtros ou controles de salvamento apenas porque um prompt genérico os menciona; eles não fazem parte da tarefa visível deste portfólio.
Descreva o acionador e o resultado: clicar no título do projeto ou em seu link de estudo de caso abre o mesmo destino aprovado. Depois, defina a ordem de leitura em telas estreitas. Não peça ao modelo que deduza um layout para dispositivos móveis com base nesta imagem de desktop nem oculte informações essenciais do projeto atrás do estado de passar o cursor. Leia a página como um cliente em potencial: é possível identificar a especialidade do estúdio, saber quem realizou o trabalho e abrir um estudo de caso sem passar o cursor? Teste um título de projeto longo, uma imagem em formato retrato e um projeto com vários colaboradores. Em seguida, navegue pelo teclado e em uma tela estreita. Se o primeiro resultado parecer uma página genérica de agência, revise a hierarquia dos projetos e as legendas antes de adicionar efeitos ou mais seções.
Do prompt
Garanta que todos os destinos dos projetos sejam acessíveis pelo teclado e mantenha todos os créditos visíveis sem exigir o uso do cursor.
Personalize
Faça com que o título de cada projeto e o link “View case study” apontem para a mesma URL aprovada. Forneça um estado de foco do teclado visível e mantenha os créditos sempre visíveis. Em telas estreitas, empilhe a introdução, os três projetos e o contato, nessa ordem. Permita a quebra de linha em nomes longos. Se faltar uma URL de estudo de caso, exiba as informações do projeto sem um link inativo e informe a ausência desse dado.
Monte o briefing e depois revise uma decisão de cada vez
Comece pela tarefa e pelo público, adicione os registros reais do projeto, descreva a hierarquia visual e depois especifique a navegação e o comportamento em dispositivos móveis. Anexe a imagem de referência com o texto. As três seções “Personalize” acima substituem as partes correspondentes do prompt completo; não são instruções extras que devem ser acrescentadas sem critério. Em particular, substitua a instrução de grade assimétrica se optar pela interpretação com colunas de mesma largura.
- Compare o primeiro resultado com a referência: a ênfase do título, a ordem das imagens, o alinhamento das legendas e a cor de fundo devem ser intencionais.
- Substitua o conteúdo de exemplo pelo título mais longo de um projeto real e pelos créditos completos. Verifique se nada desaparece ou se sobrepõe em uma tela estreita.
- Abra o destino de cada projeto e navegue usando o teclado. Uma captura de tela parecida não comprova que essas interações funcionam.
Prompt de acompanhamento
Use isto após o primeiro resultado. Assim, a revisão se concentra na parte mais importante desta tarefa.
Refine apenas a grade de trabalhos do portfólio. Dê ao projeto principal uma primeira posição de destaque e, em seguida, mostre os dois projetos de apoio. Mantenha o título, a disciplina, o ano e os créditos dos colaboradores de cada projeto visíveis sem exigir o uso do cursor. Preserve as proporções das imagens e torne todos os links para estudos de caso acessíveis pelo teclado. Em dispositivos móveis, use a mesma ordem de leitura em uma única coluna. Mantenha inalterados o cabeçalho, a tipografia e a seção de contato aprovados.
