Case 03 · Ferramentas de IA

Do meu projeto para o time de design inteiro

Dois assistentes de IA que criei para o meu próprio projeto: um page tracer, que transforma uma tela real em protótipo, e um assistente de hand-off, que escreve os documentos com os quais a engenharia desenvolve. Os dois foram refeitos para que o time de design inteiro possa usá-los.

Ilustrativo · NDA

O produto e o framework estão sob NDA, então os nomes aqui são genéricos e as imagens foram recriadas na mesma rede de supermercados fictícia dos outros cases. As ferramentas, as decisões e os aprendizados são meus.

Papel: Ideia, design e código
Período: jun–out 2026
Status: Refeitos para o time de design inteiro
Quem usa: Eu, desde julho · o time de design

Adotadoo page tracer, hoje usado pelo time de design
Fluxoscada passo de um procedimento do hand-off abre o protótipo onde ele acontece
Mapaspapéis, regras e fluxos em diagramas com drill‑down

Problema

Dois trabalhos ocupam a semana de quem faz design: refazer como protótipo telas que já existem e escrever um hand-off que a engenharia consiga seguir de verdade. O primeiro vem com todo produto que já está no ar; o segundo, com toda feature, inclusive num produto novo.

Criei um assistente de IA para cada um, dentro do meu próprio projeto. Os dois funcionavam para mim. A pergunta difícil veio depois: funcionariam para um designer que não sou eu, num projeto que não é o meu?

O UI Inspector já tinha feito esse caminho até o resto do time. Estes dois davam mais trabalho, porque tinham detalhes do meu projeto embutidos: caminhos, papéis, componentes e cores.

O page tracer

Aponte para uma página do produto em funcionamento, e ele refaz essa página como protótipo usando o stack do nosso framework: a mesma estrutura, o mesmo conteúdo, os mesmos estados e comportamentos, com os valores visuais do próprio produto.

Os nossos protótipos nunca dependem do código de um produto: cada um é uma cópia em HTML, CSS e JavaScript, e é o page tracer que faz essa cópia.

Quase todo trabalho novo num produto que já existe começa de uma tela que já está lá. Refeita à mão, essa tela leva horas, e uma cor ou um espaçamento estimado parece tão pronto quanto o valor real. O page tracer mede em vez de adivinhar e monta com os componentes do próprio framework, então o resultado já está pronto para mudar.

Primeiro, um rascunho
Uma passada rápida entrega um protótipo completo da página, pronto para compartilhar. É o padrão, e muitas vezes é tudo de que a feature precisa.
Refinar uma região
Aponte a parte que está diferente. Ele mede essa região contra a página real, corrige e confere de novo.
Completo, com prova
Quando pedido, mede todos os estados e compara o protótipo com o produto, propriedade por propriedade. Diz quanto isso vai custar antes de começar e espera um sim.
Renderiza e funciona
Duas checagens vêm antes de qualquer medida de fidelidade: a página aparece e os controles respondem. Depois ele mesmo olha a captura de tela.
Para em vez de adivinhar
Quando não consegue ver a página, ele para e diz por quê, em vez de inventar o que não consegue medir.
Cada falha, uma regra
Cada execução que deu errado virou uma regra escrita, que ele lê quando algo parece fora do lugar: 69 até agora.

Como eu ensinei o page tracer a parar de adivinhar: ensinando um agente a ver como designer

O assistente de hand-off

Ele escreve o hand-off a partir da base de conhecimento da feature, a matriz, os logs e as atas, e o coloca dentro do protótipo, onde as pessoas já estão.

Toda feature ganha dois documentos. O What’s New é um guia para stakeholders que começa por quem pode fazer o quê em cada tela. O Dev and QA é o spec com o qual a engenharia e o QA trabalham: requisitos numerados, as user stories de cada tópico e as regras de negócio. Os dois dizem a regra atual, nunca o histórico dela.

Funciona do mesmo jeito num produto novo: tudo vem da base de conhecimento e do protótipo, não de uma aplicação no ar.

Ninguém abre um documento no meio de uma demo. Então os documentos abrem o protótipo.

Dentro do protótipo

Um painel ao lado do protótipo
Os documentos abrem num painel encaixado ao lado do protótipo em funcionamento, nunca por cima dele, para que uma regra seja lida junto da tela que ela descreve. Ele lembra o documento e onde você parou.
Passo a passos clicáveis
Todo procedimento é um passo a passo. Cada passo abre o protótipo onde ele acontece, naquele papel e no estado de que precisa, com um marcador Click here sobre o que apertar.
Feitos para serem lidos
Todo tópico abre com uma linha In short. Um sumário mostra onde você está, a busca destaca no próprio texto, o Voltar desfaz qualquer salto e um filtro mostra só o que ainda está em aberto.
As stories no lugar certo
Sob cada tópico, as user stories que ele atende, encontradas pelos requisitos dele, para que quem desenvolve leia a regra e a story juntas.
Copiar para qualquer lugar
Dá para copiar um documento em Markdown, ou como texto formatado para um editor de documentos, ou abri-lo numa aba só dele.
Uma checagem antes da entrega
Uma única execução confere o conjunto inteiro: passos que abrem um estado que o protótipo não consegue montar, perguntas presas a telas que não existem, links que não levam a lugar nenhum, um papel escrito de dois jeitos.

À esquerda, o drawer Add Campaign Budget do protótipo, preenchido, com um marcador Click here acima do botão Save e um selo Staged com Reset na barra superior. À direita, o documento Dev and QA no passo 2 do fluxo, com a linha In short acima dos passos. — Um passo do passo a passo e o protótipo que ele abre. Uma tela com estado simulado avisa que é simulada, com um *Reset*, para nunca ser confundida com o ponto em que a página começa de verdade.

Um passo do passo a passo e o protótipo que ele abre. Uma tela com estado simulado avisa que é simulada, com um *Reset*, para nunca ser confundida com o ponto em que a página começa de verdade.

Fluxos e regras em diagramas

Uma visão de workflow
Um único botão transforma todo fluxo em diagrama: uma raia por papel, cada repasse na sua linha, uma rejeição tracejada no caminho de volta. Cada passo da imagem abre o protótipo ali.
Os mapas primeiro
Todo documento abre com mapas gerados a partir das regras da feature: o processo entre os papéis, o ciclo de status, quem pode fazer o quê, uma tabela de decisão e como o trabalho passa de um protótipo para outro.
Drill-down
Um papel ou um status abre a própria página dentro do mapa: de quem recebe e para quem repassa, os seus passos fluxo a fluxo e as suas regras, cada uma com o link para o trecho onde está escrita.

A visão Diagrams do fluxo Approve a Campaign Budget: três raias, Budget Owner, Region Admin e System admin. O passo 1, Submit the budget, envia para revisão o passo 2, Review the request; uma linha tracejada, Reject: back to Budget Owner, volta ao passo 1; o passo 3, Approve it, repassa para o passo 4, Publish to stores. — A visão de workflow. O mesmo fluxo, gerado a partir dos passos que o documento já tem, sem nada feito à mão. Dá para ampliar ou copiar como imagem.

A página do Region Admin dentro do mapa de processo: recebe do Budget Owner, repassa para o System admin e devolve ao Budget Owner numa rejeição. Os seus passos, fluxo a fluxo, e as suas regras, uma marcada como Open, cada uma com a referência da seção. — O drill-down. A página de um papel dentro do mapa; um passo fecha o mapa e abre o protótipo ali, e uma referência abre o documento na regra.

Perguntas na tela

Todo ponto em aberto que precisa de uma resposta numa reunião vira uma pergunta, escrita para ser lida em voz alta. Um único arquivo alimenta dois lugares que nunca discordam: um pin na tela e um quadro para o item de trabalho.

Um pin no controle
A pergunta fica no botão ou campo a que se refere, e várias no mesmo controle dividem um pin, com a contagem. Um link para a pergunta abre a tela com ela à mostra.
Um card que se sustenta sozinho
Um código que nunca muda, para poder ser citado nas reuniões; um tipo (em aberto, confirmar ou atenção); um papel responsável, nunca uma pessoa; o contexto atrás do Show context; e um link para o trecho do spec.
Um quadro por item de trabalho
Uma página reúne todas as perguntas de um ticket ou de um épico, com uma aba por protótipo relacionado, abrindo no que ainda não tem resposta. Cada card abre a sua tela e a sua origem no spec, e todo pin leva de volta ao quadro.
Respostas que chegam a tudo
Digitada no pin ou no quadro, é a mesma resposta. O Export answers entrega as respostas à etapa que aplica cada uma à matriz, aos logs, ao protótipo e aos dois documentos.
Nada é apagado
Uma pergunta respondida fica no quadro, só para leitura, até o protótipo mostrar a resposta. Depois ela vai para a aba History, e o pin some.

O quadro de perguntas do Region Admin: Unanswered, Answered e History, uma aba por protótipo e quatro cards de pergunta, cada um com o código, o tipo (Confirm, Open ou Attention), o campo de resposta, o papel responsável e os links para a tela e para o spec. Uma resposta está digitada. O Export answers fica no canto superior direito. — O quadro de um item de trabalho, recriado com as perguntas fictícias do *case* **Region Admin**. Cada *card* abre a sua tela com a pergunta à mostra.

Os documentos em ação, no case Region Admin