Processo
Como eu projeto com IA
Um lugar só onde pesquisa, decisões, protótipo e hand-off ficam em sincronia. O núcleo não muda. As ferramentas melhoram toda semana.
Um retrato · outubro de 2026
É assim que eu trabalho em outubro de 2026. 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.
Pessoas
Documentos
Protótipo
Meus assistentes de IA
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 dev leads: 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 Devolvo as atas por prompt, e elas atualizam 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. A construção também consulta a base de conhecimento da aplicação, então o protótipo segue as regras da aplicação como um todo, não só as da feature. Todo protótipo é interativo e 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 leva a todo protótipo.
-
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, anoto as respostas ali mesmo e peço ao acompanhamento de features que as aplique 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 três. O What’s New é um tour para os stakeholders que começa por quem pode fazer o quê em cada tela. O Dev and QA é 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. 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. O documento guarda o seu lugar de leitura enquanto você avança. Os mesmos passos também viram imagem, um mapa do protótipo e as regras da feature em diagramas, e todo tópico abre com uma linha In short. 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ê os documentos da feature 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 a outubro de 2026, o período em que estou no meu projeto atual como o único designer.
- 400+mudanças de design registradas em mais de 15 features, a maioria com quem pediu declarado na fonte
- 25+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 e leva as respostas das perguntas presas na tela para o protótipo e todos os documentos.
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 nas documentações What’s New e Dev and QA, 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.
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. Os assistentes por trás delas melhoram toda semana, e alguns já são usados pelo time de design inteiro. Hoje, as respostas anotadas numa reunião ainda precisam de um passo de exportação, porque ficam guardadas no navegador de quem anotou. Quero guardá-las onde o time inteiro veja. 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.