kasonye/ui-aesthetics-skill

Estética de UI

Intenção

Use esta skill para fazer com que a saída de UI web pareça mais profissional, estável e com qualidade de produto.

Metas padrão:

• preservar o escopo do artefato solicitado pelo usuário e a pegada de conteúdo
• produzir uma composição equilibrada antes de adicionar decoração
• tornar a hierarquia legível à primeira vista
• manter as cores contidas, mas com aparência cara
• usar sombras, desfoque, brilho e realces apenas quando eles esclarecem a profundidade
• manter o movimento curto, suave e útil
• fazer com que os componentes pareçam precisos antes de parecerem estilizados
• manter estados, movimento e profundidade dentro de um único sistema coerente

Esta skill é agnóstica em relação a frameworks. Julgue não apenas a composição da página, mas também a precisão dos componentes, o comportamento dos estados, a gramática do movimento e a disciplina de profundidade. Lidere com julgamento de design, depois implemente.

Roteamento de Tarefas

Classifique a solicitação antes de agir:

1. Geração Use quando o usuário quiser uma nova página, seção ou componente.
2. Revisão Use quando o usuário quiser crítica, descobertas ou um diagnóstico de por que a UI parece fraca.
3. Refatoração Use quando o usuário quiser que a implementação existente seja reescrita diretamente.
4. Polimento de Componente Use quando a estrutura for aceitável, mas os controles, cartões, tabelas, modais ou sobreposições ainda parecerem genéricos ou baratos.
5. Refinamento de Estado / Movimento Use quando hover, foco, pressionado, selecionado, carregamento, sucesso, erro ou transições parecerem ruidosos, fracos ou teatrais.
6. Refinamento de Profundidade / Iluminação Use quando sombras, realces, brilho, desfoque ou separação no modo escuro precisarem de disciplina mais rigorosa.

Se a solicitação misturar revisão e refatoração, diagnostique primeiro, depois escolha a profundidade da reescrita antes de editar.

Inegociáveis

• Respeite exatamente o escopo solicitado: um componente continua sendo um componente, um conjunto de cartões continua sendo um módulo limitado, uma seção continua sendo uma seção, e uma página só se torna uma página quando solicitado.
• Decida a tese visual antes de tocar na implementação.
• Fixe o tipo de artefato antes de estilizar: não transforme prompts de cartão, widget, modal, painel ou seção em landing pages ou dashboards completos.
• Faça com que o layout, o espaçamento e a hierarquia tipográfica carreguem a maior parte da qualidade.
• Prefira agrupamento espacial em vez de moldura padrão sempre que o espaçamento puder transmitir o relacionamento.
• Trate "premium" como contenção, consistência e precisão, não como ruído visual.
• Use menos contêineres, menos acentos e menos ideias simultâneas.
• Se o artefato solicitado for uma página, use por padrão uma composição em viewport total que preencha a largura da tela em vez de uma pequena tela centralizada.
• Para páginas de plataforma, mercado, e-commerce ou portal, use por padrão um esqueleto de página de largura total e restrinja o conteúdo interno intencionalmente, em vez de prender toda a experiência dentro de um único painel centralizado.
• Por padrão, preserve a densidade de informações e a pegada de texto do usuário.
• Não adicione copy de herói, parágrafos de marketing, navegação, rodapé, seções de recursos, badges ou clusters de CTA a menos que a solicitação os exija.
• Mantenha os cartões comuns concisos. Prefira rótulos fortes, valores e textos de apoio compactos em vez de textos inventados.
• Prefira superfícies neutras nítidas ou ligeiramente frias por padrão; não use creme, bege, marfim ou off-white quente como um sinal automático de premium.
• Mantenha o polimento do componente subordinado à composição da página.
• Trate controles relacionados como membros de um único sistema geométrico e comportamental.
• Mantenha os estados padrão visualmente silenciosos; reserve ênfase mais forte para estados de interação e semânticos.
• Prefira layouts equilibrados e estáveis em vez de tensão, assimetria ou provocação visual.
• Não introduza assimetria ou contraste exagerado apenas para evitar parecer modelado.
• Diferencie o estado selecionado persistente do feedback transitório ativo ou pressionado.
• Use profundidade apenas quando ela explicar camadas, separação de material ou foco.
• Trate o brilho como excepcional, não estrutural.
• Faça do mobile um layout recomposto, não um desktop espremido.
• Mantenha o resultado entregável e sustentável.

Ordem de Prioridade

Trabalhe nesta ordem, a menos que a tarefa exija claramente uma sequência diferente:

1. Escopo solicitado e limites do artefato
2. Composição e equilíbrio estrutural
3. Ritmo de espaçamento e densidade de informação
4. Tipografia e ajuste de texto
5. Artesanato do componente
6. Estados de interação e comportamento
7. Sistema de cores e contenção semântica
8. Marcadores de profundidade: borda, sombra, desfoque, realce
9. Movimento, feedback e transições

Se a página ainda falhar em escala de cinza, a estrutura ainda não está resolvida.

Fluxo de Trabalho

Geração

1. Identifique o tipo de artefato solicitado e o escopo rígido: componente único, conjunto de componentes, seção ou página inteira.
2. Infira função, público e densidade dentro desse escopo em vez de expandi-lo.
3. Nomeie a impressão desejada em uma frase curta, como clareza calma do produto, polimento empresarial ou precisão silenciosa.
4. Escolha um bloco primário estável e módulos de suporte antes de escrever a marcação.
5. Se a solicitação for para um cartão ou componente, use apenas a tela circundante mínima necessária para apresentá-lo claramente.
6. Preserve a pegada do texto, a menos que o usuário peça design de conteúdo. Aperte o texto se necessário, mas não invente texto explicativo extra.
7. Se a solicitação for para uma página, deixe o layout externo ocupar a viewport por padrão, em vez de flutuar como uma laje estreita centralizada.
8. Para páginas de plataforma ou e-commerce, expanda o esqueleto da página primeiro: deixe a navegação, o enquadramento do herói, os trilhos de categoria, as zonas de campanha e os fluxos de produto respirarem pela viewport antes de colocar módulos individuais em cartões.
9. Defina a lógica de cores: neutros primeiro, acento depois.
10. Faça com que as métricas, estados e comportamento dos componentes pareçam sistematizados antes de adicionar polimento.
11. Adicione profundidade e movimento somente depois que a composição estática funcionar.
12. Torne o comportamento de desktop e mobile explícito quando o artefato solicitado realmente abranger ambos.

Leia references/design-principles.md quando a direção visual ainda estiver vaga. Leia references/color-system.md quando a paleta parecer alta, plana ou barata. Leia references/component-aesthetics.md quando a solicitação se concentrar em controles, formulários, cartões, tabelas ou sobreposições. Leia references/interaction-states.md quando o comportamento de hover, foco, ativo, selecionado, carregamento, sucesso ou erro for importante. Leia references/motion-principles.md para disciplina geral de movimento. Leia references/motion-patterns.md quando transições, comportamento de hover ou movimento de revelação precisarem de mais controle. Leia references/depth-lighting-system.md quando sombras, realces, brilho, desfoque ou lógica de elevação do modo escuro precisarem de controle mais rigoroso. Leia references/style-archetypes.md quando o usuário pedir uma personalidade visual mais específica.

Revisão

1. Comece com a maior falha estrutural, não com trivia de CSS.
2. Explique se o problema é hierarquia, densidade, qualidade do componente, comportamento do estado, paleta, profundidade ou movimento.
3. Vincule cada descoberta à legibilidade, confiança, foco ou clareza da ação.
4. Prefira correções diretas a linguagem de gosto genérica.

Use references/review-rubric.md para estruturar as descobertas. Use references/anti-patterns.md quando a UI parecer gerada por IA ou superficialmente premium. Use references/color-system.md quando a principal fraqueza for a disciplina da paleta ou o uso indevido de acentos. Use references/component-aesthetics.md quando a principal fraqueza for a qualidade dos controles, cartões, tabelas ou sobreposições. Use references/interaction-states.md quando a principal fraqueza for o comportamento de hover, foco, ativo, selecionado, carregamento ou erro. Use references/motion-principles.md e references/motion-patterns.md quando a principal fraqueza for a qualidade da animação, temporização ou comportamento de feedback. Use references/depth-lighting-system.md quando a principal fraqueza for névoa de sombra, uso indevido de brilho, fraca camada ou profundidade no modo escuro.

Refatoração

1. Escolha polimento leve, reestruturação média ou reconstrução completa.
2. Corrija o layout e o agrupamento antes dos cosméticos do componente.
3. Reduza a estilização fraca de volta para a estrutura em escala de cinza quando a hierarquia não estiver clara.
4. Reconstrua as métricas do componente e a lógica de estado antes de adicionar polimento.
5. Reintroduza apenas a cor, profundidade e movimento que a interface ainda precisa.
6. Reconstrua o mobile intencionalmente se a estrutura do desktop não for traduzida.
7. Declare o nível de reescrita, a falha central e a direção pretendida antes de editar.

Use references/rewrite-playbook.md antes de mudanças visuais amplas. Use references/component-aesthetics.md antes de reescritas amplas de controle ou sobreposição. Use references/interaction-states.md antes de alterar o comportamento entre estados. Use references/color-system.md antes de reescrever uma paleta ruidosa. Use references/motion-principles.md e references/motion-patterns.md antes de adicionar ou simplificar transições. Use references/depth-lighting-system.md antes de adicionar ou remover lógica de elevação, brilho ou realce.

Política de Anti-Padrões

Rejeite saídas que dependam de:

• inflação de escopo que transforma uma solicitação de componente em uma página inteira, shell de dashboard ou layout de landing
• inflação de texto decorativo que adiciona descrições de preenchimento, badges, estatísticas ou blocos de CTA não solicitados
• layouts em nível de página presos dentro de shells centrados desnecessariamente estreitos sem um motivo de conteúdo
• páginas de plataforma ou e-commerce colocadas em um único cartão centralizado superdimensionado em vez de usar um esqueleto de página de largura total
• layouts de herói centralizado empilhado mais grade de cartão modelados
• layouts instáveis ou assimétricos forçados usados para criar tensão
• módulos de peso igual sem uma ordem de leitura clara
• muitas superfícies, traços, pílulas e raios
• neutros creme, bege, marfim ou off-white quente usados como atalho padrão para "premium"
• cores de acento altas em neutros instáveis
• estados padrão que já gastam muita ênfase
• comportamento de hover, pressionado ou revelação que transforma a interação em coreografia
• estados selecionados que parecem feedback de clique
• brilho, sombra, desfoque ou gradientes usados para fingir sofisticação
• animação que chama a atenção para si mesma em vez de guiar a percepção
• sistemas de profundidade onde tudo flutua ao mesmo tempo
• tratamentos visuais fortes projetados para impressionar antes de esclarecer
• layouts mobile que apenas recolhem colunas sem recompor a ênfase

Leia references/anti-patterns.md quando o resultado parecer polido, mas ainda barato.

Autocrítica

Antes da saída final, verifique:

• O resultado permaneceu dentro do escopo solicitado pelo usuário sem inventar uma página em torno dele?
• A primeira leitura é óbvia em três segundos?
• O layout ainda parece crível e bem equilibrado sem gradientes e sombras?
• Se for uma página, a composição realmente ocupa a largura da tela por padrão?
• Se for uma página de plataforma ou e-commerce, o esqueleto externo se expande pela viewport enquanto apenas as áreas de conteúdo interno permanecem restritas?
• O texto permaneceu tão curto quanto a tarefa permite, especialmente em cartões comuns?
• Os neutros são calmos e consistentes o suficiente para que a cor de acento signifique algo?
• A paleta evitou usar padrão de dicas de luxo cremosas ou branco-quentes sem um motivo de conteúdo?
• Os controles relacionados compartilham alturas compatíveis, lógica de preenchimento e disciplina de raio?
• Os estados padrão são silenciosos o suficiente para deixar espaço para estados de foco, ativo e erro?
• Os estados selecionado e pressionado são claramente distintos?
• Os componentes parecem relacionados sem todos terem o mesmo peso?
• Sombras e realces descrevem profundidade em vez de criar névoa?
• Em UI escura, a profundidade vem da hierarquia de superfície e definição de borda antes do desfoque e sombra?
• O brilho é raro o suficiente para ainda significar algo?
• Os tempos de movimento parecem controlados e breves?
• O movimento reforça a lógica de interação em vez de se tornar coreografia?
• A composição permaneceu equilibrada em vez de se tornar chamativa?
• A primeira viewport mobile preserva a mesma mensagem ou ação principal?
• A atualização removeu ruído em vez de adicionar mais estilização?

Referências

• Regras principais de design: references/design-principles.md
• Regras do sistema de cores: references/color-system.md
• Regras de artesanato de componentes: references/component-aesthetics.md
• Regras de estados de interação: references/interaction-states.md
• Regras de movimento: references/motion-principles.md
• Regras de padrões de movimento: references/motion-patterns.md
• Regras de profundidade e iluminação: references/depth-lighting-system.md
• Arquétipos de estilo: references/style-archetypes.md
• Padrões de falha: references/anti-patterns.md
• Estrutura de revisão: references/review-rubric.md
• Profundidade de reescrita e contrato de saída: references/rewrite-playbook.md
• Exemplos destilados de julgamento: references/distilled-examples.md