PTENES
Claude Code · plugin de diseño

El scroll se convierte en timeline, no decoración

Skill que construye páginas premium impulsadas por scroll y rechaza el patrón genérico de IA: las mismas seis grillas, los mismos contadores 01/06, el mismo gradiente morado. Verifica su propio trabajo antes de entregártelo.

Comenzar la guía Ver en GitHub
scrollcraft — video controlado por scroll en una página oscura con acento ámbar
Qué es

Un plugin (main-design) para Claude Code

Instala como skill y genera páginas HTML/CSS/JS scroll-driven a partir de una entrevista contigo, siguiendo un estándar fijo de craft: no una plantilla que solo cambia de color.

🎞️ El scroll es la timeline

El video se recorre cuadro a cuadro con la rueda del mouse, las secciones se fijan (pin) mientras avanza el argumento, los rails se deslizan hacia un lado, los titulares se montan línea por línea.

🧬 Ocho gramáticas, una por build

Film one-shot, editorial por capítulos, superficie viva, mundo continuo, póster tipográfico, galería, escenario dividido, cutlist rítmico: cada uno prohíbe lo que los demás exigen.

🔍 Verifica su propio trabajo

Un navegador headless recorre la página en cada posición de scroll e informa sobre scroll muerto, contraste real, cues que nunca se abren y clips trabados en un «poster» congelado.

Cómo funciona

De la entrevista al contact sheet

Cada build sigue el mismo procedimiento antes de convertirse en página final.

Entrevista→ Gramática + fingerprint gate→ Feeling curve + pico→ Build (engine fijo)→ Verificación headless→ Contact sheet

🚧 Barrera de huella digital

Un build nuevo debe diferir de todos los builds anteriores en al menos 4 de 6 dimensiones: gramática, nav, hero, forma de los actos, cierre, signature move. ¿Falló el gate? Cambia el plan, no el registro.

📈 Curva emocional

Una línea por acto: la emoción y lo que en pantalla la provoca. Si dos actos adyacentes tienen la misma emoción, uno está de relleno. Un solo pico, con el presupuesto de assets y el silencio previo.

Requisitos previos

Lo que debe estar instalado

Ejecuta doctor antes que nada: detecta los tres problemas de configuración que, sin él, aparecen después como errores engañosos.

Node 18+

Necesario para todos los scripts del plugin.

ffmpeg completo

Necesita un build completo (con scale), no un stripped de ~50 filtros. SCROLLCRAFT_FFMPEG sobrescribe la búsqueda.

# verificación automática
node scripts/doctor.mjs

playwright-core + Chrome

Usado en la pasada de verificación. Instálalo en la carpeta del build.

# en la carpeta del build
npm i playwright-core
Guía de uso · paso a paso

Instalar, activar, construir

Comandos reales, en el orden en que realmente los ejecutas.

1

Agrega el marketplace

Dentro de Claude Code.

/plugin marketplace add inematds/scroll-craft
2

Instala el plugin

El identificador del plugin es main-design.

/plugin install main-design  # si lo pide, ejecuta /reload-plugins
3

Ejecuta el preflight

Antes de cualquier build, confirma que ffmpeg, WebP muxer y playwright-core estén bien.

node scripts/doctor.mjs              # indica exactamente lo que falta
node scripts/workspace.mjs --ensure  # crea el workspace y el registro vacío
4

Invoca la skill

Describe lo que quieres o invócalo directamente.

/main-design:scrollcraft
5

(Opcional) modificar sin instalar

Para editar la skill localmente sin pasar por el marketplace.

claude --plugin-dir ./plugins/main-design
Ejemplos

Tres builds, tres páginas completamente diferentes

La misma skill, el mismo engine, ningún esqueleto compartido: la gramática, la navegación y el cierre cambian en cada uno.

Orrery — vuelo continuo por un modelo a escala de la Tierra
Orrery · agencia de viajes. Un único escenario fijo: llegas a un modelo artesanal de la Tierra, aterrizas en Kyoto, cruzas la Patagonia y el Sahara, y regresas a la mesa de trabajo donde empezaste.
PERKFORM — página de producto en un one-shot fílmico
PERKFORM · café proteico. One-shot fílmico que corta directamente a dos fondos invertidos a sangre en medio de la página. Impactante y directo al producto.
Fallowbank — página documental y contenida
Fallowbank · estudio de paisajismo. Tranquila, documental. Pies de foto como rótulos de museo sobre fotografías reales; cierre con una línea de texto corrido, sin botón.
Limitaciones honestas

Lo que el proyecto asume intencionalmente

Directamente del README: nada oculto.

Plataforma
Probado solo en WindowsLos scripts buscan ffmpeg y Chrome en rutas de Windows, macOS y Linux, pero no se hizo ningún build en una Mac. SCROLLCRAFT_FFMPEG e SCROLLCRAFT_CHROME sobrescriben la búsqueda.
Costo
El video generado no es gratisUn vuelo de diez etapas en un mundo continuo implica un gasto real. Una página construida con assets propios no cuesta nada.
Enfoque
Es deliberadamente tajanteRechaza layouts y paletas que delatan una página hecha por IA, y va a debatir contigo sobre tu pico. Si quieres una página igual a todas las demás, esta no es la herramienta adecuada.