/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时，约150 MB）和python3 -m pip install imageio-ffmpeg（仅当缺少ffmpeg时）。如果pip拒绝安装并提示“externally managed environment”，请创建一次私有环境，并使用其Python执行所有命令：python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg，然后按需运行~/.animate-skills/bin/python -m playwright install chromium。在Windows上，使用py替代python3。如果当前环境无法使用浏览器（例如Claude应用的沙箱），请参见本文件末尾。
1. 分析产品
- 根据照片确定：整体形状、比例、颜色和表面处理（如光滑玻璃、拉丝金属、磨砂塑料、织物），以及可见细节的布局（摄像头镜头、按钮、接口）。不要重现品牌徽标。
- 其真实的主要部件，按从一侧到另一侧的装配顺序：需要标注的5-9个零件（盖板、屏幕、框架、电池、主板、芯片、扬声器、驱动、缓冲垫……）。请使用该类产品实际包含的零件；如果不确定具体型号，请使用其类别通用的零件，不要编造罕见零件。
- 该工具使用简单形状构建产品，因此非常适合由层叠和硬质部件组成的产品（手机、键盘、耳机、音箱、控制器、手表、相机、家电）。柔软、有机的产品（鞋子、衣服、食物）呈现效果会像玩具一样：如果用户提出此类要求，请告知用户。
- 真实的近似尺寸，以毫米为单位（手机约72 x 150毫米，厚度8毫米；全尺寸键盘约440 x 130毫米）。
2. 编写规格文件
保存为breakdown-<product>.json。每个部件都是一个简单形状，放置在装配产品中的实际位置；level表示产品分解时该部件移动的距离（0保持不动，1移动一步，2两步；相同level的部件一起移动；支持如3.5这样的半级，负数level向反方向移动）。示例（examples/smartphone.json，已简化）：
{
"title": "Inside a smartphone",
"theme": "dark",
"parts": [
{"name": "Cover glass", "shape": "slab", "size": [72, 0.7, 150], "radius": 10.5, "material": "glass", "y": 0, "level": 0},
{"name": "Display", "shape": "slab", "size": [69, 0.7, 147], "radius": 9, "material": "black", "color": "#232428", "y": 0.8, "level": 1},
{"name": "Frame", "shape": "frame", "size": [72, 7.4, 150], "radius": 10.5, "wall": 2.5, "material": "aluminum", "y": 0.9, "level": 2},
{"name": "Battery", "shape": "slab", "size": [62, 4, 86], "radius": 5, "material": "battery", "text": "Li-ion|5,000 mAh", "pos": [0, 2, 24], "level": 3},
{"name": "Logic board", "shape": "slab", "size": [62, 1, 44], "radius": 4, "material": "pcb", "pos": [0, 2, -48], "level": 3},
{"name": "Cameras", "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": "Back glass", "shape": "slab", "size": [72, 0.9, 150], "radius": 10.5, "material": "glass-tint", "color": "#3d5571", "y": 8.4, "level": 5}
]
}
坐标：size为[宽度x, 高度y, 深度z]，单位毫米；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（十六进制颜色）可对大部分材质进行着色。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则隐藏标签（用于小型装饰部件，仅让5-9个主要标签显示）。
视角：产品在转盘上旋转：其角度（弧度）为spin - spinSpeed × seconds（默认值0.95和0.07，因此最终约呈现四分之三视图）。角度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（例如“Inside a ...”）、subtitle、theme（默认dark，可选light）、axis（"y"表示向上分解，默认；"x"或"z"表示侧向分解，适用于长条形物体，如笔或侧放的瓶子；侧向分解在垂直画面中会显得更小）、gap（层级之间的间距，单位毫米；默认约为产品尺寸的19%）、部件上的explode: [x, y, z]（部件的独立移动距离，单位毫米，用于替代其level）、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秒标签出现时添加第三帧）。第一帧是装配好的产品：看起来像产品吗（形状、比例、颜色）？第二帧是分解视图并带有标签：部件顺序合理，没有部件隐藏在其他部件内部，每个标签点都在其部件上，标签清晰可读。调整大小、位置、层级或视角，然后再次检查（通常需要两到三轮调整）。
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，或者对页面进行屏幕录制。