Machine Anatomy
공유 키트: 새 기계는 모델, 배치 및 도면, 라이브 훅, 사실만 작성합니다.
키트가 페이지, 테마 및 스타일, 확대/축소 프레임, 분해도, 진위 검사, 녹화기, 사운드 및 검증을 소유합니다.
작동 예제는 examples/edison-light-bulb/이며 그 형태를 복사하십시오.
1. 한 번 묻고, 그 다음 구축하라
코드 작성 전에, 호스트의 질문 도구(Claude Code의 AskUserQuestion)를 사용하여 한 라운드로 사용자에게 인테이크 질문을 하고, 각 질문에는 권장 기본값을 제시하며 사용자가 이미 말한 내용은 건너뜁니다. 그 후 추가 게이트 없이 진행합니다. 질문, 기본값 및 각 답변이 설정에 매핑되는 방식: references/intake.md.
2. 조사하고, 그 다음 사실을 수집하라
실제 출처(특허, 제작자의 논문, 박물관 페이지, 백과사전)를 읽습니다. URL과 인용문을 포함한 reference/notes.md를 작성한 후, facts.json을 작성합니다: 각 사실은 text, source, quote 또는 note, status(verified 또는 inferred)를 포함합니다. 규칙과 lint가 시행하는 내용: references/truth-control.md. 출처에서 기계의 모든 기능과 설정을 functions로 수집합니다.
그런 다음 기계와 그 설정에 대한 실제 사진이나 그림을 최소 3개 수집하여 reference/images/에 sources.json과 함께 저장하고, 각각을 그리기 전에 엽니다. 모든 어셈블리는 자신이 그려진 이미지를 명시합니다. Lint가 이를 시행하고 record는 shots/reference-compare.png를 작성하여 확인합니다: references/reference-images.md.
3. 기계 폴더 구축
node cli.mjs new <folder> --title "..."는 Edison 예제에서 스캐폴딩합니다. 다음 순서대로 교체하십시오:
model.mjs— 순수 모델, DOM 없음; 모든 동작과 표시되는 모든 숫자.test-model.mjs는 실제 값이나 불변 조건에 대해 테스트합니다. 테스트는 필수입니다.layout.mjs— 세계 단위의 크기와 계산된 곡선(경로는 실제 부품을 따르고 절대 현(chord)을 따르지 않음).figure.mjs—drawFigure(draw): 키트의 헬퍼를 사용하여 실제 부품을 번호가 매겨진 어셈블리의 항목으로 그리고; label, defs, css, badge anchors, step points 및 zoom target을 반환합니다.live.js—createMachineHooks(kit): 상태, 움직이는 부품의 도면, 컨트롤, 읽어내기(readout), 액션. 스프링, 관성 및 조인트에kit.Motion을 사용하십시오:references/motion.md.machine.mjs— 분해 축과 출처(provenance)가 있는 어셈블리, 모든 표시 텍스트는{ text, facts }로, 읽어내기 템플릿, 컨트롤, 필름 스토리, 사운드 음성.
각 파일을 작성하기 전에 해당 예제 파일을 읽고, 빌드된 *.html 파일은 읽지 마십시오.
4. 보기
테마와 렌더링 스타일은 독립적인 계층입니다: references/themes-and-styles.md. machine.mjs(theme, style)에서 기본값을 설정하고; 페이지는 ?theme= 및 ?style=로 전환합니다.
5. 필름과 사운드
기본 필름은 승인된 30초 형식입니다(먼저 작동, 하나의 줌 탄생, 하나의 느린 레이블 실행, 대비 순간이 있는 정상 실행, 분해와 재조립, 마지막 작동): references/film.md. 사운드는 조용하고 가까운 마이크 탭, 신호음 없음, 리미터 없음: references/sound.md. 필름 게시를 위한 캡션 규칙: references/caption.md.
6. 명령 및 검증(인계 전에 모두 필수)
node cli.mjs lint <folder> # 텍스트가 사실, 출처, 최상급, 출처에 연결됨
node cli.mjs test <folder> # 모델 테스트
node cli.mjs build <folder> [--format 16:9,9:16,square]
node cli.mjs audit <folder> # 분해도 페인트 순서 및 통과 여부
node cli.mjs verify <folder> # 실제 페이지를 headless Chrome에서 모든 테마와 스타일로 확인
node scripts/lines.mjs <folder>/<slug>-anatomy.html # 텍스처 선이 어딘가에서 끝남
node cli.mjs record <folder> [--format 9:16] [--style dither] [--no-sound]
node cli.mjs remux <folder> # 녹화된 프레임에 사운드만 변경
npm test # 키트 단위 테스트
Playwright는 번들되지 않았습니다: npm install --no-save playwright 또는 MACHINE_ANATOMY_PLAYWRIGHT를 기존 Playwright index.mjs로 설정하십시오. 녹화는 일반 우선순위 이하로 실행되며 GPU를 사용하지 않습니다.
그런 다음 shots/<variant>/video-sheet.png, 세 개의 스틸컷, verify 스크린샷 및 shots/reference-compare.png를 직접 열고; 잘림, 겹침, 판독 불가능한 텍스트, 물결 패턴 및 선언된 단순화가 아닌 참조 이미지와의 모든 차이점을 수정하십시오.
소유자가 설정한 규칙(검증이 존재하는 곳에서 시행됨)
- 어떤 것도 다른 것을 덮지 않음: record와 verify에서 하나의 충돌 검사(
references/film.md);film.overlapAllowed에서 물리적으로 실제 겹치는 경우만 그 이유와 함께 선언하십시오. - 기계를 실제 전체 설정(인테이크 질문 10)에서, 출처와 출처 증명과 함께 보여주십시오.
- 주제는 모든 단계에서 프레임 높이의 최소 25%를 차지하고 주요 이벤트는 화면에서 발생합니다(
minimum.subject,film.onScreen). 움직이는 기계는hooks.camera()로 카메라를 구동합니다. - 패턴은 표면에 고정되어 유지되며 물결치지 않습니다.
scripts/swim.mjs로 측정하십시오(references/themes-and-styles.md). - 불, 증기, 연기, 발광은
kit/effects.mjs에서 제공되며 모델에 의해 구동됩니다(references/motion.md). - 모든 작동 부품은 작동 중으로 표시되거나 명시된 이유가 있습니다. 그려지고 활성화된 원인 없이는 움직임이 없습니다. 압축된 시간은 화면에 표시됩니다(
references/completeness-and-causality.md, lint 및 record).
보고서
페이지 경로, 게시 조각 및 필름; lint, test, audit, verify 및 lines 수; 필름의 음량, 실제 피크 및 스펙트럼(아무도 듣지 않았다고 말함); 필름 타임라인; 출처가 있는 각 캡션 사실; 단순화되거나 추론되었거나 검증되지 않은 사항.
크레딧: Ryan의 Anatomy 기반(github.com/wheresryan22/anatomy, MIT). THIRD_PARTY_NOTICES.md를 참조하십시오.