Sua referência vira o estilo do site

Instale a skill

Clone o repositório e ligue a skill ao Claude Code. $T é a pasta meu-site dentro da sua pasta pessoal: as referências vão em meu-site/refs. S e T só valem no terminal em que você as criou: num terminal novo, rode a terceira linha de novo. Rode as linhas na pasta onde quer guardar o kit (o ln -s usa a pasta atual).

git clone https://github.com/inematds/site-inspirado
mkdir -p ~/.claude/skills && ln -sfn "$PWD/site-inspirado/skill/site-inspirado" ~/.claude/skills/site-inspirado
S=~/.claude/skills/site-inspirado; T=~/meu-site; mkdir -p $T/refs
cd $S/scripts && npm install && npx playwright install --with-deps chromium && cd -  # navegador do portão

Junte as referências

De 2 a 5 imagens em $T/refs/: o que você já tem (convite, logo, foto da loja) e inspiração (no Pinterest, busque "site padaria" ou "wedding website watercolor"). Uma imagem do que você NÃO quer também ajuda.

Deixe a IA perguntar primeiro

Abra o Claude Code dentro da pasta do site (assim o BRIEF, o estilo e a página ficam todos em $T) e diga a frase que muda o resultado. As perguntas por tipo de site estão em referencias/perguntas.md; as respostas vão para $T/BRIEF.md, junto com o tipo: negocio (o site existe para uma ação: encomendar, agendar) ou visual (evento, portfólio: pode ter mais movimento).

Os passos 4, 5 e 7, o cp do passo 6 e o passo 8 são comandos de terminal: abra um segundo terminal (o primeiro fica com o Claude Code) e rode nele a linha S=…; T=… do passo 1 antes.

# no terminal
cd $T && claude

# dentro do Claude Code (digite, não é comando de terminal)
/site-inspirado "Quero o site da minha padaria. Antes de gerar nada, me pergunte tudo o que precisa e pesquise o que um site deste tipo costuma ter."

Meça o estilo

O script mede a paleta das referências e sugere fundo, texto e destaque com o contraste calculado. O prompt de estilo descreve técnica, luz e cores, em inglês: peça ao Claude Code para escrevê-lo olhando suas referências. O número com ":1" é o contraste entre texto e fundo (abaixo de 4,5:1 fica difícil de ler).

python3 $S/scripts/estilo.py $T/refs $T/estilo.json --prompt "honest food photography, warm window light, dark walnut, terracotta"
# estilo.json: 12 cores · fundo #110a04 · tinta #ebdbce (14.55:1) · acento #b07042

Gere as imagens no mesmo estilo

Escreva $T/plano.json (uma linha por imagem: nome, prompt do assunto, largura, altura). Cada imagem leva as 2 primeiras referências (em ordem alfabética: dê nomes como 1-convite.jpg às que mais importam) e a primeira imagem gerada como modelo (a "âncora"), para a série sair com a mesma mão. No fim sai a folha.jpg, uma folha com todas as imagens lado a lado: olhe e refaça o que destoar. Não precisa escrever o JSON à mão: peça ao Claude Code "escreva o plano.json a partir do BRIEF" ou copie pilotos/padaria/plano.json e troque os textos. Cada imagem leva cerca de 1 minuto e usa a cota da sua assinatura do Codex.

# plano.json: [{"nome": "hero", "prompt": "pães esfriando na mesa", "largura": 1536, "altura": 1024}, ...]
python3 $S/scripts/imagens.py $T/plano.json $T/estilo.json $T/img --refs $T/refs
python3 $S/scripts/imagens.py $T/plano.json $T/estilo.json $T/img --refs $T/refs --so croissant  # refaz uma

Monte a página com movimento

Peça ao Claude Code: "monte a página com o BRIEF, o estilo e as imagens". Ele desenha uma página para o assunto e marca o botão principal (o CTA, a ação que você quer que o visitante faça) com data-cta. As transições vêm do movimento.js, por atributo: data-revela faz o bloco entrar ao aparecer na tela, data-parallax faz a imagem andar mais devagar que a rolagem, data-intro é uma abertura curta, data-conta conta um número e data-contagem mostra os dias até uma data. Tudo para quando o sistema pede "reduzir movimento". Copie o movimento.js para a pasta do site antes do portão:

<section data-revela="cortina"> … sobe | surge | lado | zoom | cortina
<img data-parallax="0.12">  <b data-conta="36">  <div data-intro="900">
<a data-cta href="#encomendar">Encomendar</a>
<script src="movimento.js"></script>
cp $S/runtime/movimento.js $T/

Passe no portão

Abre a página em 1440×900 e 390×844, com e sem "reduzir movimento". Use o --tipo que está no BRIEF (negocio ou visual). Se sair NÃO PASSA, a lista diz o motivo: cole no Claude Code e peça a correção. Só publique com PASSA.

node $S/scripts/portao.js $T/index.html --tipo negocio --fotos ~/fotos-portao
# portão visual × conversão — meu-site (negocio)
#   desktop          CTA na 1ª tela: sim · CTAs: 3 · peso 0.22 MB · erros 0
#   celular          CTA na 1ª tela: sim · CTAs: 3 · peso 0.55 MB · erros 0
#   desktop+reduzir  … · celular+reduzir  …
# PASSA

Publique

A pasta $T já é um site estático completo. Suba para o GitHub e ligue o GitHub Pages, a hospedagem grátis de páginas do GitHub (ou use a Vercel ou a hospedagem do cliente). Troque SEU_USUARIO pelo seu usuário do GitHub. O site abre em https://SEU_USUARIO.github.io/meu-site/ alguns minutos depois.

# não publique os dados do cliente nem os rascunhos:
printf 'BRIEF.md\nrefs/\nfotos/\nimg/.codex/\nimg/folha.jpg\n' > $T/.gitignore
git config --global user.name "Seu Nome"; git config --global user.email "voce@email.com"  # só na 1ª vez
cd $T && git init -b main && git add -A && git commit -m "site"
gh repo create meu-site --public --source=. --push
gh api -X POST repos/SEU_USUARIO/meu-site/pages -f "source[branch]=main" -f "source[path]=/"