Make a Clickable 3D Explainer With AI

Install one free skill and your AI agent builds an interactive explainer of any everyday machine. People can turn it all the way round, switch on a see-through view of the parts inside, and press its buttons to watch it work.

What this helps you do

Some things are hard to explain in words. How does water get from an espresso machine's tank into the cup? How does a toaster know when to pop? What actually happens inside a washing machine when you press start? A picture helps. A model you can turn, look inside, and run helps more.

Colorfigures is a free skill made by April Zhu that teaches your AI agent to build these. You describe the machine, and the agent researches how the real thing works, models it in 3D in a hand-drawn style, and hands you one web page. Anyone can open that page in a browser, on a computer or a phone.

Each figure can:

• Turn all the way round when you drag it.
• Go see-through, so the shell fades and the real working parts show inside.
• Name every part with labels that light up while that part is working.
• Actually work. Buttons press, doors open, and parts move.

Before you start

• An AI agent that supports skills. Any of these works: Claude Code, Codex, or Gemini CLI. You can also upload the skill to Claude.ai, ChatGPT, or the Gemini app if your plan includes skills. New to Claude Code? Start with the Claude setup checklist.
• A web browser to open the finished page.
• Time and usage. In Claude Code, one figure usually takes 15 to 30 minutes and about 200,000 to 400,000 tokens. On a Claude plan that counts toward your usage. On the API you pay per token.
• No coding. The skill has no packages to install. It's about eight plain text files.

Terms to know

• Skill: a folder of instructions your AI agent reads when a task matches. It teaches the agent a specific job.
• Claude Code / Codex / Gemini CLI: AI agents that work with files on your computer. You type to them in Terminal or an editor.
• Terminal: the app where you type commands. On a Mac, open it from Applications, then Utilities.
• Token: a small chunk of text the AI reads or writes. Usage and cost are measured in tokens.
• HTML file: a web page saved as a single file. Double-click it and it opens in your browser.
• See-through: a switch on the finished figure that fades the outer shell so you can watch the parts inside.

Step-by-step

1. Look at the examples first. Open the Colorfigures page and play with a few figures. This shows you what a good result looks like.
2. Install the skill. Open Terminal and paste the install command for your agent from "Copy this" below. Press Enter. Nothing prints when it works.
3. Restart your agent. Quit Claude Code, Codex, or Gemini CLI and open it again so it loads the new skill.
4. Check the install. In Claude Code, type /colorfigures. In Codex, type $colorfigures. In Gemini CLI, run /skills list and look for colorfigures.
5. Ask for one machine and one idea. Paste the build prompt below. Keep it to a single machine and the single thing you want people to understand.
6. Let it finish. This build is much bigger than a normal web page. The agent researches the real machine, models every side, builds the see-through view, then checks it from several angles and on a phone screen. There will be a stretch where it looks stuck. Let it run.
7. Open the page. The agent saves an .html file and tells you what each button does. Double-click the file to open it in your browser. Drag to turn it, switch on See-through, and press the buttons.
8. Ask for changes in the same chat. For example, "add a coin return" or "make the body mint." Changes are much quicker than the first build.

Copy this

Install command

Paste the one line for your agent into Terminal. These come from the Colorfigures install instructions.

For Claude Code:

mkdir -p ~/.claude/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.claude/skills

For Codex:

mkdir -p ~/.codex/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.codex/skills

For Gemini CLI:

mkdir -p ~/.gemini/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.gemini/skills

Using Claude.ai, ChatGPT, or the Gemini app instead? Download the skill file from the same page and upload it in that app's skills settings.

Build prompt

Paste this into your agent after the restart. Replace the parts in brackets.

Use the colorfigures skill. Make an interactive [MACHINE, e.g. espresso machine] that shows [THE ONE IDEA, e.g. how water reaches the cup]. Base the inside on how the real machine works. Give it buttons for each real step, in the order a person would use them, and turn on See-through and Labels so people can watch each part work. Save it as one HTML file named [FILE NAME].html and tell me what each button does.

Things to know

• Machines work best. Pick everyday objects with parts you can press: appliances, vending machines, toys, kiosks. Soft, organic things like people, animals, and plants don't suit the style.
• One idea per figure. "How water reaches the cup" builds better than "explain everything about espresso."
• It's free to use and share. Colorfigures uses the MIT license. Commercial use is allowed and the figures you make are yours. If you post figures, credit Colorfigures.
• It's safe to inspect. Installing only copies plain text files. Nothing runs during installation, and the finished pages have no tracking or accounts. Want a habit for checking any skill before you install it? See scan an AI skill before you install it.
• The long build is normal. Most of the time goes into modeling every side of the object and building the inside from how the real machine works.

If something goes wrong

• The agent ignores the skill: restart the app and say "colorfigures" by name in your prompt.
• You're not sure it installed: run ls ~/.claude/skills/colorfigures in Terminal (or the ~/.codex or ~/.gemini version). You should see a list of files, including SKILL.md.
• It seems frozen: give it time. Builds often take 15 to 30 minutes. Check that it's still working before you stop it.
• A part looks wrong or floats: name it and ask for a fix in the same chat, such as "the pump should connect to the boiler with a tube."
• You hit your usage limit: wait for it to reset, then continue in the same chat so the agent keeps its progress.

Final check

You can double-click your HTML file, drag the machine all the way round, switch on See-through, press a button, and watch the labeled parts light up as they work.