uphomesco-hub/openclaw-storytelling-landing-page-skill

ストーリーテリングランディングページ

このスキルを使用して、映画のようなナラティブアーク、生成された画像アセット、そしてペースト可能な開発者ビルドプロンプトを備えた没入型のスクロール駆動型ランディングページを作成します。参考バーはLast Ritesプロジェクトです：ピン留めズーム/プルバック、炎から水への変形ソウルオブジェクト、ドラッグ可能なメモリスライダー、パーティクル、カスタムカーソル、マグネティックボタン、ローディング画面、mix-blend-mode: screenを使用した透過PNGオーバーレイ、そして必須の2秒間のピン留め一時停止後の2層CTAです。

デフォルトの出力は計画とビルドプロンプトです。ユーザーが実際にビルドするように依頼した場合、Viteプロジェクトを作成し、アセットを生成またはスタブし、必要に応じてOpen Designをデザイン/プロトタイプのサイドカーとして使用し、ローカルで実行し、動作するページを最初から最後までスクロールして確認します。ページがブラウザで視覚的にテストされ、ブランドにとって十分にシネマティックでクールだと判断されるまでは、ビルドは完了しません。

Open Designによるルーティング

ナラティブ、シーン計画、モーション仕様、プロンプト、ビルドプロンプトには通常のスキルフローを使用します。視覚的な制作がボトルネックになった場合にOpen Designを呼び出します：

• GPT Image 2が利用不可、失敗、タイムアウト、または弱い/シネマティックでない画像を生成した場合。
• ユーザーがサイトを作成、プロトタイプ作成、プレビュー、またはプロンプトのみを書くのではなく「ものを作る」ことを依頼した場合。
• 最終的なVite/GSAPビルドを手動コーディングする前に、迅速なビジュアル方向性が必要な場合。

コマンド：

/Users/yashovrattiwari/.openclaw/tools/openclaw-design make "<完全なストーリーテリングランディングページリクエスト（インテイク回答、感情、スクロールタイプ、ソウルオブジェクト、要素オーバーレイ、アセット制約を含む）>"

Open Designの出力をソースマテリアルとして扱います：最も強力なビジュアル方向性、レイアウト、コピーのリズム、生成されたファイルを再利用し、このスキルで要求されるGSAP/ScrollTriggerストーリーメカニズムと検証チェックリストを保持します。GPT Image 2が画像を作成していないからといって停止しないでください。

フェーズ1 - インテイクインタビュー

これらの5つの質問を一つずつ行います。ユーザーがすでに十分な詳細を提供している場合を除き、まとめて行わないでください。

1. ブランドと目的：このウェブサイトは何のためですか - そして誰が訪れますか？
2. 感情的なレジスター：悲しみ/平和、希望/再生、驚き/畏敬、野心/意欲、落ち着き/信頼、緊急性/興奮、またはその他を提供します。
3. スクロールタイプ：A スクロールリビール、B スクロールプラスドラッグチャプター、C ディープイマージョン、またはD シングルシーンズーム。
4. ソウルオブジェクト：GSAPがトゥイーンできる名前付きグラデーションストップを持つ、2〜3段階で変形するシンプルなセンタースクリーンのSVG。
5. 要素PNGオーバーレイ：純粋な黒の背景に2〜4つの孤立した物理要素を配置し、コード内でmix-blend-mode: screenを使用して合成します。

例：炎から水滴、波紋へ、種から苗、樹冠へ、星から星座、星屑へ、コンパス針から真北へ、呼吸の円から波、静かな水面へ、火花から軌跡、光のバーストへ。

フェーズ2 - ソウルオブジェクト仕様

インテイク後、インラインSVG、id="soulGrad"、id="soul-stop-1/2/3"、3つのスクロール段階、グローカラー、グラデーションカラー、CSSモーフ値、マウスlerpオフセット、スクロールサイン波ドリフト、セクション不透明度、GSAP呼吸パルスを使用してソウルオブジェクトを定義します。

GSAPのストップカラートゥイーンの例を含めます：

gsap.to('#soul-stop-1', { attr: { 'stop-color': '#...' }, duration: 1.4 });

フェーズ3 - シーン計画

スクロールタイプに基づいて6〜8のシーンを定義します。以下を使用します：

# | ID | 名前 | ナラティブビート | GSAPメカニズム | パーティクルモード | ソウル段階 | BG画像

必須のシーンタイプ：

• ヒーロー：ロードアニメーション、テキストのスタagger、スクロールに伴う微妙な背景ズームアウト
• ズーム：GSAP pin:true + scrub:true、背景スケール 1 -> 1.55
• トランジション：背景色のトゥイーン、パーティクルモードの切り替え
• スムージードラッグ：タイプB/Cのみ、水平メモリ/製品/タイムラインカード
• チャプター/リバー：4層パララックス、テキストが y:50 から上昇
• ヴァストネス：プルバックスケール 1.38 -> 1.0、中央に配置された単一のセリフ行
• CTA：2秒間のピン留め一時停止、その後スタaggerされたエントランス

CTAの前の2秒間のピン留め一時停止は必須です。決してスキップしないでください。

フェーズ4 - インタラクションレイヤー

常にカスタムlerpカーソル、マグネティックボタン、ローディング画面、右側の進行状況ドット、上部のスクロール進行状況バー、ウォーム/クール/トランジションキャンバスパーティクル、ソウルオブジェクトの呼吸パルス、スクロールモーフ、マウスパララックス、2層CTA、二次的なソフトエスケープ、4つの信頼チップを含めます。

タイプBの場合：Smooothyスタイルのドラッグ可能スライダーとカード上のアニメーション化されたSVGリングアイコンを追加します。 タイプCの場合：StringTuneスタイルのモジュールを追加します：StringProgress、StringParallax、StringSplit、StringCursor3、StringMagnetic。 タイプDの場合：GSAPピンズームのみ。スライダーやStringTuneモジュールは追加しません。

フェーズ5 - GPT Image 2プロンプト

2セットの画像プロンプトを生成します。

セットA - 背景JPG

シーンごとに1つの16:9 JPGプロンプト。

• すべてのプロンプトを次のように正確に終了します：No people. No text. No logos. Aspect ratio 16:9. Photorealistic. Cinematic colour grade.
• 生成順序：Hero、CTA、Zoom、Chapter、Vastness、Transitionを最後に。
• 画像1の後、次のように前置きします：Same cinematic colour grade, photographic style, tonal range as the hero image -
• 視覚的な連続性のための参照として、以前に生成された画像をアップロードするようにユーザーに指示します。
• トランジション画像の場合、ヒーローとCTAの両方を参照としてアップロードし、両方のパレットをブレンドするように依頼します。
• ファイル名パターン：scene-01-hero.jpg、scene-02-zoom.jpgなど。

セットB - 透過PNG要素

インテイクで選択された要素タイプごとに1つの正方形PNGプロンプト。

• 要素の外側の背景はすべて純粋な黒 #000000 が必須です。
• 要素はフレームの50〜70％を占めます。
• ファイル名パターン：element-[name].png。
• すべてのプロンプトを次のように正確に終了します：Pure black (#000000) everywhere else. Square format 1:1. Ultra high resolution. Photorealistic macro.
• ビルドプロンプトでは、すべての要素画像が .element-overlay { mix-blend-mode: screen; } を使用する必要があります。

プロンプトの公式：

Single isolated [ELEMENT] on pure black background. [Texture, light, detail description]. [Scale - fills X% of frame]. No background scenery, no context, no shadow extending far beyond the object. Pure black (#000000) everywhere else. Square format 1:1. Ultra high resolution. Photorealistic macro.

画像生成フォールバック

GPT Image 2が利用不可、失敗、または弱いアセットを生成した場合：

1. 利用可能な設定済み画像生成ツールを試します。
2. それでも画像生成がブロックされているか、結果が十分でない場合は、Open Designを使用します：/Users/yashovrattiwari/.openclaw/tools/openclaw-design make "<完全なストーリーテリングランディングページリクエスト>"
3. Open Designが有用なプロジェクトを返した場合、生成されたファイルを検査し、最も強力な方向性をVite/GSAPビルドに移植します。このスキルのモーションシステムを盲目的に置き換えないでください。
4. 画像が生成できない場合は、シネマティックなCSSグラデーション、キャンバスパーティクル、SVGオーバーレイ、および明確に名前付けられたプレースホルダーファイルを使用してビルドし、サイトが機能し続け、アセットプロンプトを後で使用できるようにします。

画像生成が失敗したからといって停止しないでください。ストーリー、モーションシステム、および最終的な実行可能なページを保持します。

フェーズ6 - Codexビルドプロンプト

Codex、Cursor、またはその他のコーディングエージェント用の、完全でペースト可能なプロンプトを生成します。これには、プロジェクト概要、テクノロジースタック、完全なファイルツリー、完全な package.json、完全な vite.config.ts、完全な index.html、完全な src/styles.css、完全な src/main.ts、完全な src/soul.ts、src/particles.ts、src/cursor.ts、src/scroll.ts、src/loader.ts、およびB/Cの場合のみ src/slider.ts が含まれている必要があります。

必要なビルド詳細：Vite 5 + TypeScript、GSAP 3 + ScrollTrigger、soul-stop-1/2/3 を持つインラインソウルSVG、data-particle セクション、class="element-overlay" と data-float-speed を持つ要素PNGタグ、ナビゲーション、カーソル、キャンバス、ローダー、進行状況ドット、ウォーム/クールパレット変数、768px でのレスポンシブブレークポイント、public/images/ の画像設定手順、画像がない場合のフォールバック動作、および npm install と npm run dev。

ビルドプロンプトには、コーディングエージェント向けの必須の最終テストセクションも含める必要があります：アプリを実行し、ローカルURLを開き、デスクトップとモバイル幅で上から下までスクロールし、スライダーがあれば操作し、ピンズーム/CTA一時停止/ソウルモーフ/パーティクル/ボタン/フォーカス/オーバーラップなしを確認し、ヒーロー/ミッド/CTAのスクリーンショットを撮り、ページが単に機能的であるだけでなく視覚的に強く感じられるまで修正します。

必須のScrollTrigger設定：

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.normalizeScroll(true);
ScrollTrigger.config({ fastScrollEnd: true });
window.addEventListener('load', () => ScrollTrigger.refresh());

タイポグラフィ：特徴的なセリフとクリーンなサンセリフ。最終的な美観のために、決してInter、Roboto、Arial、またはシステム専用のタイポグラフィをデフォルトにしないでください。

出力形式

インテイクが完了した後、常にこの順序で提供します：

## インテイク概要
## ソウルオブジェクト仕様
## シーン計画
## インタラクションレイヤー
## GPT Image 2 - 背景プロンプト（セットA）
## GPT Image 2 - 要素PNGプロンプト（セットB）
## 生成順序
## Codexビルドプロンプト
## 最終検証計画

品質チェックリスト

計画またはビルドプロンプトを提供する前に、インテイクが完了していること、ソウルオブジェクトに3つの段階と名前付きグラデーションストップがあること、シーン計画に6〜8のシーンがあること、タイプB/Cにスライダーが含まれていること、タイプCにStringTuneスタイルのモジュールが含まれていること、CTAに2秒間のピン留め一時停止があること、両方の画像プロンプトセットが存在すること、PNGオーバーレイが mix-blend-mode: screen を使用していること、すべてのファイルが実行可能なViteアプリ用に完全に指定されていること、ウォーム/クールパレット変数が存在すること、モバイルルールが768pxから始まること、ファイル名がどこでも一致していること、実行手順に npm install と npm run dev が含まれていること、ビルドプロンプトが明示的に最終的なブラウザスクロールスルーテストとスクリーンショットおよび視覚的品質パスを要求していることを確認します。

最終ビルド検証

このスキルでページを実際にビルドする場合、テストが完了するまで完了したとは呼ばないでください：

1. プロジェクトに従ってインストール/ビルドまたは開発サーバーを実行します。
2. ブラウザでローカルページを開きます。
3. デスクトップとモバイル幅で上から下までスクロールします。可能であればブラウザ自動化と手動視覚検査を併用することをお勧めします。
4. ヒーローがロードされること、ピンズームが機能すること、トランジションがパーティクルモードを変更すること、スライダーが存在する場合は機能すること、ソウルオブジェクトが表示されたままで変形すること、CTA一時停止が発生すること、ボタン/フォーカス状態が機能すること、テキストが重なっていないことを確認します。
5. メインのデスクトップビューポートと、可能であれば少なくとも1つのモバイルビューポートについて、ヒーロー、ミッドストーリー、CTAでスクリーンショットを撮ります。
6. 判断を下します：要求されたブランドにとって十分にシネマティックでクールだと感じられますか？そうでない場合は、モーションタイミング、コントラスト、スペーシング、画像処理、コピー、またはアセットの方向性を調整し、フルスクロールを再テストします。
7. 証拠を報告します：ローカルURL、ビューポートサイズ、スクリーンショット/観測された状態、最初の視覚パスの後に行われた修正、および残っているブロッカー。

検証は証拠に基づく必要があります。成功したビルドログのみを提供しないでください。最終的な回答では、動作しているページをスクロール中に何が観測されたかを述べる必要があります。