lksnmnn/direção-de-design

Direção de design

Um design é distinto quando alguém que conhece a área o atribuiria a este único produto. Usabilidade vem da estrutura familiar; distinção vem do que apenas este produto tem: sua marca, seu mundo, seus dispositivos gráficos e um movimento característico. Esses vêm da pessoa, então esta skill pergunta antes de desenhar.

Um gerador deixado sozinho converge para as mesmas poucas aparências (defaults.md). Cada decisão abaixo ou vem da entrevista ou é verificada contra essa lista; nada é escolhido porque é a primeira coisa que vem à mente.

Concluído quando uma direção é escrita, escolhida pela pessoa, e toda construção posterior a lê.

1. Coletar o que existe

Peça e leia tudo que já define a marca: arquivos de logotipo, cores, fontes, diretrizes da marca, fotografias, ilustrações, apresentações ou páginas anteriores, um arquivo de sistema de design no repositório, e o arquivo do projeto da skill product-ui (.claude/product-ui.md) se existir. Um sistema existente é o ponto de partida; a direção o estende e nunca o contradiz. Registre quais assets existem e quais estão faltando.

2. Entrevista

Execute interview.md: algumas perguntas por rodada, cada rodada baseada nas respostas anteriores. Pergunte, ouça, siga a resposta surpreendente um nível mais fundo. A rodada é concluída quando você puder declarar o mundo, a personalidade e as antirreferências do produto em um parágrafo e a pessoa concordar com ele.

3. Modo

Decida o modo a partir da entrevista:

• Operar (um aplicativo onde as pessoas trabalham): estrutura, navegação e controles permanecem os familiares da categoria. A direção contribui com tipo, paleta, densidade, dispositivos gráficos nas áreas silenciosas (cabeçalhos, estados vazios, onboarding, carregamento) e um movimento característico.
• Persuadir (uma landing page, uma campanha, uma apresentação): a direção pode moldar a página inteira — composição, imagens, movimento, layout.

Um produto com ambos recebe uma direção e a aplica por modo.

4. Propor direções

Escreva duas ou três direções que diferem à primeira vista, cada uma a partir do material da entrevista. Cada uma nomeia:

• tokens: paleta (4–6 cores nomeadas com funções), par e escala tipográfica, raio, bordas, elevação, densidade. Construa-os com tokens.md a partir dos assets da marca do passo 1 — um produto de referência empresta suas qualidades (velocidade, densidade), nunca suas cores ou tipo;
• dispositivos gráficos: uma linguagem de formas e geometria tirada do mundo do produto, e uma receita para fundos gerados, padrões e imagens de preenchimento construídos a partir dessas formas;
• imagens: o que a fotografia ou ilustração mostra, e como é cortada e tratada;
• estrutura: grade, ritmo, como uma tela ou página é composta;
• voz: três palavras para como a interface fala, e uma frase de exemplo para cada um de um botão, um estado vazio e um erro;
• movimento característico: uma ideia concreta e nomeável que um espectador lembra ("status desenhado como …");
• uma amostra: uma tela ou seção real renderizada nela, com conteúdo real.

Mostre as amostras lado a lado, no mesmo tamanho, com o mesmo conteúdo. A pessoa escolhe uma, ou combina partes, e diz por quê.

Cada número e rótulo em uma amostra precisa de uma definição que a pessoa concorde ("usuários ativos": logados? em uma sessão hoje?). Colete aqueles que eles questionam como definições abertas; são perguntas do produto e vão para o registro do passo 6.

Quando a pessoa disser que ainda parece genérico, mas não conseguir nomear o porquê, divida a superfície em interruptores independentes — tipo de letra, paleta, forma (raio, bordas, chips), densidade, estilo de ícone — na mesma tela, e deixe-os alternar cada um até a sensação passar. O interruptor que a remove nomeia a causa.

5. Verificar distinção

Compare a amostra escolhida com defaults.md e com as antirreferências da pessoa. Para cada correspondência, mude a decisão que a produziu, ou registre por que este produto a mantém. Em seguida, o teste de atribuição, ponderado pelo nível de distinção da superfície a partir da entrevista: com o logotipo coberto, alguém que conhece a área nomearia este produto? Em um nível alto, "poderia ser de qualquer um" envia você de volta ao passo 4 com o elemento mais fraco. Em um nível baixo, um resultado limpo e familiar passa, e o registro diz isso.

Distinção nunca custa usabilidade: um movimento característico que esconde um controle, reduz contraste ou quebra um padrão familiar da categoria é movido para uma área silenciosa ou descartado.

6. Registrar

Escreva a direção na seção "Direção" do arquivo do projeto (.claude/product-ui.md, ou onde CLAUDE.md diz que o projeto mantém suas decisões de design; crie-o a partir do template product-ui quando ausente): a data, modo, tokens, dispositivos, receita de imagens, estrutura, voz, movimento característico, as antirreferências, as definições abertas e as respostas da entrevista que as justificam. Coloque os próprios tokens no arquivo de tokens do código. Construções e revisões posteriores leem primeiro o arquivo do projeto.