Pular para o conteúdo

Skill que desenha a planta de UX do seu app

Capa de Skill que desenha a planta de UX do seu app
No ar desde
Versão
v1 de 04/11/2026
O que baixa
9 arquivos, 177 KB
É pra você
Pro perfil do Mac

O problema

Alguém do produto pergunta "o que acontece se a pessoa não confirmar o e-mail?" e a resposta mora em três arquivos, num teste A/B e numa flag. Você abre o app, tira print de quatro telas, cola num documento e explica numa reunião. Na semana seguinte o fluxo muda, e o documento passa a mentir sem ninguém perceber.

Quem decide o produto nunca vê o fluxo inteiro, só pedaços, e decide em cima do pedaço. E cada pergunta nova volta pra sua mesa.

O que a skill faz

Ela desenha a planta do fluxo: cada tela do seu app, fotografada de verdade e na ordem da jornada, com os estados em que ela pode estar e as regras que fazem ela se comportar assim. Cada regra vem numa frase que qualquer pessoa entende, com o link pra linha do código que faz aquilo. Ninguém precisa acreditar em ninguém: está escrito.

Os passos que o produto ainda não tem aparecem também, tracejados, com duas ou três opções desenhadas, pra conversa começar de algo concreto. Antes de entregar, cada regra é conferida contra o código por um segundo agente, e a página é testada no celular e no computador, nos temas claro e escuro.

O resultado é um link (ou um arquivo HTML) que a pessoa de produto abre, percorre como um passeio e usa nas conversas: "a E5b, não a E5a". Quando o fluxo muda, a planta se refaz numa rodada.

O que vem no pacote

  • A skill pro Claude Code, pronta pra copiar pra dentro do seu projeto;
  • O motor da página: abas pra vários fluxos, telas de celular e de computador, busca por código e os temas claro, escuro e do sistema;
  • O conferidor que dirige a página antes da entrega e reprova o que ficou ruim;
  • Um exemplo completo que roda no primeiro minuto, sem precisar fotografar nada;
  • O guia de instalação, a tabela do que adaptar e as respostas pras dúvidas mais comuns.

O que ela NÃO faz

  • Não redesenha telas. Ela mostra o fluxo como ele é hoje; propor telas novas é outro trabalho.
  • Não fotografa produção. Ela precisa do seu app rodando local, com um banco novo e dados inventados. Se o seu app não sobe local, ela só consegue desenhar.
  • Não inventa o que a IA do seu app responde. Se o fluxo tem IA, os prints precisam de uma chamada de verdade: uma chave de teste ou o modo local do próprio app.
  • Não mapeia a arquitetura do código. O leitor é quem decide o produto, não quem programa.
  • Precisa de Claude Code, Node 22 ou mais novo e um navegador automatizado (agent-browser ou Playwright). Sair como link depende de a sua conta publicar Artifacts; sem isso, sai um arquivo HTML que abre em qualquer navegador.

Pra quem é

Pra quem já entrega produto com IA e precisa que gente de fora da engenharia (sócio, cliente, PM, operação) entenda e discuta o fluxo sem depender de você explicar tela por tela.

Não é pra quem está começando: você vai precisar subir o app local com um banco separado e dizer à skill como fazer isso.

A skill nasceu e foi refinada em dois produtos SaaS em produção, com rodadas de feedback de quem decide o produto.

Sua conta. Perfil ativo: Sem perfilTheoSudoMacEntrar no grupo do WhatsApp