Case 03 · Ferramenta de design
UI Inspector
Criei, por iniciativa própria, uma ferramenta que deixa o designer ajustar o protótipo direto na tela e transforma cada ajuste numa instrução pronta para a IA aplicar no código.
- Adotadopelo time de design inteiro e pelo desenvolvedor de front‑end do projeto
- 12funções, dos tokens ao Write Prompt
Telas ilustrativas · NDA
O produto em que o UI Inspector roda está sob NDA (acordo de confidencialidade), então não posso mostrar as telas reais. As desta página são adaptações ilustrativas super simplificadas, na mesma rede de supermercados fictícia dos outros cases, com nomes e dados inventados. O UI Inspector em si aparece do jeito que funciona.
Problema
Os nossos protótipos são código. Para ler uma cor, um espaçamento ou um tamanho de fonte, o designer precisava abrir o inspetor do navegador: uma ferramenta de desenvolvedor, cheia de ruído, mostrando valores crus em vez dos nossos tokens de design.
E mudar qualquer coisa significava descrever a mudança para a IA em palavras, e torcer para ela achar o elemento certo.
Como cresceu
- jun · Style ReaderEscolher um elemento e ler os estilos dele como tokens. Copiar qualquer valor.
- jul · SpacingDistâncias entre elementos, do jeito que o Sketch Measure mostra.
- jul · Edição ao vivoMudar um valor no lugar e ver ao vivo.
- jul · UI InspectorUm nome novo e um painel novo: encaixado ou flutuante, feito para o teclado.
- set · Para o timeUma pessoa do time o leva para o resto do time de design.
O que faz
-
01
Selecione qualquer elemento
Tamanho, espaçamento, cores e tipografia aparecem como tokens do design system, ao lado do valor puro: #5B3FB8 aparece junto de --shelf-accent.
-
02
Edite no lugar
Clique num valor para mudá-lo, e o protótipo muda junto.
O UI Inspector encaixado num protótipo: um link selecionado, com padding, tamanho e peso mudados no lugar, e cada valor mostrado como token do design system. -
03
Transforme em prompt
O Write Prompt escreve todos os ajustes como uma instrução só para o Claude Code: qual elemento, com que alcance aplicar, e cada propriedade e valor.
Write Prompt: os quatro ajustes escritos como uma instrução, com o elemento, o alcance e cada propriedade.
O que ele faz hoje
Abre em qualquer tela
Pela barra do protótipo ou com ⌘I. Fica encaixado como barra lateral ou flutuante, e lembra a sua escolha.
Seleção como num inspetor do navegador
Ligue a mira, ou segure ⌥ e clique num elemento.
Especificações em tokens
Cada valor vem com o seu token, inclusive o nome do ícone. Clique em qualquer valor para copiá-lo.
Navegue pela hierarquia
Veja em árvore os elementos que contêm o selecionado e vá direto para qualquer um deles.
Veja o box model
Margem, borda, padding e tamanho exibidos sobre o elemento, quando você quiser.
Meça distâncias
Segure ⌃ e aponte: as linhas de distância vão da seleção até qualquer outro elemento, como o Sketch Measure mostra.
Réguas e guias
⌃R mostra as réguas. Puxe guias a partir delas, e elas se alinham aos elementos, mesmo com o painel fechado.
Todas as propriedades
Tamanho, espaçamentos, cores, raio, borda, sombra, opacidade, layout e tipografia, também pelo teclado: Tab, Enter, e Esc para desfazer o campo.
Cores de hover
Edite como um elemento fica no hover, não só em repouso.
Troque um ícone
Busque no conjunto de ícones e substitua o ícone ali mesmo.
Linhas, colunas, tabelas inteiras
Numa tabela, aplique uma mudança a uma linha, a uma coluna ou à tabela toda.
Write Prompt
Escolha até onde vai cada ajuste: só neste elemento ou em todos iguais. O Reset all devolve o protótipo ao que era.
Decisões que eu defendo
-
01
Abrir não trava o protótipo
Com o painel aberto, o protótipo continua respondendo aos cliques como sempre. Um clique só seleciona um elemento depois que você liga a seleção. Se a ferramenta tomasse conta dos cliques assim que abrisse, ninguém ia querer deixá-la aberta.
-
02
Passar o mouse não muda o painel
Só o contorno acompanha o ponteiro. Os valores que você está lendo continuam ali até você clicar em outro elemento.
-
03
Tokens primeiro, hex também
O painel fala a língua do design system, então designer e desenvolvedor leem a mesma coisa: o hexadecimal e o nome do token, lado a lado.
-
04
Nada é salvo, tudo vira prompt
O código do protótipo continua sendo a fonte da verdade. Um ajuste só chega até ele por um prompt, e alguém revisa antes.
Adoção
Quem mais usa sou eu, nos ajustes finos de cada protótipo. Ele também gasta menos tokens, porque o prompt já diz qual é o elemento e quais são os valores exatos.
Começou para os designers do nosso time. Depois, o dev de front-end do projeto passou a usar para pegar os estilos dos protótipos, e às vezes o próprio prompt, para fazer o ajuste fino da aplicação real.
A ideia, o design e o código são meus. Ainda não há números de uso.
Esse foi o resumo.