Generate Your First Anatomy Figure

Create and improve an interactive metronome with Anatomy and Claude Code.

Introduction

30 Second Summary

A polished technical diagram can look convincing while hiding the motion that makes a mechanism understandable. Without movement, it is hard to see how one adjustment changes the machine.

In this project, you will use Anatomy with Claude Code to turn one sentence into an interactive mechanical metronome that runs in Google Chrome. You will test its motion before reviewing where the model simplifies reality.

What You'll Build

You will demo a wooden metronome where dragging its sliding weight changes the swinging pendulum plus its live tempo readout.

By the end of this project, you'll have:

A repeatable Anatomy workflow that turns a precise prompt into a standalone HTML figure you can open in Google Chrome.
Responsive metronome controls where dragging the sliding weight changes the pendulum motion or tempo readout.
Review notes that identify the model's most important simplification. They also explain why motion communicates the mechanism more clearly than a paragraph.
Secret Mission: Correct one simplification. Add an exploded view that reveals the pendulum, escapement, and spring housing.

Are there any prerequisites?

You need a Mac running macOS 13.0 or later with internet access.

An active paid Claude plan covers the project when you decline API credits during setup.

Before We Start

Before the hands-on work begins, commit to the viewer your figure will help. You will define how seeing a 120 bpm mechanical metronome move makes its mechanism easier for that viewer to understand.

Set Up Your Mac

Your interactive metronome needs a local runtime before it can be generated. It also needs a browser where you can inspect every movement.

The Anatomy skill uses Node.js for its builds. Google Chrome provides the environment for its visual checks.

Claude Code supplies the agent that follows the skill. Your project-intent sentence from earlier remains your guide while you prepare these tools.

In this step, get ready to:

Install the Node.js package that includes npm.
Install Google Chrome for local figure checks.
Set up Claude Code with your paid Claude subscription.

Install Node.js and Google Chrome

Node.js supplies the runtime that Anatomy needs. The Node.js package also installs npm for command-line packages.

A quick Terminal check shows whether the expected runtime is already available. The package installer appears in Finder after it downloads.

Use macOS search to find Terminal.
Select Terminal to open a fresh window.
Check for an existing Node.js installation by running this command:

node --version

What Does This Check Do?

This check asks the Node.js executable to report its installed version. The result determines which setup path you need.

✔️ I see the expected Node.js version

Your Terminal prints v26.13.0. That matches the runtime used throughout this project.

Keep this Node.js installation in place.

ⓧ I see a different version

A different result means your current runtime does not match the project's v26.13.0 LTS target. Install the published package before continuing.

Visit the official Node.js download page.
Download node-v26.13.0.pkg for macOS.
Select Downloads in Finder.
Open node-v26.13.0.pkg.
Follow the installer instructions until the installation completes.

ⓧ Node.js is not installed yet

Your Mac needs the published Node.js package. Installing it also adds npm.

Visit the official Node.js download page.
Download node-v26.13.0.pkg for macOS.
Select Downloads in Finder.
Open node-v26.13.0.pkg.
Follow the installer instructions until the installation completes.

Chrome provides the supported browser environment for the figures you generate. Its local file support lets you open the finished standalone HTML page directly.

Visit the official Google Chrome page.
Download the Google Chrome installation file for Mac.
Select Downloads in Finder.
Open the downloaded Google Chrome installation file.
Follow the installation instructions shown on your Mac.
Use macOS search to find Google Chrome.
Select Google Chrome to confirm the browser opens.

Good progress. Your Mac now has the runtime for Anatomy builds plus the browser for inspecting their motion.

Installer Not Completing?

Confirm that both installation files finished downloading before opening them. An incomplete download can prevent the installer from starting.

For Node.js problems, check that you opened node-v26.13.0.pkg from Downloads.

For help with your specific Mac setup, ask for installation troubleshooting.

Install Claude Code with the native installer

Anthropic provides a native macOS installer for Claude Code. The native installation receives automatic background updates.

Install Claude Code from your Terminal window by running this command:

curl -fsSL https://claude.ai/install.sh | bash

What Does This Command Do?

The curl command downloads Anthropic's macOS installation script. The pipe passes that script to your shell so it can install Claude Code locally.

You should see installation progress in Terminal. The shell prompt returns when the native installation finishes.

Why Use the Native Installer?

The native installer is Anthropic's recommended macOS route. It also keeps Claude Code updates independent of the npm package workflow.

This installation prepares the local command that starts Claude Code. Authentication happens in a fresh Terminal session next.

Native Installer Not Finishing?

Check that your Mac still has an internet connection. The installer must download Claude Code before it can finish.

If Terminal stops with an installation problem, ask for help with the native installer.

Authenticate and verify the toolchain

Claude Code opens a browser flow when you launch it for the first time. Signing in with your existing paid Claude subscription keeps access tied to that plan.

Billing choices can feel consequential. Declining API credits keeps this project within your paid plan allocation.

Close the current Terminal window.
Use macOS search to find Terminal.
Select Terminal to open a fresh window.
Start Claude Code by running this command:

claude

What Happens When Claude Code Starts?

Claude Code begins its authentication flow. Your browser handles the sign-in before control returns to the local session.

Follow the browser prompts to continue.
Sign in with the same credentials as your paid Claude subscription.
Decline the offer if the flow presents API credits.
Return to Terminal after authentication completes.

That is the account setup complete. Claude Code is now authenticated for the paid subscription you already use.

Close the authenticated Terminal window.
Use macOS search to find Terminal.
Select Terminal to open one final fresh window.

Before you run these checks, do you expect every command to complete from this brand-new Terminal session?

Verify the complete local toolchain by running these commands:

node --version
npm --version
claude --version
claude doctor

What Should You See?

The Node.js check prints v26.13.0.
The npm check prints version information.
The Claude Code executable prints version information.
The doctor check completes with installation diagnostics.

Your local toolchain is ready. Node.js runs at the expected version while Chrome and Claude Code are available for the figure workflow.

One of the Checks Failed?

Confirm that you opened a fresh Terminal window after every installer completed. A session opened before installation may not detect a newly added command.

If only the Node.js value differs, rerun node-v26.13.0.pkg from your Downloads folder.

If a Claude Code check fails, ask for help with the verification results.

Your Mac is prepared for local Anatomy builds. Next, you will install the skill and open its bundled interactive reference figure.

Install Anatomy and Explore a Reference Figure

Your Mac now has a verified runtime plus an authenticated Claude Code session. The next goal is to teach Claude Code how to build interactive technical figures.

Anatomy provides that workflow as an Agent Skill. You still need proof that the skill loaded correctly.

A bundled dial-indicator figure provides that proof through visible movement. It also gives you a known-good baseline before you generate the metronome.

In this step, get ready to:

Install Anatomy as a personal Claude Code skill.
Launch Claude Code from a new ~/anatomy-lab directory.
Open the bundled dial-indicator figure in Google Chrome.

Install Anatomy as a personal skill

A personal skill is available across your local Claude Code projects. Anatomy stores its instructions plus bundled examples under ~/.claude/skills/anatomy.

Approve the package download if npx displays a confirmation.
Install Anatomy for Claude Code by running this command:

npx skills add wheresryan22/anatomy -g -a claude-code

What does this command do?

The npx command runs the skills installer without a permanent manual setup.
The -g option makes the skill available across projects.
The -a claude-code option installs the skill for Claude Code.

Confirm the completed output identifies Anatomy as installed for Claude Code.

The installation should complete without reporting a failure. Anatomy now lives at ~/.claude/skills/anatomy.

Installation stalled or failed?

Check that your Mac still has an active internet connection.
Confirm that your earlier Node.js check showed v26.13.0.
Run the Anatomy installation command again after resolving the connection problem.

Help me troubleshoot an Anatomy installation failure.

Create the Anatomy project space

A dedicated directory gives Claude Code a clear place for the metronome files you create later. Starting Claude Code from that directory keeps its work scoped to ~/anatomy-lab.

Create the project directory and start Claude Code from it by running this command:

mkdir -p ~/anatomy-lab && cd ~/anatomy-lab && claude

What does this command do?

The mkdir -p portion creates ~/anatomy-lab if it does not already exist.
The cd portion moves the Terminal session into that directory.
The claude portion starts Claude Code from the current directory.

Claude Code now takes over this Terminal window. You should see its interactive prompt inside ~/anatomy-lab.

Type / at the Claude Code prompt to open the slash-command menu.
Confirm that /anatomy appears in the menu.
Leave Claude Code running in this Terminal window.

Your installation is connected correctly. Claude Code can now invoke Anatomy from this project directory.

Don't see /anatomy?

Enter /reload-skills at the Claude Code prompt.
Type / again to reopen the slash-command menu.
Confirm that /anatomy now appears.

Help me find a missing Anatomy slash command.

Explore the dial-indicator figure

A known-good reference separates installation problems from generation problems. The bundled figure is a standalone HTML page with an interaction you can test immediately.

Click Finder in the Dock.
Press Shift-Command-G to open the Go to Folder window.
Enter ~/.claude/skills/anatomy/examples/dial-indicator/ in the path field.
Press Return to open the directory.
Control-click dial-indicator.html.
Choose Open With from the context menu.
Select Google Chrome.

You should see the dial-indicator page load in Google Chrome. Its title plus hint frame the interaction.

Before you move the pointer, which parts do you expect to respond together?

Locate the figure's title.
Read the interaction hint.
Note the current value in the readout.
Move the pointer across the carriage.
Drag the carriage through its available range.
Compare the needle position with the changing readout.

You'll see the carriage respond to your pointer. The needle moves in step with that interaction.

The readout makes the movement measurable. You now have your first working Anatomy explainer in the browser.

Figure missing or unresponsive?

Confirm that Finder shows dial-indicator.html inside the dial-indicator directory.
Confirm that the file is open in Google Chrome.
Refresh the page by pressing Command-R.

Help me troubleshoot the bundled dial-indicator figure.

Anatomy is available from your ~/anatomy-lab Claude Code session. Next, you'll turn your metronome idea into a working first draft.

Generate and Critique the Metronome

The dial-indicator reference proved that a moving technical figure can connect an input with a mechanical response. Now you will use Anatomy in Claude Code to create your own metronome figure.

A fast first draft gives you something real to test. You then check whether its polished surface hides simplified or omitted mechanics.

In this step, get ready to:

Generate a standalone light-theme metronome figure from a constrained prompt.
Test its idle motion, drag interaction, keyboard focus, title, hint, and tempo readout.
Critique its mechanical assumptions and save the findings in review-notes.md.

Generate the first draft

A precise prompt gives Anatomy boundaries it can test. This one requests a standalone HTML figure with a small scope before extended polish.

Return to the Claude Code prompt running in ~/anatomy-lab.
Submit this prompt:

/anatomy a mechanical metronome on a small wooden plinth, swinging at 120 bpm, with a sliding weight you can drag, interactive, as one standalone HTML page, light theme. Keep this to the smallest Figure scope and give me a working first draft before extended polish. When finished, tell me which file to open.

Why These Constraints Matter

The 120 bpm value anchors the first scene to a true starting tempo.
The interactive keyword asks Anatomy for pointer and keyboard behavior.
The standalone format keeps the finished figure inside one local file.
The smallest Figure scope prioritizes a working draft before extended visual polish.

Anatomy estimates a complete Figure at 30–90 min. This prompt narrows the job to a working first draft before extended polish.

Permission prompts can feel high-stakes. Here, they authorize the local file writes and browser checks you requested for this figure.

Review each permission request.
Allow the requested local file writes.
Allow the requested browser checks.
Leave Claude Code running while it completes the figure.
Record the final file path Claude reports here: your metronome HTML file path.

You should see Claude Code report a standalone HTML file inside ~/anatomy-lab.

Figure Generation Stopped?

Read the latest Claude Code message for a declined permission or an incomplete browser check. Approve the requested local operation before asking Claude Code to continue.

If the process still stops, help me diagnose why my Anatomy figure generation did not finish.

Test the first draft in Chrome

An interactive figure earns trust through observable behavior. You will check the visual explanation in Google Chrome before judging its mechanical accuracy.

Return to Finder from the dial-indicator check.
Press Shift-Command-G to open Go to Folder.
Paste your metronome HTML file path.
Press Return to reveal the HTML file.
Drag the HTML file into the Google Chrome window from earlier.

You should see a light-theme mechanical metronome on a small wooden plinth. Its pendulum should begin moving from an initial 120 bpm state.

Before you drag the weight, what do you expect the pendulum and live readout to do? Keep your prediction in mind.

Watch the pendulum without touching the control.
Drag the sliding weight to a new position.
Release the sliding weight.

You should see the pendulum continue moving. The live tempo readout should change when you drag the weight.

Read the figure title.
Read the hint to identify the expected interaction.
Press Tab until the interactive control receives keyboard focus.

You should see a visible focus indicator on the interactive control. The title, hint, sliding weight, and tempo readout should remain visible.

Figure Does Not Respond?

Confirm that you opened the final HTML path reported by Claude Code.
Reload the local page after Claude Code finishes its browser checks.
Confirm that you are dragging the sliding weight shown by the figure hint.

If the interaction still does not respond, help me troubleshoot my generated metronome interaction.

Your first draft is alive: the pendulum moves, the weight responds, and the readout exposes the interaction.

Critique the mechanism and save review notes

The first draft is an explanatory model of a real mechanism. Critique separates its visual polish from its mechanical accuracy.

Before you ask, do you think the review will find a mechanically complete model or a useful simplification? Keep your prediction in mind.

Return to the Claude Code prompt in ~/anatomy-lab.
Request a mechanical critique by submitting this prompt:

Which parts of a real mechanical metronome did this figure simplify, approximate, or omit? Name the most important assumption, then explain why seeing this motion helps more than reading the same explanation as a paragraph.

What Does This Review Ask For?

The first question audits the figure against a real mechanical metronome.
The priority request turns a broad list of limitations into one important assumption.
The final comparison tests whether motion adds explanatory value beyond written description.

Claude should identify parts that the draft simplifies, approximates, or omits. This is the intended critique point: visual polish does not guarantee mechanical completeness.

The review needs a durable home inside the project directory. Saving it as Markdown keeps the critique beside the figure it evaluates.

Save Claude's review by submitting this prompt:

Save the response as review-notes.md in the project folder.

Why Save the Review?

The review-notes.md file preserves the most important assumption beside the generated figure. It also records why the moving model communicates more effectively than a paragraph.

Before the final check, which two pieces of evidence prove that you have a working figure and a saved critique? Keep those signals in mind.

Return to the metronome in Google Chrome.
Drag the sliding weight once more.

You should see the pendulum or live tempo readout respond while the page remains interactive.

Return to Finder.
Press Shift-Command-G to open Go to Folder.
Enter ~/anatomy-lab/review-notes.md.
Press Return to reveal the file.
Double-click review-notes.md to open it.

You should see a review of simplified, approximated, or omitted mechanics. It should name the most important assumption and explain the value of motion.

Review Notes Missing?

Check Claude Code's latest message for the save location. If it used another folder, ask it to place the same response at ~/anatomy-lab/review-notes.md.

If Finder still cannot reveal the file, help me find or recreate my review-notes.md file.

✔️ My Figure and Notes Are Ready

Your standalone metronome responds in Google Chrome. Its mechanical critique is saved beside it in ~/anatomy-lab.

ⓧ I'd Like to Double Check the Project State

Confirm that the Claude-reported standalone HTML file is inside ~/anatomy-lab.
Open the HTML file in Google Chrome.
Drag the sliding weight to confirm that the live tempo readout changes.
Confirm that ~/anatomy-lab/review-notes.md contains the mechanical critique.

That completes the review loop. You now have a working interactive metronome and a written account of where its explanation needs scrutiny.

Secret mission

Secret Mission: Correct It and Take It Apart

Use the critique in `review-notes.md` to correct the metronome's most important mechanical simplification. Then add an `E` key exploded view that reveals the mechanism before you capture the result.

Clean Up Your Resources

This project created no paid cloud resources. Your Claude Code usage stayed within your existing paid plan because you declined API credits.

Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

The ~/anatomy-lab folder containing the revised standalone metronome and review-notes.md.
The Anatomy skill folder at ~/.claude/skills/anatomy.
The exploded-metronome screenshot on your Mac desktop.

Keep everything running

No action needed. Choose this if you want to refine the metronome or build another figure with Anatomy.

Keep ~/anatomy-lab so you can revisit the metronome and its review notes.
Keep ~/.claude/skills/anatomy so /anatomy remains available in Claude Code.
Keep the exploded-metronome screenshot on your Mac desktop for sharing.

Pause - I'll come back to this later

Close your active session to clear your screen. Your local files remain ready for another review round.

Return to the Terminal window containing your Claude Code session from earlier.
Close that Terminal window.
Close the metronome tab in Google Chrome.

Delete - I don't want to use this again

Remove the project artifacts if you do not plan to revisit this figure. Your installed development tools stay available for future projects.

Delete the project folder

Switch back to Finder.
Press Shift-Command-G to open Go to Folder.
Enter ~/anatomy-lab in the path field.
Select the anatomy-lab folder shown in Finder.
Press Command-Delete to move the selected folder to the Trash.

Delete the Anatomy skill

Press Shift-Command-G to return to Go to Folder.
Enter ~/.claude/skills/anatomy in the path field.
Select the anatomy folder shown in Finder.
Press Command-Delete to move the selected folder to the Trash.

Delete the screenshot

Return to your Mac desktop in Finder.
Select the screenshot showing the separated metronome mechanism.
Press Command-Delete to move the selected screenshot to the Trash.
Confirm the Mac desktop no longer shows the exploded-metronome screenshot.

Nice Work!

Great job! Your interactive metronome is now a tested technical explainer that you can run in Google Chrome.

You've learned how to:

Set up a verified Anatomy workflow in Claude Code with /anatomy available as a personal skill.
Generate a standalone interactive metronome with a draggable sliding weight plus a live tempo readout.
Apply a technical review loop by recording the figure's most important mechanical simplification in review-notes.md.
Secret Mission: Corrected one measurable assumption in the motion model plus readout. Added an exploded view controlled with E and Escape. Captured the separated mechanism in a Mac screenshot.

Ready to quiz yourself?