Anatomy: Turn Complex Mechanical Principles into Interactive Diagrams with AI in One Prompt

Anatomy is an open-source Agent Skill built for AI coding assistants (Claude Code, Antigravity, OpenCode, Codex) that transforms mechanical principles and abstract algorithms into interactive isometric diagrams. When trying to understand a complex mechanism, knowing part names is merely the starting point; you also need to see how they coordinate: where power transmits, which action modifies state, and what condition stops the next step. Static diagrams and flowcharts can list components, links, and procedures, but readers still have to mentally simulate what happens during operation.

Interactive diagrams bring this entire process into plain sight. Winding a mechanical watch allows you to observe energy travelling through gear trains and being rhythmically released by an escapement; accessing an entry in an in-memory cache lets you watch it migrate to the most-recently-used position and observe which item gets evicted when capacity is reached. You can alter inputs, slow down execution, explode the assembly, and trace the causal link between action and consequence. This allows technical documentation, coursework, and explainer articles to clarify underlying rules through concrete physical processes.

Anatomy's approach is to let the motion of physical objects carry the explanation: mapping an LRU cache to a finite-slot bookshelf, or a token-bucket rate limiter to a device continuously supplied with gas that punches cards upon incoming requests. Shifting books on the shelf reflects access recency, while gas accumulation and depletion reflect quota changes. The scene is rendered using SVG, WebGL, or 3D code, where component motion and corner readouts are driven by the same state model. Readers can verify whether visual behavior conforms to algorithmic rules; the underlying principles and parameters still need to be checked.

You describe the mechanism, key parameters, and output requirements inside your coding assistant. The Skill equips the assistant with camera setups, component rendering primitives, interaction patterns, and verification routines, allowing the assistant to author fully editable web code. Output formats include standalone HTML, SVG, or React components, suitable for documentation, educational materials, and websites; whenever adjustments are needed, you can modify the code directly or prompt the assistant. It generates browser-based explanatory diagrams—not manufacturing CAD drawings or industrial engineering simulations.

From a Single Request to an Interactive Diagram: Follow These 5 Steps

1. Set Up Your Environment and Install the Skill

Ensure you have a working AI coding assistant and Node.js installed. Diagram libraries require Node.js 20.10+; the skills CLI installation utility requires a newer Node.js release (such as 22.20+).

The Skill itself is free and open-source; generating and editing code consumes your coding assistant's model quota. Automated screenshots and line inspection checks require Chrome or Chromium.

Select and run one command below based on your coding assistant. Commands with -g install the skill globally; choose the last command to install it only for your current project.

Installation Commands:

# Claude Code
npx skills add wheresryan22/anatomy -g -a claude-code
# Antigravity
npx skills add wheresryan22/anatomy -g -a antigravity
# OpenCode
npx skills add wheresryan22/anatomy -g -a opencode
# Codex
npx skills add wheresryan22/anatomy -g -a codex
# 仅当前项目（团队共用）
npx skills add wheresryan22/anatomy

# Claude Code
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy
# Antigravity
git clone https://github.com/wheresryan22/anatomy.git ~/.gemini/antigravity/skills/anatomy
# OpenCode
git clone https://github.com/wheresryan22/anatomy.git ~/.config/opencode/skills/anatomy
# Codex
git clone https://github.com/wheresryan22/anatomy.git ~/.agents/skills/anatomy

Once installed, active Claude Code sessions can run /reload-skills to reload immediately. If /anatomy does not automatically appear in Antigravity, OpenCode, or Codex, restart the client (triggered as $anatomy in Codex).

2. Create a Workspace and Launch Your Assistant

Create a working directory in your terminal and launch your assistant. Below is an example using Claude Code:

mkdir anatomy-demo && cd anatomy-demo
# 启动你的 AI 编程助手（例如 claude / antigravity / opencode / codex）
claude

/anatomy ... is a prompt sent directly to the coding assistant. Launch the Agent first and send the command within its chat session; do not run it directly in your terminal's shell prompt.

3. Copy the Request to Build a Token Bucket

For your first attempt, start with a focused mechanism like a token bucket rate limiter: each incoming request spends 1 token and only passes when tokens are available; tokens refill at a fixed rate, capping once the bucket reaches maximum capacity. Capacity governs the burst allowance, while the replenishment rate dictates how fast quota recovers. Both parameters jointly determine rate limiting behavior, so requesting simply to "draw a rate limiter" is insufficient.

Specifying a capacity of 8, a replenishment rate of 2 tokens/sec, and an interlock that blocks requests when the bucket is empty gives the assistant precise rules to model and provides concrete criteria for inspection. Requesting both build.mjs and index.html ensures you receive an editable build script alongside a runnable browser page: modifying parameters and rebuilding immediately updates the visual output. Asking for absolute paths and preview commands connects code generation directly to inspecting results.

Send the request in your agent session using this guide's template. When using Codex, replace the leading /anatomy with $anatomy.

/anatomy Explain a token bucket rate limiter using a concrete physical machine: fixed bucket capacity of 8 tokens, a pump replenishing at 2 tokens/sec, incoming requests spend 1 token to trigger an action, and an interlock blocks requests when empty. Output a standalone build.mjs script and an index.html file that opens directly in a browser, light theme, interactive. Please provide the exact output file paths and the local preview command in your response.

When changing topics, clearly outline the mechanism, numeric parameters, and output format so the assistant understands which constraints must remain rigid. For instance, a connection pool should state capacity, loan/return semantics, and queue behavior when exhausted; a mechanical assembly must specify which part moves and what each movement alters. Add interactive for user controls; include WebGL only when effects like flames or water surfaces are needed; and choose 3D (Beta) when parts must rotate along true depth axes.

4. Open the Output and Verify Motion and Readouts

Once generation finishes, open the page using the reported output path:

1. Confirm the exact output path: Open the file at the path returned by your assistant. If no path is provided, ask: "Please provide the absolute path to the generated files, along with the command to preview locally from the current directory."
2. Launch a local static preview server: Run the following command in your working directory, then open the browser at the address and path shown:

   npx serve .
   

3. Inspect visuals and mechanics:
   • Inspect all four card corners: ensure the figure number, title, interaction hint, and real-time readouts are clear. Then operate the figure according to the card hints, evaluating whether rules are faithfully observed rather than merely checking visual smoothness.
   • Verify consumption when quota exists: Wait for tokens to replenish, then trigger requests. Verify whether each request consumes 1 token, whether the associated component moves, and whether the readout updates in lockstep.
   • Verify blocking upon exhaustion: Trigger requests in rapid succession faster than the refill rate. When quota drops to zero, requests must be blocked; the puncher mechanism must not continue cycling while the readout rests at zero.
   • Verify recovery after pausing: Confirm tokens replenish at 2 tokens/sec and stop accumulating once reaching 8. Once a usable token is replenished, requests should be accepted immediately without waiting for the bucket to fill completely.
4. Troubleshoot audit failures and sandbox blocks:
   • Geometry audits run inside build scripts integrated with kit/audit.mjs; browser-based screenshot and line audits require Chrome. Ask the Agent to report the exact commands executed, target file paths, and audit outputs.
   • If automated checks are blocked by your execution sandbox, inspect the page manually in your browser; automated verification remains incomplete until permissions are granted.
   • Resolution: Grant permissions through your environment's approval dialog for the specific audit command, or execute verified check scripts directly in a standard terminal.

5. Iterate on Specific Issues with Follow-Up Prompts

Interact with the initial draft before detailing issues. Use the follow-up prompt templates below as needed.

Sparse visuals, parts look like they are floating:

The baseline mechanics work, but the baseplate and central carriage look too bare and flat. Please refine it to meet Anatomy's 4× audit standard: add beveled edges, inset grooves, and corner screws to the plate; add ball bushings, travel stops, and tick scales to the rails; ensure every part rests solidly on another part with zero floating surfaces.

Numbers change without corresponding mechanical motion:

The corner readout is currently out of sync with the physical motion. Please refactor the underlying math model so that both the readout string at the bottom right and the displacement of the moving parts read from the exact same pure state function, without independent UI timers.

/anatomy a figure for our Next.js docs on database connection pooling: a pool of 10 connections, requests borrow one and give it back, and when all 10 are busy new requests wait in a queue. A React component plus a static HTML preview, dark theme.

/anatomy a Bunsen burner on a lab bench: opening the air collar turns the lazy yellow flame into a roaring blue cone. WebGL for the flame, one HTML file, dark theme.

/anatomy a heat-exchanger espresso machine with the side panel off: boiler, heat-exchanger tube, group head, pump, steam wand and gauge. Show the water flowing when you pull a shot. Standalone HTML, light theme.

Try Prebuilt Diagrams Before Designing Your Own

If you simply want to explore existing figures, no installation is required. Switch between the devices below and follow the hints; to use keyboard controls, click inside the figure first to gain focus.

Finding Inspiration from Watches, Engines, and Algorithms

Wind a mechanical watch to observe energy transfer to the escapement; drag the throttle to see how three spools and thrust change; alter dates to see how Earth's axial tilt influences illumination across northern and southern hemispheres. Algorithms can be explored in the same tangible manner: selecting a book triggers cache reordering, while holding down the punch mechanism reveals how tokens deplete and refill.

The Anatomy Collection hosts 52 interactive diagrams, comprising 33 primary case studies and 19 early exploratory examples. Choose from this gallery to experience diverse mechanisms, or explore the 8 complete projects inside the repository to run and modify code locally.

Click an image to enlarge; click the link below to open and interact with the diagram.

Mechanical Watch Movement

Drag crown to wind; S slows down, E explodes view

Open interactive diagram ↗

Turbofan Engine

Push/pull throttle; Space for takeoff power

Open interactive diagram ↗

Earth and the Seasons

Drag to steer; arrow keys change date

Open interactive diagram ↗

Vintage Computer

Click keyboard to type; click case to power on/off

Open interactive diagram ↗

Hash Sorter

Click to drop letters; see bucket stacking

Open interactive diagram ↗

Message Queue

Drag to adjust speed; click consumer drum

Open interactive diagram ↗

LRU Cache Bookshelf

Click a book; see reordering and eviction

Open interactive diagram ↗

Token Bucket Workbench

Hold to punch; see blocking when tokens exhaust

Open interactive diagram ↗

Tokamak

Drag to scrub; Space plays pulse

Open interactive diagram ↗

Engine Afterburner

Click or use arrow keys to adjust throttle

Open interactive diagram ↗

Plasma Cutting Table

Hover or drag sheet; Space to run

Open interactive diagram ↗

Spot Plate and Fusion

Slide horizontally to fan out feeler gauges

Open interactive diagram ↗

Browse all 52 diagrams (33 primary + 19 early cases) ↗

Mechanical watch: Converting continuous power into rhythmic timekeeping. Winding stores potential energy in the mainspring, and gear trains transmit force toward the escapement. In this model, the balance wheel oscillates at 4 Hz, while the pallet fork alternately locks and releases the escape wheel, releasing half a tooth per beat—occurring 8 times per second. Tracing the second hand's discrete ticks back through storage, transmission, and beat regulation clarifies how the system operates beyond merely displaying turning gears.

Token bucket: Coexistence of short bursts and continuous rate limiting. Gas volume in the tank represents available tokens, a pneumatic pump corresponds to a 2 tokens/sec refill rate, and a pressure relief valve caps total accumulation at 8. Incoming requests cause a puncher to consume one token; upon exhaustion, an interlock halts the puncher. Accumulated tokens accommodate brief traffic bursts, while the fixed replenishment rate enforces long-term throughput bounds. Requests resume as soon as a single usable token accumulates, without requiring the reservoir to refill completely.

Seasons: Unchanging axial tilt, shifting illumination. In this tellurion, a central lamp represents the Sun, while gears maintain Earth's 23.4° axial tilt and a largely unchanged orientation as it orbits. As orbital position changes, northern and southern hemispheres take turns angling toward the light source. Following this motion links axial inclination, solar incidence angle, and seasonal variations directly, offering an intuitive alternative to memorizing rote descriptions.

If you wish to modify code locally, the dial indicator project is the easiest starting point. Other examples can be chosen as needed: desk computer for inputs and display response, arcade cabinet for coin-drop signals, raptor engine for exploded views and plume effects, ripple tank for wave interference, and turning dial for 3D rotation. Additionally, test rig and spot plate are React-based projects requiring integration with frontend toolchains and kit/react/, and cannot be opened directly as standalone HTML.

Advanced: Modifying Code Locally or Embedding Figures into Webpages

Running an Editable Dial Indicator

This path requires Node.js 20.10+ and Python 3, without invoking AI models:

1. Clone the repository to a local test directory:

   git clone https://github.com/wheresryan22/anatomy.git anatomy-examples
   cd anatomy-examples
   

2. Execute the lightweight build script: Run the minimal dial indicator example (dial-indicator), adding --light to compile a light-themed single-page figure:

   node examples/dial-indicator/build.mjs --light
   

   Note: This build script relies exclusively on native Node.js APIs (Node.js >= 20.10 required) and requires no npm install. Upon completion, the script outputs examples/dial-indicator/dial-indicator-light.html in the same directory.
3. Start a local static HTTP server: Launch a static web server from the repository root:

   python3 -m http.server 8000
   

4. Access the exact URL in your browser: With the Python server running, navigate to:

   http://localhost:8000/examples/dial-indicator/dial-indicator-light.html
   

5. Verify interactivity: Hover and move your mouse horizontally across the slide stage, or press arrow keys (← / →), Home, or End to switch between gauge blocks of varying thickness. Observe the synchronized coupling between the indicator plunger depressing, the dial needle rotating, and the bottom-right height readout in px.
6. Rebuild after making edits: Adjust component dimensions or travel distances in examples/dial-indicator/build.mjs, rebuild, and refresh your browser.

Embedding Prebuilt Figures into Web Applications

Install the figures package into an existing frontend project:

npm install anatomy-figures

• Importing in React (>=18) or Next.js projects: Import the desired component by name:

  import { Watch } from "anatomy-figures";
  
  export default function Page() {
    return <Watch theme="light" />;
  }
  

  Alternatively, import specific figures by path to avoid bundling unused models:

  import Watch from "anatomy-figures/watch";
  

The Skill and figure components are licensed under the MIT License; retain original copyright and license notices when using or distributing them.

How to Verify Whether a Diagram Truly Clarifies Principles

Testing Sequence and Eviction Rules with a Cache

Use a simplified 4-slot LRU cache to verify whether physical motions accurately convey logical rules. Below is a teaching model created for this guide:

• Access alters order: Clicking any data key pulls its corresponding slider—if already present—and moves it to the leftmost most-recently-used slot; other blocks shift rightward accordingly.
• Eviction upon capacity: When all 4 slots are occupied, requesting a novel key pushes the rightmost least-recently-used block out of its slot to make room for the new arrival.

Driving Motion and Readouts from a Single Calculation Result

Anatomy establishes an underlying state model before producing geometry or interaction logic. SKILL.md defines the pipeline, kit/ provides camera and drawing helpers, references/ supplements conventions, scripts/ handles verification, and examples/ provides executable projects. Generation advances through a ten-step procedure covering dimensions, states, parts, occlusion, interactivity, and self-checks.

The ripple tank's state model (examples/ripple-tank/model.mjs) demonstrates this calculation pipeline:

• The model fixes physical constants including a water depth of 6 mm (0.006 m), gravitational acceleration, and surface tension.
• When the user adjusts frequency, the system solves the dispersion relation incorporating gravity, surface tension, and water depth to calculate wavenumber, deriving the physical wavelength.
• The solved state object (stateOf) is fed simultaneously to the graphical rendering function (patternOf) and the textual readout function (readoutOf). The ripple pattern draws wave crest spacing and nodal lines, while the readout card formats real-time values for frequency, wavelength, and nodal count.

Adjusting frequency shifts ripple spacing and wavelength readouts in unison; in a cache model, access sequences and eviction labels must update with every click. Coupling visuals to unified calculations can reduce discrepancies between motion and readouts, though the underlying model itself still needs to be checked.

Resolving Layer Clipping with Occlusion and Geometry Audits

SVG renders primary assemblies, WebGL handles fire, water, and illumination, and both share a common camera projection. When parts rotate across depth axes, 3D mode reprojects every frame. When tubing penetrates a structural chassis, front-to-back occlusion must be explicitly audited:

• Layering and splitting: When rendering nested assemblies (such as springs wrapped around guide pillars or chassis housings enclosing sliders), design specifications require manually splitting the outer component into front and rear halves, placing them into separate tiers of the occlusion chain.
• Depth settlement (A.settle): During offline build time, ray casting computes the relative depth of overlapping components and determines drawing order.
• Geometry audit (--audit): This verification step validates collisions, clearances, dangling endpoints, and depth ordering against logged geometric contours, routing paths, and sampled states. It verifies recorded geometry and sampled states; whether conceptual principles are sound and parameters applicable still requires separate validation.

Start with Compact Mechanisms; Allow Time for Complex Diagrams

For your first project, pick a focused mechanism that physical motions can naturally explain, producing an initial runnable draft with interactive. Figure-tier projects feature roughly 40–80 parts, with no fixed delivery time guarantee; Hero-tier projects feature 80–150 parts, with an estimated development time of 2–4 hours; Epic-tier projects are larger and usually require over 6 hours of work, warranting an upfront discussion with your assistant to see if scope can be narrowed.

Active development times for intricate diagrams can be substantial: roughly 1 hour 54 minutes for the mechanical watch, 10 hours 33 minutes for the Raptor engine, and 14 hours for the turbofan. These reflect real-world author development logs. The 3D pipeline remains in Beta and complex scenes may experience frame drops; whenever standard isometric SVG suffices, begin with SVG.