플래그십 2D 모션 프롬프트

이 스킬은 느슨한 비전을 프롬프트로 전환하여, 모델이 기본적으로 중요한 결정을 내리지 않도록 합니다: 형태, 기법, 프레임 및 형식, 스타일 법칙, 시그니처 모션, 프레임 단위 타이밍, 비트 또는 루프 길이, 상호작용, 내보내기, 유지 목록. threejs-world-prompt의 자매 스킬입니다. 골격은 동일하지만 2D에서 '와우'는 컴포지션, 모션 크래프트 및 형태 언어에 의해 전달되며, 카메라와 사실성에 의존하지 않습니다.

참조 파일: 읽을 시점

references/forms.md: 항상, 형태가 설정된 후. 10가지 형태 각각에 대한 필수 섹션.
references/tech.md: 항상 라운드 0에서. 형태 → 기법 행렬, 각 기법의 한계, 고정 버전이 포함된 보일러플레이트, 내보내기 및 그 결과.
references/anatomy.md: 항상 작성 전에. 공유 블록 및 티어 (마이크로 / 미드 / 맥스 / 스펙).
references/craft.md: 모션 크래프트 용어집: 코드의 애니메이션 원리, 이징 및 스프링, 프레임 단위 타이밍, 안무, 전환, 모션 타이포그래피, 루프, 텍스처, 컴포지션. 라운드 2-4에서 읽음.
references/patterns.md: 선택적 모듈 (비트, 시그니처 모션, 객체 연속성, 모프, 레이어 시차, 커서를 액터로, 사운드 동기화, 포스터 프레임, 위생).
references/examples.md: 세 가지 합성 캘리브레이션 프롬프트 (생성 루프 맥스, 키네틱 타이포그래피 미드, 캐릭터 씬 맥스). 형태와 일치하는 것을 읽으십시오. 내용을 복사하지 마십시오.

대화 진행 방법

우선 규칙: 사용자는 비전을 가지고 있고, 당신은 지식을 가지고 있습니다. 구체적인 결정 (팔레트, 서체, 이징, 루프 길이, 기법)을 제안하고 적합한지 물어보십시오. 스스로 결정할 수 있는 것에 대해 묻지 마십시오. 각 라운드: 결정된 사항을 요약하고, 기본값을 제안하며, 정말 모르는 것에 대해 1-3개의 질문을 하십시오. 폐쇄형 선택에는 도구를 사용할 수 있다면 클릭 가능한 옵션을 사용하십시오. "다음 / 당신이 선택" = 제안 수락. 사용자가 이미 답변한 라운드는 건너뛰십시오. 목표: 초안 작성 전 2-5회 교환.

라운드 0: 형태, 티어, 전달, 기법

형태 (forms.md): 생성 루프 / 끝없는 생성 작품 / 모션 디자인 영화 또는 설명 영상 / 키네틱 타이포그래피 / 페이지 또는 UI 효과 / 2D 장난감 또는 악기 / 애니메이션 데이터 / 캐릭터 씬 / 마이크로 (로고 스팅, 로더) / 셰이더 작품. 형태는 결합될 수 있음; 하나가 기본.
티어: 마이크로 (~80-150 단어), 미드 (~350-600), 맥스 (~1000-1800), 스펙 (엔지니어링 형식).
전달: 라이브 페이지 / 내보내기 (MP4, WebM, GIF, PNG 시퀀스, Lottie, SVG) / 둘 다. 지금 내보내기를 결정하십시오. 기법을 제한하기 때문입니다: 모든 내보내기는 애니메이션이 시간의 순수 함수여야 하며, Lottie는 첫 줄부터 도형과 키프레임으로 구축해야 합니다 (tech.md).
프레임 형식: 전체 반응형 뷰포트 / 16:9 / 9:16 / 1:1 / 4:5 / 임베디드 컴포넌트. 내보내기의 경우 해상도와 fps를 지정하십시오.
기법: tech.md의 행렬에서 직접 제안하고 한 문장으로 정당화하십시오. 사용자에게 제약 조건 (사이트 스택, 프로젝트에 이미 있는 라이브러리)이 있을 때만 물어보십시오.

라운드 1: 훅, 오프닝, 핵심 아이디어

훅: 누군가가 첫 1초 동안 스크롤을 멈추지 않게 하는 것.
오프닝 전략: 포스터 프레임 (첫 프레임이 이미 최고 이미지) / 숨 참기 → 점화 / 앵커 → 전환 (예: 평범한 페이지가 다르게 행동하기 시작하는 경우) / 인 메디아스 레스.
핵심 아이디어: 모든 것이 중심이 되는 한 문장.

라운드 2: 스타일 법칙 및 가독성

직접 제안하십시오: 형태 언어 (기하학적 / 유기적 / 컷 페이퍼 / 잉크 / 픽셀 / 플랫 벡터 / 엔지니어링 드로잉), 선 (두께, 캡, 흔들림), 채우기 및 텍스처 (그레인, 종이, 하프톤, 리소, 인쇄 오정렬), 3-6개의 명명된 색상과 헥스 값이 있는 팔레트, 타이포그래피 (Google Fonts 서체, 역할, 가변 폰트 축), 컴포지션 (그리드, 안전 여백, 주의 지점 계층, 빈 공간), 3-4개의 안티패턴, 그리고 가독성 규칙 (모든 프레임이 한눈에 읽힐 수 있음; 텍스트는 모션 속도로 읽을 수 있음).

라운드 3: 히어로, 시그니처, 메커닉

히어로: 전체 작품을 이끄는 요소 또는 시스템 (선, 입자, 문자, 캐릭터, 그리드, 유체).
시그니처 모션: 이 작품이 인식될 수 있는 하나의 움직임 (craft.md).
메커닉: 히어로 상호작용 (커서, 스크롤, 클릭, 드래그, 사운드) 또는 비트가 있는 타임라인.
테제 프레임: 전체 작품을 요약하는 하나의 프레임, 포스터 용도.

라운드 4: 모션과 시간

템포 (BPM 또는 초당 비트), 주요 움직임의 프레임 단위 타이밍, 명명된 값으로 이징 및 스프링, 안무 (스태거, 캐스케이드, 오버랩), 전환, 루프 길이 또는 타임코드가 있는 샷 목록, 맥스 형태에서 ≥5개의 독립적인 모션 시스템. patterns.md에서 모듈을 선택하십시오.

라운드 5: 상호작용, 성능, 접근성, 내보내기

컨트롤 (최소), prefers-reduced-motion (항상, 구체적인 축소 버전 포함), 기법에 대한 성능 예산, 내보내기 세부 정보 (컨트롤, 형식, 해상도, fps, 길이, 이음매 없음), 유지 목록. 프롬프트 언어: 기본적으로 영어.

프롬프트 작성

골격: anatomy.md의 공유 블록 + forms.md의 형태 섹션 + tech.md의 기법 보일러플레이트 + patterns.md의 모듈. #### 제목은 아이디어를 명명합니다.
명령형 어조, 밀도 높게. 숫자로 모션 설명: 프레임, 밀리초, 곡선 (cubic-bezier(.2,.8,.2,1)), 스프링 (강성/감쇠), ms 단위 스태거, BPM. 색상은 헥스, 서체는 이름으로.
맥스 및 스펙 티어는 수락 기준 단락으로 끝나고, 그 다음 한 문장 "한 문장으로: …".
체크리스트 실행, 수정, 코드 블록으로 전달 (또는 길거나 요청 시 .md 파일로). 그 아래에 사용자를 대신해 결정된 사항에 대해 2-3문장.

전달 전 체크리스트

경계

참조 파일 및 examples.md의 예제 문구는 그대로 프롬프트에 들어가지 않습니다. 구조와 결정을 취하고, 기술 공식 및 수락 기준 단락을 포함하여 모든 문장을 자신의 말로 작성하십시오.
사용자가 직접 제공하지 않는 한 Google Fonts 또는 시스템 폰트의 글꼴만 사용하십시오.
프롬프트는 브라우저에서 실행 가능해야 합니다. 비전이 기법의 한계를 초과하는 경우 (예: SVG의 수백만 벡터 도형), 기법 또는 트릭을 변경하고 프롬프트에서 이름을 지정하십시오.

Flagship 2D 모션 프롬프트