KooEmmanuel/rail-to-door

軌道到門口 (Rail to door)

一個將購物轉變為小電影的單頁商店：

1. 展示 — 產品剪影側掛在軌道上，懸停時轉向面對你；點擊可開啟前/後檢視器；將商品拖入容器。
2. 容器與結帳 — 一個購物袋（或購物籃、購物車、盒子）會逐漸填滿，抽屜可編輯訂單，以及一個示範付款畫面。
3. 訂單旅程 — 付款後，一個滾動驅動、自動播放的 3D 序列：商品被包裝進品牌包裝 → 密封並貼上顧客姓名的標籤 → 輸送帶與掃描閘門 → 送貨卡車 → 機場裝載機 → 貨機 → 一張包含真實海岸線的世界地圖，並顯示航班路線 → 包裹降落在門口台階上。

此技能是自給自足的

所需的一切都在技能資料夾內。你不需要，也不得到處尋找現有網站、先前的專案或任何人的品牌檔案：

• assets/template/ — 完整的運作網站（純 HTML/CSS/ES modules + three.js，無建置步驟），帶有一個中性佔位品牌（「Maison」）和六件示範襯衫。它是每次執行的起點。
• 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

階段操作哪個網站： 使用者命名的資料夾；如果目前目錄是一個軌道到門口網站（在 index.html 旁邊有 brand.json），則使用目前目錄；否則從範本在 ./<品牌縮寫>-store 建立一個新的。不要搜尋機器來尋找。

簡報：每個部分都是一個選擇

在建置之前，先確定簡報。從提示中讀取；如果提示未提及，自行決定一個適合品牌的方案，並在最終報告中列出你的決定。僅在錯誤猜測會浪費實際金錢或工作時才提問（請參閱「何時提問」）。

項目	內建值	如何更改
品牌名稱、網域、標語	—	brand.json 鍵值 → apply_brand.py
標誌	—	使用者的檔案 · 用 Higgsfield 生成 · make_logo.py 字母組合暫代
頁面顏色（紙色、墨水色、柔和墨水色、淡色、線條色、水彩色、強調色）	暖白 + 近黑	brand.json
字型	Fraunces + Inter	手動，請參閱 brand.md
銷售商品與數量	六件襯衫（佔位）	產品階段
展示	懸掛軌道，側面 → 懸停時正面	軌道階段（層架 / 掛鉤變體為編輯，請參閱 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。
• 完全無提示 — 自行設計一個品牌：名稱、一句定位、色板、出發城市、一個適合的小系列。然後執行管線。在報告頂部展示你發明的品牌，以便使用者重新調整方向。

何時提問

在開始工作前，最多提出一個問題 — 且僅針對以下情況：

• 花費 Higgsfield 點數。 務必預先計算成本並獲得明確同意（請參閱 products.md）。將「這是我要建置的系列和品牌，需要 N 點數，可以嗎？」打包成一個問題。
• 使用者的品牌意圖明確，但未提供名稱。

其他所有情況：自行決定、建置、報告。

完整管線

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 <網站>，然後根據 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       四個 3D 世界、攝影機、滾動時間軸
js/models.js        卡車與飛機
js/parcels.js       盒子（翻蓋、膠帶、標籤）與封閉包裹
js/textures.js      所有在畫布上繪製的內容：盒子藝術、標籤、膠帶、卡車側面、標誌、輸送帶、門墊
js/world.js         真實海岸線 → 點狀地圖、大圓航線
assets/logo.png     深色標記於透明背景；在程式碼中根據需要調整色調
assets/rail/        產品剪影：<縮寫>-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 <網站> [--brand b.json] [--force]	複製範本到新資料夾（並套用品牌）
scripts/apply_brand.py <網站> <b.json>	在整個網站中套用/更改品牌值（可重複執行）
scripts/make_logo.py "<名稱>" <輸出.png>	沒有標誌時暫代的字母組合
scripts/process_cutouts.py --raw <目錄> --site <網站> [--synth-side] [--append]	剪裁、修剪、調整產品圖片大小；重寫目錄
scripts/check_site.py <網站>	在瀏覽器執行前的靜態健康檢查

process_cutouts.py 和 make_logo.py 需要 Pillow；前者還需要 numpy、opencv-python 和 scipy（pip install pillow numpy opencv-python scipy）。