{"slug": "colorfigures", "title": "Colorfigures", "summary": "Developer April Zhu released Colorfigures, a free AI skill that generates interactive, hand-inked isometric HTML diagrams of everyday objects with working buttons, see-through internals and labeled parts, installable via a one-line curl command into Claude Code, Codex and Gemini CLI or uploaded as a zip to Claude.ai and ChatGPT. The skill is a folder of instructions and templates that the AI reads on request, and Zhu states every sample figure on the site came from a plain-language prompt in a fresh install with no code written by hand. Zhu also offers custom figures for commercial projects.", "body_md": "Describe an everyday object. AI draws it hand-inked and isometric, with buttons that actually work. Turn it all the way round and see inside.\n\n`mkdir -p ~/.claude/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.claude/skills`\nPaste in Terminal for Claude Code. Using Claude.ai or Windows? [Other ways to install](#install).\n\nEvery figure turns all the way round: drag it. See-through shows the real machine at work inside, and Labels name each part, lighting up while it runs.\n\nEach of these came from the prompt above it, in a fresh install of the skill. No code was written by hand.\n\nHover to see one move. Open any of them and press things.\n\nPick your AI. Three steps, about a minute.\n\nOpen Terminal (on a Mac: `⌘ Space`, type Terminal), paste this and press Return.\n\nQuit and reopen it so it picks up the new skill.\n\nDescribe an object in plain words, or start with `/colorfigures`. It saves an .html file; open it in your browser and press things.\n\nGet the skill file.\n\n[colorfigures.skill ↓](colorfigures/colorfigures.skill)\n\nIn Claude.ai, open Settings → Capabilities → Skills, upload the file and switch it on. Skills need a plan that includes them.\n\nStart a new chat and describe the object. Open the result in the preview or download the HTML file.\n\nWorks on Windows, macOS and Linux.\n\n[colorfigures.zip ↓](colorfigures/colorfigures.zip)\n\nPut the `colorfigures` folder inside `.claude/skills` in your home folder (or in a project's `.claude/skills`). Create the folder if it doesn't exist.\n\nDescribe the object you want, or start with `/colorfigures`.\n\nGet the skill as a zip. Don't unzip it.\n\nIn ChatGPT, open Skills, choose New skill → Upload from your computer and pick the zip. Skills need a plan that includes them; on a work account your admin may need to allow uploads.\n\nStart a new chat and describe the object. Download the HTML file it makes and open it in your browser.\n\n`mkdir -p ~/.codex/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.codex/skills`\nQuit and reopen the Codex CLI, app or IDE extension so it picks up the new skill.\n\nDescribe an object in plain words, or start with `$colorfigures`. It saves an .html file; open it in your browser and press things.\n\nPut the `colorfigures` folder inside `.codex/skills` in your home folder. Create the folder if it doesn't exist.\n\nDescribe the object you want, or start with `$colorfigures`.\n\nGet the Gemini version of the zip. Don't unzip it.\n\n[colorfigures-gemini.zip ↓](colorfigures/colorfigures-gemini.zip)\n\nIn Gemini, open Settings → Skills → Upload, pick the zip, check it and choose Create. Skills are still rolling out, so the menu may not show yet on every account.\n\nStart a new chat and describe the object. Save the HTML it makes as a file and open it in your browser.\n\n`mkdir -p ~/.gemini/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.gemini/skills`\nQuit and reopen it, then run `/skills list` to check colorfigures is there.\n\nDescribe an object in plain words and allow the skill when Gemini asks. It saves an .html file; open it in your browser and press things.\n\nPut the `colorfigures` folder inside `.gemini/skills` in your home folder (or in a project's `.gemini/skills`). Create the folder if it doesn't exist.\n\nDescribe the object you want and allow the skill when asked.\n\nCopy one, paste it into your AI, open the file it makes.\n\nNeed custom figures for your product or a commercial project?\n\nA small folder of instructions and templates that teaches an AI how to do one job well. It isn't an app and doesn't run by itself; the AI reads it when you ask for something it covers.\n\nRestart the app (Claude Code, Codex or Gemini CLI), then mention it by name: \"use the colorfigures skill to draw a gumball machine\". To check it's installed, run `ls ~/.claude/skills/colorfigures` (or `~/.codex/skills`, `~/.gemini/skills`); you should see SKILL.md, README.md, LICENSE, assets and scripts.\n\nEveryday machines and devices with parts you can press: appliances, vending and arcade machines, toys, signs, kiosks. Every figure turns all the way round, and machines get a See-through switch that shows the real working parts inside, labelled and moving with the buttons. Soft, organic things (people, animals, plants) don't suit the style.\n\nAbout 15 to 30 minutes and roughly 200,000 to 400,000 tokens per figure in Claude Code. Most of that goes on modelling the object from every side and building its see-through from how the real machine works; then the AI checks it from several angles, in see-through and on a phone, and fixes what it finds. On a fresh test run a parking meter with a see-through of about 20 labelled parts took around 15 minutes and 230,000 tokens; a dense machine or a scene with several objects takes longer. Changes you ask for afterwards in the same chat are much quicker. On a Claude plan this counts toward your usage; on the API it's billed per token.\n\nYes. Every figure has body-colour swatches (tomato, mustard, mint, cobalt, blush) and a hand-drawn wobble slider. You can also ask the AI for a particular colour.\n\nIt's eight small plain-text files (about 220 KB): the instructions, the drawing engine, three example figures, a build script, a readme and a licence. Installing only copies them; nothing runs, and there are no packages or dependencies. Each figure the AI makes is a single HTML file that runs in your browser like any web page, with no tracking, accounts or outside requests. Want to look first? Download the .zip and open SKILL.md in any text editor.\n\nYes. The skill is MIT licensed, and the figures you make with it are yours to use, including in paid and client work. For custom figures made for your product, [email wjzhu.423@gmail.com](mailto:wjzhu.423@gmail.com?subject=Custom%20Colorfigures).\n\nNo. Describe the object in plain words. If you want changes, say so in the same chat: \"make the door open further\", \"add a coin return\".", "url": "https://wpnews.pro/news/colorfigures", "canonical_source": "https://april-zhu.com/colorfigures", "published_at": "2026-10-23 14:22:23+00:00", "updated_at": "2026-10-23 14:42:06.030461+00:00", "lang": "en", "topics": ["ai-tools", "ai-products", "developer-tools", "generative-ai"], "entities": ["Colorfigures", "April Zhu", "Claude Code", "Codex", "Gemini CLI", "Claude.ai", "ChatGPT", "Gemini"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/colorfigures", "markdown": "https://wpnews.pro/news/colorfigures.md", "text": "https://wpnews.pro/news/colorfigures.txt", "jsonld": "https://wpnews.pro/news/colorfigures.jsonld"}}