hackycy/product-ui-system

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. Este skill é como você chega lá.

Escopo

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

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

Este skill é autossuficiente: direção, hierarquia visual, arquitetura de sistema de design, e os essenciais de polimento e motion necessários para entregar 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 assim produzir um template: cores quentes em estruturas frias, fontes amigáveis em layouts genéricos.

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

A barra: Se outra IA, dado um prompt similar, 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 padrões, tudo parece igual, porque os padrões são compartilhados.

---

Onde os Padrões se Escondem

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

• Tipografia parece um contêiner. 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. Recorrer à sua fonte habitual significa que você não está projetando.
• Navegação parece um andaime. Mas a 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 um software.
• Dados parecem apresentação. Mas um número na tela não é design. O que significa para a pessoa que está 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 tokens parecem detalhe de implementação. Mas --ink e --parchment evocam um mundo; --gray-700 e --surface-2 evocam um template. Alguém lendo 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 isso?" é o momento em que os padrões assumem o controle.

---

Intenção Primeiro

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

• Quem é este humano? Não "usuários." A pessoa real. Onde ela está quando abre isto? O que fez 5 minutos atrás, o que fará 5 minutos depois? Um professor às 7h com café não é um desenvolvedor depurando à meia-noite não é um fundador entre reuniões com investidores.
• O que eles devem realizar? O verbo. Avaliar 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 isso deve parecer? Em palavras que significam algo. "Limpo e moderno" não significa nada — toda IA diz isso. Aconchegante como um caderno? Frio como um terminal? Denso como uma sala de negociações? Calmo como um aplicativo de leitura? Isso molda cor, tipo, espaçamento, densidade — tudo.

Se o prompt for muito vago para identificar o humano, a tarefa e a sensação, faça uma pergunta concisa. Se o contexto permitir uma suposição responsável, declare-a brevemente e prossiga.

A intenção deve ser sistêmica. Dizer "aconchegante" e depois usar cores frias não é seguir em frente. Se a intenção é aconchegante: superfícies, texto, bordas, acentos, cores semânticas, tipo — tudo aconchegante. Se denso: 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, família tipográfica, escala de espaçamento, hierarquia — você deve ser capaz de dizer por quê. "É comum" ou "funciona" significa que você usou o padrão.

---

Exploração do Domínio do Produto

É aqui que os padrões 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 deste mundo do produto. Não recursos — território. Mínimo de 5.
• Mundo de cores — que cores existem naturalmente aqui? Não "quente" ou "frio" — vá ao 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.
• Padrões — 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 (por exemplo, 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. Isso é condicional: quando nenhuma ferramenta desse tipo estiver presente (CI, agentes headless, terminais simples), recorra a código, tokens e uma proposta escrita. Nunca presuma que a ferramenta existe; verifique, então 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 tipográfica na família tipográfica 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 "aconchegante como um caderno," não ler as palavras.
2. Projetando um componente. Renderize o componente real (ou um antes/depois justaposto, ambas as variantes lado a lado) para que as decisões de artesanato — espaçamento, bordas, hierarquia, estados — sejam visíveis, não apenas afirmadas. Renderize os estados reais (padrão, hover, vazio, erro) onde eles 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 o visual apenas. Todo raciocínio, a exploração do domínio, a lista de padrões rejeitados e a recomendação permanecem no texto da sua resposta — nunca cole prosa dentro do widget.
• Corresponda ao 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 encaixe nativamente no host. Não lute contra o chrome do host.
• O espécime ainda deve passar nas verificações abaixo. Um padrão renderizado ainda é um padrão — renderizar é como o artesanato é visto, não um substituto para ele.
• Isso renderiza para a conversa, não para o projeto. A implementação real ainda cai no código base por meio de edições normais.

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

---

Hierarquia Visual e Composição

O maior impulsionador individual de "isso parece projetado" versus "isso parece gerado." Padrões 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, mais contrastante, ou cercado por espaço em branco. Rebaixe todo o resto deliberadamente.

Escala tipográfica é uma proporção, e peso vence tamanho

Não escolha tamanhos por intuição. Escolha uma proporção e aplique-a em passos: ~1.2 (terça menor) para UI densa/calma, ~1.25 para a maioria das UI de produto, ~1.333 para expressiva. A partir de um corpo de 14–16px, isso produz uma escala visivelmente distinta, não uma papa de 15/16/17. Uma base de 14px em 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 sustenta três níveis através de peso + opacidade combinados — value: 600 / primary, label: 500 / secondary, meta: 400 / muted — separando mais claramente 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 consegue distinguir título de corpo de rótulo, a hierarquia é muito fraca.

Exemplo prático — uma métrica, plana vs decidida. Plana: Revenue / $48.200 ambos 14px regular cinza, três caixas idênticas, nenhum ponto focal. Decidida: RECEITA 11px/500/muted/tracked · $48.200 28px/600/primary/tabular-nums (o herói) · ↑12% 12px/500/success. 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 é justo; Stripe é arejado. Nenhum é padrão — ambos são escolhidos, e a escolha é o mesmo número repetido em todos os lugares. Decida a densidade de antemão e nomeie os valores: um painel de ferramentas com padding de 12–16px parece justo como uma bancada de trabalho; 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-o.

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 os leves; o olho viaja com propósito. Layouts monótonos — mesmo tamanho de cartão, mesmo espaçamento, mesma densidade em todos os lugares — são o som de ninguém decidindo. Varie o ritmo de propósito: agrupe coisas intimamente relacionadas, depois coloque ar real entre os grupos.

Proporções falam

Uma barra lateral de 280px ao lado de conteúdo em largura total diz "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 (a aparência "cara")

• ~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 desmotivada é ruído.
• Hierarquia através de espaço e peso, não linhas. Alcance para espaço em branco e mudança tonal antes de bordas e divisores. As interfaces mais premium são principalmente estrutura invisível.
• Dimensionamento óptico em tipos grandes: aperte o espaçamento entre letras à medida que o tipo fica maior (títulos com tracking ligeiramente negativo); afrouxe a altura da linha no corpo para legibilidade (~1.5). Tipo justo parece artesanal; tracking padrão em um título de 32px parece um documento.

---

Fundamentos do Artesanato

Camadas Sutiis (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 "belas bordas," você simplesmente entende a estrutura. Artesanato invisível é artesanato funcional.

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

• Barras laterais: mesmo fundo que a 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 eles se misturam e a camada é perdida.
• Campos de entrada: ligeiramente mais escuros que o entorno, não mais claros. Campos de entrada são rebaixados — eles recebem conteúdo. Um preenchimento mais escuro sinaliza "digite aqui" sem bordas pesadas.

Bordas. Devem desaparecer quando você não está procurando por elas, 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 ásperas em comparação. Modo escuro vive em torno de rgba(255,255,255,0.06–0.12), modo claro ligeiramente mais alto. Construa uma progressão — separação padrão, mais suave, ênfase, anel de foco — e corresponda a intensidade à importância do limite.

O teste do apertar os olhos: embaixe os 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 ásperas, sem mudanças chocantes. Apenas estrutura silenciosa. Entenda isso errado e nada mais importa.

Expressão Infinita

Cada padrão tem expressões infinitas — duas interfaces não devem parecer iguais. Uma exibição de métrica poderia ser um número herói, estatística inline, sparkline, medidor, barra de progresso, delta de comparação, ou crachá de tendência. Mesma largura de barra lateral, mesma grade de cartões, mesmas caixas de métricas ícone-esquerda-número-grande-rótulo-pequeno toda vez sinaliza gerado por IA imediatamente e é esquecível. Os cartões da Linear não parecem com os do Notion; as métricas da Vercel não 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 similar de forma brilhante?

Cor Vive em Algum Lugar

Cada produto existe em um...