hallmark
Ajuda seu agente a criar designs de páginas web. É útil para construir novos sites, melhorar os existentes ou analisar o visual de uma página.
O que ela faz
Hallmark ajuda a criar ou melhorar o design de sites e aplicativos. Ele garante que a aparência seja profissional e evite padrões de design ruins, focando em variedade estrutural para que cada projeto pareça único.
Quando usar
- ✓Criar um novo site ou aplicativo do zero.
- ✓Redesenhar um site ou aplicativo existente.
- ✓Analisar o design de uma página para encontrar problemas.
Exemplo do que pedir para a IA
“Quero criar um novo site para minha loja de bolos.”
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 um conjunto de regras de design para garantir que a aparência seja boa e evite padrões comuns de design ruins. Ele se concentra em tornar a estrutura das páginas variada, para que cada site pareça diferente e não apenas uma cópia com cores diferentes.
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 nexu-io/open-design --skill hallmarkOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/community/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 rigoroso de regras — extraídas do consenso do campo de design anti-lixo de IA (impecável, kami, habilidade de design frontend da Anthropic, taste-skill, 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 voltar 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 template. 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 cores 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 templates. 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 a própria marca. Volta a pedir uma captura de tela se o URL for protegido por autenticação, uma 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 a 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 o 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 é 'anti-AI-slop design'?
É um termo para designs que parecem genéricos ou mal feitos por inteligência artificial. Hallmark foi criado para evitar isso e produzir designs de alta qualidade.
O que significa 'variedade estrutural'?
Significa que a organização dos elementos na página (como títulos, imagens e botões) é diferente entre os projetos, em vez de usar sempre o mesmo padrão. Isso torna cada site mais único.
O que Hallmark faz se eu enviar uma imagem de um design que gosto?
Ele pode analisar o design da imagem para entender seus elementos principais (cores, fontes, estrutura) e usar isso como inspiração para o seu projeto, ou para criar um relatório sobre o design.
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: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #641
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
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