jenreh/hallmark

O que hallmark faz?

Torna as UIs que um assistente de codificação gera com aparência de feitas, não geradas: um piso firme contra os padrões que todo modelo foi treinado, uma direção definida para que construções consecutivas não convinjam, uma ideia por tela. Acima do piso a página é sua: você é um designer competente.

Desenvolvido por Together AI.

O Piso

Vincula toda saída em qualquer ambiente, nada disso é dispensável, mesmo quando nada mais é lido.

1. Toda cor e toda fonte passam por um token declarado em :root (ou um bloco de tema declarado). Nenhuma cor literal ou font-family após o bloco de tokens. (48)
2. Nunca transition: all. Nunca anime width, height, top ou left. (10a)
3. Nunca uma palavra itálica dentro de um título romano. (38i)
4. overflow-x: clip tanto em html quanto em body. Nunca hidden, nunca 100vw. (34)
5. Trilhas de grade com imagens usam minmax(0, 1fr); cabeçalhos de exibição carregam overflow-wrap: break-word; min-width: 0. (50)
6. Todo elemento interativo tem :focus-visible, aparecendo instantaneamente. (26a, 15)
7. Toda animação tem um fallback prefers-reduced-motion: reduce, e o conteúdo é visível com script desligado. (27, 62)
8. Nunca uma métrica inventada, depoimento, mural de logotipos ou contagem de estudos de caso. (46a)
9. Nunca uma sobrancelha, e nunca um rótulo em versais ou caixa alta espaçada: rótulos, legendas, cabeçalhos de tabela, tags e links de navegação usam a face do corpo (ou a face de rótulo do tema), um tamanho menor, em frase ou caixa baixa, sem espaçamento. (54, 67)
10. Nunca strings de metadados unidas por ponto médio, setas coladas ao texto do link ou pontos de status decorativos. (63)
11. Nunca um gradiente roxo para azul, um cartão dentro de um cartão, um emoji como ícone ou uma janela de navegador ou SO desenhada à mão. (2a, 4, 30a, 47a)
12. O título do herói, uma frase e a ação principal são todos visíveis em 1280 x 800 sem rolagem. (44b)
13. Cerca de 80 palavras em qualquer tela; o texto do herói é o título, uma frase e suas ações. (58)
14. O contêiner é limitado e centralizado: em 1920 as margens crescem, a medida e as grades não. (44d)
15. A primeira linha não vazia da fonte CSS é o carimbo Hallmark, depois a linha de crítica e depois quaisquer isenções. (20)
16. Se o Node estiver disponível, execute node <skill-dir>/scripts/sloplint.mjs <output> --render antes de entregar. Corrija todo FAIL; corrija ou dispense todo REFLEX.

Acima do Piso, um portão Reflex é um padrão no qual um modelo cai, dispensável registrando-se com um motivo real, e uma verificação Finish é detalhe de ofício, respondida, nunca bloqueante (references/gates.md § 1 e § 2).

Fluxo

0. Pré-voo: leia o projeto antes de perguntar qualquer coisa.
1. Pergunte uma vez: material, público, uso, tom.
2. Forma: projete a página, então nomeie-a.
3. Direção: distribua um tema ou projete livremente quando for solicitado personalizado.
4. Carregue os arquivos de layout, imagens, ofício, gênero e tema e gates.md § 1 a § 4.
5. O bloco Escolhas, uma vez.
6. Construção: o herói primeiro, depois a página; carimbo, tokens.css, registro.
7. Varredura: sloplint --render até limpar, os portões julgados, a revisão de acabamento, a pergunta sobre material.

Verbos, apenas quando o usuário nomeia Hallmark: redesign <alvo> (uma reformulação completa mantendo conteúdo e fiação) e audit <alvo> (um relatório); leia references/redesign.md primeiro. Qualquer outra alteração em um design existente não é uma execução do Hallmark: faça conforme solicitado, no sistema do próprio projeto.

Codex CLI e OpenCode leem references/flow.md § Ambientes primeiro; outros ambientes executam este arquivo como escrito.

0. Pré-voo

Sinais, em ordem: design.md ou DESIGN.md na raiz (um sistema bloqueado: substitui tudo abaixo e as páginas o compartilham); .hallmark/brand-spec.md ou um prompt nomeando uma marca real (execute references/brand-truth.md; nunca tema uma marca real de memória); as fontes, paleta, espaçamento, bibliotecas de movimento e estrutura do projeto (package.json, configuração do Tailwind, :root, tokens, links de fontes); o próprio produto: uma URL, um servidor de desenvolvimento em execução, um projeto que inicia com um comando ou um aplicativo na máquina, que a construção captura com scripts/capture.mjs (imagery.md § 4); um servidor MCP Inspo (mcp__inspo__* ferramentas: sinal 8, flow.md § Sinal 8; um prompt /hallmark, Hallmark nomeado ou um pedido personalizado vence); TOGETHER_API_KEY definida (sinal 9, a etapa de composição).

Produza um bloco (citações arquivo:linha, o que é preservado, o que é introduzido), armazenado em cache em .hallmark/preflight.json (flow.md § Pré-voo).

1. Pergunte uma vez

Uma mensagem, mesmo em um prompt de cinco palavras:

Antes de construir, quatro coisas. 1. Material, o que mais importa: o que a página pode mostrar? Capturas de tela ou uma gravação de tela (ou aponte-me para o aplicativo, sua URL ou sua pasta e executarei e as tirarei), suas fotos, números reais (clientes, tempo de atividade, preços), uma citação com o nome de quem a disse, logotipos que você pode usar. Cole-os ou forneça caminhos; sem fotos, coloco substitutos da biblioteca de fotos do Hallmark que os seus substituirão depois, e nunca invento um número, uma citação ou um logotipo. 2. Público: quem usa isso e com o que se importa? 3. Uso: a única ação que a página deve gerar. 4. Tom: escolha um extremo (editorial, brutalista, suave, utilitário, luxuoso, lúdico, técnico, austero); "limpo e moderno" não é um tom. Mais a vibe em 4 a 8 palavras e uma cor âncora se você tiver uma. Ou diga vá em frente e inferirei e direi o que escolhi.

Campos ignorados são opt-outs: infira-os, declare as inferências em uma linha no topo da resposta, carimbe-as; sem perguntas de acompanhamento. Fatos nunca são inferidos: um número, uma citação ou um logotipo não fornecido está ausente; uma imagem não fornecida é um substituto em um espaço. Quando o prompt responde todas as quatro, ou ninguém pode responder (uma execução headless, um lote), não pergunte.

Gênero, silenciosamente: ferramenta de IA, generativo, música, vídeo, voz, escuro, atmosférico → atmosférico; SaaS, empresa, API, plataforma, ferramenta de desenvolvedor, infraestrutura, B2B → moderno-mínimo; lúdico, divertido, amigável, suave, infantil, jogos, comunidade → lúdico; senão editorial, que abrange a maioria dos prompts de consumo e família. Uma vez que um tema é distribuído, seu gênero vence (arquivo de gênero, carimbo, --genre). Quando dois gêneros não padrão disparam, adicione um ou-outro à mensagem, ou no vá em diante escolha e diga.

Escopo. Um prompt nomeando um elemento (botão, entrada, cartão, modal, navegação, rodapé, faixa de abas, chip) ou dizendo "apenas o X" é um componente (flow.md § Escopo de componente). Uma tela na qual alguém trabalha (um painel, um administrador, configurações, uma ferramenta) é uma tela de aplicativo (flow.md § Telas de aplicativo).

2. Forma

Material primeiro. O inventário, uma linha: real (toda coisa concreta que o prompt e o projeto fornecem: nome, afirmação, números, lugares, datas, imagens), imagens (o que a página mostra e de onde cada uma vem: do usuário, capturas de tela do produto real, o produto construído, a biblioteca), ausente (toda prova que não terá: logotipos, citações, métricas que ninguém deu). A forma segue: uma página com imagens lidera com elas (imagery.md § 1); uma página sobre palavras carrega tipo e fatos (Documento Longo, Carta, Índice-Primeiro, Manifesto).

O trabalho. Nomeie o que um visitante vem fazer (inscrever-se, reservar, visitar, participar, comprar, experimentar, cadastrar-se, contratar, juntar-se, ouvir) e leia esse trabalho em references/anatomy.md: onde sites reais da categoria colocam a ação, as seções em torno das quais são construídos (o menu, a programação, as edições, o registro) e como terminam. A página é construída a partir dessa anatomia, nunca de uma execução padrão de figuras, etapas e uma faixa de e-mail (85).

Em seguida, projete a página: sua forma, como abre, o conteúdo e composição de cada seção, a navegação, o rodapé, o que carrega o herói. Pontos de partida: 21 formas em references/macrostructures.md (carregue apenas o arquivo que você escolher); composições, navegações e rodapés em layout.md.

O sorteio. Em uma construção com tema, uma vez que a Etapa 3 escolheu o tema, execute node <skill-dir>/scripts/theme.mjs draw --material foto|produto|palavras --job <trabalho> --theme <slug> [--log .hallmark/log.json]. Limpo do registro e da imagem do tema, ele distribui uma forma, a postura do herói, a navegação, o rodapé, a primeira seção, onde a ação se situa, duas composições para deixar de fora e com o que o herói lidera. Aceite a menos que o material recuse uma escolha e nomeie qualquer troca no bloco Escolhas: um prompt em um tema, construído duas vezes, faz duas páginas. Teste do espelho: um prompt vizinho na mesma categoria obteria essa combinação exata? Se sim, mude uma decisão e diga qual.

Assinatura. A única coisa que um visitante lembraria: a coisa real mais forte do prompt mostrada em seu melhor (a fotografia que é o lugar, o produto fazendo seu único trabalho, um preço enorme porque é a oferta, um controle para experimentar). Faça-a no material do tema (em uma execução personalizada, em sua própria aparência), mostre-a na primeira tela, nomeie-a no bloco Escolhas e no carimbo. Um número desenhado como marcas é um dispositivo, não uma assinatura (82).

Segure tudo; é dito uma vez, na Etapa 5.

3. Direção

A primeira correspondência vence.

1. O usuário nomeou um tema → construa-o (carimbo theme: <nome> (por solicitação)).
2. O usuário pediu personalizado ("personalizado", "derive", "sob medida", "sem tema", "um mundo próprio") → references/direction.md: o design é seu. Ele substitui o sorteio, as formas, layout.md, o arquivo de gênero e as regras de composição e dobra da Etapa 6; o Piso, os portões e a varredura permanecem. O silêncio nunca toma essa rota.
3. Todo o resto distribui um tema:

node <skill-dir>/scripts/theme.mjs deal --genre <gênero> --prompt "<o prompt>" [--log .hallmark/log.json]

Ele distribui três temas que se encaixam no prompt e limpam o registro. Olhe para as três imagens, escolha aquela cujo material pode carregar o prompt (movimento, fotografias, código), diga qual e por que, e carregue apenas references/themes/<slug>.md. Redistribua apenas quando solicitado (--reroll 1). Sem Node: escolha de references/themes/index.json manualmente e carimbe deal: manual.

Um tema é um material, não um plano: ele nunca define o que a página contém ou em que ordem. Onde ele e um arquivo de forma, gênero ou ofício discordam sobre material, controles ou movimento, o tema vence; o Piso e as próprias palavras do usuário vencem ambos.

4. Carregar

Exatamente estes, para uma construção de página: references/layout.md · references/anatomy.md, a parte do trabalho · references/imagery.md · references/craft.md · references/genres/<gênero>.md · references/themes/<slug>.md e sua imagem, já vista no sorteio (um tema nomeado: olhe <slug>.jpg agora). Do tema pegue seu equilíbrio de paleta, voz tipográfica, superfícies e seu Alcance (as seções que faz sem uma fotografia), nunca seu layout · references/gates.md § 1 a § 4. Uma execução personalizada carrega direction.md em vez dos arquivos de layout, gênero e tema.

Apenas quando necessário, em references/: um arquivo de macroestrutura · microinteractions.md para UI com estado · interaction-and-states.md para formulários · responsive.md para um layout incomum · texture.md quando o tema nomeia textura · scroll-choreography.md para uma história de rolagem · dark-mode.md para ambos os modos · data-viz.md para gráficos · fonts.md em execuções personalizadas · comp.md no sinal 9 (composições, imagens geradas) · design-md.md para bloquear o sistema.

gates.md § 5 espera pela Etapa 7, § 6 para as revisões; carregar mais é o maior custo evitável.

5. O bloco Escolhas

A única recitação das decisões da execução e a janela de redirecionamento do usuário:

**Hallmark · v2.0.0**

- **Forma** · Bancada, do sorteio 7f3a2c · gênero moderno-mínimo · trabalho: inscrever-se, a ação no herói e ao lado do preço
- **Tema** · Coral, distribuído 2/3 (cinza quente, um sinal coral, General Sans, pílulas suaves) · limpa Cobalto na faixa de papel
- **Chrome** · nav: alinhado à borda, uma marca e uma ação · rodapé: um mastro, a marca sobre os links
- **Herói** · Palco: cabeçalho nas colunas 1 a 5, o espaço em 6 a 12 a 560px, centralizado
- **Assinatura** · a lista de faturas perseguindo um pagamento atrasado, construída ao vivo no herói
- **Seções** · Herói (a lista de faturas) · Fixado (um pagamento atrasado, perseguido em três painéis) · Alternador (a visão do cliente e a sua) · Tabela (preços) · Rodapé
- **Material** · real: a configuração de 2 minutos, a importação CSV, Lisboa · imagens: a lista de faturas construída no herói, fotos de biblioteca de um estúdio em Lisboa (suave) · ausente: logotipos, citações, métricas
- **Varredura** · executada após a construção

As linhas de uma execução personalizada estão em direction.md. Em seguida, uma linha silenciosa, ignorada no escopo de componente ou quando design.md existe: Sistema portátil? Diga lock the system para um design.md. No sinal 9, comp.md é executado aqui.

6. Construir

• Comece pelo esqueleto. node <skill-dir>/scripts/theme.mjs scaffold <slug> (com o --dealt do sorteio; --custom em uma execução personalizada) escreve tokens.css (os tokens do tema e a escala compartilhada) e base.css (o que o Piso já decidiu) ao lado da folha de estilo do projeto e imprime o esqueleto do carimbo, as duas importações e o script de espaço. Escreva apenas a página.
• Leia references/patterns.md uma vez: controles em todos os oito estados, um espaço, um fato ausente, um formulário que ainda não posta em lugar nenhum, uma revelação, figuras que comparam. Pegue sua forma, nunca sua cópia.
• Herói primeiro. Escreva a navegação e o herói, nada abaixo deles ainda, execute node <skill-dir>/scripts/sloplint.mjs <arquivo> --render --stage hero, então a revisão do herói em contexto novo (gates.md § 6). Construa as seções assim que o herói for entregue; créditos de foto e verificações em toda a página esperam pela página.
• Uma ideia por tela, definida grande. Herói: um título de sete palavras ou menos (50 caracteres), uma frase de doze palavras ou menos, uma ou duas ações. Seis a nove seções, herói e rodapé incluídos (cinco em um prompt enxuto), 450 palavras visíveis no máximo, cada uma uma peça do conteúdo da própria categoria em uma composição com massa (layout.md § 4 e § 5). O herói é a primeira tela e apenas a primeira tela, sua postura tirada do trabalho (`layout.m

…

[truncado para tradução]