CxElegy/design-de-interface

Design de Interface

Construa interfaces de produto com o artesanato de uma equipe de design de ponta — Linear, Vercel, Stripe, Apple. A diferença entre essas e a saída genérica não é talento. É que cada decisão foi decidida, a hierarquia é inconfundível, e uma centena de pequenos detalhes estão corretos ao mesmo tempo. Esta habilidade é como você chega lá.

Escopo

Use para: Dashboards, painéis administrativos, aplicativos SaaS, ferramentas, páginas de configuração, interfaces de dados.

Não use para: Landing pages, sites de marketing, campanhas, trabalho exclusivo de marca. Use uma habilidade de design de marketing/frontend para esses.

Esta habilidade é autocontida: direção, hierarquia visual, arquitetura de sistema de design, e os fundamentos de polimento e movimento necessários para enviar UI de nível de produção vivem aqui.

---

O Problema

Você gerará saída genérica. Seu treinamento viu milhares de dashboards, e os padrões são fortes. Você pode seguir todo este processo — explorar o domínio, nomear uma assinatura, declarar sua intenção — e ainda produzir um template: cores quentes em estruturas frias, fontes amigáveis em layouts genéricos.

Isso acontece porque a intenção vive em prosa, mas a geração de código puxa de padrões. A lacuna entre eles é onde os defaults vencem. O processo ajuda, mas não garante artesanato. Você tem que se pegar, e tem que conhecer os movimentos concretos que os defaults não conhecem.

O padrão: Se outra IA, dada uma sugestão semelhante, produzisse substancialmente a mesma saída, você falhou. Não diferente por si só — diferente porque a interface emergiu deste usuário, desta tarefa, deste mundo. Quando você projeta a partir de defaults, tudo parece igual, porque defaults são compartilhados.

---

Onde os Defaults se Escondem

Os defaults se disfarçam como infraestrutura — as partes que parecem que só precisam funcionar, não ser projetadas.

• Tipografia parece um container. Mas o tipo não está segurando seu design, ele é seu design. O peso de um título, a personalidade de um rótulo, a textura de um parágrafo moldam como o produto parece antes de alguém ler uma palavra. Alcançar sua fonte habitual significa que você não está projetando.
• Navegação parece scaffolding. Mas navegação é o produto — onde você está, para onde pode ir, o que importa. Uma página flutuando no espaço é uma demonstração de componente, não software.
• Dados parecem apresentação. Mas um número na tela não é design. O que significa para a pessoa olhando? Um anel de progresso e um rótulo empilhado mostram "3 de 10" — um conta uma história, o outro preenche espaço.
• Nomes de token parecem detalhe de implementação. Mas --ink e --parchment evocam um mundo; --gray-700 e --surface-2 evocam um template. Alguém que lê apenas seus tokens deve adivinhar que produto é este.

Não existem decisões estruturais. Tudo é design. No momento em que você para de perguntar "por que isto?", é o momento em que os defaults assumem o controle.

---

Intenção Primeiro

Antes de tocar no código, responda a estas. Mantenha como um briefing de trabalho compacto, a menos que a direção exija confirmação do usuário.

• Quem é este humano? Não "usuários." A pessoa real. Onde eles estão quando abrem isto? O que fizeram 5 minutos atrás, o que farão 5 minutos depois? Um professor às 7h com café não é um desenvolvedor depurando à meia-noite não é um fundador entre reuniões de investidores.
• O que eles devem realizar? O verbo. Corrigir estas submissões. Encontrar a implantação quebrada. Aprovar o pagamento. A resposta determina o que lidera, o que segue, o que se esconde.
• Como isto deve parecer? Em palavras que significam algo. "Limpo e moderno" não significa nada — toda IA diz isso. Quente como um caderno? Frio como um terminal? Denso como uma sala de negociação? Calmo como um aplicativo de leitura? Isto molda cor, tipo, espaçamento, densidade — tudo.

Se a sugestão é muito vaga para identificar o humano, a tarefa e a sensação, faça uma pergunta concisa. Se o contexto permitir uma suposição responsável, afirme brevemente e prossiga.

A intenção deve ser sistêmica. Dizer "quente" e depois usar cores frias não é seguir em frente. Se a intenção é quente: superfícies, texto, bordas, acentos, cores semânticas, tipo — tudo quente. Se densa: espaçamento, tamanho do tipo, arquitetura da informação — tudo denso. Verifique cada token contra a intenção declarada. Para cada escolha — layout, temperatura de cor, tipo de letra, escala de espaçamento, hierarquia — você deve ser capaz de dizer por que. "É comum" ou "funciona" significa que você usou um default.

---

Exploração do Domínio do Produto

É aqui que os defaults são pegos — ou não. Caminho genérico: Tipo de tarefa → template visual → tema. Caminho artesanal: Tipo de tarefa → domínio do produto → assinatura → estrutura + expressão. A diferença é o tempo gasto no mundo do produto antes de qualquer pensamento visual.

Produza todos os quatro antes de propor qualquer direção:

• Domínio — conceitos, metáforas, vocabulário do mundo deste produto. Não recursos — território. Mínimo de 5.
• Mundo de cores — que cores existem naturalmente aqui? Não "quente" ou "frio" — vá para o mundo real. Se este produto fosse um espaço físico, o que você veria? Liste 5+.
• Assinatura — um elemento (visual, estrutural ou de interação) que só poderia existir para ESTE produto. Se você não consegue nomear um, continue explorando.
• Defaults — 3 escolhas óbvias para este tipo de interface, visuais E estruturais. Você não pode evitar padrões que não nomeou.

O teste: Leia sua proposta com o nome do produto removido. Alguém poderia identificar para que serve? Se não, explore mais fundo.

---

Renderize Quando Puder

Se uma ferramenta de renderização visual inline estiver disponível na sessão (ex.: uma ferramenta show_widget / visualize que renderiza HTML ou SVG inline na conversa), prefira mostrar o design em vez de descrevê-lo. Uma direção presa em prosa é uma fração tão útil quanto uma que a pessoa possa olhar. Isto é condicional: quando nenhuma ferramenta assim estiver presente (CI, agentes headless, terminais simples), recorra a código, tokens e uma proposta escrita. Nunca assuma que a ferramenta existe; verifique, depois use-a.

Renderize em três momentos:

1. Propondo uma direção. Junto com o bloco Sugerir + Perguntar, renderize um pequeno espécime ao vivo: a paleta como amostras reais, a escala de tipo na fonte real, os passos de elevação de superfície como cartões empilhados, o elemento de assinatura como um componente real. A pessoa deve ver "quente como um caderno," não ler as palavras.
2. Projetando um componente. Renderize o componente real (ou um antes/depois justo, ambas as variantes lado a lado) para que as decisões de artesanato — espaçamento, bordas, hierarquia, estados — sejam visíveis, não afirmadas. Renderize os estados reais (padrão, hover, vazio, erro) onde importam.
3. Criticando ou auditando. Renderize a versão atual e a versão melhorada juntas para que a lacuna seja mostrada, não narrada.

Regras ao renderizar:

• O widget mostra apenas o visual. Todo o raciocínio, a exploração do domínio, a lista de defaults rejeitados e a recomendação permanecem no texto da sua resposta — nunca cole prosa no widget.
• Combine com o contrato de sistema de design da própria ferramenta de renderização (carregue seu read_me/orientação se tiver um). Use suas variáveis de tema para que o espécime herde o modo claro/escuro e se alinhe nativamente no host. Não lute contra o chrome do host.
• O espécime ainda deve passar nas verificações abaixo. Um default renderizado ainda é um default — renderizar é como o artesanato é visto, não um substituto para ele.
• Isto renderiza para a conversa, não para o projeto. A implementação real ainda chega ao código através de edições normais.

O ponto: colapsar o loop entre "aqui está meu pensamento" e "aqui está como parece" em uma única mensagem à qual a pessoa possa reagir.

---

Hierarquia Visual & Composição

O maior motor de "isto parece projetado" versus "isto parece gerado." Defaults produzem achatamento — tudo do mesmo tamanho, peso e espaçamento, então nada lidera e o olho não tem para onde ir. O artesanato produz hierarquia — o olho sabe instantaneamente o que importa. Estes são movimentos concretos, não vibes.

Um ponto focal por visualização

Cada tela tem uma coisa que o usuário veio fazer. Essa coisa domina — através de tamanho, contraste, posição ou o espaço ao redor dela. Quando tudo compete igualmente, nada vence e a interface parece um estacionamento. Antes de construir, nomeie o elemento focal em voz alta. Depois faça-o vencer: maior, maior contraste ou cercado por espaço em branco. Rebaixe todo o resto deliberadamente.

Escala de tipo é uma proporção, e peso vence tamanho

Não escolha tamanhos por intuição. Escolha uma proporção e aumente-a: ~1,2 (terça menor) para UI densa/calma, ~1,25 para a maioria da UI de produto, ~1,333 para expressiva. A partir de um corpo de 14–16px, isso produz uma escala visivelmente distinta, não uma mistura de 15/16/17. Uma base de 14px a 1,25: caption 11 · body 14 · h4 16 · h3 18 · h2 22 · h1 28 · display 44+. Arredonde para pixels inteiros e para sua grade de espaçamento.

O movimento Apple/Linear: peso e cor fazem mais trabalho de hierarquia do que tamanho. Um único tamanho de 14px mantém três níveis através de peso + opacidade sozinhos — valor: 600 / primário, rótulo: 500 / secundário, meta: 400 / muted — separando mais limpidamente do que dois pesos regulares dois pontos separados. Construa a partir de três alavancas juntas (tamanho, peso, cor/opacidade), nunca apenas tamanho. Se você apertar os olhos e não puder distinguir título de corpo de rótulo, a hierarquia é muito fraca.

Exemplo trabalhado — uma métrica, plana vs decidida. Plana: Receita / $48.200 ambos 14px regular cinza, três caixas idênticas, sem ponto focal. Decidida: RECEITA 11px/500/muted/rastreado · $48.200 28px/600/primário/números-tabulares (o herói) · ↑12% 12px/500/sucesso. Mesmos dados, legibilidade oposta — o valor lidera através de tamanho+peso+um acento, o rótulo é rebaixado, métricas secundárias caem para um nível inferior.

Densidade é uma decisão, expressa em px

Linear é apertado; Stripe é arejado. Nenhum é default — ambos são escolhidos, e a escolha é o mesmo número repetido em todo lugar. Decida a densidade antecipadamente e nomeie os valores: um painel de ferramentas com padding de 12–16px parece uma bancada de trabalho apertada; o mesmo cartão com 24px parece um folheto. O mesmo número pode estar certo em um contexto e preguiçoso em outro. Escolha deliberadamente, depois mantenha.

Ritmo espacial — respire desigualmente

Grandes interfaces não espaçam tudo igualmente. Zonas de controle densas dão lugar a conteúdo aberto; elementos pesados equilibram contra leves; o olho viaja com propósito. Layouts monótonos — mesmo tamanho de cartão, mesmo espaço, mesma densidade em todo lugar — são o som de ninguém decidindo. Varie o ritmo de propósito: agrupe coisas estreitamente relacionadas, depois coloque ar real entre grupos.

Proporções falam

Uma barra lateral de 280px ao lado de conteúdo de largura total diz "a navegação serve ao conteúdo." Uma barra lateral de 360px diz "estes são pares." O número específico declara o que importa. Se você não consegue articular o que uma proporção está dizendo, ela não está dizendo nada. Escolha larguras e proporções que declarem um relacionamento.

Distribuição e moderação (o visual "caro")

• ~60/30/10: uma superfície neutra dominante, um tom secundário e ~10% de acento. Cor é um recurso escasso — a maior parte da tela é estrutura.
• Um acento, usado com intenção, vence cinco cores usadas sem pensamento. Cinza constrói estrutura; cor comunica (status, ação, identidade). Cor sem motivação é ruído.
• Hierarquia através de espaço e peso, não linhas. Busque espaço em branco e mudança tonal antes de bordas e divisores. As interfaces mais premium são principalmente estrutura invisível.
• Tamanho óptico em tipos grandes: aperte o espaçamento entre letras à medida que o tipo cresce (títulos com tracking ligeiramente negativo); afrouxe a altura da linha no corpo para legibilidade (~1,5). Tipo apertado parece artesanal; tracking padrão em um título de 32px parece um documento.

---

Fundamentos do Artesanato

Camadas Sutis (a espinha dorsal)

Independentemente da direção, isso se aplica a tudo. Você deve mal notar o sistema funcionando — quando você olha para o dashboard da Vercel, você não pensa "boas bordas", você apenas entende a estrutura. Artesanato invisível é artesanato funcionando.

Elevação de superfície. Superfícies empilham: um dropdown está acima de um cartão está acima da página. Construa um sistema numerado — base, depois níveis crescentes. Cada salto é apenas alguns pontos percentuais de luminosidade — ex.: modo escuro base → +7% → +9% → +12%; modo claro permanece claro e adiciona sombra em vez disso. Você mal pode ver um passo isoladamente, mas empilhados, a hierarquia emerge. Mudanças sussurrantes que você sente em vez de ver.

• Barras laterais: mesmo fundo da tela, não uma cor diferente. Cores diferentes fragmentam o espaço em "mundo da barra lateral" e "mundo do conteúdo." Uma borda sutil é suficiente.
• Dropdowns/popovers: um nível acima da superfície pai, ou se misturam e a camada é perdida.
• Campos de entrada: ligeiramente mais escuros que o entorno, não mais claros. Entradas são encaixadas — recebem conteúdo. Um preenchimento mais escuro sinaliza "digite aqui" sem bordas pesadas.

Bordas. Devem desaparecer quando você não as está procurando, mas ser encontráveis quando você precisa de estrutura. rgba de baixa opacidade se mistura com o fundo e define uma borda sem exigir atenção; bordas hex sólidas parecem duras em comparação. Modo escuro vive em torno de rgba(255,255,255,0.06–0.12), modo claro ligeiramente maior. Construa uma progressão — padrão, separação mais suave, ênfase, anel de foco — e combine a intensidade com a importância do limite.

O teste de apertar os olhos: embace seus olhos na interface. Você ainda deve perceber hierarquia — o que está acima do que, onde as seções dividem — mas nada deve saltar. Sem linhas duras, sem mudanças chocantes. Apenas estrutura silenciosa. Erre isso e nada mais importa.

Expressão Infinita

Cada padrão tem expressões infinitas — nenhuma duas interfaces deve parecer igual. Uma exibição de métrica pode ser um número herói, estatística inline, sparkline, medidor, barra de progresso, delta de comparação ou selo de tendência. Mesma largura de barra lateral, mesma grade de cartão, mesmas caixas de métrica ícone-à-esquerda-número-grande-rótulo-pequeno toda vez sinaliza IA gerada imediatamente e é esquecível. Os cartões da Linear não se parecem com os da Notion; as métricas da Vercel não se parecem com as da Stripe. Mesmos conceitos, expressões infinitas. Antes de construir, pergunte: qual é a ÚNICA coisa que os usuários fazem aqui, e que produto resolve um problema semelhante brilhantemente?

Cor Vive em Algum Lugar

Cada produto existe em um ...

[...truncated for translation (conteúdo restante omitido para tradução)]