maverickmaltin/breakdown

/breakdown: 제품을 분해하고, 모든 부품에 라벨을 붙입니다

사용자가 제품 사진을 첨부하거나 제품 이름을 지정합니다. 당신은 제품이 무엇으로 구성되어 있는지 파악하고, 간단한 3D 부품(크기는 밀리미터 단위)으로 설명한 후, 두 프레임을 확인하고, 제품이 회전하면서 분해되고 스스로 라벨을 붙이는 무음 MP4(약 6초)를 생성하여 반환합니다.

아래 ${CLAUDE_SKILL_DIR}은 이 스킬의 폴더(이 SKILL.md가 있는 폴더)입니다. 환경이 이를 채워주지 않으면 해당 폴더의 경로를 사용하세요. 모든 파일은 사용자의 현재 폴더 또는 사용자가 지정한 폴더에 저장하세요. 3D 페이지는 인터넷에서 three.js를 로드하므로 인터넷 연결이 필요합니다.

0. 설정 확인

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check

몇 초 정도 걸리며, 이 컴퓨터가 설정되었는지 확실하지 않으면 실행하세요. "ready": true이면 진행합니다. 그렇지 않으면, 나열된 "fix" 명령어를 실행하고 사용자에게 일회성 설치라고 알리세요: python3 -m pip install playwright (브라우저 드라이버), python3 -m playwright install chromium (Google Chrome이나 Edge가 설치되지 않은 경우에만, 약 150MB), python3 -m pip install imageio-ffmpeg (ffmpeg가 없는 경우에만). pip가 "외부 관리 환경"이라고 거부하면, 개인 환경을 한 번 만들고 모든 명령에 해당 Python을 사용하세요: python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, 그런 다음 필요한 경우 ~/.animate-skills/bin/python -m playwright install chromium를 실행하세요. Windows에서는 python3 대신 py를 사용하세요. 여기서 브라우저를 사용할 수 없는 경우(예: Claude 앱의 샌드박스)? 이 파일의 끝을 참조하세요.

1. 제품 파악

• 사진에서: 전체적인 모양, 비율, 색상 및 마감(광택 유리, 브러시드 메탈, 무광 플라스틱, 패브릭)과 보이는 세부 사항(카메라 렌즈, 버튼, 포트)의 배치. 브랜드 로고를 재현하지 마세요.
• 실제 주요 부품을, 한쪽에서 다른 쪽으로 조립 순서대로: 라벨을 붙일 가치가 있는 5~9개의 부품(커버, 화면, 프레임, 배터리, 기판, 칩, 스피커, 드라이버, 쿠션 등). 이 종류의 제품에 실제로 포함된 부품을 사용하세요. 특정 모델이 확실하지 않으면, 해당 카테고리가 항상 가지고 있는 부품을 사용하고, 특이한 부품을 만들어내지 마세요.
• 이 키트는 단순한 도형으로 제품을 만들기 때문에, 레이어와 단단한 부품으로 이루어진 제품(휴대폰, 키보드, 헤드폰, 스피커, 컨트롤러, 시계, 카메라, 가전제품)에 잘 맞습니다. 부드럽고 유기적인 제품(신발, 옷, 음식)은 장난감처럼 보입니다. 사용자가 그러한 제품을 요청하면 그렇게 말하세요.
• 실제 대략적인 크기를 mm 단위로 (휴대폰은 ~72 x 150mm, 두께 8mm; 풀 키보드는 ~440 x 130mm).

2. 사양 작성

breakdown-<product>.json 파일을 저장하세요. 각 부품은 조립된 제품 내의 위치에 배치된 단순한 도형입니다. level은 제품이 분해될 때 부품이 얼마나 멀리 이동하는지를 나타냅니다(0은 제자리에, 1은 한 단계, 2는 두 단계 이동, 같은 레벨의 부품은 함께 이동, 3.5와 같은 반 레벨도 작동하며, 음수 레벨은 반대 방향으로 이동). 예시(examples/smartphone.json, 축약):

{
  "title": "스마트폰 내부",
  "theme": "dark",
  "parts": [
    {"name": "커버 유리", "shape": "slab", "size": [72, 0.7, 150], "radius": 10.5, "material": "glass", "y": 0, "level": 0},
    {"name": "디스플레이", "shape": "slab", "size": [69, 0.7, 147], "radius": 9, "material": "black", "color": "#232428", "y": 0.8, "level": 1},
    {"name": "프레임", "shape": "frame", "size": [72, 7.4, 150], "radius": 10.5, "wall": 2.5, "material": "aluminum", "y": 0.9, "level": 2},
    {"name": "배터리", "shape": "slab", "size": [62, 4, 86], "radius": 5, "material": "battery", "text": "Li-ion|5,000 mAh", "pos": [0, 2, 24], "level": 3},
    {"name": "로직 보드", "shape": "slab", "size": [62, 1, 44], "radius": 4, "material": "pcb", "pos": [0, 2, -48], "level": 3},
    {"name": "카메라", "shape": "lens", "radius": 4.6, "size": [9.2, 4.2, 9.2], "copies": [[-23.2, -62.2], [-23.2, -45.5], [-8, -53.8]], "y": 6.6, "level": 4},
    {"name": "후면 유리", "shape": "slab", "size": [72, 0.9, 150], "radius": 10.5, "material": "glass-tint", "color": "#3d5571", "y": 8.4, "level": 5}
  ]
}

좌표: size는 [너비 x, 높이 y, 깊이 z](mm 단위), y는 위쪽입니다. pos: [x, y, z] (또는 "y"만 사용)는 조립된 제품에서 부품의 하단 중심이 위치하는 곳입니다. 부품이 약간 겹쳐도 괜찮습니다.

도형: slab (둥근 모서리 직사각형 판; radius = 모서리 반경), frame (구멍이 있는 슬래브; wall 두께), box (날카로운 모서리), cylinder/disc (radius, 높이 = size[1]), ring (radius, inner), lens (금속 링이 있는 카메라 렌즈), sphere (size로 크기 조정), capsule, cone (radiusTop), torus/cushion (radius, tube; 구멍이 위를 향하도록 평평하게 놓임: 이어 쿠션, O-링, 타이어), band (radius, tube, arc: 위쪽으로 아치형으로 세워짐: 헤드밴드, 손잡이, 주전자 그립), tube (from: [x, y, z]에서 to: [x, y, z]까지의 막대; radius 및 선택적 radiusTo: 프레임 튜브, 의자 및 테이블 다리, 스트럿, 빨대), lathe (profile: [[radius, y], ...]가 수직 축을 중심으로 회전: 병, 컵, 손잡이, 스피커 콘, 돔; 양면이 그려지므로 점 순서는 중요하지 않음). arc (도, 기본값 360)는 부분 ring, torus, band 또는 lathe를 만듭니다(+x 측에서 시작, rot으로 회전). ring 또는 torus의 spokes: n은 n개의 스포크와 허브를 추가합니다(바퀴, 팬). stretch: [x, y, z]는 부품의 크기를 조정합니다(타원형 쿠션: [0.85, 1, 1.15]). rot: [x, y, z] 도는 부품을 하단 중심을 기준으로 회전시킵니다([90, 0, 0]은 실린더를 옆으로 세우고, [0, 90, 0]은 슬래브를 회전시켜 인쇄된 텍스트가 반대쪽을 따라 읽히도록 함).

반복: copies: [[x, z], ...] (또는 [x, y, z])는 동일한 부품을 여러 번 배치합니다(카메라, 나사, 버튼). 복사본은 {"pos": [x, y, z], "rot": [x, y, z]}가 될 수도 있어 각각을 회전시킬 수 있습니다(왼쪽 및 오른쪽 이어컵이 바깥쪽을 향하도록). grid: {"nx": 14, "nz": 5, "pitch": 19}는 그리드를 배치합니다(키캡, 셀, LED). 라벨 점은 첫 번째 복사본에 표시됩니다.

재질: glass (투명), glass-tint (착색 유리), aluminum, steel, gold, copper, black, white, plastic (모든 color), ceramic, rubber, foam, fabric (메쉬 그릴), wood, leather, pcb (녹색 회로 기판), chip, battery (어두운 셀, text가 인쇄됨, |는 새 줄), coil (구리 무선 충전 코일), lens, screen (조명이 켜진 디스플레이), magnet, emissive (발광). color (16진수)는 대부분을 색조합니다. text는 슬래브의 상단 면에 라벨을 인쇄합니다. 스튜디오 조명은 색상을 약간 밝게 만듭니다. 첫 번째 확인 프레임을 사진과 비교하고, 색상이 바래 보이면 color를 어둡게 만드세요. 어두운 금속에는 steel 또는 black을 사용하고(aluminum은 은색 톤), 대부분 검은색 제품에는 라이트 테마를 사용하여 부품이 어두운 배경에 묻히지 않도록 하세요.

사용자 사진: 모양, 색상 및 레이아웃을 올바르게 얻는 데 사용하세요. 사진이 평평한 면을 정면으로 보여주는 경우(휴대폰의 후면 또는 화면, 카드, 뚜껑), 해당 부품에 사진을 매핑할 수도 있습니다: 최상위 레벨에 "photo": "path/to/photo.jpg"를, 그런 다음 부품에 "texture": "photo"와 함께 "crop": [x0, y0, x1, y1](사진의 0-1 분수)를 추가하여 해당 면을 자릅니다. 각도가 있거나 원근감이 있는 사진의 경우 색상과 레이아웃만 사용하세요.

라벨: 각 부품은 name으로 라벨이 지정됩니다(이름을 짧게 유지하세요: 최대 14자까지 전체 크기 유지). "label": "Other text"는 라벨을 변경하고, "label": false는 라벨을 숨깁니다(작은 장식 부품에 사용하여 59개의 라벨만 표시되도록 함).

뷰: 제품은 턴테이블에서 회전합니다. 각도(라디안)는 spin - spinSpeed × seconds입니다(기본값 0.95 및 0.07, 약 3/4 뷰로 끝남). 각도 0은 제품의 +z 측을 정면으로 봅니다. 양의 각도는 제품을 회전시켜 -x 측을 더 많이 볼 수 있게 합니다(1.57은 -x 끝을 봄). 부품이 서로를 가리는 길고 평평한 물체의 경우 측면으로 끝나도록 하세요: 예: "spin": 1.9, "spinSpeed": 0.06. elevation0/elevation1은 카메라의 높이(도)입니다(기본값 38 → 24). zoom(기본값 1, 예: 1.2)은 제품이 작게 보이는 경우 확대합니다. 길거나 넓은 제품(자전거, 소파, 평평하게 누운 신발)은 세로 동영상에서 작게 나옵니다: "size": "1080x1080" 또는 "1920x1080"을 사용하거나 zoom을 사용하세요. 라벨은 하나의 순서를 유지합니다(최종 분해도에서 부품의 순서).

스택이 아닌 제품(헤드폰, 주전자, 컨트롤러): 위로 분해하는 것이 세로 동영상에 가장 잘 맞으므로, 제품의 레이어가 수직으로 쌓이는 방식으로 제품을 배치하세요. 오버이어 헤드폰의 경우 옆으로 놓고(컵의 축이 수직이 되도록) 한 컵의 레이어를 위로 분해합니다(쿠션, 메쉬, 드라이버, 기판, 배터리, 쉘), 밴드와 다른 컵은 조립된 상태로 유지합니다. 각 부품의 정확한 이동을 위해 explode: [x, y, z]를 사용하세요.

기타 필드: title (예: "... 내부"), subtitle, theme (dark 기본, light), axis ("y"는 위로 분해, 기본값; "x" 또는 "z"는 옆으로 분해, 펜이나 옆으로 누운 병과 같이 길고 가느다란 물체에 사용, 옆으로 분해하면 세로 프레임에서 더 작게 나옴), gap (레벨 사이의 mm, 기본값은 제품 크기의 약 19%), 부품의 explode: [x, y, z] (레벨 대신 자체 이동 거리, mm), apartAt (초, 기본값 1.5), size, duration (기본값 약 6-7초, 라벨을 읽기에 충분), fps. 두 번째 예시: examples/mechanical-keyboard.json.

3. 두 프레임 확인

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<product>.json --still 0.5 --out breakdown-<product>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<product>.json --still end --out breakdown-<product>-check2.png

--still은 초를 사용하거나 end를 사용합니다(부품이 서로 가깝게 붙어 있는 경우 라벨이 도착하는 약 3.5초에 세 번째 프레임을 추가). 첫 번째는 조립된 제품입니다: 제품처럼 보입니까(모양, 비율, 색상)? 두 번째는 라벨이 있는 분해도입니다: 부품이 합리적인 순서로, 다른 것 안에 숨겨진 것이 없고, 각 라벨의 점이 해당 부품에 있으며, 라벨을 읽을 수 있습니다. 크기, 위치, 레벨 또는 뷰를 수정하고 다시 확인하세요(2~3회 정도가 일반적).

4. 비디오 렌더링

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<product>.json --out breakdown-<product>.mp4

약 10-20초 소요됩니다. 3D 렌더링이 검게 나오면 --no-gpu를 추가하세요. 확인 이미지를 삭제하세요.

5. 전달

MP4 파일의 경로를 사용자에게 알려주세요(환경에서 파일을 표시할 수 있으면 보여주세요). 소리가 없습니다. 부품이 제품의 단순화된 모델임을 한 줄로 설명하고, 하나의 변형(라이트 테마, 부품 이름 변경)을 제안하세요.

여기서 브라우저를 사용할 수 없습니까? (예: Claude 앱의 샌드박스)

설정 확인에서 브라우저를 실행할 수 없는 경우, 대신 페이지로 애니메이션을 작성하세요: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<product>.json --html breakdown-<product>.html. 페이지는 모든 브라우저에서 재생됩니다(가능하면 아티팩트로 표시). MP4에는 컴퓨터에서 Claude Code가 필요하거나 페이지를 화면 녹화해야 한다고 사용자에게 알리세요.