Processo
Como eu projeto com IA
Um lugar só onde pesquisa, decisões, protótipo e hand-off ficam em sincronia.
Um retrato · novembro de 2026
É assim que eu trabalho hoje. As coisas andam rápido por aqui, então, quando você ler isto, parte já pode ter mudado.
De onde eu venho
Mais de 25 anos de design me ensinaram o que não pular: pesquisa, fluxos, wireframes, design visual e um hand-off cuidadoso, sem abrir mão da rapidez e da agilidade que a era da IA nos dá.
O que a IA mudou é como as partes ficam conectadas. Tudo o que aprendo sobre uma feature se acumula num lugar só, do primeiro pedido ao hand-off, em vez de ficar na minha cabeça e em conversas de chat. O que não mudou: quem decide são as pessoas. A IA rascunha, eu decido, e reviso tudo antes de um stakeholder ver.
Tudo anda junto
As etapas abaixo têm uma ordem, mas o trabalho não espera por ela.
Num mesmo dia, a matriz, os logs, o protótipo e as perguntas estão todos andando, e uma mudança num deles chega aos outros.
Parte disto já vem pronta no nosso framework interno: a base dos protótipos, com navegação, componentes básicos e troca de papéis; discovery e brainstorm com wireframes; escrita de interface; revisões de usabilidade, fluxo e acessibilidade; e um assistente de design para os desenvolvedores. Na raia Assistentes de IA que construí está o que eu acrescentei por cima dele.
Pessoas
Documentos
Protótipo
Assistentes de IA que construí
Engenharia
As sete etapas
-
01
Levantar
Todo pedido, de toda fonte. Começo pelo pedido, onde quer que ele esteja: tickets, specs, documentos compartilhados, atas, conversas no Slack e a base de conhecimento da aplicação. Logo no começo, também faço reuniões com o cliente (e com usuários, quando temos acesso) para tirar dúvidas e entender melhor o escopo. Depois levo a minha primeira leitura para os líderes dos times internos do projeto: matriz CSD, fluxos e rabiscoframes no Miro. Passamos por tudo juntos e listamos as perguntas. Eles sabem o que o sistema já faz, então muita dúvida vira certeza ali mesmo.
Onde a IA ajuda Coloco as fontes no framework por prompt, inclusive os fluxos do Miro, como imagens. O acompanhamento de features as guarda na base de conhecimento da feature, e o leitor da base de conhecimento traz as regras da aplicação.
-
02
Mapear
O que sabemos, o que supomos e o que ainda falta perguntar. A primeira coisa que crio não é uma tela. É uma matriz de certezas, suposições e dúvidas, que vou preenchendo nessas reuniões até o escopo ficar claro. Ao lado dela, um log de decisões e um log de design crescem reunião a reunião: cada mudança visual, e quem pediu.
Onde a IA ajuda Um assistente de acompanhamento de features que escrevi cria os três documentos e leva cada nova decisão para todos eles, para que nunca se desencontrem.
C
Certezas
Alguém decidiu.
Uma visualização salva guarda os filtros e a ordem da lista.Qualquer pessoa pode salvar as próprias visualizações.S
Suposições
Eu acredito e defenderia. Ninguém decidiu.
Cada lista precisa de uma visualização padrão.As equipes vão querer compartilhar as visualizações salvas entre si.Pode virar certeza ou dúvida
D
Dúvidas
Ninguém respondeu ainda.
Quem pode editar uma visualização que outra pessoa compartilhou?Apagar uma visualização compartilhada apaga para todo mundo?Era certeza, até uma reunião reabrir
As colunas são estados, não gavetas. Os cards de exemplo são inventados, sobre uma feature fictícia de visualizações salvas (os filtros e a ordem de uma lista, guardados para reabrir depois), para mostrar como a matriz funciona. -
03
Validar
Validado com pessoas antes de alguém construir. Levo a matriz para entrevistas e reuniões com o time interno e com o cliente, em inglês, ou resolvo pontos offline no Slack. Um card muda de lugar quando a resposta muda: basta um stakeholder para uma certeza voltar a ser dúvida.
Onde a IA ajuda Depois de cada reunião, meu assistente de resumo de reunião lê a transcrição e os prints e escreve o resumo que eu mando para o cliente e a ata da reunião. Em seguida, o acompanhamento de features leva as decisões para a matriz e os logs.
-
04
Prototipar
Alta fidelidade, feito a partir do próprio produto. Assim que um escopo mínimo fica claro, monto um protótipo interativo com os componentes do design system, reconstruídos a partir da aplicação real. Todo protótipo é publicado num endereço privado. Times diferentes testam remotamente, no próprio navegador, e mandam feedback antes do desenvolvimento, não como retrabalho para os devs. Quando temos acesso, os usuários também testam.
Onde a IA ajuda O protótipo lê duas bases de conhecimento: a da feature, que o acompanhamento de features mantém desde o primeiro dia, e a da aplicação, que o meu leitor da base de conhecimento traz, para que o protótipo siga as regras da aplicação inteira, não só as da feature.
-
05
Resolver
Perguntas respondidas onde o problema está. As perguntas nascem de um assistente de hand-off que escrevi: ele transforma cada ponto em aberto numa pergunta e a prende no próprio protótipo, no botão ou campo a que se refere, com o motivo e um papel responsável. Depois conduzo as reuniões internas e com o cliente por esses pins e anoto as respostas ali mesmo. Cada resposta fica registrada na sua pergunta, então todo mundo que abre o protótipo a vê, e o acompanhamento de features a aplica ao protótipo e a todos os documentos. As perguntas respondidas ficam no quadro até o protótipo mostrar a resposta, e depois vão para o histórico.
Onde a IA ajuda A IA rascunha o texto. Eu reescrevo cada pergunta até dar para ler em voz alta, e ela sempre cita um papel, nunca uma pessoa.
-
06
Entregar
Documentos que vivem junto do protótipo. O painel Docs do protótipo reúne quatro, um em cada aba. O Overview é um tour para os stakeholders que começa por quem pode fazer o quê em cada tela. O Technical spec é a spec completa que a engenharia e o QA usam no dia a dia. O mesmo assistente escreve os dois. O terceiro é a matriz CSD, e o quarto é o Changelog: o que mudou de uma reunião para a outra, em palavras simples, cada item com o seu motivo e um link que abre a tela e marca o que mudou. Eles se regeneram conforme as decisões chegam, então, quando mudo uma regra ou uma tela, nada fica para trás. E todo procedimento neles é um passo a passo clicável: cada passo abre o protótipo onde ele acontece, logado com aquele papel e exatamente no estado de que precisa, com um marcador Click here sobre o que apertar. Os mesmos passos também viram imagem: um mapa do protótipo e as regras da feature em diagramas. Uma checagem roda sobre o conjunto inteiro antes de qualquer coisa sair.
Onde a IA ajuda A engenharia transforma esses documentos em user stories, casos de teste e planejamento para o desenvolvimento (o documento de requisitos).
-
07
Acompanhar
O trabalho não para no hand-off. Enquanto a engenharia desenvolve, tiro as dúvidas do time, faço UI review conforme cada parte fica pronta e abro tickets quando precisa. Às vezes entramos pontualmente em algo que faltou no hand-off, mas, com a IA, isso ficou raro. No fim, atualizo as páginas de ajuda do produto de acordo com o que o time construiu.
Onde a IA ajuda A IA lê as bases de conhecimento da feature e da aplicação e rascunha as mudanças nas páginas de ajuda, e eu reviso antes de entrarem. Depois que elas entram, peço à sincronização da base de conhecimento que as leve para a base de conhecimento da aplicação, então a próxima feature já começa delas.
No projeto todo
De maio ao início de novembro de 2026, o período em que estou no meu projeto atual como o único designer.
- 800+mudanças de design registradas em mais de 15 features, a maioria com quem pediu declarado na fonte
- 45+reversões de uma regra definida, registradas em vez de sobrescritas em silêncio; quase todas apontam para a entrada que derrubaram
Contado a partir dos logs de design do projeto por um script de métricas que escrevi, que também lê o histórico do git e as perguntas abertas. Não medi o tempo economizado, então não declaro nenhum.
O design system
Todo protótipo tem a cara da aplicação real porque eu o monto a partir dela.
Estou reconstruindo os componentes do produto dentro do framework: mais de 30 até agora, de tabelas, drawers e pickers a filtros e navegação. É essa biblioteca que deixa rápido montar um protótipo de alta fidelidade, consistente de uma feature para a outra. É também por causa dela que o cliente testa algo que se comporta como o produto. Quando uma feature parte de uma tela que já existe, o page tracer que criei me ajuda a recriar essa página a partir da URL, já no formato dos protótipos e com os componentes do design system. Ele adianta boa parte do trabalho, mas ainda faço ajustes pontuais até chegar ao resultado final.
Assistentes de IA que criei
Trabalho no VS Code com o Claude Code, o agente de programação com IA da Anthropic, que lê, escreve e altera os protótipos e os documentos. Os assistentes abaixo rodam dentro do framework de design com IA que o nosso time de design criou para si, com skills e agentes próprios. Criamos o nosso em vez de adotar uma ferramenta pronta, por cinco motivos:
- Consistência. Todo protótipo parte dos mesmos componentes e regras, então todos têm a mesma cara e o mesmo comportamento. Isso vale em todo projeto.
- Um jeito só de construir, qualquer que seja a stack. Um protótipo nunca depende do código de um produto: é HTML, CSS e JavaScript, montado do mesmo jeito em todo projeto, seja qual for a tecnologia do produto.
- Confidencialidade. Sob NDA, o material do cliente fica em ferramentas que controlamos.
- As ferramentas prontas não deram conta. As que testamos não foram bem nos primeiros testes.
- Nós mesmos evoluímos o framework. O time de design cria plugins e melhorias por vibe coding, e os desenvolvedores revisam cada mudança antes de ela entrar no framework que o time usa. O UI Inspector nasceu assim.
O framework é um trabalho do time. Estes assistentes são meus.
Acompanhamento de features
Monta a base de conhecimento da feature no primeiro dia (a matriz, o log de decisões e o log de design), mantém os três em sincronia, leva as respostas das perguntas presas na tela para o protótipo e todos os documentos e registra o que mudou no Changelog quando eu peço.
Resumo de reunião
Depois de uma reunião com o cliente, lê a transcrição e os prints das respostas anotadas nos pins e escreve duas coisas: um resumo curto que eu mando para o cliente, com os links dos protótipos, e o registro da reunião nos documentos compartilhados do projeto.
Leitor da base de conhecimento
Leva as regras da aplicação a todo protótipo e página de ajuda, para que as telas novas respeitem os papéis e as regras que já existem.
Sincronização da base de conhecimento
Quando eu peço, no acompanhamento, lê o que mudou nas páginas de ajuda e alimenta a base de conhecimento da aplicação.
Assistente de hand-off
Quando já existe protótipo, transforma a base de conhecimento da feature no Overview e no Technical spec, com uma matriz de acesso para cada tela, faz dos pontos em aberto perguntas presas na tela e leva cada passo de fluxo a abrir o protótipo exatamente no estado que descreve, apertando os próprios botões do protótipo. Também monta o Changelog, em que cada item abre a tela e marca o que mudou.
Page tracer
Transforma uma página real num primeiro rascunho de protótipo a partir da URL, com os componentes e estilos que o design system já tem. Rápido por padrão, medido quando pedido.
Paridade visual
Lê os estilos do produto direto do código-fonte (cores, cantos, bordas, espaçamentos, tipografia e tamanhos), para que cada componente reconstruído e cada tela copiada fiquem idênticos à aplicação.
UX writing do produto
Escreve e revisa cada texto de interface, de rótulos e tooltips a erros e estados vazios, seguindo as diretrizes de escrita e o vocabulário que a aplicação já usa.
UI Inspector
Um inspetor e editor de estilos para protótipos que transforma cada ajuste em prompt.
Para onde vai
As etapas não mudaram desde que entrei neste projeto, e alguns dos assistentes por trás delas já são usados pelo time de design inteiro. As respostas dadas numa reunião já chegam a todo mundo, porque eu as registro nas perguntas, mas uma resposta anotada num pin fica no navegador de quem anotou até eu registrar. Quero que o quadro guarde cada resposta onde o time inteiro veja, no momento em que ela é anotada. E, depois do lançamento, quero contar as perguntas que a engenharia traz de volta, para medir o que o hand-off ainda deixa passar.