Kit INEMA · auditor de site
Seu site feito com IA ficou bonito e mesmo assim parece barato?
São sempre os mesmos 5 motivos. Este kit mede os 5 na sua página e diz o que consertar.
São sempre os mesmos 5 motivos. Este kit mede os 5 na sua página e diz o que consertar.
O site-que-vende é um kit que mede, no navegador, os cinco padrões que separam o site que traz cliente do site "bonito e barato" feito com IA, e diz o que consertar. Ele serve para quem tem um negócio pequeno ou faz sites para negócios pequenos. O kit abre a sua página no computador e no celular, mede texto, cor, camadas, movimento e amostra grátis, e devolve um relatório com a lista de consertos pronta para colar no seu agente de código (o programa de IA que edita os arquivos para você). Para usar, você precisa de Node.js e de um terminal.
Olho treinado cansa e discorda. O auditor abre a página de verdade, em 1440×900 e em 390×844, e mede sempre do mesmo jeito.
Texto da primeira tela, onde a cor do botão aparece, camadas, o que se move e se existe algo para o visitante experimentar. Sai 0 de 5 a 5 de 5.
Além do relatório para abrir no navegador, grava o consertar.md: o que falhou e o que fazer, pronto para colar no Claude Code, no Codex ou no Cursor.
Um arquivo, amostra.js, com calculadora e quiz configurados por JSON. Sem dependência, sem rede, sem coletar nada.
| Peça | Arquivo | Faz |
|---|---|---|
| Auditor | skill/site-que-vende/scripts/auditar.js | abre a página (URL ou arquivo), mede os 5 padrões, grava relatorio.html, relatorio.json, consertar.md e as fotos |
| Medições | skill/site-que-vende/scripts/medir.js | o código que roda dentro da página (cor, botão, camadas, movimento, amostra) |
| Amostras | skill/site-que-vende/amostras/amostra.js | <amostra-calculadora> e <amostra-quiz>: um arquivo, sem dependência, configurados por JSON |
| Skill | skill/site-que-vende/SKILL.md | os 5 passos para o agente: brief, medir, consertar, medir de novo, revisão humana |
| Brief | skill/site-que-vende/referencias/brief.md | as perguntas antes do design e o pedido pronto para colar |
| Exemplos | exemplos/ruim/ e exemplos/bom/ | o mesmo negócio fictício: um falha nos 5, o outro passa nos 5 |
| Chaves das amostras | skill/site-que-vende/referencias/amostras.md | todas as chaves do JSON do quiz e da calculadora, as variáveis de cor e o evento de resultado |
| Testes | tests/rodar.sh | 38 verificações: o exemplo ruim falha com o motivo certo, o bom passa, as amostras funcionam e 7 casos que já enganaram o auditor continuam certos |
Para cada padrão: a ideia, o número do teste, o que o auditor mede e como consertar. Os números são de testes publicados por quem os fez. Onde o número vem de quem vende a ferramenta, está dito.
A primeira tela diz para quem é, o que a pessoa ganha e o que fazer agora.
Quando a pessoa certa chega na primeira tela, ela tem de se ver: o problema dela, o mundo dela e um sinal claro de que está no lugar certo.
Uma página de vagas para caminhoneiros foi refeita em volta do motorista depois de ouvirem os motoristas: metade acessava pelo celular, o título não tinha benefício e a foto era um aperto de mão de banco de imagem.
Ele não mede se o texto é verdadeiro nem se fala com a pessoa certa. Por isso devolve as três perguntas da revisão humana.
A cor de destaque só aparece no que é clique.
Se você marca uma linha do livro, acha em dois segundos. Se marca todas, não marcou nenhuma. A IA põe a cor de destaque no título, nos ícones, na borda, no fundo e no botão. Aí o botão some.
A imagem desktop-marca-texto.png marca cada uso indevido. Veja um exemplo real em Antes e depois.
Cenário atrás, conteúdo no meio, botão na frente.
No site barato tudo está chapado no mesmo plano e o olho não sabe por onde começar. Num palco há o cenário pintado, os móveis e o ator. No site: fundo (foto ou forma), meio (o conteúdo), frente (o botão).
Texto pronto no instante, uma coisa se move por tela, dá para desligar.
Animação é o jeito mais rápido de um site parecer caro e também de parecer feito por IA. Cada animação precisa de um trabalho: mostrar o produto, apontar o próximo passo ou mostrar o que acabou de acontecer.
prefers-reduced-motion: reduce: tem de ser zero.@media (prefers-reduced-motion: reduce), desligue tudo.O visitante prova o resultado antes de deixar o contato.
Quase todo site explica tudo e entrega um formulário. Melhor: deixar a pessoa provar o resultado antes de pedir qualquer coisa. A gente valoriza mais o que ajudou a montar. Quando a pessoa põe os números dela, o resultado é dela.
Procure pelo nome para ler o original. Nenhum deles é medição nossa.
| Número | Origem |
|---|---|
| 12,1% → 21,7% (79,3% melhor) | estudo de caso da agência de conversão CXL sobre a página de cadastro do site de vagas TruckersReport |
| +90% de cliques para a página de preços | teste A/B de posicionamento da CityCliq (título "Create a webpage for your business") |
| +31,4% de conversão repetindo a palavra buscada | teste de texto dinâmico em página de destino da Campaign Monitor |
| Parallax: mais divertido e com cara mais profissional, sem melhora geral da experiência de uso | dissertação "The effects of parallax scrolling on user experience and preference in web design", Universidade Purdue |
| Movimento puxa a atenção, para o bem e para o mal | artigos do Nielsen Norman Group sobre animação em interfaces |
| Cerca de um terço dos adultos acima de 40 com disfunção do ouvido interno | pesquisa nacional de saúde dos EUA analisada pela Johns Hopkins (publicada em 2009) |
| Efeito IKEA (a gente valoriza mais o que ajudou a montar) | Norton, Mochon e Ariely, "The IKEA effect: When labor leads to love" (2012) |
| Calculadora de ortodontia com perto de 45% de conversão | caso divulgado pela Outgrow, a empresa que vende a ferramenta (não é estudo independente) |
| Regra 60/30/10 | regra prática de decoração de interiores, não é estudo |
As duas páginas são de uma empresa fictícia de agenda para cabeleireiras. As fotos abaixo foram tiradas pelo próprio auditor.
| Medida | Exemplo ruim | Exemplo bom |
|---|---|---|
| Título | "Soluções inovadoras de agendamento com IA" | "Encha sua agenda sem responder mensagem." |
| Botão principal | "Enviar", fora da primeira tela | "Ver quanto meu horário vago custa", na primeira tela no computador e no celular |
| Cor do botão fora de clique | 35 lugares | 0 |
| Fundo da primeira tela | cor lisa | imagem de fundo |
| Peças atravessando a borda de uma seção | 0 | 1 |
| Elementos com sombra | 0 | 3 |
| Coisas se movendo na mesma tela | 4 | 1 |
| Movendo com "reduzir movimento" ligado | 4 | 0 |
| Amostra grátis | não: só formulário de contato | amostra-calculadora, 2 campos, responde na hora |
relatorio.html mostra a nota, cada falha medida, o que fazer e as medidas uma a uma.Você precisa de Node.js e de git instalados. Os comandos são para terminal bash ou zsh (Linux e Mac; no Windows, use o WSL).
Para conferir: node -v e git --version têm de responder com um número de versão. O WSL é o terminal Linux que a Microsoft oferece dentro do Windows (como instalar). Do passo 2 em diante, rode os comandos de dentro da pasta site-que-vende.
O auditor usa o Playwright, que controla um Chromium próprio. A instalação é feita uma vez.
git clone https://github.com/inematds/site-que-vende && cd site-que-vende cd skill/site-que-vende/scripts && npm install && npx playwright install chromium && cd -
Passe o endereço do site ou o caminho de um arquivo HTML. A pasta de --saida recebe o relatório.
node skill/site-que-vende/scripts/auditar.js https://seusite.com.br --saida auditoria
Com um arquivo no lugar do endereço:
node skill/site-que-vende/scripts/auditar.js minha-pagina/index.html --saida auditoria
auditoria/ (fotos e relatório). Ponha auditoria/ no .gitignore do site.fetch, qualquer pedido que não seja GET) e toda saída para outro endereço. Nada é enviado ao site, e o relatório lista o que foi barrado.data-cta (<a data-cta href="...">). Em site que você não pode editar, rode com --cta "seletor-css".../) e não está num repositório git: passe --raiz <pasta que contém tudo>. O auditor avisa quando algum arquivo deu 404.node skill/site-que-vende/scripts/auditar.js --help mostra todas as opções.Esta é a saída real do exemplo ruim deste repositório (node skill/site-que-vende/scripts/auditar.js exemplos/ruim/index.html --saida auditoria):
site-que-vende · exemplos/ruim/index.html
FALHA 1. Teste do espelho
- Título genérico: "Soluções inovadoras de agendamento com IA" serve para qualquer empresa (o trecho "Soluções inovador" não diz nada sobre o cliente).
- O botão principal ("Enviar") não aparece na primeira tela do computador.
- No celular, o botão principal não aparece na primeira tela.
- O botão diz "Enviar": não conta o que acontece depois do clique.
FALHA 2. Regra do marca-texto
- A cor do botão (#8b5cf6) aparece em 35 lugares que não são clique (9 borda, 11 texto, 11 título, 4 ícone ou selo). Veja desktop-marca-texto.png.
FALHA 3. Frente, meio e fundo
- A primeira tela é uma caixa de cor lisa: não há foto, forma nem degradê atrás do texto.
- Nenhuma peça atravessa a borda de uma seção: a página é uma pilha de caixas.
- Nenhum elemento tem sombra: tudo está no mesmo plano.
FALHA 4. Movimento com função
- O título não está legível 0,4 s depois de a página abrir, no computador e no celular (opacidade 0.39): o visitante espera a animação.
- 4 coisas se movem ao mesmo tempo na tela 2 (div.cartao, div.cartao, div.cartao, div.cartao).
- Com "reduzir movimento" ligado no aparelho, 4 elemento(s) continuam se movendo.
FALHA 5. Amostra grátis
- A página explica e entrega um formulário de contato: não há nada para o visitante experimentar.
0 de 5 padrões passam. Relatório: auditoria/relatorio.html
O que consertar (cole no seu agente): auditoria/consertar.md
O número da opacidade na linha do padrão 4 muda um pouco a cada rodada, porque depende do instante da medição.
Na pasta auditoria/ ficam: relatorio.html (para abrir no navegador), relatorio.json (as medidas), consertar.md (a lista do que fazer) e as fotos desktop-tela1.png, celular-tela1.png, desktop-pagina.png e desktop-marca-texto.png.
Código de saída: 0 passou nos cinco, 1 algum falhou, 2 erro de uso ou a página não abriu. Serve em CI (a verificação automática que roda a cada mudança no código).
Cole o auditoria/consertar.md no seu agente de código, junto com a página. A ordem é do padrão 1 ao 5: texto antes de cor, cor antes de camada. Sem agente, abra o relatorio.html e faça os consertos à mão: cada falha vem com o que fazer.
Repita os passos 2 a 4. Não mexa no auditor nem nas regras para passar. Se depois de 3 voltas um padrão ainda falha, pare e olhe a medida: pode ser uma decisão sua.
O auditor não julga texto. Olhe auditoria/desktop-tela1.png e auditoria/celular-tela1.png e responda às três perguntas que fecham o consertar.md:
Uma skill é uma pasta com um arquivo SKILL.md: as instruções que o agente segue. A deste kit manda o agente fazer o brief, medir, consertar, medir de novo e parar para a sua revisão.
Dentro da pasta do kit, crie o atalho na pasta de skills do Claude Code:
mkdir -p ~/.claude/skills ln -s "$PWD/skill/site-que-vende" ~/.claude/skills/site-que-vende
O Claude Code lê ~/.claude/skills/site-que-vende/SKILL.md quando uma sessão começa. Abra uma sessão nova e peça: "audita meu site com o site-que-vende" ou "por que meu site não converte?". Se ele não carregar sozinho, diga: "leia ~/.claude/skills/site-que-vende/SKILL.md e siga os passos".
Dentro do SKILL.md, os caminhos (scripts/, amostras/, referencias/) são relativos à pasta da skill, que ele chama de $KIT. O agente trabalha na pasta do seu site: chama o auditor por node $KIT/scripts/auditar.js e copia $KIT/amostras/amostra.js para dentro do site.
No Codex ou no Cursor, abra a pasta do kit e diga: "leia skill/site-que-vende/SKILL.md e siga os passos".
Sem agente nenhum, o caminho manual é o dos seis passos acima: o auditor e as amostras funcionam sozinhos, e o relatorio.html diz o que fazer em cada falha.
Para conferir o kit: bash tests/rodar.sh faz 38 verificações e tem de terminar em TUDO OK.
data-cta num botão escondido ou esconder elementos só para o auditor passar. Trocar o texto que o dono escreveu quando ele já responde às três perguntas. Pedir e-mail antes de mostrar o resultado da amostra.Copie skill/site-que-vende/amostras/amostra.js para o seu site, cole a tag e troque o JSON pelos números do seu negócio. Nada é enviado a servidor nenhum.
<amostra-calculadora>
<script type="application/json">
{ "titulo": "Quanto custa pintar a sua casa?", "base": 350,
"campos": [
{"rotulo": "Área de parede", "tipo": "faixa", "min": 20, "max": 300, "passo": 10, "valor": 80, "unidade": "m²", "porUnidade": 28},
{"rotulo": "Acabamento", "tipo": "opcoes", "opcoes": [{"rotulo": "Econômico", "vezes": 1}, {"rotulo": "Premium", "vezes": 1.6}]}
],
"margem": 12, "prefixo": "Sua pintura fica entre",
"botao": {"texto": "Receber o orçamento exato", "href": "#contato"} }
</script>
</amostra-calculadora>
<script src="amostra.js"></script>
A cor do botão vem da sua página:
:root { --amostra-destaque: #c2410c; }
Também dá para ajustar --amostra-destaque-texto, --amostra-fundo, --amostra-texto, --amostra-borda e --amostra-raio. A amostra herda a fonte da página e não tem animação.
Mexa na área e no acabamento: o resultado muda na hora. É isso que o padrão 5 mede. Ver o quiz e a calculadora na página de modelo.
| Tag | Chaves | Como funciona |
|---|---|---|
<amostra-calculadora> | titulo, subtitulo, base, campos, margem, arredondar, prefixo, sufixo, botao, nota, moeda, idioma, ate | resultado = (base + soma dos campos) × multiplicadores, mostrado como faixa (mais ou menos a margem). Campo "tipo": "faixa" usa porUnidade; com "multiplica": true entra como multiplicador. Campo "tipo": "opcoes" usa soma ou vezes. |
<amostra-quiz> | titulo, perguntas, resultados, prefixo, refazer, textoPergunta, idioma | cada opção soma pontos em um ou mais resultados; ganha o que tiver mais pontos. Cada resultado tem titulo, texto e botao. |
As chaves do JSON ficam em português (titulo, campos, rotulo); os valores são seus, em qualquer idioma. Os textos fixos (o contador do quiz, o separador entre os dois valores da faixa, "Estimativa", "Responder de novo") saem em português, inglês ou espanhol conforme o idioma do JSON ou o lang da página, e cada um pode ser trocado no JSON. As duas tags disparam o evento amostra-resultado quando o resultado muda: serve para medir uso sem coletar dado pessoal. JSON inválido ou incompleto aparece escrito no lugar da amostra (por exemplo, amostra-quiz: falta a lista "perguntas"). Todas as chaves, inclusive multiplica, margem, moeda e idioma, as variáveis CSS e o evento estão em referencias/amostras.md.
Responda antes de pedir a página à IA e cole as respostas no pedido. Sem elas, a IA escreve para "qualquer empresa" e nenhum design salva.
Troque o que está entre < > pelas suas respostas. O número de cada campo é o da pergunta acima.
Crie a página de <negócio>. Para quem é: <1> O que a pessoa ganha: <2> Ação principal (um botão, marcado com data-cta): <3> Palavra que ela usa: <4> Amostra grátis (responde a "<5>"): copie o arquivo amostra.js do kit site-que-vende (skill/site-que-vende/amostras/) para este site e use <amostra-calculadora> ou <amostra-quiz>; os números são estes: <...> Cores: fundo <hex>, estrutura <hex>, destaque <hex> (destaque só em botões e links). Primeira tela: título, uma linha de apoio e o botão, prontos sem animação, com uma foto real no fundo. Uma peça atravessa a borda da primeira seção. Sombra só no botão e no cartão principal. No máximo uma coisa se move por tela, e nada se move com prefers-reduced-motion: reduce. Não invente depoimento, número nem cliente. Depois rode o auditor do kit: node <pasta-do-kit>/skill/site-que-vende/scripts/auditar.js index.html e conserte até dar 5 de 5.
data-cta é um atributo que você põe no HTML do botão principal (<a data-cta href="...">) para dizer ao auditor qual é ele. Sem a marca, o auditor escolhe o maior botão cheio da primeira tela e diz no relatório qual escolheu. <pasta-do-kit> é onde você clonou o site-que-vende.
Você decide o que só você sabe. A IA escreve e conserta. O script mede, sem gastar tokens.
| # | Passo | O que acontece | Quem faz |
|---|---|---|---|
| 1 | Brief | responder às perguntas do brief: para quem, o que ganha, o que faz agora, três cores, pergunta da amostra | 👤 você, com a 🧠 IA |
| 2 | Página | a IA gera a página com o pedido pronto do brief (ou você já tem o site no ar) | 🧠 IA |
| 3 | Medir | node skill/site-que-vende/scripts/auditar.js <url ou arquivo> --saida auditoria | ⚙️ script |
| 4 | Consertar | colar auditoria/consertar.md no agente; ele conserta só o que falhou, na ordem 1 a 5 | 🧠 IA |
| 5 | Amostra | se o padrão 5 falhou: copiar amostras/amostra.js e configurar o quiz ou a calculadora com os números do negócio | 👤 você, com a 🧠 IA |
| 6 | Medir de novo | repetir 3 e 4 até 5 de 5 (no máximo 3 voltas; depois disso, a decisão é sua) | ⚙️ script |
| 7 | Revisão humana e publicar | olhar desktop-tela1.png e celular-tela1.png, responder às três perguntas do espelho, publicar | 👤 você |
O que o auditor não vê, dito com todas as letras.
<canvas> ou WebGL conta como uma coisa só.