O problema
Você vai direto para o Figma sem estrutura
Todo designer iniciante faz isso: começa pelas telas antes de entender o produto. O resultado é sempre o mesmo — redesenho, retrabalho, protótipos que não convencem.
😵
Telas sem contexto
Você cria frames bonitos que não se conectam — porque nunca definiu quem usa o quê e em qual ordem.
🔄
Redesenho constante
Na metade do projeto você descobre que esqueceu uma tela, um papel de usuário ou um fluxo inteiro.
❓
Perguntas sem resposta
"E se não tiver dados?", "Quem pode editar isso?", "Como o usuário chega aqui?" — dúvidas que aparecem na hora errada.
📉
Entrega que não convence
Seu protótipo parece incompleto — não porque o visual é ruim, mas porque a estrutura não sustenta.
A solução
Três Skills que trabalham em sequência
Você instala uma vez no Claude. A partir daí, qualquer ideia que você descrever passa por um processo profissional de três etapas — e sai como documentação completa.
01
ux-discovery
Product Strategist · Análise e Briefing
Você entra com qualquer coisa: uma ideia solta, texto de reunião, screenshot, documento parcial. A skill transforma em briefing estruturado, levanta os furos críticos que só você pode decidir, e mapeia automaticamente tudo que todo sistema precisa ter.
ideia brutatranscrição de reuniãopapéis de usuáriofuros críticos
↓
02
ux-journey-designer
Senior Product Designer · Jornadas e Wireframes
Recebe o briefing e mapeia as jornadas completas de cada usuário, do login ao logout. Define todas as telas com suas zonas funcionais, gera a matriz de permissões e o inventário completo — antes de qualquer pixel no Figma.
jornadas por papelwireframes com zonasinventário de telaspermissões
↓
03
ux-html-builder
Documentação · HTML Navegável
Pega toda a especificação e gera um arquivo HTML profissional: dark theme, sidebar com navegação ativa, diagrama SVG de fluxo, cores por papel. Pronto para abrir ao lado do Figma ou entregar direto para o cliente.
HTML standalonedark themesidebar navegáveldiagrama SVG
Veja na prática
Um comando. Todo esse documento.
Esse é o resultado real gerado pelas Skills a partir de uma única mensagem. O prompt abaixo, enviado uma vez — sem nenhuma iteração.
↓ documento gerado automaticamente ↓
14
telas mapeadas
5
blocos de jornada
9
decisões de UX
4
tipos de tag
10
seções no HTML
1
design system
Trecho do documento — Decisões de UX tomadas automaticamente
Definido
Somente via Bluetooth. Pesagem só registrada após leitura confirmada via BLE. Sem entrada manual.
Definido
BLE genérico aberto. Perfil GATT padrão. Compatível com qualquer balança com bioimpedância.
Definido
Tags por sexo + faixa etária. Tabelas OMS cruzando sexo biológico e faixa etária. Requer data de nascimento.
Padrão assumido
Comparação por delta. Chips coloridos (↑↓↔) por métrica entre última e penúltima pesagem.
Padrão assumido
Data meta opcional. Se preenchida: exibe estimativa de dias. Se não: apenas % de progresso.
UI finalizada
Semântica de cor. Verde = normal. Azul = BLE/sistema. Âmbar = atenção. Vermelho = exclusão apenas.
Trecho do documento — Sistema de tags por métrica
AbaixoNormalAltoObeso
| Métrica | Tags possíveis | Base de cálculo | Aparece em |
|---|---|---|---|
| Peso Total (IMC) | AbaixoNormalSobrepesoObeso | IMC = peso / altura² | Dashboard, Resultado, Histórico, Detalhe |
| % Gordura Corporal | BaixoNormalAlto | Tabela OMS por sexo + faixa etária | Dashboard, Resultado, Histórico |
| % Massa Muscular | BaixoNormalAlto | Tabela por sexo + faixa etária | Dashboard, Resultado, Histórico |
| Água Corporal (%) | BaixoNormalAlto | H: 60–65% · F: 50–60% | Dashboard, Resultado, Histórico |
Trecho do documento — Jornada detalhada (6 de 14 telas)
Bloco 02 — Dashboard
06
Dashboard Principal
Hero card gradiente verde: peso 48px · IMC · tag pill. Grid 2×2: gordura/músculo/água com tag em cada card. Comparação: 4 delta chips coloridos. Meta: barra gradiente + % verde/900. Dicas scroll horizontal. FAB elevado com anel branco. Tab bar fixa.
foco máximotab bar fixaFAB anel branco
07
Dashboard Empty State
Lottie placeholder. "Nenhuma pesagem ainda" 20px/900. CTA "Conectar balança". Dicas já visíveis para valor imediato. Tab bar e FAB mantidos.
empty statevalor imediato
Bloco 03 — Pesagem BLE
08
Escanear Balança
3 anéis concêntricos verdes pulsantes. Centro: círculo verde com ícone BLE. Device ativo com fundo verde-l e glow verde. Sinal fraco a 40%. Timeout 15s → erro.
BLE scananéis animadostimeout 15s
10
Resultado da Pesagem
Peso 58px/900 centralizado + tag + IMC. 3 cards: label mono + tag pill + valor% + valor-kg + barra semântica (gordura = âmbar→vermelho, músculo = verde, água = azul). Deltas VS anterior. CTA primário "Salvar" + outline "Descartar".
barras semânticasdecisão binária
Bloco 04 — Histórico
12
Histórico de Pesagens
Pills seleção (ativo = preto/sombra). Gráfico: linha #00C853 2.5px, gradiente área, dot 5px + halo 9px, seletor 30d/7d/3m. Lista: data 18px/900 + hora·IMC + tag + delta + peso. Swipe left revela lixeira vermelha.
gráfico interativoswipe delete
13
Detalhe da Pesagem
Peso 50px/900 centralizado + tag + IMC. Card composição: 3 linhas (nome + tag + valores). Card VS anterior. Nota de transparência: border-left 3px verde. Botão danger vermelho pálido.
transparênciaação destrutiva
Trecho do documento — Inventário completo de telas
Onboarding
Splash Screen
Logo + glow verde + loading bar. Roteamento automático.
OnboardingBoas-vindas (3 slides)
Proposta, BLE auto, tags. Lottie + pager pill.
OnboardingConfigurar Perfil
Nome, sexo, nascimento, altura slider. Faixa etária em verde.
OnboardingMeta de Peso
Input +/−, IMC preview verde, data opcional.
OnboardingPermissão Bluetooth
Contexto, garantias, diálogo nativo, pular.
OnboardingPrincipal · Fluxo BLE · Histórico · Perfil
Dashboard
Hero card verde, grid métricas, comparação, meta, dicas, FAB.
DashboardDashboard Empty
Lottie + CTA + dicas pré-pesagem.
DashboardEscanear Balança
Anéis verdes, lista BLE, sinal, timeout 15s.
BLEConectando / Lendo
Spinner verde, instrução, cascata de dados.
BLEResultado da Pesagem
Métricas + tags + barras semânticas + salvar/descartar.
BLEErro BLE
Timeout. Tom neutro, dicas, deep link SO.
BLEHistórico
Gráfico verde, seletor métrica/período, swipe delete.
HistóricoDetalhe da Pesagem
Métricas, nota transparência, botão destrutivo.
HistóricoPerfil & Meta
Avatar, dados pessoais, meta + IMC, configurações.
PerfilTOTAL: 14 telas · 1 papel · 5 blocos · BLE GATT genérico
Trecho do documento — Design system gerado
Tipografia
Nunito 900 — números e títulos, letter-spacing −.04 a −.06em
Nunito 700–800 — subtítulos, labels de card
Nunito 600 — body text dentro de cards
DM Mono 400–500 — tags, labels mono, timestamps
Paleta semântica
#00C853 — Normal, progresso, ativo
#007AFF — BLE, sistema, Abaixo
#FF9500 — Alto, atenção
#FF3B30 — Exclusão destrutiva apenas
#F5F4F0 — Background do app
Sombras & raios
Card: 0 3px 16px rgba(0,0,0,.07)
Button primary: 0 4px 14px rgba(0,0,0,.22)
FAB anel branco: box-shadow 0 0 0 3px #F5F4F0
Toggle verde glow: 0 2px 6px rgba(0,200,83,.4)
Cards / Pills: radius 20px · Inputs: 13–16px
Estados globais incluídos
Toast sucesso — verde, 3s, auto-dismiss
Toast erro — persistente, ação manual
Loading skeleton — por componente
Empty state — Lottie + CTA contextual
Confirmação exclusão — 2 pontos de atrito
O que você leva
Tudo que precisa para começar hoje
✓
Ebook completoGuia com 10 capítulos em PDF, de como instalar no claude
✓
ux-discovery.mdArquivo da Skill pronto para upload no Claude
✓
ux-journey-designer.mdArquivo da Skill pronto para upload no Claude
✓
ux-html-builder.mdArquivo da Skill pronto para upload no Claude