KooEmmanuel/rail-to-door

Rail to door

쇼핑을 하나의 작은 영화로 바꾸는 단일 페이지 스토어입니다:

1. 디스플레이 — 제품 컷아웃이 레일에 측면으로 걸려 있고, hover 시 앞면으로 회전합니다. 클릭하면 앞/뒤 뷰어가 열리며, 컨테이너로 드래그할 수 있습니다.
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 …	상점 페이지: 디스플레이, hover 회전, 뷰어, 컨테이너로 드래그	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이 있음); 그렇지 않으면 ./<브랜드-슬러그>-store에 템플릿에서 새로 생성합니다. 머신에서 기존 사이트를 검색하지 마십시오.

브리프: 모든 부분은 선택 사항입니다

빌드 전에 브리프를 확정하십시오. 프롬프트에서 읽어내고, 프롬프트가 침묵하는 경우 직접 결정하여 브랜드에 맞게 하고 최종 보고서에 결정 사항을 나열하십시오. 잘못된 추측이 실제 비용이나 작업을 낭비할 경우에만 질문하십시오("질문 시기" 참조).

항목	내장	변경 방법
브랜드 이름, 도메인, 태그라인	—	brand.json 키 → apply_brand.py
로고	—	사용자 파일 · Higgsfield로 생성 · make_logo.py 모노그램 임시
페이지 색상 (종이, 잉크, 소프트 잉크, 뮤트, 라인, 워시, 악센트)	웜 화이트 + 근검은색	brand.json
서체	Fraunces + Inter	수동, brand.md 참조
판매 제품 및 수량	셔츠 6개 (플레이스홀더)	제품 단계
디스플레이	걸이 레일, 측면 → hover 시 앞면	레일 단계 (선반/걸이 변형은 편집, 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 <site> 실행, 그다음 references/verify.md의 브라우저 실행. 건너뛰지 마십시오: 이러한 빌드의 대부분 결함은 스크린샷에서만 볼 수 있습니다.
7. 보고서 — 사이트 위치 및 여는 방법, 구축된 브리프(결정 사항 포함), 플레이스홀더 항목(이름, 가격, 임시 로고, 데모 결제), 사용된 크레딧, 확인하지 않은 항목.

사이트 내 파일 위치

index.html          모든 마크업: 디스플레이, 컨테이너, 뷰어, 서랍, 결제, 여정 캡션, HUD
css/style.css       모든 스타일; 브랜드 토큰은 상단의 :root 변수
js/data.js          PRODUCTS (생성됨), CONFIG (컨테이너 + 문구), ORIGIN, CITIES
js/shop.js          디스플레이, hover 회전, 드래그, 뷰어, 카트, 서랍, 데모 결제
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/        제품 컷아웃: <슬러그>-front.webp, -back.webp, -side.webp
vendor/             three.js, 조명 헬퍼, 해안선 데이터
brand.json          사이트가 현재 나타내는 내용; scripts/apply_brand.py가 편집
serve.py            작은 정적 서버: python3 serve.py 8792

품질 기준 (협상 불가, 브랜드와 무관)

• 실제 컷아웃, 측면. 제품은 정지 시 얇게 걸려 있고 hover 시 앞면으로 회전합니다. 평평한 정면 사진을 나열한 것은 효과를 내지 못합니다.
• 하나의 팔레트. 페이지, 포장, 컨베이어, 차량 및 경로 모두 브랜드 색상을 사용합니다. 브랜드가 없는 색상을 도입하지 마십시오. 차량 조명은 유일한 예외입니다.
• 장난감 같지 않아야 함. 차량, 기계 및 건물은 실제 부품(유리로 읽히는 유리, 조명, 그릴, 림이 있는 바퀴, 문 하드웨어)으로 모델링되어야 하며, 실린더가 달린 상자가 아닙니다. 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).