Claude Agent Skill · teardown-3d-page

Teardown 3D Page

One ordinary picture in, an interactive take-apart 3D web page out. Show Claude a photo of a robot, drone, camera or gadget. It rebuilds the object in Three.js, makes it run, opens one compartment at a time, then explodes it into labelled parts. 一张普通图片 → 一个可以拆解的 3D 交互网页。

Get the skill on GitHub Download .skill

Live demos

Falco F3 foldable drone hovering on the test bench
Falco F3Foldable drone: hover, arms fold, dual-camera gimbal, battery eject, teardown.
 Salticus JS-8 robotic jumping spider walking
Salticus JS-8Robotic jumping spider: 8-leg gait, optics open, gull-wing abdomen, teardown.
 Exploded view with labelled parts
Kestrel QD-4The bare engine the skill starts from, with its built-in demo model.

Install

Claude Code

git clone https://github.com/frozenheart123/teardown-3d-page ~/.claude/skills/teardown-3d-page

Claude.ai / desktop

  • Download teardown-3d-page.skill from Releases.
  • Settings → Capabilities → turn on code execution → upload under Skills.

Image requirements · 图片要求

Any normal picture

  • Photo, product shot, render or screenshot: JPG / PNG / WebP.
  • About 500 px or more is enough. No high-res needed.
  • 普通图片即可，直接粘进对话。

Works best

  • One clear subject, fully in frame.
  • Mechanical / hard-surface: robots, drones, cameras, vehicles, gadgets.
  • 45° view; a second angle helps proportions.
  • Visible seams, joints, lenses give more parts to take apart.

Lower fidelity

  • Organic subjects become a mechanical take.
  • Busy scenes: one subject is picked.
  • Stylised rebuild, not a CAD replica.
  • Real brands get a fictional name, no logo.