Tool for learning designers
Claude
Advanced remix

Teardown

remix it

Make it yours. Leave any field blank to keep the original.

Your topicYour audienceAnything to change

Your prompt

Build a single-file HTML interactive 3D simulator (use three.js loaded inline so it works offline) that lets a learner take a machine apart and see how it works.

Topic: how machines work
Audience: technical trainers, learning designers
Learning goal: Learners will be able to explain how the main parts of the machine work together to do its job.

Key mechanics:
- The machine runs and animates in the centre of the screen as a 3D model built from simple shapes, with parts grouped by function.
- Side panels show live readouts (for example speed, pressure or position) that change as the machine moves.
- A button for each key part opens or explodes the machine so the learner can see that part working, with a short plain-language label explaining what it does.
- Learners can rotate and zoom the model.
- When the learner is idle for a few seconds, the page runs a self-guided tour that opens one part at a time.
- End with a short 3-question check of what the learner saw.

Problem of practice

“Technical training often relies on flat diagrams and slides that can't show how the hidden parts of a machine move and work together.”

Learning goal

Designers will be able to turn a machine or mechanism into an interactive 3D exploded-view simulator that shows learners how its parts work together.

What it does

Teardown is a free, open-source Claude Code skill. Ask how a machine works in plain words and Claude builds an offline 3D simulator as a single HTML page. The machine runs in the middle, panels around it show live numbers, and buttons open up the part doing the work. When no one is touching it, the page tours itself. It can also produce a recorded video tour with sound.

Builds a 3D machine simulator as one offline HTML page from a plain-language request
Panels around the machine show live numbers while it runs
Buttons open up the specific part doing the work, with an exploded view
Self-guided tour plays when nobody is interacting

Colorfigures

by April Zhu

An AI skill that turns a one-sentence object description into a hand-inked, isometric figure with working buttons.

Tool for learning designers
Claude
Intermediate remix
source shared

Anatomy

by Ryan

A Claude Code skill that turns one line about an idea into a live isometric machine you can turn, press and read.

Tool for learning designers
Claude
Intermediate remix
source shared

Bencho

by Lorenzo Cabra

A library of 150+ live, interactive UI blocks and micro-interactions you can try, tweak and reuse in your own projects.

Tool for learning designers
Claude
Advanced remix
source shared

← Back to catalog

Open original ↗View source code ↗

← Back to catalog

Tool for learning designers
Claude
Advanced remix

Teardown

by elvarofficial

remix it

Make it yours. Leave any field blank to keep the original.

Your topicYour audienceAnything to change

Your prompt

Build a single-file HTML interactive 3D simulator (use three.js loaded inline so it works offline) that lets a learner take a machine apart and see how it works.

Topic: how machines work
Audience: technical trainers, learning designers
Learning goal: Learners will be able to explain how the main parts of the machine work together to do its job.

Key mechanics:
- The machine runs and animates in the centre of the screen as a 3D model built from simple shapes, with parts grouped by function.
- Side panels show live readouts (for example speed, pressure or position) that change as the machine moves.
- A button for each key part opens or explodes the machine so the learner can see that part working, with a short plain-language label explaining what it does.
- Learners can rotate and zoom the model.
- When the learner is idle for a few seconds, the page runs a self-guided tour that opens one part at a time.
- End with a short 3-question check of what the learner saw.

Problem of practice

“Technical training often relies on flat diagrams and slides that can't show how the hidden parts of a machine move and work together.”

Learning goal

Designers will be able to turn a machine or mechanism into an interactive 3D exploded-view simulator that shows learners how its parts work together.

What it does

Builds a 3D machine simulator as one offline HTML page from a plain-language request
Panels around the machine show live numbers while it runs
Buttons open up the specific part doing the work, with an exploded view
Self-guided tour plays when nobody is interacting

Colorfigures

by April Zhu

An AI skill that turns a one-sentence object description into a hand-inked, isometric figure with working buttons.

Tool for learning designers
Claude
Intermediate remix
source shared

Anatomy

by Ryan

A Claude Code skill that turns one line about an idea into a live isometric machine you can turn, press and read.

Tool for learning designers
Claude
Intermediate remix
source shared

Bencho

by Lorenzo Cabra

A library of 150+ live, interactive UI blocks and micro-interactions you can try, tweak and reuse in your own projects.

Tool for learning designers
Claude
Advanced remix
source shared

Problem of practice

Learning goal

What it does

more like this

Colorfigures

Anatomy

Bencho

Problem of practice

Learning goal

What it does

more like this

Colorfigures

Anatomy

Bencho