Um guia passo a passo para criar com IA um site cinematográfico controlado pela rolagem e incorporar o vídeo da sua oferta sem anúncios estragando tudo.
O site está lindo, e aí um anúncio do YouTube começa a rodar bem na primeira dobra. Contagem regressiva para pular o anúncio, uma marca que não tem nada a ver com você, e toda a mágica se desfaz em um segundo.
Suba o mesmo vídeo em uma plataforma sem anúncios e com um player totalmente personalizável, e incorpore esse. Limpo, com a cara da sua marca, sem interrupções.
Siga na ordem. Todos os comandos, links e configurações de que você precisa estão aqui.
Skills são complementos gratuitos que ensinam ao Claude Code uma habilidade específica. Estas três fazem ele deixar de ser um gerador de templates genéricos e virar um designer de nível sênior. Instale uma por uma: abra o Claude Code e cole o comando, ou simplesmente mande o link do GitHub para o Claude e peça para ele instalar.
Um cérebro de design: 84 estilos, cerca de 190 paletas de cores, 74 combinações de fontes e regras de UX. Dá ao Claude comandos como design, ui-styling, brand.
O pacote antigenérico: estilos premium (minimalist, soft, editorial, redesign) que impedem o site de ficar com cara de template.
# no seu terminal: npx skills add Leonxlnx/taste-skillO pacote de movimento (do criador do Sonner e do Vaul): animações e transições de nível premium. É isso que deixa a rolagem com cara de site caro.
# no seu terminal: npx skills add emilkowalski/skillsUm MCP é um conector que dá ao Claude uma nova habilidade. Com o Magnific, o Claude consegue gerar as imagens e o vídeo da sua cena direto no chat.
Cadastre-se em magnific.ai. O plano básico, de cerca de €16 por mês, dá conta do projeto inteiro: uma imagem da cena e um vídeo curto. Vídeo gasta mais créditos que imagem, então fique de olho no saldo.
No app do Claude: Settings, Connectors, Add custom connector (Configurações, Conectores, Adicionar conector personalizado). Cole esta URL e confirme:
https://mcp.magnific.comPrefere o terminal? Rode claude mcp add --transport http magnific https://mcp.magnific.com
O Claude pede para você entrar na sua conta do Magnific uma vez (OAuth). Aprove, e as ferramentas de imagem e vídeo ficam disponíveis no chat.
Aqui está o prompt completo. O site de referência já vem preenchido (é o meu projeto pronto), assim o Claude tem um estilo concreto para seguir. Troque os campos destacados pelo seu produto, sua foto, seus objetos e seus textos, depois cole no Claude Code e anexe a sua foto.
Crie um site de uma página só, premium e cinematográfico, para [SOBRE O QUE É O SITE, ex.: um curso online, um app, uma marca pessoal]. # Direção visual Siga o visual, a sensação e a qualidade deste site de referência: https://obscura-course.pages.dev (escuro, cinematográfico, uma única cor de destaque quente, fontes premium, granulação de filme, uma sobreposição de visor de câmera). Você pode escolher a sua própria cor de destaque: [#HEX]. Não faça um template genérico. Escreva todos os textos do site em português do Brasil. # Hero (primeira dobra): um tour por uma única cena, controlado pela rolagem A primeira tela é uma cena contínua construída em torno de um vídeo. Gere os assets com o Magnific MCP: 1) Um quadro amplo e detalhado de [A CENA, ex.: um estúdio de cinema / um escritório / uma oficina] com [PROTAGONISTA, ex.: eu / um produto] no centro e estes objetos bem espalhados pelo quadro: [OBJETO 1], [OBJETO 2], [OBJETO 3]. Use a minha foto como referência de personagem: [ANEXE SUA FOTO]. Mantenha o meu rosto e os meus traços consistentes. 2) A partir desse quadro, gere um vídeo de ~8s com o Seedance. Dê a ele um roteiro de câmera segundo a segundo, em que o ponto de vista voa do protagonista até cada objeto, um de cada vez, e para em cada um: 0-1s plano aberto; aproxima em [OBJETO 1], para; desliza até [OBJETO 2], para; vai até [OBJETO 3], para. Os objetos ficam parados, só a câmera se move. Comportamento da rolagem: UM gesto de rolagem = UM voo até o próximo objeto. IMPORTANTE: dê PLAY no trecho do vídeo entre os pontos-chave, NÃO faça scrub do currentTime quadro a quadro (isso trava no Windows). Recodifique o vídeo com todos os quadros como keyframe (all-keyframes) para a reprodução ficar fluida. Depois do último objeto, a próxima rolagem libera a página para as seções de baixo. Em cada objeto, um texto curto de capítulo aparece suavemente perto do fim do voo, na parte VAZIA do quadro (do lado oposto ao objeto): - [OBJETO 1]: "[TÍTULO DO CAPÍTULO 1]" + 3 tópicos curtos - [OBJETO 2]: "[TÍTULO DO CAPÍTULO 2]" + 3 tópicos - [OBJETO 3]: "[TÍTULO DO CAPÍTULO 3]" + 3 tópicos Adicione uma sobreposição sutil de visor de câmera: cantos de enquadramento, um ponto REC, um timecode correndo. # Seções abaixo do hero - Um bloco de prévia do vídeo: deixe um espaço reservado bem sinalizado, eu colo o código embed depois. - Preço: [SEU PREÇO + o que está incluso]. - Um rodapé minimalista. Use o nome de marca provisório [NOME DA MARCA] no lugar de uma marca real. # Parte técnica Um único HTML + CSS + JS, sem etapa de build. Responsivo, ajustado para gravar a tela no desktop. Totalmente autocontido, para poder ser publicado no Cloudflare Pages. Salve uma versão de backup antes de mudanças grandes. Quando o site estiver pronto, eu vou colar o meu código embed do Kinescope e pedir para você inserir no bloco de prévia.
[SOBRE O QUE É O SITE]Seu produto em uma linha: um curso, um app, um serviço, sua marca pessoal.[#HEX]Uma cor de destaque para o site inteiro (ex.: um âmbar quente, #F0A94B).[A CENA]Onde o tour acontece: um estúdio, um escritório, uma oficina, uma cozinha.[PROTAGONISTA] + [FOTO]Você ou o seu produto no centro. Anexe 1 foto, ou 3 a 4 de ângulos diferentes para ficar muito mais parecido.[OBJETO 1..3]Os itens para onde a câmera voa. Escolha coisas que representem as etapas da sua oferta.[TÍTULOS DOS CAPÍTULOS]O texto em cada objeto: um título e três tópicos curtos.[SEU PREÇO]O preço e o que está incluso.[NOME DA MARCA]Um nome fictício, para não ficar ligado a uma empresa real.Esta é a parte sem anúncios. Em vez do YouTube, hospede o vídeo da sua oferta no Kinescope, uma plataforma de vídeo sem nenhum anúncio. Veja exatamente como.
Abra o seu vídeo e vá na aba Settings, Player (Configurações, Player). As opções do player também ficam nas configurações do projeto, e lá valem para todos os vídeos de uma vez. Deixe o player com a cara do seu site, em vez de parecer uma caixa estranha colada ali.
No mínimo, configure a cor de destaque, a capa e o logo: é isso que faz o vídeo incorporado parecer parte do site.
No Kinescope, abra o seu vídeo e encontre a opção Share, Embed (Compartilhar, Incorporar). Copie o código de incorporação, um trecho <iframe>...</iframe>. Mande para o Claude e diga: "insira este embed no bloco de prévia do vídeo." Pronto: um vídeo sem anúncios, com a cara da sua marca, dentro do seu site feito com IA.
O Kinescope é uma plataforma de hospedagem e streaming de vídeo, a alternativa ao YouTube sem anúncios e com um player que você controla por completo. É o que mantém o vídeo do seu site limpo e com a cara da sua marca.