Design (lean)

Trabalho de interface em três modos, executado como uma sequência de portões. Cada portão tem uma condição de aprovação, a evidência que deixa, um limite de tentativas e o que acontece em caso de falha. UI de produto fictício (heróis de demonstração, tiles bento, walkthroughs de cursor) é a skill design-demo, que carrega esta para suas regras.

Por que esta skill existe. A UI padrão de um modelo é a média de toda UI que ele já viu: título centralizado com um label acima, uma fileira de cartões com ícones, gradientes suaves, um raio e uma sombra cinza em tudo. A intenção vive na prosa, mas a geração de código busca padrões, então escrever "aconchegante e específico" ainda emite o template. Portanto, cada escolha é rastreada até uma decisão escrita e verificada. Se outro modelo, dado um prompt semelhante, produzisse substancialmente a mesma tela, o trabalho falhou. Remover slop é metade do trabalho; uma tela limpa que poderia pertencer a qualquer produto é o próximo template.

O que se sobrepõe a esta skill. (1) Uma marca real, especificação escrita ou direção visual nomeada: siga exatamente, mesmo onde pede algo que esta skill chama de padrão; liste cada conflito no relatório com a alteração de uma linha que aplicaria a regra. Um gradiente violeta-para-azul, brilhos ou brilho contam como slop mesmo em um logotipo, a menos que o usuário diga que são da marca. (2) .design/system.md (ou legado .interface-design/system.md): leia primeiro; essas decisões estão tomadas; sinalize desvios. (3) Esta skill, para tudo que ficar em aberto.

Fluxo de Trabalho

Rota G0

Pergunte em ordem; o primeiro sim decide.

Apenas descobertas, sem alterações? → Revisar
UI de produto fictício como ilustração? → carregar design-demo
UI existente cujos recursos, conteúdo e ordem das seções devem permanecer? → Polir
Qualquer outra coisa, incluindo um redesign que pode alterar conteúdo ou estrutura → Construir

Superfície: página (lida e rolada: landing, marketing, portfólio, evento, site de organização; se apoia em herói, texto, imagens, ritmo de seções) ou tela de aplicativo (trabalhada: dashboard, admin, configurações, tabelas, caixa de entrada, ferramentas; se apoia em hierarquia, densidade, estados, tokens). Um site de produto que mostra seu aplicativo é uma página; fragmentos de aplicativo nele seguem as regras de tela de aplicativo.

Registro de portões

Portão	Condição de aprovação	Evidência deixada	Limite	Em falha no limite
G1 Direção	Teste de nome removido passa; a pessoa confirma, ou uma regra de salto se aplica	Bloco de Direção	2 rodadas de exploração	Pegue a opção mais forte, marque-a como suposição no relatório
G2 Revisão do plano	Cada lugar onde um prompt semelhante chegaria no mesmo é revisado; `.design/decisions.md` escrito	decisions.md	1 revisão	Prossiga; liste os padrões restantes no relatório
G3 Componente	`gate.js --only <nome>` passa em 1440 e 390, e o componente segue decisions.md ou registra uma exceção	Uma linha de log do portão	2 tentativas de correção por verificação	Registre como um problema aberto com sua causa; continue apenas se nada mais depender dele
G4 Página	Execução completa de `gate.js` passa; os quatro testes e a lista de verificação de julgamento passam	Totais do portão, capturas de tela desktop e celular	3 rodadas de renderização	Relate o que ainda falha
G5 Relatório	Cada campo do template de relatório preenchido ou marcado como nenhum	O relatório	—	—
R1 Descobertas (Revisar)	Cada descoberta tem um critério, localização, gravidade e correção concreta	Lista de descobertas	—	Descarte descobertas sem evidência

Construir executa G1–G5. Polir executa G1, depois G4 e G5: suas passagens cortam toda a tela, então ele verifica uma vez no final em vez de por componente. Revisar executa G0 e R1.

Regras de salto para a espera G1: a pessoa disse para apenas fazer; uma marca ou especificação já fixa a direção; um único componente pequeno dentro de um design existente.

Execuções não supervisionadas. Quando ninguém está lá para responder (uma execução agendada, a pessoa disse que verificaria depois, ou uma pergunta ficou sem resposta), não espere em G1. Pegue a direção, declare-a no topo do relatório como uma suposição com a única linha que a alteraria e continue. Pule geração de imagem paga e use a próxima opção em Visuais. Uma execução de Polir que não encontra slop relata seus refinamentos sugeridos sem aplicá-los. Redirecionar depois deve custar uma mensagem.

Em Construir, um componente por vez em andamento. Gateie-o, registre-o e depois comece o próximo. Uma falha é corrigida agora, não coletada para o final: problemas se acumulam.

Direção

Intenção

Responda antes de qualquer decisão visual; mantenha um briefing compacto.

Quem é este humano? A pessoa real: onde está, o que fez há cinco minutos, o que fará a seguir.
O que eles devem realizar? O verbo: corrigir estas submissões, encontrar a implantação quebrada. Decide o que lidera, o que segue, o que esconde.
Como deve parecer? Palavras que significam algo: aconchegante como um caderno, frio como um terminal, denso como uma sala de negociações. "Limpo e moderno" não significa nada.

Se o briefing não nomear o assunto, proponha um assunto concreto, público e tarefa principal e confirme; se o contexto permitir uma suposição responsável, declare-a em uma linha e prossiga. A intenção é sistêmica: se a sensação é aconchegante, superfícies, texto, bordas, acentos e tipografia são todos aconchegantes. "É comum" ou "funciona" não é uma razão.

Exploração de domínio

Produza todos os quatro: domínio (5+ conceitos e metáforas do mundo do assunto); mundo de cores (5+ cores de sua versão física); assinatura (um elemento que apenas este produto poderia ter, usado consistentemente onde pertence); padrões a rejeitar (as três escolhas óbvias, cada uma com sua alternativa). Teste de nome removido: leia a proposta com o nome do produto removido; se ninguém pudesse dizer para que serve, explore novamente (limite: 2 rodadas).

Bloco de Direção

Produto:    [o que faz, para quem, uma frase]
Caráter:    [2–3 palavras concretas, não limpo/moderno/elegante/mínimo/premium]
Mundo:      [lugar ou material a que pertence; define tom neutro, acento, visuais]
Momentos:   [1–2 lugares que recebem cor rica e detalhes, escolhidos do conteúdo]
Assinatura: [o único detalhe que apenas este produto tem]
Rejeitando: [padrão → alternativa] × 3

Mostre com um pequeno espécime quando a renderização estiver disponível (amostras reais, a escala de tipos na face real, a assinatura como um componente real), então pergunte "Essa direção parece certa?" (G1).

Padrões em torno dos quais o design gerado se agrupa. Cada um é legítimo para algum briefing, mas aparece independentemente do assunto; onde o briefing deixa um eixo livre, não gaste aqui: (1) creme quente perto de #F4F1EA com uma serifa de alto contraste e um acento terracota perto de #D97757; (2) quase preto com um acento verde-ácido ou vermelhão; (3) fios de cabelo de jornal, raio zero, colunas densas de jornal; (4) o kit de cartão SaaS: cartões arredondados idênticos, um raio, a mesma sombra cinza suave, lavagens gradientes; (5) cromo de template: sobrancelhas em maiúsculas com tracking, strings meta A · B · C, rótulos PALAVRA — fragmento, quase preto matizado para preto, rótulos de dados monoespaçados, → em botões, acentos violeta ou índigo.

Arquivo de decisões

Após a direção, escreva .design/decisions.md uma vez: tokens de paleta e por quê, faces tipográficas e escala e por quê, estratégia de profundidade e por quê, base de espaçamento e densidade e por quê, a assinatura e onde aparece, os três padrões rejeitados. Isso substitui rejustificar cada componente. Em G3, a pergunta de julgamento é uma linha: este componente segue decisions.md? Se se afastar, registre a exceção e sua razão na linha de log do portão.

Regras de ofício

Regras marcadas (com portão) são medidas por gate.js; a lista de verificação G4 cobre apenas o resto.

Hierarquia e composição

Um ponto focal por vista: nomeie o que a pessoa veio fazer e faça-o vencer por tamanho, contraste, posição ou espaço.
Peso e cor fazem mais que tamanho. Um tamanho de 14px contém três níveis: valor 600 primário, rótulo 500 secundário, meta 400 suave.
Densidade é uma decisão em pixels, escolhida de antemão e repetida: painéis de ferramentas com padding 12–16 parecem apertados; 24 parece um folheto.
Respire desigualmente: apertado dentro de um grupo, mais solto entre grupos.
Proporções falam: uma barra lateral de 280px diz que a navegação serve ao conteúdo; 360 diz que são pares.
Restrição: cerca de 60/30/10 neutro, tom secundário, acento. Gaste ousadia em um lugar, depois remova um acessório.

Espaçamento

Cada margem, padding, gap e altura fixa é um múltiplo de 4 (com portão); um ajuste de 2px dentro de controles pequenos é aceitável.
Coisas iguais são iguais: uma altura de linha e gap por lista, um padding por conjunto de cartões; padding simétrico a menos que o conteúdo exija o contrário.
Coisas se alinham: ícones em uma coluna, rótulos em uma linha de base, números alinhados à direita.
Páginas: seções com 80–128 de distância no desktop, claramente mais do que qualquer gap dentro de uma seção. Aplicativos: padding de página 24–32.

Cor

Uma rampa neutra matizada em direção ao mundo para fundo, superfícies, bordas e texto; um matiz nas superfícies, mudando apenas a luminosidade. Em aplicativos, as superfícies permanecem quase neutras e o conteúdo carrega cor.
Quatro funções de texto: primário, secundário, suave, desabilitado.
Um acento no cromo, usado raramente: a ação primária, seleção, o único número que importa. Dentro dos momentos escolhidos, a cor pode ser rica se cada cor significar algo. Uma cor de marca real torna-se o acento e deixa as superfícies.
Contraste 4,5:1 para texto do corpo e acento-com-texto, 3:1 para texto grande (com portão).
Cores semânticas carregam significado apenas, tonificadas para a paleta, ligeiramente dessaturadas no escuro. Texto corrido em tinta total.
Cores vêm de tokens, nunca valores brutos em CSS de componente (com portão).
Sem gradientes de matiz para matiz em superfícies, texto gradiente, brilhos ou sombras coloridos, lavagens radiais, borrões ou bordas neon. Um gradiente é permitido apenas como uma mudança de tom dentro de um neutro, ou uma máscara neutra sob texto em uma foto.

Superfícies, bordas e profundidade

Uma estratégia de profundidade: apenas bordas (técnico, denso), sombras sutis (acessível), sombras em camadas (premium) ou mudanças de tom de superfície.
Elevação é silenciosa. Escuro: cada passo um par de pontos de luminosidade (página → cartão → elevado) mais fios de cabelo. Claro: descansando 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05), flutuando 0 8px 24px rgba(0,0,0,.06). Elevação escura: 0 0 0 1px rgba(255,255,255,.08).
Fios de cabelo: cor do texto primário a 6–10% de opacidade (12% no escuro), em uma pequena progressão: divisor, padrão, ênfase, anel de foco.
Barra lateral: mesma que a página ou um passo mais fundo no escuro, separada por um fio de cabelo, nunca um matiz diferente. Popovers um nível acima de seu pai. Inputs ligeiramente mais escuros que seus arredores.

Tipografia

A tipografia carrega a personalidade. Uma família é normal, duas o limite e claramente distintas; uma face de exibição apenas para grandes títulos. Uma fonte de marca real permanece.
Escalone uma proporção: cerca de 1,2 UI densa, 1,25 a maioria da UI de produto, 1,333 páginas expressivas. No máximo cinco tamanhos por página.
Pesos 400 e 500; 600 para figuras e ênfase rara; 700–900 apenas se uma especificação de marca disser.
Caixa baixa em todo lugar; sem rótulos em maiúsculas com tracking, sem ênfase em itálico, sem palavra de título única destacada por itálico, negrito ou cor.
Espaçamento entre letras 0 abaixo de 16px, cerca de −0,02em a partir de 40px, −0,03em a partir de 56px. Altura da linha do corpo cerca de 1,5, corpo serifado ligeiramente mais. Comprimento da linha 45–75 caracteres.
Números: figuras tabulares (com portão), um formato em todo lugar.
text-wrap: balance em títulos, pretty no corpo; -webkit-font-smoothing: antialiased na raiz.

Ícones

Emojis usados como ícones ou decoração tornam-se ícones de linha de um conjunto (o próprio do projeto, senão lucide), 16 ou 18px, traço 1,5, na cor de sua função de texto, mesma largura de caixa por linha, 8–10px do rótulo. Descarte ícones que não adicionam nada; uma categoria que precisa de cor recebe um ponto de status.

Texto

Escreva do lado da pessoa (eles gerenciam notificações, não configuram webhook); descreva, não venda.
Títulos dizem o que o produto faz para quem, usando fatos na página. Se o nome de um concorrente ainda se encaixa, reescreva.
Botões dizem o que acontece ("Salvar alterações"); uma ação mantém seu nome durante o fluxo ("Publicar" → "Publicado").
Erros dizem o que aconteceu e como corrigir, sem desculpas. Estados vazios convidam à próxima ação.
Voz ativa, verbos simples; sem pontos de exclamação, títulos de saudação, palavras de hype (supercarregado, sem emenda, desbloquear, mágico, revolucionário) ou AI-powered em todo lugar. Rótulos curtos (Pesquisar). Uma mudança nomeia sua comparação (+12% vs mês passado). Sem ponto final em títulos, rótulos, botões ou toasts.
Nunca invente prova: sem clientes, citações, avaliações, logotipos ou estatísticas. Conteúdo de amostra onde o briefing deixa lacunas é aceitável e vai no relatório para confirmar.

Estrutura significa algo

Esboços, bordas, numeração, sobrancelhas e divisores codificam informações. 01 / 02 / 03 apenas para uma sequência real. Emblemas como PRO, Novo ✨ vão embora a menos que carreguem significado, então tornam-se texto silencioso. Contagens e meta são texto silencioso, não pílulas.

Layout: páginas

O herói abre com a coisa mais característica no mundo do assunto, em sua forma mais adequada. Um grande número com um pequeno rótulo e um gradiente apenas se for realmente o melhor.
A primeira tela responde à primeira pergunta do visitante em tipo grande, carrega o h1, uma ação primária e no máximo uma secundária.
Heróis mais fortes: uma imagem de cena de ponta a ponta com o título em sua parte calma, ou uma divisão assimétrica com o visual pelo menos metade. Pilhas centradas apenas para heróis curtos sem visual.
Navegação: marca nominativa, os links existentes, um botão; login como um link de texto. Sem pílulas flutuantes ou vidro.
Cada seção: um título, uma composição diferente de seus vizinhos, seu conteúdo completo. Sem faixas mortas. O rodapé é um fechamento projetado, não um mapa do site.
Telas pequenas: empilhe em ordem de leitura e recomponha; sem texto abaixo de 11px; sem rolagem horizontal (com portão).

Layout: telas de aplicativo

Proporções reais: shell preenche a viewport, barra lateral 240–280, conteúdo fluido e limitado perto de 1440–1600, barra superior 56–64. Nunca uma coluna centralizada estreita.
Varie tamanhos: estatísticas compactas acima de um gráfico largo, nunca uma fileira de cartões idênticos. O gráfico principal leva pelo menos dois terços da largura e 280–360 de altura.
Cartões de estatísticas: rótulo, figura, alteração com sua comparação; sem sparklines ou ícones de preenchimento; nenhuma figura repetida em outro lugar.
Escolha o mecanismo de layout com base no conteúdo: tabela para dados densos que precisam de classificação por coluna, grade para painéis, galeria ou coleção de tarefas com tamanhos de cartão fixos, lista para submissões, conversas, arquivos ou notas recentes. Uma grade a 2–4 colunas; tabela quando cada linha compartilha os mesmos campos e você precisa classificar, pesquisar ou comparar linhas; lista para itens com conteúdo variado em que a ordem é tudo.
Mais regras: tabela tem texto cinza, números alinhados à direita; grade sem borda de cartão, a borda adicionada mais tarde; lista com linhas de 48px, conteúdo multi-linha com gap pequeno, quebra de palavras. Mensagens de entrada: cada mensagem em uma caixa, remetente à esquerda, destinatário à direita. Kanban: colunas de 280–320, barra de título em maiúsculas com contagem suave, cor de acento. Visualização lateral com largura fixa de 360–480.
Cada estado: dados carregados, vazio, carregamento, erro, borda. Esboços com o layout real, não retângulos genéricos. Mostre o estado limpo sem dados falsos.
Navegação: ativo como um fundo suave no item, sem realce de ícone. Barra lateral contém navegação, workspace, links de ajuda, preferências do usuário. Cabeçalho sempre mostra a localização atual, opcionalmente ações: filtro, pesquisa, classificação, novo, o que este aplicativo faz.
Modais: 400–480 para formulários pequenos, 600 para médio, página cheia para complexo. Cabeçalho do modal com título e descrição; rodapé com ações primárias e plano de fundo. Sobreposição escura: 60–70% de opacidade, nunca preta, sempre texto silencioso.

Interação e micro-interações

Todas as ações devem ter feedback: hover, foco, ativo, desabilitado, carregamento. Transições com duração de 150–200ms para hover, 200–300ms para painéis, ease-in-out. Animações apenas para movimento significativo: entrada de dados, novo item, mudança de estado. Nenhuma animação decorativa ou gradiente animado.
Estados de carregamento dentro do contêiner do componente, com layout real, sem texto de carregamento. Sem atraso falso. Erros Inline no campo, abaixo do rótulo, cor de perigo. Formulários: validação no desfoque, envio no clique. Toasts: no canto inferior direito, 3 segundos, ação de desfazer. Tooltips: no hover, 300ms de atraso, 200ms de saída.

Acessibilidade

O Alvo de toque mínimo é 44x44px para links, botões, controles (com portão). Foco visível em todos os elementos interativos. Labels em todos os campos de entrada. ARIA labels para ícones sem texto. Semântica de landmark: <main>, <nav>, <aside>.
Suporte a prefers-reduced-motion: sem animações, transições instantâneas. Modo escuro via preferência de sistema e alternância manual. Suporte à ampliação de fonte até 200% sem quebra de layout. Contraste de cores verificado.

Performance

Imagens carregadas com lazy loading. Conteúdo crítico inline, resto assíncrono. CSS mínimo, sem importações desnecessárias. Fonte carregada com font-display: swap. Evite layout shift (tamanhos explícitos). Use cache para dados estáticos. Renderização no servidor para páginas, cliente para aplicativos. Dados paginados para grandes conjuntos. Sem bibliotecas externas para componentes nativos.

Arquivo de sistema de design

Gerencie .design/system.md para decisões de design compartilhadas em um projeto: tokens de paleta, escala tipográfica, estratégia de espaçamento, estratégia de profundidade, assinatura do projeto e padrões rejeitados. Atualize-o quando as decisões de design mudarem; priorize-o sobre esta skill. Estado do sistema legado: .interface-design/system.md ainda é lido se .design/system.md não existir, mas novas decisões vão para .design/system.md.

Componentes padrão

Barra de navegação

Largura total no topo, altura 56-64px; logotipo à esquerda, links à direita; botão CTA à direita; fundo da página (claro) ou superfície (escuro).
Mobile: sanduíche, menu em tela cheia, overlay escuro no conteúdo.

Cartão

Padding 20–24, raio 8–12, sombra de elevação, fundo de superfície (escuro) ou superfície 1 (claro); largura flexível, mínimo 280.
Conteúdo: logo/ícone, título, descrição, metadados, ação.

Formulário

Empilhado ou em grade; rótulo acima do campo; campo altura 40–44, raio 6–8, fundo do campo ligeiramente mais escuro que a superfície.
botão primário à esquerda ou centralizado, ação secundária como link à direita.
Grupo de campos com padding, gap de 12–16.

Tabela de dados

Cabeçalho fixo, altura de linha de 48px, zebrado ou listras de hover; texto do cabeçalho em peso 600, alinhamento por conteúdo; ordenável com setas; paginação na parte inferior.

Diálogo modal

Overlay em tela cheia 60–70% opacidade; caixa centralizada, largura de 400–600; cabeçalho com título e descrição; rodapé com ações; fechar com X ou Esc; animação de fade in.

Pós-produção

Log do portão

Cada execução de portão produz uma linha de log:

[design:COMPONENT:CHECK] pass|fail | result | exception

Relatório

Após G5, escreva um relatório .design/report.md com:

Resumo: o que foi construído/polido/revisado, em uma frase.
Direção: quaisquer suposições feitas, itens não resolvidos.
Decisões: link para decisions.md, desvios e por quê.
Portões: para cada portão executado, passou ou falhou, e quaisquer problemas.
Capturas de tela: desktop e celular, anotadas com problemas encontrados.
Descobertas: para Revisar, lista de descobertas; para Construir/Polir, lista de problemas conhecidos.
Próximos passos: o que precisa de atenção do desenvolvedor, sugestões.

Esta instância

Aplicar para o contexto atual. Carregar decisões de design de .design/system.md se existir. Se nenhum sistema de design existir, seguir esta skill.

Perguntar na sua IA favorita

Documentação