scroll-craft auf GitHub ansehen
scroll-craft ist ein Skill für KI-Coding-Agenten, der scrollgesteuerte Websites baut. Beim Scrollen läuft ein Video Bild für Bild vorwärts, Abschnitte bleiben stehen, während ihre Geschichte weitergeht, und Überschriften bauen sich Zeile für Zeile auf. Neben der Bewegung folgt es festen Regeln für Schrift, Abstände, Farbe und Tiefe.
Es ist Open Source unter der MIT-Lizenz. Es funktioniert mit Claude Code, Codex und anderen Coding-Agenten, die Anweisungen lesen, Dateien bearbeiten, Befehle ausführen und einen Browser ansehen können. Es gibt es auch als Claude-Code-Plugin. Am 24. Oktober 2026 hatte das Repository knapp 4.000 Sterne auf GitHub, und seine README beschreibt Version 0.3.0.
Was es baut
- Scrollen als Zeitleiste. Das Video bewegt sich unter dem Mausrad, Abschnitte bleiben stehen, Reihen gleiten seitwärts, und die Hintergrundfarbe ändert sich, während du die Seite hinuntergehst. Auch der Mauszeiger kann Dinge bewegen.
- Acht Seitenstile, etwa ein Film in einer Einstellung, ein Magazin in Kapiteln, ein Poster, eine Galerie oder eine geteilte Bühne. Jeder verbietet, was die anderen verlangen, damit zwei Websites nicht langsam zur selben Seite werden.
- Ein Markenzeichen. Jede Website bekommt eine eigene Interaktion, die keine andere Website hat.
- Ein Check gegen Wiederholungen. Eine neue Website muss sich von deinen früheren in mindestens vier von sechs Punkten unterscheiden, etwa im Seitenstil, in der Navigation, im Einstieg und im Schluss.
Die Designregeln
- Bevor es baut, schreibt es eine Zeile pro Abschnitt: das Gefühl, das er wecken soll, und was auf dem Bildschirm es auslöst.
- Ein geplanter Höhepunkt. Die Seite bekommt einen Gipfel, mit dem meisten Scrollraum und den besten Bildern.
- Schriftregeln: höchstens zwei Schriftfamilien und eine Zeilenlänge von 45 bis 75 Zeichen.
- Eine Abstandsskala auf Basis von 4 Pixeln, mit mehr Platz über einer Überschrift als darunter und weniger Innenabstand auf dem Handy.
- Farben mit festen Rollen und einer Akzentfarbe, und kein reines Schwarz.
- Dein Markenleitfaden gewinnt. Wenn du ihm Markenregeln gibst, gehen sie seinem eigenen Geschmack vor.
- Eine Liste von Dingen, die es ablehnt, etwa identische Kartenraster, Verlaufstext, falsche Dashboards, lila KI-Verläufe und erfundene Statistiken.
Wie es seine Arbeit prüft
Ein Browser ohne Fenster scrollt durch die fertige Seite, wartet an jeder Position, bis das Video zur Ruhe kommt, und meldet Probleme:
- Scrollen, das nichts auf dem Bildschirm ändert.
- Text, der nie ganz sichtbar wird.
- Text mit zu wenig Kontrast, Zeile für Zeile gemessen am hellsten Bild, das je dahinter vorbeizieht.
- Ein Videoclip, der nie geladen wurde und nur sein erstes Bild zeigt.
Dann erstellt es einen Kontaktbogen aus Screenshots, denn eine Maschine kann beweisen, dass eine Seite funktioniert, aber nicht sagen, ob sie etwas bedeutet.
Was du vorher wissen solltest
Laut dem Projekt wurde es bisher nur unter Windows ausgeführt. Die Skripte suchen FFmpeg und Chrome auch an macOS- und Linux-Orten, aber auf einem Mac wurde noch keine Website gebaut. Es braucht Node.js 18 oder neuer, ein vollständiges FFmpeg und playwright-core mit Chrome für die Prüfungen. Ein KIE_AI_API_KEY ist nur nötig, wenn es Bilder oder Videos erzeugen soll, und das kostet Geld. Eine Seite aus deinen eigenen Fotos und Aufnahmen kostet nichts.
Es ist absichtlich eigensinnig. Es lehnt Layouts und Farben ab, an denen man KI-Seiten leicht erkennt, und es wird mit dir über den Höhepunkt deiner Seite streiten.
So installierst du es
Füge in Claude Code den Marketplace hinzu und installiere das Plugin:
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-designDann beschreibe die gewünschte Website oder rufe es direkt auf:
/nateherk-design:scroll-craftWenn der Installer danach fragt, führe /reload-plugins aus. In Codex kopierst du den ganzen scroll-craft-Ordner aus plugins/nateherk-design/skills/ im Repository in den Ordner .agents/skills/ deines Projekts und bittest Codex, den Skill zu nutzen. Führe vor dem ersten Build das mitgelieferte doctor-Skript aus, das die üblichen Einrichtungsprobleme findet.