Engenharia de instruções para designers: de briefings vagos a resultados de IA utilizáveis.

Se o resultado da sua IA parecer uma foto de banco de imagens, seu pedido soará como um desejo.

Esse é o grande problema de como a maioria dos designers aprendeu a usar ferramentas de IA. "Crie uma imagem principal para uma startup de fintech" não é um pedido. É uma ideia geral. Um pedido é o que você diria se estivesse dando instruções a um ilustrador freelancer que cobra 400 dólares por hora e faz perguntas incisivas.

Designers já sabem como fazer isso. Você escreveu briefings na faculdade. Você escreve briefings no trabalho toda semana. Você sabe como clareza, referências e restrições se manifestam quando escritas. Pedidos para IA exigem a mesma habilidade, com um público diferente.

Um pedido é um briefing de design em prosa

Pare de pensar em prompts como palavras mágicas. Pense nelas como o primeiro parágrafo de um briefing criativo, mais as especificações finais no final.

Um bom briefing informa ao criador quem ele é, para que serve o produto, quais são as regras, quais referências usar e qual será a aparência do resultado final. Se você ignorar qualquer um desses pontos, o resultado será um trabalho tecnicamente próximo do ideal, mas emocionalmente inadequado. Peça a um profissional júnior para "criar um logotipo para uma cafeteria" e você receberá doze grãos de café. Peça a ele para "criar um logotipo para uma cafeteria de terceira onda voltada para freelancers, usando uma marca nominativa, uma fonte geométrica sem serifa, sem pictogramas, inspirado na sobriedade da Blue Bottle" e você chegará a algum lugar.

Os prompts funcionam da mesma forma. O instinto de ser vago porque o modelo é inteligente é o erro mais caro no trabalho de design assistido por IA. Ser específico não é pedantismo. É a essência do jogo.

Um bom prompt se parece com um briefing de design. Um prompt ruim se parece com um desejo.

As cinco partes que todo prompt utilizável possui

Todo prompt que produz um design apresentável tem cinco partes. Você pode memorizá-las, colocá-las em um modelo ou imprimi-las em um post-it. As partes:

1. Papel. Quem a IA está fingindo ser? ("Você é um ilustrador editorial sênior com dez anos de experiência na The New Yorker.")
2. Contexto. Para que serve e para quem se destina? ("Esta imagem é a principal de uma postagem de blog sobre designers aprendendo a trabalhar com ferramentas de IA. O público-alvo são designers atuantes, usuários pioneiros, céticos, mas curiosos.")
3. Restrições. Quais são as regras? ("Editorial, não corporativo. Sem computadores visíveis. Sem fotos de banco de imagens. Cor plana, silhueta forte, alto contraste, poucos detalhes.")
4. Referências. Qual deve ser a aparência ou a sensação que deve transmitir? ("Traços de Saul Steinberg combinados com a sobriedade dos pôsteres de turismo suíços da década de 1960. Paleta de cores da marca: fundo #080404, detalhes #ff6434.")
5. Especificações de saída. Quais são as especificações do produto final? ("Proporção 16:9, 1200x630, PNG, sem texto dentro da imagem.")

Ignore a função e você obterá um resultado mediano. Ignore o contexto e você obterá um resultado sem público-alvo. Ignore as restrições e você obterá o que o modelo adivinha que você deseja, que geralmente é uma fotografia de banco de imagens. Ignore as referências e o resultado tenderá a seguir os dados de treinamento dominantes. Ignore a especificação de saída e você obterá dimensões incorretas.

| Parte do prompt | O que faz | O que acontece se você ignorá-la |

|-------------|--------------|-----------------------------| | Função | Define o gosto e o nível de especialização | Resultado genérico |

| Contexto | Indica ao modelo para que serve o trabalho | Resolve o problema errado |

| Restrições | Define o que evitar | Obtém os clichês que você detesta |

| Referências | Ancora a direção visual ou tonal | Tende a seguir as médias de treinamento |

| Especificação de saída | Controla o formato e o produto final | Dimensões incorretas, formato incorreto |

Exemplo prático: geração de imagem para um visual principal

A versão vaga que todo designer já digitou pelo menos uma vez:

"Imagem principal para uma postagem de blog sobre engenharia de prompts para designers."

O resultado: um designer em frente a um laptop, ou um cérebro brilhante, ou um robô segurando um lápis, ou alguma combinação dos três. Imagem genérica. Sem graça.

A versão estruturada:

Você é um ilustrador editorial que trabalhou para a The New Yorker e a Wired por dez anos. Crie uma imagem principal para uma postagem de blog intitulada "Engenharia de Prompts para Designers". O público-alvo são designers que trabalham na área, são céticos em relação ao hype da IA, mas estão prontos para usar as ferramentas seriamente.

Composição: um briefing em papel do designer à esquerda do quadro, esboçado à mão com anotações, que se dissolve ou se resolve em um texto limpo e digitado do prompt à direita. Implica a tradução entre o briefing e o prompt estruturado.

Estilo: editorial, cores planas, silhueta marcante, alto contraste, poucos detalhes. Textura de papel aceitável. Sem computadores. Sem robôs. Sem cérebros. Sem orbes brilhantes.

Referências: Arte linear de Saul Steinberg para o briefing. Pôster turístico suíço com contenção para o texto de referência. Paleta da marca: fundo #080404, destaque #ff6434, neutro #d0d3d8.

Saída: 1200x630, sem texto dentro da imagem.

O que você recebe: uma imagem principal que você pode realmente publicar, não regenerar quatro vezes.

A diferença não está no talento. Está na estrutura.

Exemplo prático: Protótipo de UI na versão 0 ou Lovable

Vago:

"Crie uma landing page para uma agência de design."

O que você recebe: um template com estilo Tailwind, com gradiente padrão, três cartões de recursos, uma imagem principal padrão e um texto que parece o de qualquer outra agência na internet.

Estruturado:

Criar uma landing page para a Brainy, um estúdio de design conhecido por ter mais de 2 milhões de seguidores nas redes Instagram e Threads. Público-alvo: fundadores de empresas SaaS em rodadas de investimento Série A a Série C que precisam de serviços de branding, web e design. Eles já viram todos os sites de agências. Abandonam a página se o site parecer genérico.

Layout: seção principal de coluna única com um título em negrito de uma linha e uma única chamada para ação (CTA), seguida por uma faixa horizontal com logotipos de clientes, seguida por uma explicação dos serviços em três partes (marca, web e conteúdo) usando um padrão de grade Bento, seguida por uma seção de depoimentos com três citações e, por fim, um rodapé simples com informações de contato.

Restrições: sem gradientes, sem imagens de banco de imagens, sem ilustrações genéricas na seção principal. Somente modo escuro, fundo #080404. Cor de destaque #ff6434. Tipografia: uma única fonte sem serifa para todo o texto, negrito para títulos e leve para o corpo do texto. Tudo usa espaçamento de 4px.

Referências: Restrição de espaçamento da ⟦MARCA1⟧. Peso tipográfico da ⟦MARCA0⟧. Padrão de seção em grade bento da ⟦MARCA2⟧. Não é um clone de nenhuma delas.

Saída: componentes responsivos, com foco em dispositivos móveis e Shadcn.

Mesma ferramenta. Saída completamente diferente.

Exemplo prático: agente de codificação criando um componente

Vago:

"Crie um componente Botão para mim."

O que você obtém: um botão. Uma única variante. Sem acessibilidade. Sem estado de foco. Cores que você não solicitou.

Estruturado:

Você é um engenheiro sênior de sistemas de design. Crie um componente Botão em nosso sistema de design.

Contexto: este botão substitui nossos antigos estilos de botões ad hoc que estão espalhados por doze páginas de marketing. Ele precisa suportar variantes primárias, secundárias e fantasmas, três tamanhos (pequeno, médio, grande) e estados de carregamento, desabilitado e em foco.

Restrições: usar nossos tokens existentes de tokens.css (não introduzir novas cores). O anel de foco deve ter um deslocamento de 2px --color-accent. Nunca usar px para espaçamento, sempre usar tokens --space. A tipografia é sempre --font-sans com --text-sm ou --text-base dependendo do tamanho. O estado de carregamento exibe um indicador de carregamento e desabilita os cliques.

Referências: Primitivas de UI do Radix para padrões de acessibilidade. Nosso componente Card existente em /components/Card.tsx para referência da estrutura de arquivos.

Saída: TypeScript, Tailwind, história do Storybook que testa todas as variantes e estados. Testes que abrangem o comportamento de desabilitado, carregando e em foco.

Dê isso a um agente de codificação e você terá um botão de verdade. Dê a ele "crie um botão" e você terá algo que precisará reescrever manualmente.

A biblioteca de restrições que todo designer deveria usar

Restrições são a arma secreta. Elas também são a parte que os designers menos usam. Copie esta biblioteca, cole as linhas relevantes em seus prompts e ajuste-as à sua marca.

| Domínio | Restrições a incluir |

|--------|------------------------| | Ilustração | Cor sólida, silhueta forte, alto contraste, poucos detalhes, sem texto na imagem, sem computadores/telefones/robôs/cérebros, a menos que explicitamente solicitado, editorial, não corporativo |

| Geração de estilo fotográfico | Sem aparência de foto de banco de imagens, sem iluminação artificial, sem renderizações 3D, a menos que solicitado, composição natural, imperfeições do mundo real são bem-vindas |

| Geração de UI | Use componentes existentes, sem novas cores fora dos tokens, priorize dispositivos móveis, acessibilidade necessária (estados de foco, taxas de contraste), sem gradientes, a menos que a marca exija |

| Tipografia | Uma fonte sem serifa para a interface do usuário, serifada apenas se a marca exigir, no máximo três pesos em uma composição, sem texto justificado, sem sequências de letras maiúsculas com mais de 4 palavras | | Cor | Use tokens em vez de hexadecimal, nunca texto branco sobre preto puro, nunca vermelho puro sobre verde puro, contraste mínimo de 4,5:1 para o corpo do texto | | Layout | Espaçamento de 4px ou 8px, nunca centralize o texto do corpo, nunca justifique totalmente, máximo de 75 caracteres por linha, ancorar imagens à esquerda, a menos que a composição exija o contrário |

| Código | ⟦MARCA7⟧ estrito, exportações nomeadas não padrão, nenhuma nova dependência sem permissão, cobertura de testes para cada novo componente |

Use estes como blocos prontos para colar. Você se sentirá bobo no começo. Depois, perceberá que o resultado ficou duas vezes melhor da noite para o dia.

Se você quiser mais detalhamentos de fluxo de trabalho de IA, navegue pelo restante do ⟦MARCA0⟧ Documentos. Se você quer uma biblioteca de prompts realmente personalizada para a marca da sua equipe, e não baseada em um histórico aleatório de ⟦MARCA8⟧, contratar ⟦MARCA0⟧.

Como iterar sem recomeçar do zero

O pior hábito na engenharia de prompts é deletar todo o prompt e reescrevê-lo quando a saída está incorreta. Nove em cada dez vezes, o prompt estava quase perfeito. Uma variável estava errada.

Iteie cirurgicamente. Altere uma coisa de cada vez.

1. Execute o prompt uma vez. Observe o que está errado.

2. Identifique qual das cinco partes está com problema. Se a saída for muito genérica, as referências são fracas. Se tiver os elementos errados, as restrições estão faltando um "não X". Se for direcionada ao público errado, o contexto é insuficiente.

3. Edite apenas essa parte. Não reescreva tudo.

4. Execute novamente. Compare com a primeira saída. Melhor, pior ou igual?

5. Repita. Geralmente, de três a cinco rodadas resolvem o problema.

Relacionado: contexto rot é real. Se você estiver iterando no mesmo chat e o resultado estiver piorando em vez de melhorar, a sessão está comprometida. Abra um novo chat, cole a melhor sugestão atual e continue.

Os três erros que garantem um resultado ruim

Três padrões que vejo toda semana, e cada um deles prejudica a qualidade do resultado.

Erro 1: "Melhore." O modelo não sabe o que "melhor" significa para você. "Melhor" significa a média do modelo para "melhor", que é uma regressão à média. Seja específico. "Aumente o contraste de cores." "Torne a composição mais assimétrica." "Corte metade dos detalhes do fundo."

Erro 2: Pedir cinco opções de uma vez. Você recebe cinco opções medíocres em vez de uma boa. Peça uma. Itere. Aceite a primeira boa.

Erro 3: Não fornecer referências. As referências ancoram o gosto do modelo. Sem elas, você obtém a média dos dados de treinamento. Com três referências bem escolhidas, você obtém algo próximo do que desejava.

Perguntas Frequentes

Engenharia de prompts: uma habilidade real ou apenas uma moda passageira?

É uma habilidade real, e é a mesma habilidade de escrever um bom briefing criativo. Se você consegue dar um briefing a um freelancer, você consegue dar prompts a um modelo. A moda passageira chama isso de "engenharia". Na realidade, chamamos de "instruções claras".

Qual ferramenta tem o melhor gerenciamento de prompts?

Para imagens, Midjourney e Gemini Pro se saem melhor com prompts de texto detalhados. Para interfaces de usuário, v0 e Lovable respondem bem a restrições estruturadas. Para codificação, ⟦MARCA0⟧ e Cursor são os mais fortes, especialmente com um CLAUDE.md bem escrito. A ferramenta importa menos do que a qualidade do prompt.

Devo usar uma biblioteca de prompts?

Sim. Crie uma. Organize-a por caso de uso. Sempre que acertar um prompt, salve-o. Sempre que um falhar, anote o motivo. Depois de três meses, você terá uma biblioteca mais valiosa do que qualquer assinatura de ferramenta.

Qual deve ser o tamanho ideal de um prompt?

O suficiente para abranger as cinco partes, mas curto o bastante para que cada frase seja útil. A maioria dos meus prompts tem entre 100 e 300 palavras. Menos que isso significa que você está especificando pouco. Muito mais longo, provavelmente você estará se repetindo.

Preciso aprender truques técnicos de prompts, como temperature ou top_p?

Não para a maioria dos trabalhos de design. Esses recursos são usados ​​em chamadas de API, não em interfaces de chat. Acerte as cinco partes primeiro. Você pode se preocupar com os parâmetros depois de fazer chamadas de API.

Escreva com convicção

Cada prompt vago é um desvio de dez minutos que produz conteúdo irrelevante. Cada prompt estruturado é um investimento de dez minutos que gera resultados.

Descreva a função, o contexto, as restrições, as referências e a especificação de saída. Itere uma variável por vez. Salve as que funcionarem.

Você já sabe como escrever um briefing. O modelo é um iniciante do outro lado.

Escreva com convicção.