scroll-craft é um skill para agentes de código de IA que cria sites guiados pela rolagem. Ao rolar, o vídeo avança quadro a quadro, as seções ficam fixas enquanto a história delas avança, e os títulos se montam linha por linha. Além do movimento, ele segue regras firmes de tipografia, espaçamento, cor e profundidade.
É código aberto sob a licença MIT. Funciona com Claude Code, Codex e outros agentes de código que consigam ler instruções, editar arquivos, executar comandos e olhar um navegador. Também vem como plugin do Claude Code. Em 24 de outubro de 2026, o repositório tinha quase 4.000 estrelas no GitHub, e o README descreve a versão 0.3.0.
O que ele monta
- A rolagem como linha do tempo. O vídeo anda com a roda do mouse, as seções ficam fixas, fileiras deslizam para o lado e a cor de fundo muda conforme você desce a página. O ponteiro do mouse também pode mexer nas coisas.
- Oito estilos de página, como um filme em plano-sequência, uma revista em capítulos, um pôster, uma galeria ou um palco dividido. Cada um proíbe o que os outros exigem, para que dois sites não acabem virando aos poucos a mesma página.
- Um movimento assinatura. Cada site ganha uma interação própria que nenhum outro site tem.
- Uma checagem contra repetições. Um site novo precisa ser diferente dos anteriores em pelo menos quatro de seis aspectos, como o estilo da página, a navegação, a abertura e o final.
As regras de design
- Antes de construir, ele escreve uma linha por seção: o sentimento que ela deve passar e o que na tela provoca esse sentimento.
- Um ponto alto planejado. A página tem um único pico, com o maior espaço de rolagem e as melhores imagens.
- Regras de tipografia: no máximo duas famílias de fontes e um comprimento de linha de 45 a 75 caracteres.
- Uma escala de espaçamento baseada em 4 pixels, com mais espaço acima de um título do que abaixo, e menos margem interna no celular.
- Cores com papéis fixos e uma única cor de destaque, e nada de preto puro.
- Seu guia de marca vence. Se você der regras de marca, elas vêm antes do gosto dele.
- Uma lista de coisas que ele recusa, como grades de cards idênticos, texto em degradê, dashboards falsos, degradês roxos de IA e estatísticas inventadas.
Como ele confere o trabalho
Um navegador sem janela rola pela página pronta, espera em cada posição até o vídeo se estabilizar e aponta os problemas:
- Rolagem que não muda nada na tela.
- Texto que nunca fica totalmente visível.
- Texto sem contraste suficiente, medido linha por linha contra o quadro mais claro que passa por trás dele.
- Um clipe de vídeo que nunca carregou e só mostra a primeira imagem.
Depois, ele faz uma folha de contato com capturas de tela, porque uma máquina consegue provar que uma página funciona, mas não consegue dizer se ela significa alguma coisa.
O que saber antes
Segundo o projeto, ele só foi executado no Windows até agora. Os scripts também procuram o FFmpeg e o Chrome nos locais do macOS e do Linux, mas nenhum site foi feito num Mac ainda. Ele precisa do Node.js 18 ou mais recente, de uma versão completa do FFmpeg e do playwright-core com Chrome para as checagens. Uma KIE_AI_API_KEY só é necessária se você quiser que ele gere imagens ou vídeo, o que custa dinheiro. Uma página feita com suas próprias fotos e vídeos não custa nada.
Ele é opinativo de propósito. Vai recusar layouts e cores que denunciam uma página feita por IA, e vai discutir com você sobre o ponto alto da sua página.
Como instalar
No Claude Code, adicione o marketplace e instale o plugin:
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-designDepois, descreva o site que você quer ou chame-o diretamente:
/nateherk-design:scroll-craftSe o instalador pedir, execute /reload-plugins. No Codex, copie a pasta scroll-craft inteira de plugins/nateherk-design/skills/ no repositório para a pasta .agents/skills/ do seu projeto e peça ao Codex para usar o skill. Antes da primeira construção, execute o script doctor que vem com o skill, que encontra os problemas de configuração mais comuns.