De site genérico a cinematográfico: 2 comandos e 1 prompt

Como fazer meus sites com IA serem premium de verdade?

Essa é a pergunta que mais chega aqui. E a resposta honesta é esta: não é a cor.

Todo mundo acha que o problema é a paleta. Troca o roxo por azul, o azul por verde, e o site continua com a mesma cara. Porque o que entrega um template não é a tinta, é a falta de movimento e de direção.

Um site genérico é fácil de reconhecer: estático, simétrico, tudo empilhado no centro e quase sempre com aquele degradê roxo-pra-azul de SaaS. Cada seção é uma caixa em cima da outra. Nada se move, nada guia o olho, nada parece ter sido decidido por alguém. Parece montado, não parece dirigido.

A diferença entre um site comum e um site cinematográfico é a mesma entre uma foto e um filme: direção (composição, hierarquia, intenção) e movimento (scroll, parallax, profundidade).

Acima, o template CASA 77. Repare que nada está parado e nada está centralizado por acaso. Isso é direção + movimento.

Neste guia você sai com três coisas na mão:

• O passo a passo completo pra tirar a cara de template de qualquer site.
• Os comandos exatos pra dar à IA a documentação certa e instalar a direção (copiar e colar).
• O prompt cinematográfico pronto pra mandar a IA fazer o trabalho pesado.

Vamos aos 3 passos.

01 — Dê à IA a documentação certa

Site cinematográfico tem vida. O conteúdo aparece, desliza, ganha profundidade conforme você rola a página. Isso é movimento, e movimento não se improvisa: depende de usar bibliotecas de animação do jeito certo.

O problema é que a IA foi treinada num passado congelado. Ela "lembra" de APIs antigas, inventa funções que não existem mais e implementa animação com código desatualizado. O resultado é movimento quebrado ou genérico.

O context7 resolve isso. É um servidor MCP (gratuito, da Upstash) que busca a documentação real e atualizada de qualquer biblioteca e injeta direto no contexto da IA. Na prática: em vez de a IA chutar como anima algo, ela passa a ler a documentação verdadeira da lib de animação antes de escrever uma linha. Menos alucinação, mais código que funciona.

Comando pra instalar no Claude Code:

claude mcp add context7 -- npx -y @upstash/context7-mcp

Depois de instalar, é só pedir o que quer e escrever "use context7" no fim do prompt. A IA puxa a doc atualizada da biblioteca de animação e implementa scroll suave, parallax e easing do jeito certo, com as APIs que realmente existem hoje. Documentação certa é a primeira camada de intenção, e é a mais barata de instalar.

02 — Instale a direção

Movimento sem direção é só coisa se mexendo. A direção é o gosto: quais fontes, qual paleta, qual ritmo, qual textura. É a parte que a IA normalmente erra, porque ela tenta agradar todo mundo e cai na média genérica.

A skill /direction tira essa decisão da mão da IA. Em vez de pedir "melhore o design" e rezar, você entrega o gosto pronto: tipografia, paleta autoral, ritmo de seções e textura de filme. A IA para de adivinhar.

Ferramenta: plugin direction do marketplace cinematic-skills, dentro do Claude Code.

/plugin marketplace add rafhacorsini/cinematic-skills
/plugin install direction@cinematic-skills
/direction

Template é a média. Direção é a escolha. Quando você fixa a direção antes de pedir qualquer coisa pra IA, ela deixa de criar "um site bonitinho" e passa a executar a sua visão. O gosto deixa de ser sorte e vira regra. É isso que separa um portfólio de um filme.

03 — Aplique o prompt cinematográfico

Com a documentação certa e a direção instaladas, falta a ordem certa. O erro mais comum é pedir "deixa mais bonito", e a IA recomeça o site do zero, troca seu texto, inventa conteúdo.

Não é isso. Em vez de jogar uma receita gigante de uma vez e torcer, o melhor prompt conduz você por um checklist: a IA propõe opções em cada etapa (movimento, tipografia, paleta, textura), você escolhe, e só então ela aplica. Você vira o diretor; a IA, a equipe. Cole isto como ponto de partida:

Você é meu diretor de arte. Quero dar ao meu site uma DIREÇÃO
CINEMATOGRÁFICA, e vamos fazer isso JUNTOS, em etapas.

REGRAS GERAIS:
- Mantenha exatamente o mesmo texto e conteúdo. Mude só direção e movimento.
- PROIBIDO: degradê genérico roxo/azul de SaaS, layout simétrico e empilhado,
  tudo centralizado, cara de template.
- Use "use context7" pra puxar a API atualizada das libs antes de codar.
- REGRA DE OURO: cada elemento deve parecer DIRIGIDO, não montado.

COMO QUERO TRABALHAR:
Siga o checklist abaixo UMA ETAPA POR VEZ. Em cada etapa, me apresente 2 ou 3
opções com nome e uma descrição curta, espere eu escolher, e SÓ DEPOIS avance
pra próxima etapa. Não implemente nada antes de eu fechar todas as escolhas.

CHECKLIST:
[ ] 1. TIPOGRAFIA — sugira 2 ou 3 combinações de fontes do Fontshare com
       personalidade (sem Inter/Poppins padrão de SaaS). Diga onde usar cada
       uma (título x corpo).
[ ] 2. PALETA — proponha 2 ou 3 paletas autorais (ex: off-white/bege/preto +
       1 acento dessaturado). Nada saturado de SaaS.
[ ] 3. MOVIMENTO — proponha o estilo de animação: transições entre seções,
       scroll suave e amanteigado, entrada de textos animados (reveal linha a
       linha), parallax. Me diga 2 ou 3 "personalidades" de movimento.
[ ] 4. TEXTURA & COMPOSIÇÃO — proponha como quebrar a simetria, usar espaço
       negativo e camadas, e que textura de filme aplicar (grain, vinheta).

Comece agora pela etapa 1 e espere minha resposta.

A filosofia desse passo está na regra de ouro: dirigido, não montado. Você não está pedindo enfeite, está dando uma direção de arte e tomando as decisões. Ao travar o conteúdo, listar o que é proibido e escolher etapa por etapa, a IA para de inventar e começa a executar a sua visão. O resultado deixa de ser "mais um site bonito" e passa a ter ponto de vista. É a diferença entre decorar e dirigir.

Como eu uso os 3 juntos

Na prática o fluxo é sempre o mesmo: documentação → direção → prompt. Primeiro instalo o context7 pra a IA ter acesso à doc real das bibliotecas de animação. Depois rodo /direction pra fixar o gosto (fonte, paleta, ritmo, textura de filme), tirando a decisão das mãos da IA. Por último, colo o prompt cinematográfico, que mantém o conteúdo e reescreve só a forma. Sozinho, cada passo melhora um pouco. Juntos, transformam um site empilhado e estático em algo como o CASA 77: parece ter saído de um estúdio, não de um gerador. A documentação dá base, a direção dá gosto, o prompt amarra os dois numa visão só. Menos é mais, mas tudo precisa ser intencional.