Design de Experiência
O ux-ui-kit torna as interfaces corretas: tokens, componentes, estados, acessibilidade, renders verificados. Esta skill decide como a interface deve ser para usar e para lembrar, e transforma isso em decisões concretas que o kit pode construir. Ela responde: o que as pessoas devem notar primeiro, o que deve permanecer familiar, onde a originalidade ganha seu lugar, o que se move e o que fica parado, como as interações se comunicam, onde a experiência atinge seu pico e como termina, e o que resta quando a camada impressionante é removida.
Onde isso se encaixa
| Camada | Dono | Skill |
|---|---|---|
| Estratégia do site | o que o site deve alcançar e dizer, estrutura da página, prova, confiança, conversão, SEO | website-excellence |
| Direção de experiência (esta skill) | atenção, familiaridade e originalidade, direção de arte, composição e ritmo, interação, movimento, momentos marcantes, adaptação, validação experiencial | experience-design |
| Execução e verificação | tokens, componentes, código, texto, portões | apply-aesthetic, brandkit, design-tokens, design-component, design-code, image-to-code, ux-writing, prototype, redesign, design-review, a11y-audit, performance, design-qa |
Use o contexto estratégico apenas quando ele alterar uma decisão de interface. Se o público, a oferta ou o propósito da página de um site não estiverem resolvidos, obtenha-os de website-excellence primeiro, ou declare a suposição e continue. UI de produtos, aplicativos e dashboards vêm diretamente aqui.
Etapa 0: dimensionar o processo
Escolha a profundidade antes de qualquer outra coisa. Os frameworks nas referências são ferramentas para julgamento, não etapas que toda solicitação deve percorrer.
| Modo | Use para | O que produzir |
|---|---|---|
| Rápido | um componente, estado, ajuste de tela ou correção dentro de um sistema estabelecido | Leia o registro de decisão de design do projeto, se existir. Ordem de atenção para a visão afetada, um cartão de interação ou movimento apenas para o que muda, a verificação de antipadrões, depois construa. Sem ensaio teórico. |
| Padrão | uma nova página, fluxo ou família de telas, ou o redesenho de um | Brief de experiência e tese, mapa de atenção, orçamento de novidade, uma direção (alternativas apenas para uma troca real), mapa de ritmo, mapa de interação e movimento, notas de adaptação, autocrítica, registro de decisão. |
| Marcante | um site ou lançamento que define a marca, um redesenho de identidade, ou um pedido explícito por algo memorável | Tudo no Padrão, mais exploração de conceito (três direções genuinamente diferentes, comparadas, uma escolhida), momentos marcantes projetados, um protótipo da peça mais arriscada e um plano de validação experiencial. |
Verificação de moderação. Em um serviço governamental, checkout, autenticação, configurações, documentação, um dashboard operacional ou uma tarefa médica ou financeira, o orçamento de novidade em caminhos de tarefa é próximo de zero. A personalidade vive na tipografia, clareza, tom, precisão e na qualidade do feedback. Saber quando a moderação é a decisão mais forte faz parte do trabalho.
O ciclo
Execute as etapas que o modo necessita. Cada uma aponta para a referência que contém o método.
- Entender. Escreva o brief de experiência: intenção do usuário, contexto de chegada, atenção primária, resultado, tom, o que permanece familiar, restrições, o que as pessoas devem lembrar. [01]
- Estabelecer. Escreva a tese de experiência e a hierarquia de atenção (níveis 1 a 4) para cada visão chave. A tese filtra todas as decisões posteriores. [01]
- Explorar (Marcante, ou sempre que a primeira ideia for o padrão da categoria). Três direções que diferem em conceito, não em cor; compare conservadora, diferenciada e ousada; escolha; registre o que foi rejeitado e por quê. Pare de explorar assim que a escolha estiver clara. [02]
- Direcionar. Defina três a sete regras de direção de arte e traduza a tese em consequências para layout, tipo, escala, espaço, densidade, cor, imagens, superfícies, componentes, interação, movimento e comportamento responsivo. [02]
- Compor. Desenhe o mapa de ritmo: o trabalho de cada seção, densidade e intensidade, onde o silêncio se senta, onde está o pico, como termina. Deixe o conteúdo escolher sua forma em vez de título, parágrafo, três cartões. [03]
- Interagir. Escreva cartões de interação para interações significativas (intenção, affordance, gatilho, resposta, feedback, estado, recuperação, continuidade) e cubra estados de carregamento, vazio, erro, sucesso, interrompido e de borda. [04]
- Coreografar. Faça o mapa de movimento: o que se move, o que fica parado, um cartão de movimento por movimento significativo com sua classe de orçamento e uma versão projetada para movimento reduzido. [05]
- Pico. Escolha zero a três momentos marcantes e execute o teste de marca em cada um. [06]
- Adaptar. Re-decida a experiência para telas pequenas, toque, teclado, zoom e reflow, movimento reduzido e dispositivos de baixo desempenho; defina a escada de degradação. [07]
- Testar e editar sob pressão. Execute as principais decisões pelo filtro de decisão e as ambiciosas pela verificação de realidade de implementação; depois a verificação de antipadrões, teste de intercambiabilidade, teste de integridade do conceito e autocrítica de sete perspectivas; em seguida, remova o que não ganha seu lugar. [08]
- Entregar e verificar. Passe o Especificação de Experiência para as habilidades de construção. Execute os portões do kit e
motion_audit.mjs; renderize e olhe em cerca de 375 e 1440 px, apenas teclado, com movimento reduzido emulado. [07, 08] - Validar, refinar e lembrar. Teste as suposições mais arriscadas com o método mais barato que pode respondê-las; corrija as fraquezas de maior impacto em vez de polir detalhes de baixo valor; atualize o registro de decisão de design. [08]
Inegociáveis
- Torne o necessário familiar; torne o significativo distinto. Navegação, formulários, checkout, autenticação, pesquisa, configurações e recuperação de erros mantêm comportamento convencional, a menos que a evidência do público suporte uma mudança. Expresse a marca ao redor deles.
- Acessibilidade é uma entrada de design. WCAG 2.2 AA é o piso. Nada essencial depende apenas de hover, arrastar, movimento, cor ou som. Cada movimento tem uma versão projetada para movimento reduzido, não apenas uma versão deletada.
- Sem movimento sem um propósito. Cada movimento significativo nomeia o que comunica e sua classe de orçamento: essencial, aprimorador, expressivo, experimental ou evitar.
- Sem interação sem feedback e recuperação. Cada ação significativa é reconhecida em cerca de 100 ms e pode ser desfeita, cancelada ou repetida onde fizer sentido.
- Cada aprimoramento tem um modo de falha. Conteúdo e tarefas principais ainda funcionam com JavaScript, mídia pesada e animação removidos.
- Variação deve carregar significado. Mude composição, densidade ou intensidade porque o conteúdo, ritmo, hierarquia ou emoção pedem, nunca apenas para evitar repetição.
- Referências dão princípios, não superfícies. Nunca reconstrua a identidade de uma empresa real para outra pessoa; extraia por que uma referência funciona e expresse-a de forma diferente.
- Gaste novidade, não a espalhe. Orçamento típico: Rápido 0, Padrão 0 a 1, Marcante 1 a 2 ideias não familiares, concentradas onde criam significado ou memória.
- Rotule confiança em alegações materiais (abaixo) e nunca declare um resultado que você não mediu (Protocolo de Verificação do kit).
- Dimensione a análise para a decisão. Sem teoria para escolhas óbvias; decida e siga em frente.
Saída: o Especificação de Experiência
Preencha templates/experience-spec.md até a profundidade do modo: cerca de dez linhas para Rápido, uma a duas páginas para Padrão, duas a quatro para Marcante. Ao construir, o especificação é um plano de trabalho que direciona o código; mantenha sua linguagem fora de cópia de página e comentários de código, e resuma apenas as decisões que importam na entrega. Para trabalhos Padrão e Marcante, escreva ou atualize o registro de decisão de design do projeto a partir de templates/design-decision-record.md, e leia-o primeiro em cada tarefa posterior naquele projeto.
Entregas
| Decisão tomada aqui | Executado por |
|---|---|
| Regras de direção de arte se tornam tokens (funções de cor, tipo, espaço, raio, profundidade, modo de movimento e durações) | brandkit para uma nova base ou apply-aesthetic para uma existente, depois design-tokens |
| Componentes e seus estados, a partir dos cartões de interação | design-component, depois design-code |
| Páginas e telas a partir do especificação | design-code, ou image-to-code ao construir a partir de uma referência |
| Atualização de uma UI existente após o diagnóstico de genericidade | redesign |
| Cópia para ações, erros, estados vazios e feedback | ux-writing |
| Protótipos de momentos marcantes e interações arriscadas | prototype |
| Portões: contraste em todos os estados, axe, armadilhas de foco, overflow responsivo, gosto, movimento | a11y-audit, design-qa, performance, e node ~/.claude/ux-ui-kit/scripts/motion_audit.mjs <page> |
| Revisão pontuada de uma tela pelas lentes de base e experiência | design-review |
As regras do kit ainda vinculam a construção: apenas tokens, os 8 estados de componente, o Protocolo de Verificação em ~/.claude/ux-ui-kit/CLAUDE.md, sem emoji.
Rótulos de confiança
Use-os em recomendações que um leitor poderia confundir com fato. Não rotule cada frase.
| Rótulo | Significado | Equivalente do website-excellence |
|---|---|---|
| Convenção de alta confiança | padrão amplamente estabelecido com forte valor de usabilidade | Convenção atual, ou Padrão |
| Orientação apoiada por evidências | apoiado por um padrão ou pesquisa relevante; diga o que a evidência cobre | Padrão / requisito, Evidência forte |
| Inferência específica do projeto | raciocinado a partir destes usuários, restrições e metas; declare a suposição | Inferência |
| Hipótese criativa | um julgamento destinado a criar um sentimento ou uma memória; testável, não comprovável por pesquisa | Heurística prática |
| Oportunidade experimental | novo, resultado incerto; justifique-o e teste-o antes de confiar nele | Evidência limitada/contextual, mais um plano de validação |
A pesquisa pode definir restrições e sinalizar riscos. Ela não pode escolher a única direção de arte correta.
Referências
Carregue apenas o que o modo e o problema precisam.
- 01 Brief, tese e atenção: brief de experiência, tese, os três níveis de resposta, hierarquia de atenção, proporcionalidade por contexto, quando a moderação vence.
- 02 Conceitos e direção de arte: territórios criativos, diferença conceitual, cartões de direção e comparação, intenção para execução, tipografia, cor, imagens, superfícies, uso de referências e a biblioteca de estilos.
- 03 Composição, ritmo e conteúdo: projetar ao longo do tempo, mapa de ritmo, contraste e ritmo, densidade e pausa, interfaces moldadas pelo conteúdo, cartões, ferramentas de composição.
- 04 Design de interação: cartões de interação, teste de comunicação, orçamento de novidade, temporização de feedback, atualizações otimistas, desfazer, formulários, estados de experiência, paridade de entrada, transformação de padrões, interações marcantes, uso repetido.
- 05 Sistema de movimento: evidência, trabalhos do movimento, classes de orçamento, mapa e cartões de movimento, temporização, easing e springs, coreografia, movimento vinculado a scroll, transições de visualização, movimento reduzido como design, desempenho, mobile, ferramentas, teste.
- 06 Momentos marcantes: tipos de momento, memorabilidade sem espetáculo, pico e fim, seleção, teste de marca, formas estáticas, prototipagem.
- 07 Adaptação e degradação: responsivo como adaptação, consultas de entrada e capacidade, consultas de contêiner, zoom e reflow, alcance, camadas de dispositivo, escada de degradação, modos de falha, acessibilidade para recursos expressivos, verificações de renderização.
- 08 Crítica, validação e memória: filtro de decisão, verificação de realidade de implementação, verificação de antipadrões de IA, testes de intercambiabilidade e integridade, ciclo de autocrítica, edição implacável, passada de artesanato, métodos de validação para clareza e para sentimento, registro de decisão de design.