scroll-craft es un skill para agentes de código con IA que crea webs guiadas por el scroll. Al desplazarte, el vídeo avanza fotograma a fotograma, las secciones se quedan fijas mientras su historia avanza y los titulares se forman línea a línea. Además del movimiento, sigue reglas firmes de tipografía, espaciado, color y profundidad.
Es de código abierto con licencia MIT. Funciona con Claude Code, Codex y otros agentes de código que puedan leer instrucciones, editar archivos, ejecutar comandos y mirar un navegador. También existe como plugin de Claude Code. El 24 de octubre de 2026 el repositorio tenía casi 4.000 estrellas en GitHub, y su README describe la versión 0.3.0.
Qué crea
- El scroll como línea de tiempo. El vídeo avanza con la rueda del ratón, las secciones se fijan, las filas se deslizan de lado y el color de fondo cambia a medida que bajas por la página. El puntero del ratón también puede mover cosas.
- Ocho estilos de página, como una película en un solo plano, una revista por capítulos, un póster, una galería o un escenario dividido. Cada uno prohíbe lo que los otros exigen, para que dos webs no acaben poco a poco siendo la misma página.
- Un gesto propio. Cada web recibe una interacción suya que ninguna otra web tiene.
- Un control contra las repeticiones. Una web nueva tiene que diferenciarse de las anteriores en al menos cuatro de seis aspectos, como el estilo de página, la navegación, el comienzo y el final.
Las reglas de diseño
- Antes de construir, escribe una línea por sección: la sensación que debe transmitir y qué hay en pantalla que la provoca.
- Un momento culminante planificado. La página tiene un único pico, con el mayor espacio de scroll y las mejores imágenes.
- Reglas de tipografía: como máximo dos familias tipográficas y una longitud de línea de 45 a 75 caracteres.
- Una escala de espaciado basada en 4 píxeles, con más espacio encima de un titular que debajo y menos relleno en el móvil.
- Colores con funciones fijas y un solo color de acento, y nada de negro puro.
- Tu guía de marca manda. Si le das reglas de marca, van por delante de su propio gusto.
- Una lista de cosas que rechaza, como cuadrículas de tarjetas idénticas, texto con degradado, paneles falsos, degradados morados de IA y estadísticas inventadas.
Cómo revisa su trabajo
Un navegador sin ventana recorre la página terminada, espera en cada posición a que el vídeo se asiente e informa de los problemas:
- Scroll que no cambia nada en pantalla.
- Texto que nunca llega a verse del todo.
- Texto sin suficiente contraste, medido línea a línea frente al fotograma más brillante que pasa por detrás.
- Un clip de vídeo que nunca cargó y solo muestra su primera imagen.
Después crea una hoja de contactos con capturas, porque una máquina puede demostrar que una página funciona, pero no puede decirte si significa algo.
Qué saber antes
Según el proyecto, solo se ha ejecutado en Windows. Sus scripts también buscan FFmpeg y Chrome en las ubicaciones de macOS y Linux, pero aún no se ha creado ninguna web en un Mac. Necesita Node.js 18 o posterior, una compilación completa de FFmpeg y playwright-core con Chrome para las revisiones. Solo hace falta una KIE_AI_API_KEY si quieres que genere imágenes o vídeo, y eso cuesta dinero. Una página hecha con tus propias fotos y vídeos no cuesta nada.
Tiene opiniones firmes a propósito. Rechazará diseños y colores que delatan una página hecha con IA, y discutirá contigo sobre el momento culminante de tu página.
Cómo instalarla
En Claude Code, añade el marketplace e instala el plugin:
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-designDespués describe la web que quieres o llámalo directamente:
/nateherk-design:scroll-craftSi el instalador lo pide, ejecuta /reload-plugins. En Codex, copia la carpeta scroll-craft completa de plugins/nateherk-design/skills/ del repositorio a la carpeta .agents/skills/ de tu proyecto y pide a Codex que use el skill. Antes de la primera construcción, ejecuta el script doctor que viene con el skill, que detecta los problemas de configuración habituales.