nateherkai/scroll-craft

何を解決するか

多くのAI生成サイトは、どちらかといえば無個性で忘れられがち、または派手だが設計が拙い（例：悪いタイポグラフィ、モバイル対応の悪さ、繰り返しのレイアウト）です。scroll-craftは、インタラクションとハイエンドデザインの職人技を統合されたプロセスとして扱うことで、AIエージェントが「量産品」のようなAIページを生成することを防ぎます。

どう動くか

CodexやClaude Codeなどのコーディングエージェントと連携できる「エージェントスキル」（指示、参照、ツールのセット）として機能します。エージェントが従うべき厳格なデザインフレームワークを提供します：

• ページ文法（Page Grammars）： 8つの互いに排他的なレイアウトスタイル（例：映画的なワンショット、タイポグラフィポスター）を定義し、多様性を確保します。
• デザイン制約（Design Constraints）： タイポグラフィの最低基準、特定の余白スケール、限定されたカラーパレットを強制することで、プロフェッショナルな基準を維持します。
• フィンガープリントゲート（Fingerprint Gate）： 繰り返しを防ぐため、新しいビルドは6つの次元（文法、ナビゲーション、ヘロセクション、アクションの形状、クローズ、サインチャーム）のうち少なくとも4つで過去のプロジェクトと異なっている必要があります。
• 検証エンジン（Verification Engine）： ヘッドレスブラウザが完成したページを自動的に監査し、『スクラッチレススクロール』（スクロールしても何も反応しない領域）、コントラストの問題、壊れた動画クリップを検出します。
• テクニカルエンジン（Technical Engine）： コアのJavaScript/CSSエンジンが、各プロジェクトのコアメカニズムを編集せずにスクロール駆動アニメーション（例：フレーム単位の動画スクロール）を処理します。

対象ユーザー

高品質で没入型のスクロール駆動サイトをAIコーディングエージェントで構築したい開発者やデザイナー。プロフェッショナルなデザイン基準を守り、『AI風』の見た目を避けたい人向けです。

特徴

• スクロール＝タイムライン： 動画がフレーム単位でスクロールされ、ユーザーがスクロールするにつれてセクションが固定される複雑なインタラクションを可能にします。
• 無個性防止ガードレール： 明確に、同じ特徴カードグリッドや「AIパープル」のグラデーションといった一般的なAIデザインの悪習を禁止しています。
• 自動品質管理： ヘッドレスブラウザを使用して、視覚的・機能的失敗を報告する検証プロセスを含んでいます。
• エージェント対応： Claude Codeプラグインとして、および他のコーディングエージェント向けのポータブルスキルフォルダとして提供されます。