Hallmark: interfaces com variedade estrutural e revisão explícita

ANÁLISE EDITORIAL

Uma interface pode estar tecnicamente correta e ainda parecer montada pelo mesmo molde usado em centenas de páginas. Hero centralizado, três cartões idênticos, gradiente decorativo, números sem fonte e uma navegação genérica não são apenas escolhas visuais. Eles revelam que ninguém relacionou o desenho ao público, ao trabalho que a página precisa realizar e aos limites do produto.

A Hallmark transforma essa crítica em um procedimento para agentes de código. A Skill inspeciona o projeto existente, escolhe uma estrutura compatível com o contexto, preserva tokens e convenções locais, separa criação, auditoria, redesenho e estudo de referências, e termina com uma bateria explícita de revisão. Esta página descreve a versão 1.1.0 fixada no commit 13ac0ec7e148655948100b6396439e481361d690.

Ela não garante bom gosto, não cria identidade de marca sozinha e não substitui pesquisa com usuários. Também não autoriza copiar uma página admirada. Seu valor está em reduzir decisões automáticas e tornar o processo visual mais verificável.

O que esta Skill faz

A Hallmark oferece quatro rotas. O modo padrão cria uma interface nova. hallmark audit lê o alvo e devolve uma lista priorizada de problemas, sem editar. hallmark redesign preserva conteúdo, arquitetura de informação, rotas e fronteiras do projeto, mas refaz a camada visual necessária. hallmark study analisa uma imagem ou URL para extrair estrutura, tipografia, cor e ritmo, sem reproduzir pixels.

O SKILL.md auditado começa por um pré-voo. Ele procura sistema de design, fontes, paleta, biblioteca de movimento, escala de espaçamento e framework. Se o projeto já tiver design.md, tokens ou estilos globais, a orientação é reaproveitar o que existe em vez de criar um sistema concorrente.

Depois, a Skill diferencia uma página de um componente. Um botão isolado não deve receber a mesma estrutura de uma landing page. No escopo de componente, ela exige oito estados visíveis: padrão, hover, foco, ativo, desabilitado, carregando, erro e sucesso. No escopo de página, escolhe gênero visual, macroestrutura, tema, navegação, rodapé e enriquecimento compatíveis com o briefing.

Para quem serve

A Hallmark serve a pessoas que usam agentes para construir ou revisar interfaces em HTML, CSS e frameworks web. É útil para designers que querem transformar critérios visuais em instruções reproduzíveis, para desenvolvedores que precisam evitar mudanças destrutivas e para equipes que recebem páginas funcionais, mas genéricas, de um fluxo de geração assistida.

Ela também ajuda em auditorias. O catálogo de antipadrões nomeia problemas como hero de gradiente roxo, três cartões iguais, navegação genérica, rodapé genérico, métricas inventadas, estados acessíveis apenas por hover e improvisação de cores no meio da implementação. Nomear o defeito facilita discutir prioridade e correção com evidência.

Não é uma Skill de lógica de negócio. Autenticação, pagamentos, banco de dados, regras de domínio e integrações continuam sendo trabalho do projeto. A Hallmark pode orientar a superfície dessas funções, mas não deve inventar o comportamento. Para uma crítica concentrada em princípios gerais, a Open Design Critique é complementar. Para acessibilidade técnica, a WCAG Audit Patterns cobre outro eixo.

Origem, adoção e versão

A origem auditada é o repositório Nutlope/hallmark. Em 17 de setembro de 2026, a API pública do GitHub registrava 28.763 estrelas e 1.480 forks. O repositório não estava arquivado e declarava licença MIT.

A curadoria fixou o commit 13ac0ec7e148655948100b6396439e481361d690. O frontmatter do SKILL.md declara a versão 1.1.0. Estrelas podem mudar e não provam qualidade do resultado, mas mostram adoção suficiente para a regra de entrada do catálogo. O commit, não a contagem, é a referência reprodutível do pacote.

O README fixado documenta instalação para Codex, Claude Code e Cursor, demonstra os quatro verbos e apresenta exemplos produzidos pelo projeto. As demonstrações são material do mantenedor, não resultados gerados ou verificados pelo Bastidores.

Compatibilidade e pré-requisitos

A Skill é compatível com clientes capazes de carregar uma pasta com SKILL.md e referências Markdown. O README cita Codex, Claude Code e Cursor. O cliente precisa ler arquivos do projeto para o pré-voo e, quando autorizado, escrever componentes, estilos, tokens e registros locais de diversidade.

Antes do primeiro uso, forneça o repositório correto, o escopo da página ou componente, o público, a ação principal e um tom específico. “Limpo e moderno” não é aceito como direção suficiente. Editorial, utilitário, técnico, austero, lúdico ou luxuoso são exemplos mais úteis porque alteram estrutura, tipografia e movimento.

Também é necessário ter conteúdo real ou placeholders claramente marcados. A Hallmark proíbe inventar métricas, depoimentos, logotipos e estudos de caso para preencher uma composição. Se a página depende de números ainda não confirmados, use um espaço identificado como pendente ou escolha outra macroestrutura.

Instalação

O mantenedor documenta instalação pelo Skills CLI:

npx skills add nutlope/hallmark

Esse comando consulta a rede e grava arquivos. Execute primeiro em um projeto de teste, confira a origem do pacote e revise todo o diff. Para uma instalação manual, copie a pasta skills/hallmark do commit auditado para o diretório de Skills reconhecido pelo cliente.

No Codex, a instalação pessoal pode ficar em ~/.codex/skills/hallmark/, enquanto a instalação por projeto pode usar .codex/skills/hallmark/. Prefira o escopo do projeto quando a Skill for necessária apenas para um trabalho. Isso reduz influência sobre tarefas sem relação com design.

O download local do Bastidores preserva os 107 arquivos Markdown da Skill, a licença MIT e ORIGEM.md. Ele não contém o site de demonstração nem dependências de build. É um pacote documental completo para o procedimento, mas a execução depende das ferramentas do cliente e do projeto aberto.

Configuração antes do primeiro uso

Defina primeiro se o pedido é criação, auditoria, redesenho ou estudo. Essas rotas têm efeitos diferentes. Auditoria é somente leitura. Redesenho pode editar arquivos existentes. Estudo de URL ou imagem deve produzir diagnóstico antes de qualquer reconstrução e precisa respeitar autoria, licenças e a proibição de clonagem.

Em um projeto existente, registre os arquivos que podem ser modificados. A Skill orienta anunciar criações, alterações e exclusões antes de agir. Exclusões de arquivos de produção exigem autorização explícita. Uma solicitação de “redesenhar” não autoriza remover rotas, componentes ou estilos fora do escopo.

Revise ainda a política de fontes e ativos. A documentação diferencia fontes gratuitas de opções pagas e orienta confirmar a licença antes de usar uma família comercial. Imagens, ícones, vídeos e animações também precisam de origem e permissão. O fato de uma referência estar acessível na web não concede direito de reprodução.

Primeiro uso seguro

Comece com hallmark audit em uma página pequena. Como o verbo não edita, ele permite avaliar a qualidade do diagnóstico sem arriscar o projeto. Confira se cada achado aponta para código ou comportamento observável, se a prioridade faz sentido e se a correção respeita o sistema existente.

Depois escolha um componente de baixo risco, como um botão de ação secundário. Exija os oito estados em uma página de prévia separada. Teste teclado, foco visível, contraste, redução de movimento e largura móvel. Compare o componente com os tokens do projeto e rejeite qualquer cor ou fonte improvisada fora do sistema.

O resultado esperado desse primeiro uso é um diagnóstico verificável e, numa segunda etapa, um componente isolado com todos os estados visíveis. Não é necessário redesenhar a aplicação inteira para validar a Skill.

Como o fluxo organiza o trabalho

O modo de criação começa lendo o projeto. Depois pergunta público, caso de uso e tom. Se o usuário delegar essas escolhas, o agente deve declarar o que inferiu. Em seguida seleciona um gênero visual e uma macroestrutura que não repita automaticamente a última saída do mesmo projeto.

A referência de estrutura separa variedade visual de variedade estrutural. Trocar apenas cores e fontes não basta se todas as páginas repetem a sequência hero, três benefícios, chamada e rodapé. A Skill mantém um registro local para evitar essa repetição dentro do mesmo projeto.

Antes da entrega, o processo carrega o slop-test e o contrato de saída. A revisão cobre hierarquia, especificidade, variedade, estados, responsividade, contraste, tipografia, conteúdo honesto e aderência ao escopo. Uma nota abaixo do mínimo exige outra passagem.

Resultado esperado

Uma criação nova deve entregar arquivos compatíveis com o framework existente, tokens concentrados em um único lugar, estrutura coerente com o briefing, estados interativos e uma prévia que permita revisão. O CSS recebe um registro curto do gênero, tom, cor de referência e impressão estrutural.

Uma auditoria deve devolver achados priorizados sem editar. Um redesenho deve preservar intenção, conteúdo, rotas e propriedade dos componentes, alterando apenas a camada visual necessária. Um estudo deve produzir uma leitura de estrutura e linguagem visual, não uma cópia fiel.

O resultado continua sendo uma proposta. Ele precisa de revisão humana, testes responsivos e validação no produto real. A Hallmark organiza critérios, mas não observa usuários, não mede conversão e não demonstra que uma escolha estética atende ao negócio.

Permissões e riscos

O uso funcional pode ler todo o projeto, criar arquivos de pré-voo e histórico, editar componentes e estilos, buscar URLs públicas, analisar capturas e instalar dependências conforme a tarefa. Cada capacidade deve ser limitada ao repositório e ao escopo aprovados.

O verbo study merece cuidado especial. Uma página pública pode ter direitos autorais, marca, fontes e ativos protegidos. A própria Skill afirma que deve extrair princípios, não pixels, e recusa mercados de templates e situações ambíguas. Não use o fluxo para reproduzir trabalho de terceiros ou contornar acesso.

Há também risco de excesso de confiança. Uma lista longa de gates pode criar aparência de objetividade, mas muitos critérios são julgamentos editoriais. Um relatório de auditoria não é teste com usuários nem certificação de acessibilidade. Trate pontuações como apoio à revisão, não como selo.

O projeto possui discussões públicas sobre contradições documentais. Isso reforça a necessidade de ler o commit fixado e testar o procedimento no contexto real. Não trate uma instrução extensa como automaticamente consistente.

Erros comuns e como corrigir

A Skill ignora o design existente

Confirme se o pré-voo leu design.md, tokens, estilos globais, configuração do framework e fontes. Se houver conflito, resolva-o antes de gerar. Não aceite um segundo sistema de tokens criado em paralelo.

Todas as páginas continuam parecidas

Leia o registro de macroestruturas e escolha uma categoria realmente diferente. Trocar paleta sem mudar ritmo, navegação e distribuição do conteúdo não produz variedade estrutural.

O componente funciona apenas com mouse

Volte ao fluxo de componente e implemente foco visível, teclado, estado ativo, desabilitado, carregando, erro e sucesso. Uma prévia com todos os estados permite descobrir o que desapareceria num teste por hover.

O layout usa números ou depoimentos inventados

Remova a alegação, marque o dado como pendente ou escolha outra estrutura. Nunca invente prova social para satisfazer um espaço visual.

O redesenho removeu arquivos demais

Pare e restaure a partir do controle de versão. A Hallmark orienta edição no lugar e mudanças aditivas por padrão. Exclusões múltiplas precisam de plano de arquivos e confirmação explícita.

O estudo de referência parece uma cópia

Separe estrutura, tipo, cor e ritmo em conceitos. Use o conteúdo e a identidade do próprio projeto. Se a semelhança depende de copiar composição, ativos ou texto, descarte a direção.

Versão, licença e pacote auditado

O pacote foi montado a partir da versão 1.1.0 no commit 13ac0ec7e148655948100b6396439e481361d690. Ele contém 109 arquivos: 107 Markdown da pasta da Skill, o LICENSE e ORIGEM.md. O SHA-256 do ZIP é a8ee76fa7e94db2fd3c906aff2855b1202192ffdb5fda008d4125e0959dfd497.

A licença MIT permite redistribuição com preservação do aviso de copyright e da licença. Consulte o LICENSE fixado. ORIGEM.md registra projeto, caminho, commit, data e exclusões deliberadas.

Limites do pacote local

O ZIP não contém o site oficial, exemplos renderizados, capturas, imagens, vídeos, fontes, componentes da demonstração, scripts de build, dependências, lockfiles, binários, executáveis ou resultados. Também não contém projetos do leitor, design.md, tokens, arquivos de pré-voo, histórico local, dados, chaves, tokens ou credenciais.

Os 107 documentos da pasta da Skill foram preservados porque o SKILL.md carrega referências diferentes conforme verbo, gênero, tema e etapa. Remover esses arquivos tornaria o procedimento incompleto. Ainda assim, o pacote não executa nada sozinho. O cliente decide o que ler e quais permissões conceder.

Checklist antes de usar

• Fixe commit, versão, licença e data da consulta.
• Defina criação, auditoria, redesenho ou estudo antes de começar.
• Delimite arquivos que podem ser lidos, criados, alterados ou removidos.
• Forneça público, ação principal, tom e conteúdo real.
• Leia design.md, tokens, fontes e estilos existentes antes de gerar.
• Não invente métricas, depoimentos, marcas ou resultados.
• Trate referências de terceiros como inspiração estrutural, não como material para copiar.
• Valide teclado, foco, contraste, redução de movimento e larguras móveis.
• Revise o diff completo e teste o produto real antes de publicar.

Fontes oficiais consultadas

• Repositório oficial Hallmark
• Commit auditado
• SKILL.md fixado
• README fixado
• Catálogo de antipadrões
• Regras de estrutura
• Regras responsivas
• Protocolo de estudo
• Slop-test
• Contrato de saída e escopo
• Licença MIT