Skip to content
ML2
Creative & MediaTool#Image#Open source#Emerging

Anatomy: interactive isometric explainer figures from your agent

Added NewCopyable prompt below

Published Last verified Released

Our verdict

Worth installing if you write docs, blog posts or landing pages and want an explainer figure that moves, rather than a boxes-and-arrows diagram. You describe the idea (a rate limiter, a CDN cache, connection pooling) and the agent invents a physical object that works like it, builds it from a parts list, and checks its own geometry. It is not a chart library, it draws machines rather than people or maps, and it is slow on purpose: a figure is a long agent session, so expect real token use. It is about ten days old, from a single maintainer, and the 3D mode is beta.

Who it's for
Builders, technical writers and indie makers who need explainer visuals for docs, posts or landing pages
Leverage
Custom interactive technical illustrations without a designer
Effort
Low
Date added

What it does

Anatomy (wheresryan22/anatomy, site skills.wheresryan.sh/anatomy) is a standard Agent Skill: a SKILL.md workflow plus a small drawing kit with no npm dependencies. The agent collects the real numbers, invents an object whose working is the concept, writes a parts list, builds the geometry with the kit and renders shaded isometric parts in a framed card with a live readout and pointer motion. Output is source you own: a standalone HTML page, a single SVG file, or React/Next.js components, in a light or dark theme, with optional WebGL for fire, water or light and a beta 3D mode. A geometry audit and headless Chrome checks verify the result. It needs Node.js 20.10 or later, and Chrome or Chromium for the checks.

How builders use it

  • Install it for your user with npx skills add wheresryan22/anatomy -g, adding -a claude-code (or codex, opencode, antigravity) to skip the agent prompt.
  • Ask for the idea, not the drawing: give the real numbers (sizes, counts, rates) and say where the figure will live (HTML page, SVG file or React component, light or dark).
  • Let the session run: the agent builds, audits and screenshots the figure before handing it over.
  • Read the repo before installing, as with any new skill: the skills CLI copies the whole repository (about 10 MB, examples included).

What to expect

An interactive, on-brand explainer figure for a doc or landing page, as code you can edit and embed.

Copy this: Install + prompt

# Official source: github.com/wheresryan22/anatomy
npx skills add wheresryan22/anatomy -g -a claude-code

# In Claude Code (in Codex, use $anatomy):
/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.

Related discoveries

  • ToolCreative & Media

    ComfyUI

    Open-source node-graph engine for image, video and audio generation that runs locally and exposes an API.

    NewEffort: High#Image#Video

  • ToolCreative & Media

    Invoke (InvokeAI)

    An open-source, locally run image studio with a canvas, inpainting and node workflows for open models.

    NewEffort: Medium#Image#Local / BYO model

  • ToolCreative & Media

    Chatterbox TTS

    Open-source text-to-speech models from Resemble AI with voice cloning, installable with pip.

    NewEffort: MediumPrompt#Audio#Local / BYO model

Want more like this?

Practical discoveries, without the noise.

Get the newsletterMore in Creative & Media