Design com IA

Com agentes de IA, agora você precisa pensar como três profissionais

Antes, um produto digital passava por produto, design e engenharia, um depois do outro. Hoje os agentes fazem boa parte do trabalho dos três, mas o critério de cada ofício continua sendo seu. Isto é o que aprendi, com um exemplo real e ferramentas para usar amanhã.

Thiago Soares · 8 min de leitura

20202026

Em 2020, uma página como a inicial do meu portfólio passava por três pessoas em fila. Alguém de produto definia o que dizer e para quem. Alguém de design decidia como aquilo seria entendido. Alguém de engenharia construía e cuidava para que não quebrasse. Cada um cuidava da sua parte, e os erros de um eram pegos pelo seguinte.

Nesta semana redesenhei essa página com agentes de IA. O Claude Code desenhou e programou; o Codex revisou. Andou rápido, e no caminho entendi algo que eu não esperava: os agentes fazem muito do trabalho dos três ofícios, mas não trazem o critério de nenhum. Se você não coloca, ninguém coloca.

Produto

Em 2020
Uma pessoa definia o que dizer e para quem.
Hoje o agente
Produz versões sem parar, mesmo com o pedido mal feito.
Continua sendo seu
Decidir o que precisa ser entendido em 3 segundos.

Design

Em 2020
Outra decidia como aquilo seria entendido.
Hoje o agente
Leva os adjetivos ao pé da letra e vai para os extremos.
Continua sendo seu
Formato, limite de palavras e para quem é.

Engenharia

Em 2020
Outra construía e cuidava para que não falhasse.
Hoje o agente
Escreve o código e dá por pronto.
Continua sendo seu
Fazer outro modelo revisar e exigir provas.

A seguir vêm quatro lições desse projeto, organizadas por ofício. Engenharia fica com duas, porque foi onde mais errei: revisar e testar. Cada uma tem o que aconteceu, uma peça para você ver, o que eu faria diferente e um modelo para copiar. No final você pode montar seu próprio pedido com os três papéis.

Produto

1. O difícil já não é fazer, é decidir

A terceira animação da página inicial teve oito versões numa única manhã. Uma com muito texto. Uma de pontos abstratos. Uma com ícones. Outra com barras de velocidade. Todas se mexiam bem, e nenhuma explicava o que eu queria mostrar.

O problema não era o agente. Ele fez exatamente o que eu pedi, e o que eu pedi estava mal formulado. Em 2020, alguém de produto teria feito a pergunta antes de qualquer desenho: o que quem entra precisa entender em três segundos? Depois da oitava versão parei para escrever essa frase. Os três segundos fui eu que escolhi, pensando num público que olha rápido. Com ela escrita, a seguinte saiu de primeira: um gráfico de Gantt que mostra como passei de trabalhar em fila para trabalhar em paralelo.

Ilustração
Oito versões, uma pergunta. Só fica a que passa no teste dos 3 segundos.

Um agente raramente pergunta para quê se você não pedir; por isso o modelo abaixo pede. E quando uma versão nova custa um minuto, a tentação é pedir outra em vez de pensar no que falhou.

O que eu faria diferente

  1. Antes de pedir qualquer coisa, escrever numa frase o que a pessoa precisa entender.
  2. Começar com três opções. Se nenhuma passa a ideia, revisar o pedido antes de pedir mais.
  3. Avaliar cada opção contra essa frase, não contra o gosto do momento.
Modelo
Contexto: [o que é e para quem].Quem vir isto precisa entender em 3 segundos que [a frase].Antes de propor, diga se essa frase está clara ou o que falta.Depois proponha 3 opções diferentes, diga em uma linha se cada uma cumpre a frase e recomende uma.

Design

2. Os agentes vão para os extremos

Com as animações isso aconteceu várias vezes. Quando eu pedia algo "mais simples", o agente tirava tanto que o desenho deixava de significar alguma coisa. Quando eu pedia "mais claro", enchia a tela de texto. Ia de uma ponta à outra sem parar no meio.

Faltava o critério de design: adjetivo não é instrução. O que ajudou foi trocar adjetivos por decisões concretas. Escolhi formatos que se reconhecem sem explicação, como um painel, um contador ou uma tela com cursor. Limitei o texto a três palavras por animação. E disse ao agente para quem era: alguém que chega ao site para avaliar meu trabalho e não vai parar para ler.

abstratosó texto

Abstrato demais: ninguém entende o que é

Mova o controle. Os agentes costumam cair nas pontas.

O que eu faria diferente

  1. Não pedir "mais simples" nem "mais claro". Pedir um formato concreto: painel, lista, contador, antes e depois.
  2. Colocar um limite de palavras por escrito.
  3. Quando a resposta vai para um extremo, nomear o outro como limite: "mais simples, sem deixar abstrato".
Modelo
Mostre [a ideia] usando um formato conhecido: [painel / contador / lista / antes e depois].No máximo [número] palavras dentro do gráfico.Para quem é: [público]. Precisa entender sem ler um parágrafo.Não deixe abstrato nem encha de texto.

Engenharia

3. Quem escreve não revisa

Esta é a maior mudança no meu jeito de trabalhar. Uso dois agentes de empresas diferentes: o Claude Code, da Anthropic, escreve o código e o texto; o Codex, da OpenAI, revisa com uma única instrução: tente rejeitar. Nada é publicado sem a aprovação dele.

Na minha experiência, dois modelos diferentes erram em coisas diferentes. O chat da página inicial tinha dois erros que o Claude Code deu por prontos. Se alguém saía da página bem na hora em que ganhava um segredo, a mensagem ficava "digitando" para sempre. Se a conexão caía no momento errado, o botão de tentar de novo sumia. O Codex encontrou os dois.

Não foi a única vez. Só neste artigo, o Codex apontou 25 frases em espanhol que soavam como texto de IA. Na revisão do código pediu seis mudanças; cinco eram reais, e ele só aprovou depois que foram corrigidas. É o trabalho que antes fazia um colega de engenharia exigente.

Para o agente que escreveu, o código parecia perfeito.

O que eu faria diferente

  1. Revisar sempre com um modelo diferente do que escreveu, e entregar os casos que quero conferir.
  2. Pedir que procure falhas, não que diga se está bom.
  3. Se ele apontar um possível erro, pedir como reproduzir. Se não houver jeito, perguntar o que viu.
Modelo
git diff | codex exec "Revise esta mudança como se fosse rejeitá-la. Não foi você que escreveu.Procure: casos extremos, o que acontece se o usuário sai no meio do caminho, o que acontece se a conexão cai, textos que não se entendem.Responda com uma lista ordenada por gravidade, com arquivo e linha. Termine com APROVO ou PEÇO MUDANÇAS."

4. Se eu não testei, não está pronto

A outra metade da engenharia é a prova. Antes de publicar, um navegador automático revisou a página inicial em tamanho de computador e de celular, nos três idiomas do site, e entregou capturas e medições das peças principais.

Essas medições me tiraram de dois erros. Tinham me dito que uma mudança estava pela metade, e ao medir vi que ela nunca tinha começado. Outra vez, no celular, apareceu um controle fixo em cima do chat. Nenhum dos dois aparecia no resumo do agente. As capturas me deixaram comparar o que o agente dizia com o que de fato aparecia na tela.

Computador · ES
Computador · EN
Computador · PT
Celular · ES
Celular · EN
Celular · PT
Computador e celular, nos três idiomas do site. Medido, não suposto.

O que eu faria diferente

  1. Escrever o que significa "pronto" antes de começar: quais telas, quais idiomas, quais casos.
  2. Pedir provas que dá para ver: capturas, medições, registros.
  3. Olhar essas capturas eu mesmo, não o resumo.
Modelo
Antes de dizer que está pronto, teste no computador (1440 px) e no celular (375 px), em [idiomas].Para cada combinação, entregue uma captura e uma linha com o que você mediu.Se algo falhar, não dê por pronto: diga o que falhou e o que vai mudar.

O que não funcionou

Com o som me faltou critério de design, e não percebi a tempo. Pedi a um agente que colocasse efeitos sonoros num vídeo curto. Ele entregou o arquivo com medições de volume e sincronia e deu por pronto. Quando escutei, eram bipes sintéticos que soavam baratos.

Eu tinha aceitado as medições antes de escutar. Refizemos com música e efeitos feitos por pessoas, colocados um a um em cada movimento. Desde então escuto, leio e olho eu mesmo tudo o que depende de gosto. Nenhuma medição me diz se algo soa como eu.

Monte seu pedido com os três papéis

Este pedido reúne as decisões dos três papéis antes de começar. Preencha os campos e cole o resultado no Claude, no Codex ou na IA que você usa. Depois, passe o que ela entregar pelas três revisões abaixo.

Produto
Design
Engenharia
Seu pedido, pronto para colar em qualquer IA
Preencha os campos e aperte "Montar meu pedido".

Revise como produto

Modelo
Você é responsável de produto. Leia isto e me diga em 3 linhas: para quem é, o que essa pessoa entende em 3 segundos e o que falta para ela decidir. Se a resposta não for clara, diga.

Revise como design

Modelo
Você é designer sênior. Veja se isto se entende sem ler: formato, hierarquia e quantidade de texto. Marque o que sobra e o que está abstrato demais. Proponha uma única mudança, a mais importante.

Revise como engenharia

Modelo
Você é engenheiro e seu trabalho é quebrar isto. Liste o que pode falhar: casos extremos, celular, conexão lenta, idiomas. Ordene por gravidade e diga como reproduzir cada problema.

O que levo comigo

Os agentes não substituem produto, design nem engenharia. Fazem boa parte do trabalho, mas o critério de cada ofício precisa estar em alguém. Neste projeto, esse alguém fui eu, com um segundo modelo revisando tudo.

Por isso hoje entender os três ofícios me importa tanto quanto dominar o meu. Um designer que sabe o que produto perguntaria e o que engenharia quebraria trabalha melhor com agentes, e com pessoas também.

Ainda estou aprendendo a trabalhar assim. Se você também trabalha com agentes, quero saber como você confere o que eles entregam.

Quer ver como eu apliquei isso?

A Nova, a IA da minha página inicial, conhece o projeto. Pergunte o que quiser, ou veja os cases.

Ver meu trabalho
← Voltar a todos os artigos