Tastegate

Visão Geral

Duas habilidades em uma, mais a parte que ambas deixam para o modelo: prova.

1. Taste decide qual deve ser a página, antes de qualquer código.
2. O chão de fábrica contém a mecânica que toda página deve atender.
3. O portão renderiza a página em um navegador real com largura de celular e desktop e recusa "feito" enquanto qualquer descoberta difícil estiver aberta.

Um modelo que escreveu o CSS não consegue ver que seu herói se sobrepõe à sua navegação a 390px. O navegador consegue. Trabalhe nas quatro etapas em ordem e aplique as listas de verificação em vez de anunciá-las.

Quando Usar

• Use para qualquer construção de UI: página de destino, site de marketing, painel, tela de aplicativo, componente
• Use para um redesenho, uma passagem de polimento ou uma solicitação de "faça parecer melhor"
• Use quando uma página precisar parar de parecer gerada por IA
• Use antes de considerar qualquer trabalho de frontend concluído, como etapa de prova

Como Funciona

Etapa 1: Leia o ambiente (2 minutos, antes do código)

Escreva uma linha antes de construir:

Lendo isto como: <page kind> para <audience>, em uma linguagem <vibe>, construído em <type pairing> + <palette family> + <one signature detail>.

• O público escolhe a aparência, não seu hábito. Um comprador B2B, um consumidor com conhecimento de design e um visitante do setor público precisam de três páginas diferentes.
• Defina três mostradores a partir dessa leitura (de 1 a 10): variância (simetria para arte), movimento (parado para cinematográfico), densidade (galeria para cockpit). Página de destino padrão: 7 / 6 / 4. Confiança em primeiro lugar ou regulamentado: 3 / 2 / 5.
• Nomeie um detalhe de assinatura pelo qual a página será lembrada: um tratamento de tipo, um material, uma interação, uma forma como o produto é mostrado. Um, bem feito.
• Se o briefing definir fontes, cores ou uma era, o briefing vence todas as regras aqui.

Etapa 2: Construa no chão de fábrica

• Tipo: uma fonte de exibição real com caráter, combinada com uma fonte de texto legível. Não Inter, Roboto, Arial ou a pilha do sistema como voz de exibição, a menos que o briefing peça neutralidade. Corpo de 16px ou mais, 60 a 75 caracteres por linha, etapas claras de tamanho e peso.
• Cor: uma família neutra, um acento, travados em toda a página. Sem gradientes de "brilho de IA" de roxo para azul, sem texto em gradiente, sem halos de brilho coloridos. Texto secundário tingido de sua superfície, nunca cinza puro sobre cor. Contraste do corpo de 4,5:1 ou melhor.
• Layout: o herói cabe na primeira tela com sua chamada para ação visível. Sem rótulo pequeno em maiúsculas acima de cada título. Sem linha de três cartões de mesmo tamanho como estrutura da página. Cada seção usa uma família de layout diferente. Espaçamento mais apertado dentro de um grupo do que entre grupos.
• Ícones e cópia: ícones SVG reais em um peso de traço, nunca emoji. As próprias palavras do produto: sem lorem ipsum, sem "Acme", sem "John Doe", sem "Desbloqueie o poder de".
• Estados: hover, foco visível, ativo, desativado, carregando, vazio e erro existem para cada controle que os possui. Estilize também as partes do navegador: cor de seleção, anel de foco, barra de rolagem, cursor.
• Movimento: um momento autoral, suavizado, a partir de um padrão já visível. Respeite prefers-reduced-motion.
• Celular primeiro: cada bloco de várias colunas declara o que se torna abaixo de 768px. Alvos de toque de pelo menos 44px. Nada rola horizontalmente.

Etapa 3: Execute o portão

python3 skills/tastegate/scripts/gate.py <path/to/index.html or http://localhost:3000> --out .tastegate

(Execute-o a partir da raiz do repositório ou use o caminho para onde esta habilidade estiver instalada.)

Ele renderiza a página no Chromium sem cabeça a 390x844 e 1440x900, imprime todas as descobertas com sua regra, viewport e elemento, salva capturas de tela de página inteira e sai com 1 enquanto qualquer descoberta de falha estiver aberta. Primeira execução apenas: pip install playwright && python3 -m playwright install chromium.

Corrija todas as descobertas de falha em um lote e execute o portão novamente. Avisos são chamadas de julgamento: corrija-os, a menos que o briefing tenha solicitado essa coisa.

Etapa 4: Olhe você mesmo

Abra ambas as capturas de tela que o portão salvou (.tastegate/desktop.png, .tastegate/mobile.png). O portão captura a mecânica; ele não pode dizer que a página é chata. Pergunte: um designer de um bom estúdio enviaria isso? O detalhe de assinatura pousa no primeiro viewport? Algo ainda é um padrão que você não escolheu? Corrija o que você vê, execute o portão novamente e pare.

Exemplos

Exemplo 1: Uma página de destino que passa na revisão, mas falha no portão

A cópia e as seções estão corretas, então o trabalho é lido como concluído. O portão a 390px relata o título do herói se sobrepondo à navegação, uma proporção de contraste de 3,1:1 no texto secundário e rolagem lateral de uma linha de recursos não quebrada. Três defeitos reais, nenhum visível na marcação.

…