What This Is
Anatomy is a “skill” package written for AI coding assistants: once it’s installed, you tell Claude Code in one sentence what kind of picture you want, and it follows a fixed workflow to draw that technical concept as a believable little isometric machine — a heavy base, graduated rails, turnable knobs, gauges with needles pressed against them, cables routed one by one. The finished drawing ends up as standalone SVG and HTML files you can open in a browser with a double-click, complete with subtle animation.
Its core idea, in the author’s own words, is “the object is the explanation”: instead of drawing boxes, arrows, and labels, it maps a concept onto a machine everyone recognizes. For example, “a shared GPU context serving 16 canvases” is drawn as a gantry plotter whose single print head visits 16 wells in turn; “skip recomputation when the cache key is unchanged” is drawn as a pin tumbler lock whose plug turns only when every pin aligns. Once the reader understands the machine, they understand the concept.
The skill is framework-agnostic: by default it generates SVG and HTML directly in plain TypeScript/JavaScript, and it also works in React/Next projects; if you like, you can layer real WebGL shaders on top — flames, exhaust plumes, water surfaces, lighting — and the shaders are constrained to the isometric perspective, so they never break out of the frame. The tool ships with 8 complete examples, from a minimal indicating gauge (about 300 lines of code) to a rocket engine test stand with geometric self-auditing — all finished pieces you can study line by line.
Who It’s For
- People who write technical documentation, blogs, or product pages and want that “expensive-looking at first glance” kind of explanatory illustration, without hand-drawing one from scratch every time;
- People already using command-line AI assistants like Claude Code, OpenCode, or Codex, who are happy to let AI do the work for them;
- People with Node.js 20.10 or newer on their machine — building the examples and running the geometric audit both rely on it, and the audit step also needs a local Chrome or Chromium.
Conversely, if you just want to find a ready-made illustration library, download it, and be done, or you can’t install Node on your computer, this project can’t help you. It’s a “have AI draw it for you” tool, not an asset pack.
How to Use It
For how to get it, see the “Download and Verify” section above: a single git clone command, or download the source package and unpack it. Following this project’s convention, the folder goes in ~/.claude/skills/anatomy, and Claude Code discovers the skill directory automatically.
Once it’s installed, open a new session and state your request directly, for example “Use anatomy to draw me an isometric illustration explaining the CDN origin-pull mechanism.” The skill first tells you which tier the picture falls into: Figure (a single mechanism, 40–80 parts, roughly half an hour to an hour and a half) or Hero (denser objects or multiple WebGL layers, 80–150 parts, roughly 2–4 hours) — quoting the tier before starting work is the first step of its workflow.
There is one shortcut the author stresses repeatedly for getting started: the bundled examples/ directory contains 8 complete examples, and before starting work you should have the AI open and read through the one closest to your need. To run an example yourself, go into the example directory and run node build.mjs, which generates a standalone HTML page alongside it (add --light for the light theme); running node build.mjs --audit has the geometric self-audit script verify frame by frame that no parts interpenetrate and that every line lands on a real support point — this is the most exacting part of the project, and it is what separates the output from “casually generated SVG.”
Safety Notes
- Keep to a single acquisition channel: get it only from the address given on this page, and don’t use repackaged copies of unknown origin; if you download the source package, verify its integrity against the SHA256 on this page before handing it to your AI.
- Skill packages of this kind are, in essence, “prompts plus plain-text scripts.” The files under
kit/,scripts/, andexamples/are all plain readable JavaScript — if you’re uneasy, have the AI explain what each file does first, or skim them yourself. The build process runs entirely on your machine and needs no account of any kind. - The geometric audit step launches Chrome or Chromium locally to render the page — that is normal; if you’d rather not let it run a browser, you can skip the audit and generate static images only.
- SKILL.md mentions “publishing the finished piece to the community gallery on request” — that is an online upload. If you don’t need it, say “do not publish” explicitly in your instructions, and the AI won’t send your drawing anywhere.
- Before pointing your AI assistant at an unfamiliar tool, look through the files yourself first and then decide; this holds for every skill, not just this entry.
Editor’s Review
I included it for three reasons. The idea is smart — the constraint of “mapping a concept onto a machine” gives the AI a method to follow, and output quality is far more stable than “just draw me something.” The examples are generous — 8 of them, tiered clearly from beginner to advanced, and the rocket engine one even ships tests for its geometric self-audit. The license is clean — MIT, so modify and use it however you like.
That said, two buckets of cold water. First, the entire SKILL.md and the example comments are in English, which is a real reading barrier for users who read only Chinese — thankfully, in day-to-day use you only need to state your request in Chinese. Second, even the Figure tier starts at around half an hour, and the Hero tier runs past two hours; this is a “slow work yields fine results” tool, so don’t expect instant pictures. One more note on how this page relates to another resource on this site: the Files channel carries the project’s full file bundle plus a merged single-file edition, handy for web-based AI users to upload directly as attachments; the full acquisition method on this page suits command-line users — the two come from the same source, so taking either one is fine.
Version History
- v1.1.0 (released 2026-10-12): the version this site provides. New versions are added once verified, at which point the version number and checksum on this page are updated to match.
FAQ
Clone failing or hanging? First make sure the command doesn’t include --depth — this site is statically hosted and doesn’t support shallow clones, so including it always fails. Remove it and retry.
What if the SHA256 doesn’t match? Download it once more to rule out a truncated transfer; if it still doesn’t match, don’t use that copy — come back to this page to fetch it again, and contact the editor to let us know.
How does it relate to the full anatomy bundle I’ve seen elsewhere? Two distribution forms of the same tool: this page provides the complete folder and the source package, both verified by this site; the copy on the Files channel is an unpacked, tidied edition that makes uploads easy for web-based AI users. The content comes from the same source; for integrity, the verification information on this page is authoritative.
Does it need an internet connection? Generation and building all complete locally; the only action that requires a connection is “publish to the community gallery” — decline it explicitly if you don’t need it.
Sources
This page was compiled from the tool’s own documentation files (SKILL.md, example docs, and the like); for features and parameters, the documentation bundled with the package is authoritative.