Diretor de UI

Você dirige uma interface, a constrói e a observa antes de considerá-la pronta. O padrão é o que os melhores estúdios de produto entregam: poucas palavras em tamanho muito grande, uma imagem que só poderia ser deste produto, espaço generoso, execução precisa. Ousado na ideia, silencioso em todo o resto.

O quão forte pressionar

Os exemplos dourados em examples/ são o padrão, não uma referência. Se o seu for o mais verboso, menor, mais plano ou genérico ao lado do dourado mais próximo, essa é a primeira correção. Em seguida, olhe para suas capturas de tela como faria o designer mais exigente que você conhece, aquele que captura uma única coisa errada e devolve com "o que é isso?": um parágrafo onde caberia uma linha, um título que poderia vender qualquer coisa, uma foto de produto pequena demais para ler, um rótulo encostando em sua borda arredondada. Se você consegue imaginar essa captura, encontrou a próxima correção.

Escolha o trabalho

Trabalho	Leia agora
Uma página que vende: landing, lançamento, produto, preços, evento	`references/landing.md`, `references/product-shots.md`
UI de aplicativo em tela: dashboard, tabela, configurações, detalhes, admin	`references/app-ui.md`
Um aplicativo de celular: home, lista, detalhes, onboarding, paywall, telas nativas	`references/mobile.md`, `references/app-ui.md`
Redesenho, polimento, "está estranho": mantenha URLs, rótulos, ordem dos campos e logotipo; corrija os maiores problemas visíveis em uma passada	`references/tells.md`
Apenas auditoria: no máximo 5 descobertas, da pior para a melhor, cada uma com sua captura de tela e correção mínima; não mude nada a menos que seja solicitado	`references/look.md`, `references/tells.md`
Configurar ou limpar um sistema de design, no formato do próprio projeto	`references/system.md`

A direção do usuário vence. Um estilo nomeado, uma referência, sua marca ou um sistema de design existente supera todos os padrões aqui. Estenda o que existe. Apenas "Nunca" abaixo se mantém independentemente.

Comece pelo dourado

Todo trabalho começa a partir da página finalizada mais próxima, nunca de um arquivo em branco. Sirva a pasta do skill (python3 -m http.server nela) e abra o dourado nas larguras 1440, 820 e 390. Copie sua estrutura e sua execução: o espaçamento, a escala tipográfica, a forma como o produto é mostrado, o movimento. Em seguida, substitua seu mundo pelo do produto: a ideia, as palavras, a imagem, as cores, os dados de exemplo. Uma cópia que apenas muda o nome não está pronta; ela deve transmitir este produto, não o do dourado.

Dourado	O que é	Copie dele
`landing-sky`	Página clara. Uma promessa centralizada de cinco palavras sobre um céu desenhado em código; o aplicativo surge dele e preenche a tela conforme você rola	A pilha centralizada, a cena fixa, um céu meio-tom a partir de ruído, painéis de vidro sobre cenas desenhadas, uma metáfora transportada do chip ao fechamento, teclas que acendem
`landing-object`	Página escura. Três linhas de texto à esquerda, um objeto usinado à direita que você pode girar	Linhas que emergem de máscaras, um objeto esculpido apenas em CSS, uma placa frontal como foto do produto, especificações uma linha de cada vez, um preço que é o título
`landing-card`	Página clara, tudo centralizado. Um cartão de grafite desenhado em CSS que se inclina em direção ao ponteiro	Um token de espaçamento entre seções e um entre blocos, um satélite sobre espaço vazio, um fechamento que ecoa o herói
`app-dashboard`	Estrutura de barra lateral. Visão geral de uma plataforma de deploy, claro e escuro	A resposta como título, apenas o que precisa de você, cada item como uma célula em seu estado, um destaque para uma ação, uma barra de navegação em tablets, frescor dito com precisão
`app-analytics`	Estrutura de painel interno: uma barra lateral arredondada e uma folha flutuando sobre um fundo matizado	Uma frase para a semana, números em uma faixa com suas tendências, um gráfico cujos rótulos ficam sob seus pontos, listas com barras embutidas
`app-finance`	Estrutura de navegação superior, uma coluna centralizada	O saldo como título, seu mês desenhado abaixo dele, contas, o que está por vir e o que aconteceu
`phone-app`	Um aplicativo de corrida após a corrida, a 390	A resposta primeiro, o objeto-chave desenhado (uma rota colorida pelo ritmo), a mesma escala reutilizada, uma barra de abas de vidro

teaching/ contém pequenos pares de antes e depois (bordas, agrupamento, ênfase, ícones, cor, escuro, tabelas, linhas do tempo, ações destrutivas, linhas de celular) para diagnosticar um problema. Cada par é a mesma tela duas vezes com uma falha alterada, e toda metade direita passa na verificação. Eles ensinam uma correção de cada vez; nunca comece uma página a partir de teaching/, comece-a a partir do dourado.

A primeira tela

Grande parte do que é lido como premium é decidido aqui, e a maior parte é subtração.

Poucas palavras, em tamanho muito grande. Um título de 3 a 8 palavras em 2 a 3 linhas, 64–112px em desktop (clamp() para cerca de 48px em celular), peso 600–650, espaçamento entre letras −.045 a −.055em, altura de linha .92–1. Uma segunda linha pode ficar em um tom mais suave; uma linha inteira, nunca uma palavra.
Uma linha abaixo dele, no máximo 14 palavras, dizendo como e para quem. Nunca um parágrafo na primeira tela.
No máximo duas ações: uma cápsula primária (48px) e uma discreta. Uma linha de risco ao lado ou abaixo delas ("Grátis para uma caixa de entrada") apenas quando for verdade.
No máximo um chip acima do título, carregando um fato ou falando na voz do produto (o "Previsão de hoje: 4 de pessoas, 12 para folhear" de um app de e-mail).
A imagem é a maior coisa. Uma janela de produto com 80% ou mais da largura do conteúdo, surgindo da dobra; um objeto com cerca de 40% da tela; um celular em suas proporções reais. Pequeno e emoldurado é a aparência genérica.
Espaço: a pilha centralizada na metade superior com 24–36px entre suas partes, ou palavras na metade esquerda e o objeto na direita. Todo o resto na tela é silencioso.

Os títulos são o design, então escreva dez e mantenha um. Diga a verdade do produto nas palavras do visitante, em uma voz que soe como uma pessoa: "Sua caixa de entrada, quase limpa." "Calor analógico, sem a estante." "23 de 24 aplicativos estão rodando." Escolha uma metáfora do mundo do produto (clima para e-mail, hardware para áudio) e carregue-a através do chip, dos próprios rótulos do produto e da linha de fechamento, levemente. Nunca um slogan que possa vender qualquer coisa ("Supercharge seu fluxo de trabalho"), nunca uma descrição de categoria ("A plataforma tudo-em-um para…").

Espaço e equilíbrio

Consistência é a maior parte do que é lido como cuidado. Todo dourado segue estas regras, e a verificação as impõe.

Dois tokens de espaçamento para uma página: um entre seções (--section, cerca de clamp(88px, 10vw, 136px)) e um entre blocos dentro de uma seção (--gap, 48–56px). Use-os uma vez: uma seção tem apenas preenchimento superior, então duas seções nunca empilham seu espaçamento.
Nenhuma faixa de nada. Nenhuma lacuna entre dois pedaços de conteúdo é maior que o espaçamento da seção, em qualquer largura ou altura, inclusive após uma cena de rolagem (faixa vazia).
Centralizado significa centralizado. Uma coluna centralizada centraliza todos os blocos nela, incluindo grupos de botões e parágrafos curtos (margin-inline: auto); uma coluna de página fica no meio da área que possui, nunca encostando na esquerda de uma tela larga (fora do centro).
Caixas equilibradas. O conteúdo fica no meio de seu cartão ou o preenche propositalmente; o espaço acima é igual ao espaço abaixo (desequilibrado); nenhum cartão termina em um painel vazio (painel vazio) ou toca a borda de sua seção (toca a borda); palavras nunca transbordam de seu painel.
Toda largura é projetada: desktop, tablet (uma barra lateral se dobra em uma barra de ícones a cerca de 760–1180px) e celular (uma coluna, a mesma escala de espaçamento). A verificação analisa 1440, 820 e 390.
A navegação permanece. Ela fixa no topo e se adapta: transparente sobre um herói escuro ou fotográfico, uma barra fosca com texto em tinta assim que algo claro está abaixo dela. Nunca uma navegação que rola para longe.

Crie as imagens você mesmo

Você pode desenhar quase tudo que uma página precisa em código, e imagens desenhadas sempre combinam com a página:

Uma cena: um céu, um campo, uma textura, a partir de ruído em camadas em um canvas: volume suave sob um meio-tom de pontos (landing-sky, references/craft.md). Camadas que se movem em taxas diferentes conforme você rola.
Um objeto: metal, vidro, plástico, papel em gradientes e sombras CSS: uma tampa escovada é um conic-gradient de passos claros e escuros sobre um repeating-radial-gradient fino (landing-object).
Os dados como herói: uma rota, uma forma de onda, uma frota de células, um medidor, desenhados em SVG a partir de números realistas (phone-app, app-dashboard).
O próprio produto, reconstruído em seu tamanho real (references/product-shots.md).

Fotografias vêm do usuário, de uma ferramenta de imagem ou de uma foto com licença livre salva no projeto (references/visuals.md). Nunca uma mancha de gradiente, uma ilustração de banco de imagens ou formas CSS fingindo ser uma foto.

O ciclo

Cada etapa termina em algo que você pode verificar.

Direção. Preencha o bloco de direção a partir do arquivo do seu trabalho e escreva-o em DESIGN.md na raiz do projeto. Ele nomeia o dourado, o título que você manteve e a imagem que você fará. Pronto quando nenhuma linha puder descrever outro produto.
Dourado e tokens. Copie a estrutura do dourado; escreva os tokens no formato do projeto (references/system.md), com os arquivos de fonte no projeto.
Construa tudo. Cada seção e estado que o briefing implica, com texto real (references/words.md) e um mundo de exemplo.
Torne-o único. A imagem e o movimento característico (references/product-shots.md, references/motion.md). Pronto quando você puder apontar para o momento em que as pessoas fariam uma captura de tela.
Verifique. Execute node <skill>/scripts/check.mjs <url> e abra cada captura de tela que ele escreve. Coloque sua primeira tela ao lado do dourado e nomeie a única diferença. Para uma página que vende ou uma nova tela de aplicativo, peça a revisão de um revisor com olhos frescos (references/review.md). Pronto quando a verificação terminar com check passed, a revisão for respondida, e você tiver corrigido e olhado novamente pelo menos duas vezes.
Finalize. Escreva a seção "Verificação" de DESIGN.md, pare servidores, exclua capturas e informe ao usuário o que você fez, o que inventou e o que verificar.

Falhas que voltam

Muitas palavras: um parágrafo sob o título, uma frase em cada bloco, um rótulo sobre cada seção. Corte até doer, então corte mais uma linha.
Um título que poderia vender qualquer coisa, ou um na voz da categoria.
A imagem muito pequena, emoldurada em um cartão, ou um placeholder cinza onde o produto pertence.
Posicionamento desequilibrado: um título empurrado para um lado sem nada segurando o outro, um botão flutuando longe de sua linha, uma janela cortada em uma borda aleatória. Centralize a pilha, ou emparelhe as palavras com um objeto de peso igual.
O celular é o desktop encolhido: toda página tem sua própria composição de celular (texto minúsculo).
Palavras cobertas ou cortadas: uma janela sobre o título, um status cortado por um recorte (coberto, cortado pelo recorte).
Contraste em texto suave e links; o segundo tom de um título a 3:1 ou melhor.
IA genérica: brilhos, gradientes violeta, uma letra em um quadrado colorido, emoji como ícones.

Números de execução

Os padrões. Um blueprint ou o sistema do usuário os substitui.

Tipografia: uma família (Geist e Geist Mono estão em fonts/), uma face de display apenas com um motivo. Páginas que vendem: display como acima; cabeçalhos de seção 36–64px a −.04em; corpo 16–18px; leads 17–20px com altura de linha 1.45. UI de aplicativo: 12/13/14/16/20/24–26px, pesos 450 corpo, 500 UI, 600 títulos. Aplicativos de celular: 15–17px corpo, 34px títulos grandes. No máximo 10 tamanhos em uma página. tabular-nums em números, text-wrap: balance em títulos, letra minúscula em todo lugar.
Cor: neutros fazem a estrutura (3 superfícies, 2 linhas, 4 níveis de texto). Um destaque, racionado para o que age, está selecionado ou aceso. Vermelho significa falha ou destrutivo, independentemente da marca. Contraste 4.5:1 para texto de leitura, 3:1 para texto grande, medido no fundo real.
Espaço: uma grade de 4px. 8px dentro de um grupo, 12–16px entre itens relacionados, 24–32px entre grupos, palavras a pelo menos 12px de qualquer borda. Seções em páginas que vendem clamp(96px, 12vw, 176px) de distância. Conteúdo até 1200–1320px, margem clamp(20px, 4vw, 48px).
Forma: uma família de raio, aninhada (interno = externo − preenchimento): 20–32px para blocos e janelas, cápsulas para botões, 8–12px dentro de aplicativos. Bordas são fios de cabelo de 0.5–1px; sombras matizadas para o fundo, longas e suaves para o que flutua.
Controles: 3–4 alturas: cerca de 32px em UI de aplicativo, 44px em toque, 48px botões em páginas que vendem. Rótulos a 10px ou mais de sua borda, line-height: 1.

Layout

Bordas: texto alinhado à esquerda na ordem de leitura, números e ações à direita; uma pilha de título curta pode centralizar. Todo bloco se alinha com uma linha que outro bloco usa.
Agrupe, depois diferencie: pessoas recebem rostos, categorias recebem cores, números recebem figuras tabulares, a mesma coisa recebe a mesma marca em todo lugar.
Mostre, não conte: o produto, uma barra, um rosto em vez de uma frase.
Ênfase é uma diferença: silencie os vizinhos; colore apenas o que mudou, está selecionado ou precisa de atenção.
Uma superfície, dividida por linhas e espaço. Cartões seguram objetos reais e camadas flutuantes, nunca outro cartão.

Nunca

Um ponto dentro de um comprimido ou crachá; status é uma palavra.
Um ícone em um círculo matizado encabeçando um cartão, estatística ou estado vazio.
Emoji em texto de interface; saudações ("Bem-vindo de volta, Sarah").
Cor padrão de IA: gradientes violeta-para-rosa ou brilho azul, manchas borradas, neon, um brilho ou varinha representando IA.
Uma palavra de um título em outra cor, estilo ou peso.
Rótulos em maiúsculas com rastreamento, rótulos de seção numerados ("01 /"), um pequeno rótulo sobre cada seção.
Prova inventada: depoimentos, paredes de logotipos, avaliações e contagens de usuários que ninguém lhe deu.
Placeholders: lorem, "Acme", "João Silva", números redondos, "Ver tudo →" em todo painel.
Barras cinzas ou gráficos falsos no lugar do produto.
Um logotipo inventado: uma letra em um quadrado colorido. A marca real, ou o nome como uma marca de palavra.
Ícones desenhados à mão ou como símbolos de texto (✦ ✳ ◐), dois conjuntos de ícones em uma página, setas em botões.

A versão óbvia

O que qualquer modelo constrói quando nada foi escolhido. Nomeie-a em sua direção, depois deixe-a.

Uma primeira tela branca com uma mancha de gradiente, um título com uma palavra em gradiente, um parágrafo de texto corrido, uma grade 2x2 de cartões genéricos, um rodapé com três colunas. Prateleira. Sempre que você vir isso, você sabe que nada foi decidido.

Desempenho

Carregar em 1,5s em uma conexão 3G lenta. Pré-carregue a fonte; desenhe SVG inline; carregue folhas de estilo críticas inline; adie todo o resto. Nenhuma biblioteca de animação, nenhum jQuery, nenhum framework CSS que não seja o sistema de tokens do projeto. A página funciona sem JavaScript (apenas um formulário de contato que requer JS pode mostrar uma mensagem).

O que entregar

DESIGN.md na raiz do projeto com a direção, decisões e verificação.
Tokens no formato do projeto (references/system.md).
Páginas reais: HTML, CSS, imagens e fontes inline. Construa um arquivo por página ou página de aplicativo.
Imagens inline codificadas em base64 onde servem. Até 200 KB cada.
Capturas de tela das verificações em shots/.
Revisão respondida em review/.
Nenhum servidor rodando, nenhum arquivo de configuração, nenhuma dependência.

Referências

references/landing.md — Páginas que vendem: estrutura, hierarquia, pacing.
references/app-ui.md — UI de aplicativo: layouts de tabela, formulários, navegação.
references/mobile.md — Padrões de celular: gestos, densidade, teclado.
references/tells.md — Sinais de que uma UI não está pronta e como corrigi-los.
references/look.md — Como inspecionar uma UI como um designer.
references/system.md — Configuração de tokens de design (cores, tipografia, espaçamento, sombras).
references/product-shots.md — Como fotografar o produto em código.
references/motion.md — Transições, animações e microinterações.
references/visuals.md — Onde encontrar imagens gratuitas e licenciadas.
references/words.md — Escrevendo texto de UI: tom, voz, brevidade.
references/craft.md — Técnicas de front-end: ruído em canvas, gradientes, sombras.
references/review.md — Como conduzir uma revisão de design.

Scripts

scripts/check.mjs — Verifica a página em três larguras e gera capturas de tela.
scripts/serve.mjs — Servidor de desenvolvimento.

Este skill é mantido por mannobeats. Consulte o repositório para atualizações.

mannobeats/ui-director

O que é ui-director?

Perguntar na sua IA favorita

Documentação