scroll-craft は、スクロールで動くウェブサイトを作るAIコーディングエージェント向けのスキルです。スクロールすると動画がコマ送りで進み、セクションは話が進む間その場に固定され、見出しは1行ずつ組み上がります。動きに加えて、文字、余白、色、奥行きについての厳しいルールに従います。
MIT ライセンスのオープンソースです。Claude Code、Codex のほか、指示を読み、ファイルを編集し、コマンドを実行し、ブラウザーを確認できるコーディングエージェントで使えます。Claude Code のプラグインとしても提供されています。2026年10月24日時点で、リポジトリの GitHub スターは4,000近くあり、README ではバージョン0.3.0について説明しています。
作られるもの
- スクロールがタイムライン。マウスホイールに合わせて動画が動き、セクションが固定され、列が横にスライドし、ページを下るにつれて背景色が変わります。マウスポインターでも物を動かせます。
- 8つのページスタイル。ワンカットの映画、章立ての雑誌、ポスター、ギャラリー、分割ステージなどです。それぞれが他のスタイルに必要なものを禁止しているので、2つのサイトが少しずつ同じページになっていくことがありません。
- 1つのシグネチャー演出。どのサイトにも、他のサイトにはない独自のインタラクションが1つ入ります。
- 繰り返しのチェック。新しいサイトは、ページスタイル、ナビゲーション、冒頭、結末など6つの観点のうち少なくとも4つで、以前のサイトと違っていなければなりません。
デザインのルール
- 作る前に、セクションごとに1行ずつ書きます。与えるべき感情と、それを生む画面上の要素です。
- 計画された1つの山場。ページには山場が1つだけあり、そこに最も長いスクロールと最高の映像が使われます。
- 文字のルール：フォントファミリーは最大2つ、1行の長さは45〜75文字。
- 4ピクセルを基準にした余白のスケール。見出しの上は下より広く、スマホでは余白を小さくします。
- 役割が決まった色と、1つのアクセントカラー。真っ黒は使いません。
- ブランドガイドが優先。ブランドのルールを渡せば、スキル自身の好みよりそちらが優先されます。
- 使わないもののリスト。同じカードが並ぶグリッド、グラデーション文字、偽のダッシュボード、紫のAIグラデーション、作り話の統計などです。
作ったものの確認方法
画面を持たないブラウザーが完成したページをスクロールし、各位置で動画が落ち着くのを待ってから、問題を報告します。
- 画面上で何も変わらないスクロール。
- 最後まで完全には表示されない文字。
- コントラストが足りない文字。背後を通る最も明るいコマに対して、1行ずつ測ります。
- 読み込まれずに最初のコマだけが表示されている動画クリップ。
最後にスクリーンショットのコンタクトシートを作ります。機械はページが動くことは証明できても、それに意味があるかどうかは教えてくれないからです。
先に知っておきたいこと
プロジェクトによると、これまで Windows でしか動かしたことがありません。スクリプトは macOS や Linux の場所でも FFmpeg と Chrome を探しますが、Mac でサイトを作った例はまだありません。Node.js 18 以降、フルビルドの FFmpeg、確認用に playwright-core と Chrome が必要です。KIE_AI_API_KEY は画像や動画を生成させたい場合だけ必要で、これには費用がかかります。自分の写真や映像で作るページなら費用はかかりません。
あえてこだわりが強く作られています。AIが作ったとすぐ分かるレイアウトや色は拒み、ページの山場についてあなたと議論します。
インストール方法
Claude Code でマーケットプレイスを追加し、プラグインをインストールします。
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-designあとは作りたいサイトを説明するか、直接呼び出します。
/nateherk-design:scroll-craftインストーラーに求められたら /reload-plugins を実行します。Codex では、リポジトリの plugins/nateherk-design/skills/ にある scroll-craft フォルダーを丸ごとプロジェクトの .agents/skills/ フォルダーにコピーし、Codex にこのスキルを使うよう頼みます。最初に作る前に、スキルに付属する doctor スクリプトを実行すると、よくある設定の問題を見つけてくれます。