분해 시뮬레이터
하나의 기계, 하나의 오프라인 HTML 페이지: 실제 단위로 코드로 빌드된 모델, 하나의 입력에 대한 순수 함수로 구성된 하나의 솔버, 라이브 패널, 서브시스템별 버튼, 자동 투어, 비평 단계, 악보가 포함된 60fps 녹화 영상, 그리고 선택적 게시 단계.
규칙
- 먼저 참조 자료를 구하세요. 빌드하기 전에 절단면, 사진 또는 클립을 요청하거나 찾으십시오. 참조 자료가 없으면 빌드하지 마십시오.
- 숫자를 조용히 지어내지 마십시오. 모든 숫자는 출처를 명시하거나 추정치로 표시하고, 어디서 왔는지 밝혀야 합니다.
- 먼저 범위를 확인하십시오. 대규모 빌드는 많은 Claude Code 사용량을 소모합니다: 기계, 비트, 영화 포함 여부에 동의하십시오.
- 게시는 매번 명시적인 동의가 필요합니다.
- 호스트에서: 사용자 수준만, sudo 금지, 클러스터 서비스는 건드리지 말고, 긴 렌더링은 tmux에서 로그와 함께 실행하십시오.
좋은 기계 고르기
하나의 움직이는 입력(크랭크 각도, 스트로크 0..1, 바람, 시간)과 실제 공개된 숫자가 있어야 합니다. 좋은 예시: 자전거 변속기, 시계 이스케이프먼트(4Hz), 자동차 차동기어, 재봉틀 록스티치, 굴삭기 암. 독립적인 입력이 많거나 비밀 치수가 있는 기계는 피하십시오.
시뮬레이터 구성
- 기계 — 실제 단위로 코드로 빌드됩니다. 2. 모델 — 하나의 입력에 대한 순수 함수인 하나의 솔버. 3. 패널 — 동일한 모델의 라이브 차트. 4. 버튼 — 서브시스템별로 격리/절단/단독 표시, 뷰, 슬라이더. 5. 창 — 바닥/무대는 솔버가 말하는 것을 보여줍니다. 6. 투어 — 자동 커서 투어; 모든 입력이 제어권을 가져갑니다; 25초 동안 조용하면 제어권을 돌려줍니다.
설치 및 실행 (<호스트>에서)
npx skills add elvarofficial/teardown -g -a claude-code
cd ~/.claude/skills/teardown && npm install && npx playwright install chromium
# 필요: Node >= 20, ffmpeg, python3
mkdir -p ~/3d-studio/{projects,out,logs,smoke}
cd ~/3d-studio/projects/<기계>
tmux new -s <기계> 'claude 2>&1 | tee ~/3d-studio/logs/<기계>.log'
# Claude Code 내부: /teardown ... (절대 --dangerously-skip-permissions 사용 금지)
연기 테스트: node ~/.claude/skills/teardown/sims/build.mjs cessna-live 실행 후 teardown-out/dist/에서 HTML을 엽니다.
워크플로우 ([대괄호] 안의 내용을 교체하세요)
0. 브리핑
templates/brief.md를 작성하고 (참조 자료, 단일 입력, 실제 숫자, 부품) 범위를 확인합니다.
1. 빌드
/teardown Build [세스나 337 주착륙 장치]를 대화형 3D 시뮬레이터로 만듭니다. 참조 자료 첨부: [착륙 장치의 절단면 도면]. 실제 단위로 코드로 빌드합니다: [부품 목록]. 무엇을 그리기 전에, 하나의 입력에 대한 순수 함수로 모델을 작성합니다: [0에서 1까지의 스트로크]. 실제 숫자를 사용합니다: [랙 이동 거리 201mm, 피니언 32개 톱니 모듈 4mm, 레그 정확히 180° 회전]. 수동으로 확인하고 확인 결과를 보여주십시오. 숫자가 실제인지 확실하지 않으면 그렇게 말하고 출처를 알려주십시오. 모든 부품, 모든 패널, 모든 레이블은 그 하나의 모델에서 읽습니다. 수동으로 애니메이션되는 것은 없습니다.
2. 콘솔
1600×900 해상도로 기계 주위에 콘솔을 배치합니다: 왼쪽 상단에 제목과 주요 라이브 숫자를 크게: [엔진 속도 rpm]. 기계와 함께 움직이는 라이브 차트: [크랭크 720°에 걸친 밸브 리프트, PV 루프]. 동일한 모델에서 메커니즘을 2D로 다시 그리는 개략도 패널. 서브시스템당 하나의 버튼: 격리, 절단, 단독 표시. 카메라 뷰를 버튼으로: [히어로, 전면, 측면, 상단, 내부]. 가는 인출선이 있는 콜아웃. 모든 패널은 프레임 상태에서 다시 그려집니다. 화면에 표시되는 어떤 숫자도 직접 입력된 것이 아닙니다.
3. 외관
스타일: 밝은 스튜디오 배경의 깔끔한 연구 모델. 밝은 배경, 보이지 않는 바닥의 부드러운 그림자, 현재 작동 중인 부품을 위한 하나의 강조 색상: [강조 색상]. 기계는 뷰의 60-70%를 채웁니다. 어두운 부품은 광택, 라이너는 유리, 금속 거칠기는 최소 0.45. 거의 흰색 부품은 얇은 잉크 외곽선이나 더 어두운 바탕색을 얻습니다. 메커니즘에 맞게 카메라를 선택합니다: [3/4 뷰] (정면이 격자로 붕괴되는 경우).
4. 비평
아무것도 보여주기 전에: 1. 투어의 각 비트에서 스틸 이미지를 렌더링하고 각각을 검사합니다: 한 부품이 다른 부품을 통과하는 경우, 부품이 마운트에서 떠 있는 경우, 레이블이 명명한 대상을 가리는 경우, 숫자가 자세와 일치하지 않는 경우. 2. 모든 전환을 0.2초 단계로 스크럽하여 점프를 찾습니다. 3. 충돌을 매개변수 블록의 숫자로 수정하고, 카메라로 숨기지 마십시오. 무엇을 확인하고 무엇을 수정했는지 알려주십시오. 스틸 이미지를 보여주십시오.
5. 주행
투어는 자동으로 재생되며 커서가 버튼을 누릅니다: [투어 비트]. 클릭, 드래그, 스크롤 또는 키 누름은 제어권을 방문자에게 넘깁니다; 25초 동안 조용하면 제어권을 돌려받습니다. 드래그로 궤도 이동, 스크롤로 확대/축소, [키]로 패널 숨기기. 첫 번째 프레임 전에 모든 셰이더를 워밍업합니다. 통합 GPU에서 품질 단계로 테스트합니다: AO 없음, 더 낮은 픽셀 비율, 더 작은 그림자, 매 다른 프레임마다 패널.
6. 녹화
render(t)를 [20초] 동안 시간의 순수 함수로 만듭니다. 헤드리스 Chrome에서 1920×1080 해상도, 60fps로 모든 프레임을 그리고 ffmpeg로 H.264 yuv420p faststart로 파이프합니다. 각 비트의 접촉 시트를 제공합니다.
7. 악보
동일한 타임라인에서 코드로 악보를 만듭니다: [92bpm의 Am9 코드, 각 동력 행정마다 둔탁한 소리, 버튼 누를 때마다 클릭, 스로틀 드래그 아래 상승하는 공기 소리]. -14 LUFS로 마스터링, 트루 피크 -1dB 미만, 비디오에 먹싱합니다.
8. 게시
HTML을 1MB 미만으로 유지합니다 (대규모 모델은 형제 파일에 배치). 최상의 프레임에서 1200×630 미리보기 카드를 만들고 절대 이미지 URL을 사용합니다. 내가 '예'라고 말한 후에만 [Vercel / 호스트]에 배포합니다.
9. 확장 (보너스)
[풍속 0-15 m/s]용 슬라이더 하나를 추가하고 라이브로 모델을 실행합니다; 동일한 패널에 효과를 표시합니다.
교훈
- 페이지를 1MB 미만으로 유지하십시오: 15.9MB 페이지는 X 링크 카드를 망가뜨렸습니다; 967KB로 해결되었습니다.
- 통합 GPU: 품질 단계(AO 없음, 더 낮은 픽셀 비율, 더 작은 그림자, 매 다른 프레임마다 패널)는 한 빌드를 15fps에서 75fps로 향상시켰습니다.
- 스틸 이미지는 움직임이 숨기는 충돌을 포착합니다. 항상 비평 단계를 실행하십시오.
- 충돌은 매개변수 블록에서 수정하고, 카메라로 절대 수정하지 마십시오.
결과물
다음을 포함하는 폴더: <기계>.html (오프라인, <1MB), 비평 보고서 (templates/critic-report.md) (스틸 이미지 포함), 접촉 시트, <기계>.mp4 (60fps, -14 LUFS), 출처/플래그가 포함된 숫자 수동 확인 결과, 그리고 게시 시 미리보기 카드.
크레딧
워크플로우 및 프롬프트: Elvar (@elvar_official), "How I Turn Any Machine Into a 3D Simulator You Can Take Apart" (X, 2026-10-30). Elvar의 teardown 스킬 실행, github.com/elvarofficial/teardown (MIT), whaleyxbt/claude-motion (MIT) 기반.