nateherkai/scroll-craft

何を解決するか

Scrollcraft は、AI 生成サイトが一般的で忘れられがちなスタイルや、派手だが設計が悪い（例：悪いタイポグラフィ、モバイル対応の欠如、繰り返しのレイアウト）傾向に陥るという一般的な問題に対処します。高品質なインタラクションデザインと美的職人技を統合されたプロセスとして扱い、特別に設計された、プロフェッショナルな印象を与える高精細なスクロール駆動型ウェブサイトを構築します。

動作方法

Claude Code のスキルとして機能し、専用エンジンと厳格な設計制約を用いて、特定のプロダクションパイプラインに沿って AI を導きます。

• ページ文法：「フィルミック・ワンショット」や「コンティニュアス・ワールド」など、互いに排他的な 8 種類のレイアウト構造を使用し、サイトが単一の一般的なスタイルに収束することを防ぎます。
• フィンガープリントゲート：繰り返しを防ぐために、新しいビルドは過去のプロジェクトと少なくとも 6 次元（文法、ナビゲーション、ヘロ、アクションの形状、クローズ、シグネチャムーブ）のうち 4 つ以上で異なっている必要があります。
• デザインフロア：タイポグラフィ（最大 2 フォント、特定の行間）、スペース（4px ベースリズム）、色（6 種類の役割、純黒禁止）に対して厳格なルールを適用し、プロフェッショナルな基準を維持します。
• 感情曲線：各「アクション」の感情的意図をビルド前にマッピングし、エンジニアリングされたエンゲージメントのピークを確保します。
• 自動検証：ヘッドレスブラウザ（Playwright）を使用して、最終ページの「無効スクロール」（スクロールしても何も起こらない領域）、コントラストの問題、破損したアセットを監査します。

対象ユーザー

Claude Code を使用し、AI の「見た目」を避け、プロフェッショナルなデザイン基準に従った高精細なスクロール駆動型ランディングページを構築したいデザイナーおよび開発者。

特徴

• スクロール＝タイムライン：フレーム単位の動画スクラビング、セクションのピン留め、パンレールなどの高度なインタラクションをサポート。
• 特別なインタラクション：すべてのビルドで、1 つのユニークな「シグネチャムーブ」インタラクションを考案する必要があります。
• 厳格な拒否リスト：グラデーションテキスト、同一の機能カードグリッド、および「AI パープル」グラデーションなどの一般的な AI のトロープを明示的に禁止。
• ブランド統合：ブランドキットをハード制約として扱い、スキルのデフォルト設定を上書き可能。
• 自己監査：すべてのスクロール位置でアクセシビリティ（コントラスト）と技術的バグ（デコードされていないクリップ）を自動チェック。