KooEmmanuel/rail-to-door

Rail to door

ブランドの購入体験を小さな映画に変えるシングルページストア：

1. ディスプレイ — 製品の切り抜きがレールに横向きに吊るされ、ホバーで正面に回転します。クリックで表面・裏面ビューアを表示。コンテナにドラッグ＆ドロップできます。
2. コンテナとチェックアウト — バッグ（またはバスケット、カート、ボックス）が満たされていき、注文を編集するための引き出し、デモ決済画面があります。
3. 注文の旅 — 支払い後、スクロール駆動で自動再生される3Dシーケンス：アイテムがブランドパッケージに梱包 → 密封され顧客名のラベル貼付 → コンベアとスキャンゲート → 配送トラック → 空港積み込み → 貨物機 → 実際の海岸線の世界地図上を飛行 → 小包が玄関先に到着。

このスキルは自己完結型です

必要なものはすべてスキルフォルダ内にあります。既存のサイト、以前のプロジェクト、誰かのブランドファイルを必要とせず、探しに行ってはいけません：

• assets/template/ — 完全な動作サイト（プレーンなHTML/CSS/ESモジュール + three.js、ビルドステップなし）。ニュートラルなプレースホルダーブランド（「Maison」）と6つのサンプルシャツを保持しています。すべての実行の出発点です。
• scripts/ — サイト作成、ブランド適用、ロゴの代替作成、製品画像処理、ヘルスチェックを行います。
• references/ — 各ステージごとのガイド。

常にテンプレートから新しいサイトを開始し、それを変更してください。ゼロから書き直さないでください。 テンプレートには、多くの苦労して得たビジュアル上の決定（照明、プロポーション、ディテール）が凝縮されており、再構築すると失われます。プレースホルダーブランドがユーザーに届いてはいけません。毎回、ユーザーのブランド、またはあなたがデザインしたブランドに置き換えてください。

実行方法：フルパイプラインまたは単一ステージ

引数の最初の単語がステージを選択します。ステージ単語がない場合は、フルパイプラインを実行します。

呼び出し	動作	ガイド
/rail-to-door [プロンプト]	以下すべてを順番に実行	このファイル、次に各ガイドに従う
/rail-to-door-brand · … brand …	概要を作成、サイト作成、名前、ロゴ、色、発祥地、コンテナ、車両色を適用	references/brand.md
/rail-to-door-products · … products …	Higgsfieldで製品画像を生成、切り抜き、カタログを作成	references/products.md
/rail-to-door-rail · … rail …	ショップページ：ディスプレイ、ホバー回転、ビューア、コンテナへのドラッグ	references/rail.md
/rail-to-door-checkout · … checkout …	引き出し、合計、決済画面	references/checkout.md
/rail-to-door-journey · … journey …	3Dジャーニー：梱包、コンベア、トラック、飛行機、地図、家	references/journey.md
/rail-to-door-verify · … verify …	サーブして、ブラウザで全体の流れを実行し、すべてのシーンを確認	references/verify.md

ステージが動作するサイト： ユーザーが指定したフォルダ。指定がない場合、現在のディレクトリがrail-to-doorサイト（index.htmlの隣にbrand.jsonがある）であればそれ。そうでなければ、テンプレートから./<brand-slug>-storeに新しいものを作成します。マシン内を検索しないでください。

概要：すべての部分は選択可能

構築前に概要を確定します。プロンプトから読み取り、プロンプトが沈黙している場合は自分で決定し、最終レポートで決定事項を列挙します。間違った推測が実際の費用や作業の無駄になる場合にのみ質問します（「質問するタイミング」を参照）。

スロット	組み込み値	変更方法
ブランド名、ドメイン、タグライン	—	brand.json キー → apply_brand.py
ロゴ	—	ユーザーのファイル · Higgsfieldで生成 · make_logo.py モノグラム代替
ページカラー（paper, ink, soft ink, muted, line, wash, accent）	温かみのある白＋ほぼ黒	brand.json
書体	Fraunces + Inter	手動、brand.md参照
販売されるもの、数量	6枚のシャツ（プレースホルダー）	productsステージ
ディスプレイ	吊りレール、横向き→ホバーで正面	railステージ（棚/ペグバリエーションは編集、rail.md参照）
コンテナ	tote（バッグ）・basket（バスケット）・cart（カート）・box（ボックス）	brand.jsonのcontainer、およびそれに使われる言葉
パッケージ	印刷されたメーラーボックス、紙テープ、ラベル	boxBoard, boxPrint；journey.mdで再デザイン
仕分け	スキャンゲート付きコンベア	conveyorFrame, beltColor；journey.mdで再デザイン
地上移動	キャブオーバーボックストラック	truckBody, truckCab；journey.mdで他の車両
長距離移動	貨物機＋世界地図	planeBody, liveryDark；道路のみまたは海上はjourney.md
目的地	レンガ造りの家、パネルドア	doorColor；journey.mdで他の建物
発祥都市/空港、目的地都市	リスボン（プレースホルダー）	brand.json, js/data.jsのCITIES
キャプションとコピー	汎用	index.html

組み込みパーツは強力なデフォルトですが、制限ではありません。概要が組み込みにないもの（スクーター配達員、船、レールの代わりの市場の屋台、カートとしてのギフトボックス）を求める場合は、同じスタイルと水準で構築してください。各ステージガイドに方法が書かれています。

プロンプトあり、リンクあり、何もなし

• プロンプトあり — それに従います。省略された部分はあなたが決定します。
• ユーザーが気に入ったサイトへのリンク（ユーザーが提供した場合のみ。決して探しに行ったり、想定したりしない）：雰囲気（パレット、タイポグラフィのムード、トーン、販売しているものとその写真の撮られ方）を研究し、その精神に沿ったオリジナルのデザインをしてください。名前、ロゴ、画像、テキスト、レイアウトはコピーしないでください。brand.mdを参照。
• プロンプトなし — 自分でブランドをデザイン：名前、一行のポジショニング、パレット、発祥都市、それに合った小さなコレクション。その後パイプラインを実行します。レポートの先頭にあなたが発明したブランドを提示し、ユーザーが方向転換できるようにします。

質問するタイミング

作業開始前、最大1つの質問。以下の場合のみ：

• Higgsfieldクレジットの消費。 常にコストを事前確認し、明確な承諾を得ます（products.md参照）。「これが構築するコレクションとブランドで、Nクレジットかかります。実行しますか？」をその1つの質問にまとめてください。
• ユーザー自身のブランドが明らかに意図されているが、名前が与えられていない場合。

それ以外はすべて：決定し、構築し、報告します。

フルパイプライン

1. 概要 + ブランド — references/brand.md。ブランドがすべてに反映されたサイトフォルダで終了。
2. 製品 — references/products.md。（承諾後）生成、切り抜き、カタログ化。ユーザーが支出を辞退するかHiggsfieldが利用できない場合、ユーザー自身の写真を使用。それもない場合はサンプルシャツを保持し、プレースホルダーであることを明記。
3. ディスプレイ — references/rail.md：コピー、サイジング、コンテナ。
4. チェックアウト — references/checkout.md。
5. ジャーニー — references/journey.md：すべてのシーンがブランドを反映していることを確認。概要が求める変更を行う。
6. 検証 — python3 scripts/check_site.py <site>、その後references/verify.mdのブラウザ実行。スキップしないでください。この種のビルドの欠陥のほとんどはスクリーンショットでしか見えません。
7. レポート — サイトの場所と開き方、構築された概要（あなたが決定した内容を含む）、プレースホルダー（名前、価格、代替ロゴ、デモ決済）、使用クレジット、未確認事項。

サイト内のファイル配置

index.html          すべてのマークアップ：ディスプレイ、コンテナ、ビューア、引き出し、決済、ジャーニーキャプション、HUD
css/style.css       すべてのスタイル。ブランドトークンは先頭の :root 変数
js/data.js          PRODUCTS（生成）、CONFIG（コンテナ＋文言）、ORIGIN、CITIES
js/shop.js          ディスプレイ、ホバー回転、ドラッグ、ビューア、カート、引き出し、デモ決済
js/main.js          ショップ↔ジャーニーの切り替え、自動再生（SECONDS = 再生時間の長さ）
js/journey.js       4つの3Dワールド、カメラ、スクロールタイムライン
js/models.js        トラックと航空機
js/parcels.js       ボックス（フラップ、テープ、ラベル）と閉じた小包
js/textures.js      キャンバスに描画されるすべて：ボックスアート、ラベル、テープ、トラック側面、サイン、ベルト、ドアマット
js/world.js         実際の海岸線 → ドットマップ、大圏ルート
assets/logo.png     透明背景上の濃いマーク。出現箇所ごとにコードで色付け
assets/rail/        製品切り抜き：<slug>-front.webp、-back.webp、-side.webp
vendor/             three.js、照明ヘルパー、海岸線データ
brand.json          サイトが現在示す内容。scripts/apply_brand.py で編集
serve.py            小さな静的サーバー：python3 serve.py 8792

品質基準（交渉不可、ブランドを問わず）

• 本物の切り抜き、横向き。 製品は静止時に薄く吊り下がり、ホバーで正面に回転します。横一列の平らな正面画像では効果が得られません。
• 統一パレット。 ページ、パッケージ、コンベア、車両、ルートすべてがブランドの色を使用します。ブランドにない色を導入しないでください。車両のランプは唯一の例外です。
• おもちゃっぽさを排除。 車両、機械、建物は実際の部品（ガラスに見えるガラス、ランプ、グリル、リム付きホイール、ドア金具）からモデリングされ、円筒形の箱であってはいけません。journey.mdのトリムルールを参照。
• 印刷物すべてにブランドのマークと書体（パッケージ、テープ、ラベル、トラック、垂直尾翼、ドアマット）。長い名前は収まるように：テンプレートはテキストを縮小して収めます。動作を確認してください。
• 決済画面はデモです。 カード情報を収集せず、課金もしません。ユーザーが明示的に実際の決済プロバイダーとの接続を要求しない限りそのままにし、実際のカード番号を要求したり処理したりしないでください。
• 目視で確認。 シンタックスチェックに合格したコードでもレンダリングが間違っている可能性があります。
• プレースホルダーや未確認のものを明示。

スクリプト

スクリプト	用途
scripts/new_site.py <site> [--brand b.json] [--force]	テンプレートを新しいフォルダにコピー（ブランドを適用）
scripts/apply_brand.py <site> <b.json>	サイト全体にブランド値を適用・変更（再実行可能）
scripts/make_logo.py "<Name>" <out.png>	ロゴがない場合のモノグラム代替
scripts/process_cutouts.py --raw <dir> --site <site> [--synth-side] [--append]	製品画像を切り抜き、トリミング、リサイズし、カタログを書き換え
scripts/check_site.py <site>	ブラウザ実行前の静的ヘルスチェック

process_cutouts.py と make_logo.py は Pillow が必要。前者はさらに numpy, opencv-python, scipy が必要です（pip install pillow numpy opencv-python scipy）。