스토리텔링 랜딩 페이지은(는) 무엇을 하나요?

이 스킬을 사용하여 시네마틱 내러티브 아크, 생성된 이미지 자산, 그리고 바로 사용 가능한 개발자 빌드 프롬프트가 포함된 몰입형 스크롤 기반 랜딩 페이지를 만드세요. 참조 기준은 Last Rites 프로젝트입니다: 고정 줌/풀백, 화염에서 물로 변형되는 소울 오브젝트, 드래그 가능한 메모리 슬라이더, 파티클, 커스텀 커서, 마그네틱 버튼, 로딩 화면, mix-blend-mode: screen이 적용된 투명 PNG 오버레이, 그리고 필수적인 2초 고정 일시정지 후 나타나는 2단계 CTA.

기본 출력은 계획과 빌드 프롬프트입니다. 사용자가 실제로 빌드하도록 요청하면 Vite 프로젝트를 생성하고, 자산을 생성하거나 스텁(stub)을 만들고, 유용할 때 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가지 질문을 한 번에 하나씩 하세요. 사용자가 이미 충분한 세부 정보를 제공하지 않는 한 질문을 일괄 처리하지 마십시오.

브랜드 및 목적: "이 웹사이트는 무엇을 위한 것이며 누가 방문합니까?"
감정적 등록: 슬픔/평화, 희망/재탄생, 경이/경외, 야망/추진력, 평온/신뢰, 긴급/흥분 또는 다른 것을 제안하세요.
스크롤 유형: A 스크롤 공개, B 스크롤 + 드래그 챕터, C 딥 이머전(깊은 몰입), 또는 D 단일 씬 줌.
소울 오브젝트: GSAP이 트윈(tween)할 수 있는 명명된 그라데이션 중지점이 있는 2-3단계로 변형되는 간단한 중앙 화면 SVG.
요소 PNG 오버레이: 순수 검정 배경에 2-4개의 분리된 물리적 요소를 코드에서 mix-blend-mode: screen으로 합성합니다.

예시: 불꽃에서 물방울로, 물결로; 씨앗에서 묘목으로, 수관으로; 별에서 별자리로, 별빛으로; 나침반 바늘에서 진북으로; 호흡 원에서 파동으로, 잔잔한 물로; 불꽃에서 궤적으로, 빛의 폭발로.

2단계 - 소울 오브젝트 사양

인테이크 후 인라인 SVG, id="soulGrad", id="soul-stop-1/2/3", 세 개의 스크롤 단계, 글로우 색상, 그라데이션 색상, CSS 모프 값, 마우스 lerp 오프셋, 스크롤 사인 드리프트, 섹션 불투명도 및 GSAP 호흡 펄스로 소울 오브젝트를 정의합니다.

GSAP stop-color 트윈 예시를 포함하세요:

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

3단계 - 씬 계획

스크롤 유형에 따라 6-8개의 씬을 정의합니다. 다음을 사용하세요:

# | ID | 이름 | 내러티브 비트 | GSAP 메커니즘 | 파티클 모드 | 소울 단계 | 배경 이미지

필수 씬 유형:

히어로(Hero): 로드 애니메이션, 계층화된 텍스트, 스크롤 시 미묘한 배경 축소
줌(Zoom): GSAP pin:true + scrub:true, 배경 스케일 1 -> 1.55
전환(Transition): 배경 색상 트윈, 파티클 모드 전환
Smooothy 드래그: 유형 B/C 전용, 수평 메모리/제품/타임라인 카드
챕터/강(Chapter/River): 4계층 패럴랙스, 텍스트가 y:50에서 올라옴
광활함(Vastness): 풀백 스케일 1.38 -> 1.0, 단일 중앙 세리프 라인
CTA: 2초 고정 일시정지, 이후 계층적 등장

CTA 전 2초 고정 일시정지는 필수입니다. 절대 건너뛰지 마십시오.

4단계 - 상호작용 레이어

항상 커스텀 lerp 커서, 마그네틱 버튼, 로딩 화면, 오른쪽 진행 점, 상단 스크롤 진행 바, 웜/쿨/전환 캔버스 파티클, 소울 오브젝트 호흡 펄스, 스크롤 모프, 마우스 패럴랙스, 2단계 CTA, 보조 소프트 이스케이프 및 4개의 신뢰 칩을 포함하세요.

유형 B에 추가: Smooothy 스타일 드래그 가능 슬라이더 및 카드의 애니메이션 SVG 링 아이콘. 유형 C에 추가: StringTune 스타일 모듈: StringProgress, StringParallax, StringSplit, StringCursor3, StringMagnetic. 유형 D에 추가: GSAP 핀 줌만; 슬라이더 또는 StringTune 모듈 없음.

5단계 - GPT Image 2 프롬프트

두 개의 이미지 프롬프트 세트를 생성합니다.

세트 A - 배경 JPG

씬당 하나의 16:9 JPG 프롬프트.

모든 프롬프트를 정확히 다음으로 끝내세요: 사람 없음. 텍스트 없음. 로고 없음. 가로세로비 16:9. 포토리얼리스틱. 시네마틱 컬러 그레이드.
생성 순서: 히어로, CTA, 줌, 챕터, 광활함, 전환 마지막.
첫 번째 이미지 후 다음을 앞에 추가하세요: 히어로 이미지와 동일한 시네마틱 컬러 그레이드, 사진 스타일, 톤 범위 -
사용자에게 시각적 연속성을 위해 이전에 생성된 이미지를 참조로 업로드하라고 알리세요.
전환 이미지의 경우 히어로와 CTA를 모두 참조로 업로드하고 두 팔레트를 혼합하도록 요청하세요.
파일명 패턴: scene-01-hero.jpg, scene-02-zoom.jpg 등.

세트 B - 투명 PNG 요소

인테이크에서 선택한 요소 유형당 하나의 정사각형 PNG 프롬프트.

요소 외부의 모든 곳은 순수 검정 #000000 배경이 필수입니다.
요소가 프레임의 50-70%를 채웁니다.
파일명 패턴: element-[name].png.
모든 프롬프트를 정확히 다음으로 끝내세요: 다른 모든 곳은 순수 검정(#000000). 정사각형 형식 1:1. 초고해상도. 포토리얼리스틱 매크로.
빌드 프롬프트에서 모든 요소 이미지는 .element-overlay { mix-blend-mode: screen; }을 사용해야 합니다.

프롬프트 공식:

순수 검정 배경에 단일 분리된 [ELEMENT]. [질감, 빛, 세부 묘사]. [스케일 - 프레임의 X%를 채움]. 배경 장면, 맥락, 물체를 훨씬 넘어 확장되는 그림자 없음. 다른 모든 곳은 순수 검정(#000000). 정사각형 형식 1:1. 초고해상도. 포토리얼리스틱 매크로.

이미지 생성 대체

GPT Image 2를 사용할 수 없거나, 실패하거나, 약한 자산을 생성하는 경우:

가능한 경우 구성된 이미지 생성 도구를 시도하세요.
이미지 생성이 여전히 차단되거나 결과가 충분히 좋지 않은 경우 Open Design을 사용하세요: /Users/yashovrattiwari/.openclaw/tools/openclaw-design make "<전체 스토리텔링 랜딩 페이지 요청>"
Open Design이 유용한 프로젝트를 반환하면 생성된 파일을 검사하고 이 스킬의 모션 시스템을 맹목적으로 대체하지 않고 가장 강력한 방향을 Vite/GSAP 빌드로 가져오세요.
어떤 이미지도 생성할 수 없는 경우 시네마틱 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가 포함되어 있는지, 빌드 프롬프트가 스크린샷과 시각적 품질 통과를 포함한 최종 브라우저 스크롤 테스트를 명시적으로 요구하는지 확인하십시오.

최종 빌드 확인

이 스킬로 페이지를 실제로 빌드할 때 테스트를 완료할 때까지 완료되었다고 하지 마십시오:

프로젝트에 따라 설치/빌드 또는 개발 서버를 실행합니다.
브라우저에서 로컬 페이지를 엽니다.
가능하면 브라우저 자동화와 수동 시각적 검사를 결합하여 데스크톱 및 모바일 너비에서 위에서 아래로 스크롤합니다.
히어로가 로드되는지, 고정 줌이 작동하는지, 전환이 파티클 모드를 변경하는지, 슬라이더가 있으면 작동하는지, 소울 오브젝트가 계속 표시되고 변형되는지, CTA 일시정지가 발생하는지, 버튼/포커스 상태가 작동하는지, 텍스트가 겹치지 않는지 확인합니다.
실용적일 때 데스크톱 메인 뷰포트와 적어도 하나의 모바일 뷰포트에 대해 히어로, 중간 스토리 및 CTA에서 스크린샷을 캡처합니다.
판단을 내립니다: 요청된 브랜드에 충분히 시네마틱하고 멋지게 느껴집니까? 그렇지 않으면 모션 타이밍, 대비, 간격, 이미지 처리, 카피 또는 자산 방향을 조정하고 전체 스크롤을 다시 테스트합니다.
증거를 보고합니다: 로컬 URL, 뷰포트 크기, 스크린샷/관찰된 상태, 첫 번째 시각적 통과 후 수정한 사항 및 남아 있는 차단 요소.

확인은 증거 기반이어야 합니다. 성공적인 빌드 로그만 제공하지 마십시오. 최종 답변은 작동하는 페이지를 스크롤하는 동안 무엇이 관찰되었는지 말해야 합니다.

스토리텔링 랜딩 페이지