Case 01 · Ferramenta de design
UI Inspector
Um inspetor e editor de estilos para os nossos protótipos que transforma cada ajuste em prompt para o Claude Code. Criei por iniciativa própria, com vibe coding, logo que comecei a usar o framework de prototipagem com IA que os times compartilham neste cliente.
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.
- Adotadopelo time de design inteiro
- 1 promptpara cada conjunto de ajustes, pronto para o Claude Code
- 12funções, dos tokens ao Write Prompt
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 time de design inteiro.
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. Medidas, réguas e guias ficam por cima do protótipo.
-
02
Edite no lugar
Clique num valor para mudá-lo. Cada mudança aparece ao vivo no protótipo, e nada vai para um arquivo.
O UI Inspector encaixado num protótipo: um link selecionado, com padding, raio 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
O que todo designer do time tem 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. Com o mouse por cima, o elemento só ganha um contorno, e o painel continua mostrando o que você selecionou.
Especificações em tokens
Cores, espaçamentos e tipografia convertidos nos tokens do design system, com o hexadecimal de cada cor ao lado, além do 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.
Edite no lugar
Tamanho, espaçamentos, cores, raio, borda, sombra, opacidade, layout e tipografia mudam ao vivo, 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
Cada ajuste vira uma instrução para o Claude Code, com o alcance escolhido por elemento: só este, todos iguais, ou uma linha ou coluna da tabela. 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, é mais rápido e certeiro do que descrever a mudança para a IA, e 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.
Hoje o time de design inteiro o usa.
Ainda não há números de uso. Uma pessoa do time o levou para o resto do time. A ideia, o design e o código antes dela são meus.