Habilidade de Criação de Páginas Web v2.0
Origem: O resultado real foi avaliado como “feio”. Então, peguei sites criados por outro serviço de IA sobre o mesmo tema, abri, medi e transformei os pontos bons em um procedimento escrito com minhas próprias palavras. Não se baseia em gosto pessoal, mas sim em valores medidos e no que eu estava negligenciando na época.
O que você precisa saber primeiro (a premissa de tudo)
O que descobri comparando foi que a maior diferença estava no planejamento antes de começar a criar. Dentre eles, o passo mais eficaz foi o seguinte:
Antes de começar a escrever, verbalize sua tese de design, fixe-a em um arquivo com restrições negativas.
O site do concorrente tinha, no início da folha de estilo, uma breve descrição de “como mostrar” e “o que não fazer”.
(O método de escrita e os tipos estão em reference/DESIGN_THESIS.md. O formato usado no Passo 0 também está lá.)
Minha versão falha era exatamente a repetição de cartões iguais centralizados, que caiu no “o que não fazer”. Sabia que, se deixasse sem controle, cairia nisso. Basta proibir antes. Essa foi a única diferença.
Estes 6 pontos são tudo
- Antes de escrever, escreva a tese e fixe-a em um arquivo. Declarações na conversa desaparecem.
- Inclua pelo menos 2 restrições negativas. Se não proibir explicitamente o padrão, você nunca se afastará dele.
- Use 2 fontes: Mincho + Gothic. Usar apenas uma fonte faz tudo parecer com uma tela de administração.
- Não alinhe cartões iguais centralizados. Divida de forma assimétrica. Coloque pelo menos uma faixa escura.
- Zero imagens é inaceitável. Se não houver material, gere. Se for gerado, indique claramente como “imagem ilustrativa”.
- O trabalho só está completo quando você renderiza e vê com seus próprios olhos. “Não está quebrado” não é uma avaliação.
⚠ Acidentes reais que ocorreram no passado (3 casos)
Acidente 1 — Confundir “não quebrado” com “bom”
Verificou-se se o scroll horizontal não aparecia e se as tabelas cabiam, e então enviou. Toda a inspeção foi de falhas, zero avaliações de atratividade. O resultado foi um produto sem pontos negativos, mas também sem pontos positivos.
Método de detecção: Quando o log de verificação contém apenas “X não aparece” e “Y cabe”, este acidente está ocorrendo.
Acidente 2 — Aceitar a restrição de “sem material” sem considerar alternativas
“Não consigo fotos reais” → “sem imagens” foi decidido. Havia capacidade de gerar imagens, mas não foi usada. Sinceridade não é desculpa para desistir de imagens. Garanta com uma nota.
Método de detecção: Se um elemento incluído na solicitação (como “também fotos”) for removido do produto final, suspeite imediatamente.
Acidente 3 — Depois que a inspeção automática passou em todos os itens, uma quebra visual foi encontrada
Depois que verify.py ficou todo verde, ao visualizar reduzido a 25%, o h1 estava quebrado no meio
(por exemplo, “Entregamos fresquinho / na sua mesa.”, com 1-2 caracteres caindo para a linha seguinte – exemplo fictício).
É um tipo de defeito que a inspeção numérica jamais pega.
Contramedida: Não pule a inspeção visual da §5. O
verify.pyexporta automaticamente imagens para inspeção visual. Leia-as obrigatoriamente.
§1 Procedimento
Passo 0. Escreva a tese (antes do HTML – obrigatório)
Leia reference/DESIGN_THESIS.md. Lá estão os 6 tipos e um catálogo de restrições negativas.
Escolha um tipo → Adapte o nome ao tema → Escolha pelo menos 2 restrições negativas →
Substitua pelo menos uma por algo específico do tema → Escreva no comentário inicial de template.html.
Design: «XXXX» — {uma frase sobre a afirmação visual}.
Visual rules: {restrição negativa 1}; {restrição negativa 2}; {restrição negativa 3}.
Information rule: {regra sobre como dispor a informação}.
Em seguida, declare uma única vez para quem solicitou. Se houver desconforto, pare antes de começar a escrever.
◆ Diretriz de design
Tese: «XX» — {afirmação} / Proibido: {pelo menos 2 restrições negativas}
Paleta: Montanha verde / Índigo / Cerâmica ← uma delas, ou nova
Tamanhos: h1=70px a 1280px / h2=51px / Margem: seções com 120px superior/inferior
Imagens: {fotos reais / N ilustrações geradas (com nota de imagem ilustrativa) / diagramas}
Estrutura: hero → {bloco} → faixa escura → tabela de fatos → encerramento
Passo 1. Colete fatos (se o assunto for real)
- Priorize bancos de dados públicos. Sites oficiais de divulgação de números de registro de pessoas jurídicas, licenças e autorizações por setor (operados pelo governo ou municípios). Têm nível superior a portais do setor e geralmente permitem obter números de licença e autorização. Exemplo (fictício): O número de registro da “Escola XX da Cidade Verde”, que só tinha nome e telefone no portal do setor, foi confirmado na página oficial do município – esse é o uso.
- Se as fontes divergirem, escreva honestamente “há diferença de notação” e coloque ambas. Não silenciosamente pender para um lado.
- Se houver 0 avaliações, não crie uma seção de avaliações. Nunca invente.
Passo 2. Prepare os materiais (não avance com 0 imagens)
Considere na ordem e não decida “sem imagens” até poder escrever o motivo pelo qual não foi possível obter.
- Obter fotos reais do cliente
- Gerar (se o ambiente permitir ferramentas de criação de imagem) + anexar obrigatoriamente nota de origem
- Substituir por diagramas, gráficos, visualizações de dados
- Fazer funcionar apenas com tipografia e superfícies coloridas (declarando como uma escolha intencional)
Diretrizes de estilo e proibições estão em reference/DESIGN_SYSTEM.md §6. Não gere rostos humanos.
Após a geração, comprima para web (exemplo real: 7,4MB → 566KB. Não envie pontos de 1,8MB cada).
Passo 3. Monte
assets/satoyama.css … link diretamente (a paleta é alterada pela classe no body)
assets/template.html … substitua todos os {{ }}
Mantenha obrigatoriamente o herói assimétrico e a faixa escura. A distribuição de cada bloco está em reference/DESIGN_SYSTEM.md §5.
⚠ h1 deve ter no máximo 7 caracteres por linha. Se exceder, a quebra automática causa problema (Acidente 3).
Passo 4. Meça
python ~/.claude/skills/homepage/verify.py path/to/index.html
Mede: presença da tese, número de restrições negativas, tamanhos de fonte, margens, número de imagens, separação de fontes, faixa escura, repetição de estrutura, e vazamento em 3 larguras.
Exporta imagens para inspeção visual em _review/.
Passo 5. Veja (não pode ser omitido – inspeção visual não substituível por máquina)
Leia obrigatoriamente as imagens _review/review-25percent.png e review-desktop.png exportadas pelo verify.py.
- Olhe reduzido — O contraste se mantém? Se tudo parecer uma faixa cinza igual, a faixa escura ou a margem estão insuficientes.
- Leia apenas os títulos — O sentido faz sentido? Se forem apenas palavras de índice, é violação R-11.
- Veja a primeira tela isoladamente — Sem scroll, transmite “de quem é este lugar e o que é”?
- Procure quebras — Quebra de título, vazamento, falta de imagem. O Acidente 3 só é pego aqui.
- Verbalize o bom e o ruim em uma linha. “Não está quebrado” não é avaliação. Não envie sem conseguir verbalizar.
§2 Valores de referência medidos (confirmados por comparação com resultados de outras IAs)
| Item | Referência | Valor falho do passado |
|---|---|---|
| Tese no arquivo | Obrigatório | Ausente |
| Número de restrições negativas | ≥2 | 0 |
| h1 renderizado real (1280px) | ≥56px (recomendado 70px) | 46px ← limitado pelo máximo de clamp() |
| h2 renderizado real (1280px) | ≥40px (recomendado 51px) | 30px |
| Padding superior/inferior da seção | ≥100px (recomendado 120px) | 76px |
| Número de imagens | ≥1 (recomendado 4) | 0 |
| Fontes | Fontes diferentes para título e corpo | 1 fonte |
| Faixa escura de largura total | ≥1 local | 0 |
| Diversidade de estrutura | Mais da metade dos blocos principais com estrutura diferente | Todos idênticos |
⚠ O número de cores não fez diferença. A versão falha tinha 15 tokens de cor, mais que os 10 do lado bom. O que realmente funciona é: tese, fontes, tamanhos, margens, imagens e texto.
§3 Requisitos (não enviar se não cumprir)
- R-1 Separar fontes para título e corpo. Para títulos em japonês, priorizar Mincho.
- R-2 Na renderização real a 1280px: h1≥56px / h2≥40px. Meça se o máximo de
clamp()não está limitando. - R-5 No desktop, padding superior/inferior da seção ≥100px. Quantidade de informação não justifica densidade.
- R-7 Zero imagens é inaceitável (seguir os 4 passos do Passo 2).
- R-8 Para imagens geradas, indicar “Imagem ilustrativa (não representa a realidade)” em posição visível.
- R-9 Nem todas as seções devem ter o mesmo padrão. Incluir pelo menos uma faixa escura de largura total.
- R-11 Não usar rótulos funcionais em títulos de seção. Palavras de índice devem ir para
.label. - R-13 Não pular acessibilidade (skip-link / foco visível / alt / reduced-motion).
- R-14 Fixar a tese no início do arquivo e escrever pelo menos 2 restrições negativas.
- R-15 Ler a imagem renderizada com seus próprios olhos, verbalizar o bom e o ruim em uma linha, e só então enviar.
§4 Proibições de conteúdo (ao lidar com lojas e instalações reais)
- Não invente avaliações ou depoimentos de clientes. Se for 0, escreva 0 e coloque apenas um convite para envio.
- Não finja que fotos reais existem quando não existem. Imagens geradas devem ter nota obrigatória.
- Não replique fotos ou textos de outros sites. Incorporações (embed oficial do Instagram, etc.) são permitidas.
- Não prometa efeitos ou melhorias (especialmente em saúde, bem-estar, educação). Limite-se a publicar fatos.
- Publique apenas com a permissão do cliente. Não publique páginas que se apresentem como de uma organização real sem autorização. Para prática ou estudo, deixe um comentário no início do arquivo.
- Ao lidar com material com crianças, verifique sempre a permissão de publicação.
§5 Arquivos
~/.claude/skills/homepage/
├── SKILL.md Este manual de procedimentos
├── verify.py Inspeção de medição real + exportação de imagens para inspeção visual
├── assets/
│ ├── satoyama.css Sistema de design principal, com 3 paletas
│ ├── template.html Estrutura básica (com espaço para a tese no início)
│ └── placeholder.svg Imagem placeholder para funcionar mesmo sem material definido
└── reference/
├── DESIGN_THESIS.md ★ O mais importante. Como escrever a tese, 6 tipos, catálogo de restrições negativas
└── DESIGN_SYSTEM.md Fundamentos de cada valor numérico, 10 tipos de bloco, como criar palavras
Ordem de leitura ao começar: DESIGN_THESIS.md → DESIGN_SYSTEM.md → template.
Copiar apenas os números não reproduz o tipo. A tese vem primeiro.
§6 Quando não usar este sistema
Painéis de administração, dashboards, LPs centradas em tabelas comparativas, anúncios de alta urgência, UIs de jogos, conteúdos que já possuem regras de marca estabelecidas. Títulos grandes em Mincho e margens amplas funcionam contra nesses casos.