hallmark
Faz seu agente criar ou analisar o design de páginas e interfaces. É útil para construir ou melhorar a aparência de sites e apps.
O que ela faz
Hallmark ajuda a criar ou melhorar o visual de sites e aplicativos. Ele garante que o design pareça feito por um humano, com variedade e estrutura, em vez de um modelo genérico.
Quando usar
- ✓Quando você quer criar um site ou aplicativo novo.
- ✓Quando você quer redesenhar algo que já existe.
- ✓Quando você quer analisar um site para ver o que pode ser melhorado.
Exemplo do que pedir para a IA
“Quero criar um site para minha cafeteria, com um visual moderno e único.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Hallmark segue regras de design para evitar que os sites fiquem todos iguais. Ele foca em variar a estrutura das páginas, não apenas as cores ou fontes, para que cada site tenha uma identidade própria.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add Nutlope/hallmark --skill hallmarkOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/Nutlope/hallmark/main/skills/hallmark/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Hallmark
Uma habilidade de design para assistentes de codificação de IA. Faz com que as interfaces que eles geram pareçam feitas, não geradas.
Hallmark é opinativo, curto e entediante de propósito. Ele codifica um conjunto restrito de regras — extraídas do consenso do campo de design anti-slop de IA (habilidade de design frontend da Anthropic, o livro de receitas Claude sobre estética frontend e o movimento "rebelião tátil" de 2026) — e se recusa a deixar o modelo recorrer aos padrões nos quais todos os LLMs foram treinados.
O diferencial: Hallmark insiste em variedade estrutural, não apenas variedade visual. Duas páginas criadas por Hallmark para dois briefings diferentes não devem compartilhar o mesmo ritmo herói → 3-recursos → CTA → rodapé. Elas devem parecer sites diferentes, não diferentes trocas de cores do mesmo modelo. Veja references/structure.md.
Alimentado por Together AI.
Como usar esta habilidade
Hallmark tem um comportamento padrão e três verbos explícitos.
| Invocação | O que faz |
|---|---|
| (padrão) | O usuário pediu para você projetar ou construir algo novo. Siga o Fluxo de Design abaixo. |
hallmark audit <target> |
Leia o alvo, pontue-o contra a lista de anti-padrões, retorne uma lista classificada de pontos. Não edite. |
hallmark redesign <target> [--mood <name>] |
Pegue o conteúdo e a intenção do alvo, então redesenhe a estrutura visual dentro dos limites de implementação existentes, a menos que o usuário confirme explicitamente uma reconstrução completa. Novo ritmo de seção, nova colocação de título, nova voz de componente. Preserve rotas existentes, propriedade de componentes, intenção de cópia, marca e arquitetura de informação; substitua apenas a camada visual/de interação necessária para o escopo solicitado. |
hallmark study <screenshot | URL> |
O usuário colou ou anexou uma imagem de um design que admira, ou colou um URL para uma página ativa. Extraia o DNA — macroestrutura, arquétipos, combinação de tipos, âncora de cor — e produza um relatório de diagnóstico, então opcionalmente reconstrua o conteúdo do usuário usando o DNA extraído ou emita um design.md portátil do DNA. A detecção é automática: um URL (prefixo http:// / https://) roteia para o modo URL; qualquer outra coisa roteia para o modo imagem. O modo URL lê o HTML e CSS da página via WebFetch — ele pode nomear fontes exatas e valores de cor exatos, mas não pode julgar o ritmo. Após o diagnóstico, o usuário tem três acompanhamentos: construir com o DNA (entrega para o padrão), travar o DNA em um design.md portátil (opt-in via "travar o DNA" / "me dê um design.md"), ou parar no diagnóstico. Nunca copia pixels. Recusa URLs de marketplace de modelos. Camada de recusa mais rigorosa para emissão de design.md do que para o próprio diagnóstico — a emissão em modo URL requer atestado de que a fonte é do próprio usuário ou uma referência pública para sua própria marca. Recorre a pedir uma captura de tela se o URL for protegido por autenticação, um shell SPA apenas com JS, ou de outra forma ilegível. Carregue references/study.md antes que este verbo seja executado. |
Se o usuário digitar algo que não se mapeia claramente para audit, redesign ou study, trate como padrão. Se o usuário anexar uma imagem ou colar um URL sem um prefixo de verbo, pergunte: "Devo study isso (extrair o DNA), ou devo tratá-lo como uma referência para uma nova construção?"
Barreira de segurança de implementação. Hallmark é uma habilidade de design, não uma licença para demolir uma base de código. Em qualquer projeto existente:
- Nunca exclua arquivos de produção, árvores de rotas, diretórios de componentes ou um site antigo, a menos que o usuário solicite explicitamente a exclusão ou aprove um plano em nível de arquivo que liste as exclusões.
- Padrão para edições no local dos arquivos nomeados, ou componentes/tokens novos e aditivos que são conectados através da rota existente. Se a redesenho exigir a remoção de vários componentes, pare e peça confirmação primeiro.
- Trate PDFs, arquivos README, briefings
.md, documentos, transcrições e apresentações como material de referência. Não os copie palavra por palavra para a página, a menos que o usuário diga explicitamente para usar esse texto literalmente. - Antes de editar, declare os arquivos exatos que você espera modificar/criar/excluir. Exclusões exigem confirmação explícita.
…
Perguntas frequentes
O que significa 'design feito por um humano'?
Significa que o design não parece genérico ou repetido, como se fosse feito por um robô. Hallmark usa regras para dar personalidade e variedade ao visual.
O que Hallmark faz se eu der um link de um site?
Ele pode analisar o site para entender seu design (cores, fontes, estrutura) e te dar um relatório, ou até mesmo usar essa 'essência' para te ajudar a criar algo novo.
Hallmark pode mudar tudo em um site existente?
Ele pode redesenhar a aparência e a estrutura visual, mas respeita o conteúdo e a organização original, a menos que você peça explicitamente para mudar tudo.
Detalhes
Descrição original do autor
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.
repo: Nutlope/hallmark
Popularidade
- Estrelas no GitHub
- 30 mil
- Posição no ranking
- #6349
- Licença
- MIT
- Atualizada em
- 06/08/2026
Comentários
- …
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC