--- title: Colorfigures | daily.dev description: Colorfigures is an installable AI skill that turns a plain-text description of an everyday object into an interactive, hand-inked isometric illustration. It... canonical: https://daily.dev/posts/colorfigures-u04pfy53a twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Colorfigures | daily.dev og:description: Colorfigures is an installable AI skill that turns a plain-text description of an everyday object into an interactive, hand-inked isometric illustration. It... og:url: https://daily.dev/posts/colorfigures-u04pfy53a og:image: https://api.daily.dev/og/posts/U04pfY53A.png og:image:alt: Colorfigures og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Colorfigures **[Hacker News](https://daily.dev/sources/hn)** · 6 min read · 43 upvotes · 2 comments ## Summary Colorfigures is an installable AI skill that turns a plain-text description of an everyday object into an interactive, hand-inked isometric illustration. It works with Claude Code, Claude.ai, ChatGPT, Codex and Gemini, and generates a single HTML file with rotatable, clickable parts and a see-through mode showing the mechanism inside. Each figure takes about 15 to 30 minutes and 200,000 to 400,000 tokens in Claude Code; a parking meter example took 15 minutes and 230,000 tokens. The skill itself is about 220 KB across eight plain-text files, MIT licensed, with no code written by hand. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### how long does it take to generate a figure with the colorfigures Claude Code skill Generating a figure takes about 15 to 30 minutes and roughly 200,000 to 400,000 tokens in Claude Code. A test run of a parking meter with a see-through view of about 20 labelled parts took around 15 minutes and 230,000 tokens. Denser machines or scenes with multiple objects take longer, while follow-up edits in the same chat are much quicker. _Weighing token costs for AI-generated visuals is easier when you track real benchmarks on daily.dev._ ### how do I install a custom skill for Claude Code Create a .claude/skills folder in your home directory (or a project folder) and place the skill folder inside it, then restart Claude Code so it picks up the new skill. For the colorfigures skill specifically, the command is: mkdir -p ~/.claude/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.claude/skills. _Developers wiring up custom Claude Code skills compare setup approaches on daily.dev._ ### what file formats does the colorfigures AI skill output It outputs a single self-contained HTML file per figure that runs like any web page, with no tracking, accounts, or outside requests. The skill itself is made of eight plain-text files totaling about 220 KB: instructions, a drawing engine, three example figures, a build script, a readme and a license, and it is MIT licensed for use in paid and client work. _Developers evaluating lightweight, dependency-free AI tooling track releases like this on daily.dev._ ## Community take How the wider developer community reacted, aggregated from 1 discussion and 30 comments across hackernews (as of 2026-10-26). **TL;DR:** Discussion centers on supply-chain/security worries about installing a skill that executes a bundled Python script, plus some sarcastic riffing on missing mechanical details in the generated illustrations, with a note that similar tools already exist. **Sentiment:** 20% positive · 35% mixed · 45% skeptical **The case for** - The skill's contents are just plain text files that anyone can inspect before running. - Some found the concept neat despite reservations. **The pushback** - Installing and running the skill is seen as risky since it un-tars and executes a bundled Python script, similar to a supply-chain attack vector. - Generated illustrations have missing or implausible internal connections (e.g. the espresso machine's steam path), drawing sarcastic criticism. - The 'hand-inked' branding is questioned since the output is fully AI-generated. - A similar tool/style already existed previously, raising prior-art concerns. **By community** - hackernews (mixed): Debate splits between security concerns over executing bundled code and lighter mockery of missing mechanical logic in the generated figures, alongside a prior-art callout. **Hottest debate:** Whether installing the skill poses a real supply-chain/execution risk versus it being harmless plain-text files you can inspect. **Open questions** - How rigorously is the generated mechanical logic verified for accuracy? - Is there a way to view the source hosted online without downloading and extracting the archive? **Highlights** > The text files include a Python script, which the AI will execute to perform the skill. > — [mkl on hackernews](https://news.ycombinator.com/item?id=50244778) > I prefer to get my supply-chain attacks through conventional package managers > — [sva\_ on hackernews](https://news.ycombinator.com/item?id=50246918) > This looks very similar to https://github.com/wheresryan22/anatomy which popularized a very similar style of figure a few weeks ago. You can also quickly make similar diagrams with sites like https://diagrams.ink (disclaimer: affiliated) or https://three.ws/anatomy > — [nikvdp on hackernews](https://news.ycombinator.com/item?id=50246748) > Some pieces are missing. In espresso machine, I don't get how the milk is being steamed, where is that steam coming from, its not connected to anything inside. There should be a pause button in each of these. The process which is building these could add some more verification etc. > — [smusamashah on hackernews · 1 comments](https://news.ycombinator.com/item?id=50244695) > "hand-inked" but fully generated by claude? > — [dkuntz2 on hackernews · 1 comments](https://news.ycombinator.com/item?id=50246527) **Source threads** - [hackernews](https://news.ycombinator.com/item?id=50209573) · 96 points · 30 comments ## Community discussion Top comments from developers on daily.dev. **@tekn0wledg** · 3 upvotes > 15-30min and that many tokens? wtf. **@dio77799** · 0 upvotes > This is super slick, turning simple text descriptions into interactive hand-inked isometric 3D widgets packaged inside a single standalone HTML file is a wild flex for an AI skill. Generating rotatable models with see-through internal mechanisms entirely from text specs without writing manual code opens up some awesome potential for quick prototyping and technical explainers. ## Similar posts on daily.dev - [Think outside of the box—with Claude and FigJam](https://daily.dev/posts/think-outside-of-the-box-with-claude-and-figjam-yk7n7ifdw) · Figma · 1 upvotes · 0 comments - [I gave Claude Code a kid's activity book to solve — here's where it fell apart](https://daily.dev/posts/i-gave-claude-code-a-kid-s-activity-book-to-solve-here-s-where-it-fell-apart-w5ywmcqlo) · XDA Developers · 0 upvotes · 1 comments --- Tags: [#genai](https://daily.dev/tags/genai), [#chatgpt](https://daily.dev/tags/chatgpt), [#claude-code](https://daily.dev/tags/claude-code), [#google-gemini](https://daily.dev/tags/google-gemini) [View this post on daily.dev](https://daily.dev/posts/colorfigures-u04pfy53a) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Colorfigures","url":"https://daily.dev/posts/colorfigures-u04pfy53a","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/colorfigures-u04pfy53a"},"datePublished":"2026-10-26T17:51:40.099Z","dateModified":"2026-10-26T18:02:06.629Z","description":"Colorfigures is an installable AI skill that turns a plain-text description of an everyday object into an interactive, hand-inked isometric illustration. It...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7ad0f971e9e6a0892f0f92b3473473a1?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7ad0f971e9e6a0892f0f92b3473473a1?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Hacker News","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Hacker News","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/hn","url":"https://daily.dev/sources/hn"},"commentCount":2,"discussionUrl":"https://daily.dev/posts/colorfigures-u04pfy53a","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":43},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":2}],"keywords":"genai,chatgpt,claude-code,google-gemini","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hacker News","item":"https://daily.dev/sources/hn"},{"@type":"ListItem","position":3,"name":"Colorfigures"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/colorfigures-u04pfy53a","comment":[{"@type":"Comment","text":"15-30min and that many tokens? wtf.","datePublished":"2026-10-29T12:22:32.610Z","url":"https://daily.dev/posts/U04pfY53A#c-BkCzDyVaW","author":{"@type":"Person","name":"Scott Davis","url":"https://daily.dev/tekn0wledg","image":"https://avatars.githubusercontent.com/u/355212?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"This is super slick, turning simple text descriptions into interactive hand-inked isometric 3D widgets packaged inside a single standalone HTML file is a wild flex for an AI skill. Generating rotatable models with see-through internal mechanisms entirely from text specs without writing manual code opens up some awesome potential for quick prototyping and technical explainers.","datePublished":"2026-10-29T14:54:44.441Z","url":"https://daily.dev/posts/U04pfY53A#c-G8Cz91GpR","author":{"@type":"Person","name":"Dio","url":"https://daily.dev/dio77799","image":"https://media.daily.dev/image/upload/s--D_CwPJ3R--/f_auto,pg_1/v1792945837/avatars/avatar_SEp70EmWGM0hHeihGBCha?_a=BAMAMiiw0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/colorfigures-u04pfy53a#faq","mainEntity":[{"@type":"Question","name":"how long does it take to generate a figure with the colorfigures Claude Code skill","acceptedAnswer":{"@type":"Answer","text":"Generating a figure takes about 15 to 30 minutes and roughly 200,000 to 400,000 tokens in Claude Code. A test run of a parking meter with a see-through view of about 20 labelled parts took around 15 minutes and 230,000 tokens. Denser machines or scenes with multiple objects take longer, while follow-up edits in the same chat are much quicker. Weighing token costs for AI-generated visuals is easier when you track real benchmarks on daily.dev."}},{"@type":"Question","name":"how do I install a custom skill for Claude Code","acceptedAnswer":{"@type":"Answer","text":"Create a .claude/skills folder in your home directory (or a project folder) and place the skill folder inside it, then restart Claude Code so it picks up the new skill. For the colorfigures skill specifically, the command is: mkdir -p ~/.claude/skills \u0026\u0026 curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.claude/skills. Developers wiring up custom Claude Code skills compare setup approaches on daily.dev."}},{"@type":"Question","name":"what file formats does the colorfigures AI skill output","acceptedAnswer":{"@type":"Answer","text":"It outputs a single self-contained HTML file per figure that runs like any web page, with no tracking, accounts, or outside requests. The skill itself is made of eight plain-text files totaling about 220 KB: instructions, a drawing engine, three example figures, a build script, a readme and a license, and it is MIT licensed for use in paid and client work. Developers evaluating lightweight, dependency-free AI tooling track releases like this on daily.dev."}}]} ```