Turn a concept into an interactive machine-style explainer figure

---
name: "make-interactive-explainer-figures-with-anatomy-method"
description: "Use when you need to Turn a concept into an interactive machine-style explainer figure. Make interactive explainer figures with the Anatomy skill"
---

# Make interactive explainer figures with the Anatomy skill

Job: [Turn a concept into an interactive machine-style explainer figure](https://aiagents.org/canai/make-interactive-explainer-figures-with-anatomy)

## Need

- ai agent: [Claude Code](https://aiagents.org/agents/claude-code), [Anatomy skill](https://aiagents.org/agents/anatomy-skill), [Claude](https://aiagents.org/agents/claude)

## Steps

1. Install the Anatomy skill once for all projects (or only in one project folder), after reading its SKILL.md, since it runs scripts on your computer. It needs a recent Node.js (20.10+) plus a Chromium-based browser for its checks; reload skills if Claude Code was already running.
2. Describe the idea rather than the picture: in an ordinary chat, ask for three candidate physical machines that would act out the concept for your audience, each mapping its parts to the concept, with one key motion and one real number for the readout, and no boxes or arrows. Pick the one a beginner would grasp fastest.
3. Choose the size before building: a Figure (roughly 40 to 80 parts, under about 90 minutes), a Hero (up to about 150 parts, a few hours) or an Epic (a whole vehicle or building, six hours or more). Start with a Figure.
4. Write the build request with the machine-to-concept mapping, the key movement to show and the readout value, and add the keyword interactive (plus WebGL or 3D only if needed; 3D is beta). Ask for a single HTML file and tell it not to move up to Hero without asking.
5. Before it builds, have it list every number the figure will show, with unit and source, and stop to ask rather than invent any value. Supply your real data so the numbers drive the motion.
6. Treat the first build as a draft: have it run its geometry check, take screenshots at full width and at 400 pixels, and rank the three fixes that would help clarity most without applying them. Accept the fixes individually, then check the figure yourself in a browser.
7. Export in the shape you need: a self-contained HTML file or a single SVG, React components, or custom elements, in one of five themes. For client work, brief it with the audience, the insight the figure has to land, their real numbers and the theme.
8. Optional: The source article includes five ready prompts (metaphor finder, first figure, true numbers, inspector and client figure).
9. Note: Anatomy is a third-party Claude Code skill by Ryan (@wheresryan22), MIT, version 1.0 from 2026-10-10.

## Credit

Method author Kanika (@KanikaBK); skill by Ryan (@wheresryan22)
Source: https://x.com/KanikaBK/status/2109581014968439139