플래그십 비주얼 프롬프트 (Three.js / WebGL)
이 스킬은 모호한 비전을 references/examples.md의 캘리브레이션 예제 수준의 프롬프트로 변환합니다. 이러한 프롬프트의 강점은 길이가 아닌 다른 데서 나옵니다. 모델이 기본적으로 평균적으로 결정할 모든 선택지가 이미 결정되어 있습니다: 형태, 오프닝 프레임, 단일 아이디어, 히어로 메커닉, 팔레트와 렌더링 법칙, 페이싱, 승인 기준, 성능을 위해 희생해도 되는 것과 절대 희생해선 안 되는 것.
참조 파일: 언제 읽을 것인가
references/forms.md: 항상, 형태가 결정되면. 각 형태는 고유의 섹션 골격을 가집니다.references/anatomy.md: 항상 쓰기 전에. 모든 프롬프트가 공유하는 블록과 각 티어(마이크로 / 미드 / 맥스 / 스펙)의 임계값.references/patterns.md: 선택적 모듈(비트, 연속성 앵커, 시스템 결합, 다이제틱 상태, 전문가 테스트, 카메라 렌즈, 톤 캘리브레이션, 구현 위생, 마무리 공식). 라운드 3-4에서 모듈을 선택할 때 읽습니다.references/realism.md: 항상 라운드 0 이후. 리얼리즘 예산: 각 수준에서 작동하는 것과 무너지는 것, 보일러플레이트 변형, 천장을 높이는 지렛대, 사용자를 위한 정직한 경고.references/archetypes.md: 주제 원형, 트위스트 카탈로그, 오프닝 전략, 기술 팔레트.references/examples.md: 캘리브레이션 프롬프트, 형태당 하나 또는 둘. 선택한 형태와 티어와 일치하는 예제만 읽습니다. 내용을 복사하지 마십시오.
대화 진행 방법
최우선 규칙: 사용자는 비전을 가지고 있고, 당신은 지식을 가지고 있습니다. 이미 알고 있는 것(모네 팔레트, 세스나의 계기 이름, 불꽃놀이 포탄 유형)에 대해 묻지 마십시오. 구체적인 답변을 제안하고 그것이 적합한지 물어보십시오. 각 라운드: 결정된 사항을 몇 단어로 요약하고, 기본 결정을 제안하며, 정말 모르는 것에 대해 1-3개의 질문을 하십시오. 닫힌 선택 사항에 대해 사용 가능한 경우 클릭 가능한 옵션이 있는 도구를 사용하십시오.
"계속 진행 / 직접 선택" = 자신의 제안을 수락합니다. 사용자가 이미 답변한 라운드는 건너뜁니다. 목표: 심문이 아닌 초안 전 2-5회의 교환. 첫 번째 메시지가 풍부하면 라운드 0-2를 하나로 병합합니다.
라운드 0: 형태와 티어
- 형태(자세한 내용은
forms.md참조): 탐험 가능한 세계 / 선형 필름 / 페이지 또는 UI 점령 / 토이-놀이터 / 재료 악기 / 시뮬레이터 / 시간 경과 프로세스(스크러버) / 루핑 쇼 / 미니게임 / 기술 사양. 형태는 결합될 수 있습니다(예: 필름 + UI 점령); 그중 하나가 주요 형태입니다. - 리얼리즘 예산(자세한 내용은
realism.md참조): 스타일화(시각적 언어에 대한 충실도: 회화, 인쇄물, 사진, 선화), 물리(현상을 일차 원리로 계산: 광학, 역학, 파동, 궤도) 또는 사진(실제 영상처럼 보여야 함). 사용자가 사진을 원할 경우, 제작 계약에 대해서도 물어보십시오: 모델이 외부 에셋(HDRI, 스캔된 PBR 텍스처, glTF 모델, 생성된 이미지)을 사용해도 되는지, WebGPU가 허용되는지, 단일 파일의 원샷인지 아니면 Claude Code에서 반복 프로젝트로 참조 프레임과 수정 루프를 사용하는지. 비전에 절차적으로 무너지는 것(사람, 얼굴, 동물, 조직, 클로즈업 털)이 포함되어 있다면, 솔직히 말하고 다음 중 하나를 제안하십시오: 예산 상향, 스타일화로 전환, 또는 약점 숨기기(실루엣, 모션, 어둠, 입자, 거리). - 티어: 마이크로(~80-150단어, 하나의 목표, 즉시 재생 가능), 미드(~350-550, 하나의 상호작용, 짧은 섹션), 맥스(~1100-1900, 완전한 해부학), 스펙(요구사항과 가드레일이 있는 엔지니어링 형식, 위험이 미학보다 기술적인 경우). 기본값은 맥스, 하지만 비전이 단순할 때는 더 낮은 티어를 제안하십시오.
라운드 1: 앵커, 트위스트, 핵심 아이디어
- 앵커: 시청자가 즉시 인식하고 그 이유(모두가 본 적 있는 그림; 방금 읽은 페이지; 모든 독자가 머릿속에 품고 있는 불을 뿜는 짐승의 이미지).
- 오프닝 전략: 앵커 → 트위스트(인식 가능한 프레임 유지, 첫 움직임이 트위스트를 드러냄) 또는 피크 우선(바로 피크 이미지로 열기, "이미 X 상태"). 사용자에게 트위스트가 없으면 2-3개를 제안하십시오.
- 핵심 아이디어: 모든 것이 중심이 되는 한 문장(예: "종이 등불로만 만들어진 항구, 하나의 조수 종이 등불을 물결로 켜는"). 이것 없이는 프롬프트가 산만해집니다.
라운드 2: 스타일 법칙과 가독성
직접 제안하고 사용자가 수정하도록 하십시오: 첫 번째 프레임의 정확한 구성(요소, 수, 위치), 명명된 색상의 팔레트, 렌더링 법칙, 3-4개의 안티패턴("다음을 구축하지 마십시오..."), 가독성 규칙(모든 레이어가 한눈에 읽힘; 어두운 분위기의 경우: 어둡지만, 절대 흐릿하지 않음). 선택적으로 대비 증폭기(예: 파괴를 아프게 만드는 아름다움).
라운드 3: 히어로, 메커닉, 상태
- 히어로 재료 / 객체와 그 상태; 밀도 단위("수십억 [단위]")와 기법.
- 히어로 컨트롤 / 히어로 메커닉: 하나의 상호작용을 히어로로 직접 명명(타임 슬라이더, 되감기, 트리거 버튼, 걷기, 브러시). 선형 형태에서: 타임라인과 그 비트.
- 다이제틱 상태: 시청자가 UI 대신 세계에서 읽는 상태(예: "등대 빛이 게이지입니다").
- 테제 샷: 전체 작품을 요약하는 하나의 샷.
라운드 4: 모션, 시간, 모듈
페이싱과 세계 내에서의 정당성, 모션 독트린(최소 5개의 독립적인 시스템), 클라이맥스가 있는 사이클 또는 시퀀스. patterns.md에서 주제에 맞는 모듈을 선택하십시오: 제안하되, 각각에 대해 개별적으로 묻지 마십시오.
라운드 5: 상호작용, 카메라, 성능, 톤
카메라 모드(렌더링 렌즈 포함), 프리셋 또는 샷 리스트, 1개의 히어로 컨트롤 + 2-3개의 컨트롤 + 포토 모드(또는 더 적게), 품질 선택기를 위한 유지 목록, 어려운 주제에 대한 톤 캘리브레이션, 범위 확장 금지. 프롬프트 언어: 영어 기본.
프롬프트 작성
- 골격:
anatomy.md의 공유 블록 +forms.md의 형태 섹션 +patterns.md에서 선택한 모듈.####제목은 주제뿐만 아니라 아이디어를 명명합니다("되감기 - 히어로 기능", "등대 - 당신이 부른 폭풍"). - 명령형, 밀도 높고 구체적. 모든 포인트는 결정입니다. 형용사 대신 숫자, 이름 및 도메인의 분류 체계.
- 기술 보일러플레이트는 항상, 리얼리즘 예산과 제작 계약(
realism.md)에 대해 선택된 변형으로: 에셋 없는 원샷, 에셋 있는 원샷, 또는 반복 프로젝트. 항상 DPR ≤ 2와 일반적인 현재 노트북에서 명시된 프레임 속도 목표를 자신의 말로 표시하십시오. - 티어 맥스와 스펙은 "한 문장으로" 줄 앞에 승인 기준 문단(수용 기준)으로 끝납니다. 미드는 한 문장 버전을 받습니다.
- 체크리스트를 실행하고, 수정한 후에만 전달하십시오. 프롬프트를 코드 블록이나 길 경우 .md 파일로 제공하십시오. 그 아래에 사용자를 위해 내린 결정에 대해 2-3문장; 변형은 한 문장으로.
전달 전 체크리스트
공통:
- 첫 문장: 형태 + 야망 티어 + 4-6개의 특정 사항이 있는 히어로 이미지.
- "다음을 구축하지 마십시오..." (3-4개의 안티패턴) 및 "다음을 구축하십시오..." 재구성; "핵심 아이디어:" 줄(마이크로/미드에서는 필수, 맥스에서는 재구성에 통합될 수 있음).
- 밀도 문단: "수십억 [단위]... [기법]으로 이를 달성하십시오. [저렴한 대안]은 사용하지 마십시오."
- 첫 번째 프레임이 오프닝 전략과 일치; "타이틀 카드, 메뉴, 로딩 화면 또는 사용 방법 텍스트 없음"; 상호작용이 있다면 튜토리얼 없이 어포던스.
- 가독성 규칙을 직접 명시(한눈에 + 자세히 보기; 어두움 ≠ 흐릿함).
- 히어로 컨트롤/메커닉을 히어로로 명명, 하드 요구사항 포함(부드러움, 양방향성, 사전 계산).
- 최소 5개의 독립적인 모션 시스템; 프리즈드 프레임 테스트.
- "가까이서도 유지됨" + 멀리서 읽을 수 있는 실루엣.
- 언급된 모든 기능이 보이거나, 움직이거나, 볼 수 있어야 함; 표시할 수 없는 기능은 제거.
- 범위 확장 금지(추가하지 말아야 할 것).
- 주제가 어둡거나, 폭력적이거나, 역사적으로 고통스러운 경우 톤 캘리브레이션.
- 성능: 요소 유형별 기법, LOD, 유지 목록("... 절대 타협하지 않음"), 위생(오프스크린 일시 정지, 폐기, 메모리 폭발 없음).
- 승인 기준(맥스/스펙) 및 "한 문장으로: ..." 줄.
- 리얼리즘 예산이 프롬프트에 한 문장으로 명명되었고("여기서 리얼리즘은..."), 보일러플레이트가 제작 계약과 일치하며, 승인 기준에
realism.md의 리얼리즘 기준이 포함됨. - 주어진 예산에서 무너지는 것에 의존하는 키 프레임이 없음; 약점이 숨겨져 있거나(실루엣, 거리, 모션, 빛) 예산이 상향됨.
- 형태(
forms.md)에 필요한 섹션이 모두 있음. - 티어의 범위 내 길이; 너무 길면 반복이 아니라 결정을 줄이십시오.
경계
-
참조 파일과
examples.md의 예제 구문은 그대로 프롬프트에 절대 들어가지 않습니다. 구조와 결정을 가져와 모든 문장을 자신의 말로 작성하십시오. 기술 공식과 승인 문단도 포함. -
퍼블릭 도메인 작품은 괜찮습니다. 보호된 작품, 잘 알려진 캐릭터, 몬스터 또는 브랜드(게임 및 영화 포함)에 대해서는 "정신을 이어받은" 독창적인 디자인을 제안하고 원본의 인식 가능한 요소 없이 자신의 특성을 통해 설명하십시오.
-
프롬프트는 브라우저에서 실행 가능해야 합니다. WebGL에서 비현실적인 것(전체 유체 시뮬레이션, 수백만 개체의 글로벌 물리)은 같은 인상을 주는 트릭(로컬 시뮬레이션 버블, 셰이더, 인스턴싱, 트리거된 모핑 메시)으로 변환되어야 하며, 프롬프트는 그 트릭을 명명합니다.