Creative#AI generation

teardown: ask Claude Code a question, get a 3D take-apart web page

An MIT Claude Code skill: describe any machine and the agent builds an offline HTML page — running machine, real-number panels, openable parts, and a self tour.

Project facts

GitHub Ecosystem
Repositorygithub.com/elvarofficial/teardown
License
MIT
Language
JavaScript
Stars
2,044
Data checked
2026-11-05

Snapshot figures reflect the check date and may change over time.

“How does this machine actually work?” Ask Claude Code that question and teardown (MIT, 2,044 stars as of November 5, 2025) has the agent build the answer as an offline HTML page: the machine runs in the middle, every surrounding panel reads real numbers, a button opens the part doing the work, and when nobody touches it the page tours itself. The repo’s examples are a fleet of bionic machines — a robotic bee, a robotic scorpion, a robotic octopus — each with an animated demo.

Core features

  • One prompt, one page: describe the machine in plain words; the agent produces a single offline HTML file with no server behind it.
  • Real-number panels: panels read the machine’s actual parameters rather than decorative digits.
  • Part-level take-apart: buttons open down to the component doing the work, in explanation order.
  • Self-guided tour: untouched, the page demonstrates itself — recordable as video (ffmpeg and Python 3 required).
  • Standard skill install: npx skills add loads it into Claude Code; needs Node.js 20+ with Playwright/Chromium.

Typical use cases

  • Product and hardware explainers: an interactive “take it apart” page for drones, robots and devices on landing pages.
  • Courseware: a self-touring page of a complex structure beats static diagrams by an order of magnitude.
  • Agent capability demos: a compact example of agents producing interactive artifacts.
  • Service manuals: turn a device manual into a clickable page — click the part, read its note.

Quick start

npx skills add elvarofficial/teardown -g -a claude-code
cd ~/.claude/skills/teardown && npm install && npx playwright install chromium

Then name any machine in plain words inside Claude Code; add ffmpeg and Python 3 if you want the tour recorded. The output is one self-contained HTML file — double-click to open, ready for a product page or a lecture slide. The repo’s three bionic machines are complete worked examples: changing what the panels display is a matter of editing their data arrays, so adapting an existing page to your own machine starts from something that already runs.

Summary

teardown fits developers and educators explaining machines and hardware interactively; pure-software architecture with no “parts” to open won’t benefit. Facts and limits: MIT, purely front-end offline output; the 3D quality depends on one generation pass, so complex machines take a few refinement rounds. It is the lightweight end of the “agents build interactive artifacts” line — compared with craft-anything, the full-site rebuild engine from this site, teardown narrows scope to one machine’s take-apart page and wins one-prompt usability in exchange. Everything renders live in the front end, so editing the panel data and refreshing is the whole update loop.