Colorfigures is een innovatieve tool die gebruikmaakt van AI om alledaagse objecten om te zetten in interactieve, handgetekende isometrische illustraties. Gebruikers kunnen via eenvoudige tekstprompts functionerende objecten creëren die als HTML-bestanden worden opgeleverd. Deze figuren zijn niet alleen visueel, maar ook interactief: knoppen werken, het object is 360 graden draaibaar en de interne mechanica is zichtbaar via een 'see-through' weergave.
De tool is geïmplementeerd als een 'skill' en is compatibel met verschillende AI-ecosystemen:
- Claude: Installatie via Claude Code of Claude.ai.
- ChatGPT / Codex: Installatie via zip-bestanden of CLI.
- Gemini: Installatie via de Gemini-app of CLI.
Hoewel het genereren van complexe figuren (vooral in Claude Code) aanzienlijke tijd en tokens kan kosten, is er geen programmeerkennis vereist. De tool is MIT-gelicenseerd, wat commercieel gebruik toestaat, en is privacy-vriendelijk omdat de resultaten lokaal in de browser draaien zonder externe tracking.
Colorfigures
Hoe het werkt
Met één zin als input creëert de tool een functionerend object. Er hoeft geen code handmatig te worden geschreven. De AI genereert een HTML-bestand dat in een browser kan worden geopend.
Voorbeelden van resultaten:
- Een kauwgomballenautomaat waarbij je een muntje kunt inwerpen en aan de hendel kunt draaien.
- Een elektrische waterkoker die kookt en vervolgens automatisch uitschakelt.
- Een platenspeler waarbij je een plaat oplegt, de naald laat zakken en de muziek start.
Andere geschikte objecten
De tool werkt het beste voor alledaagse machines en apparaten met bedieningselementen, zoals:
- Huishoudelijke apparaten
- Verkoopautomaten en arcadekasten
- Speelgoed
- Informatieborden en kiosken
Organische vormen (mensen, dieren, planten) zijn minder geschikt voor deze stijl.
Installatiehandleiding
De installatie duurt ongeveer één minuut. Kies het AI-platform dat je gebruikt:
Claude
Via Claude Code:
- Open de Terminal en voer het volgende commando uit:
mkdir -p ~/.claude/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.claude/skills
- Herstart Claude Code zodat de nieuwe skill wordt herkend.
- Vraag om een figuur door een object te beschrijven of start met
/colorfigures. Het resultaat wordt opgeslagen als een .html-bestand.
Via Claude.ai:
- Download het skill-bestand (
colorfigures.skill).
- Ga naar Settings → Capabilities → Skills, upload het bestand en schakel het in.
- Start een nieuwe chat en beschrijf het object. Open het resultaat in de preview of download het HTML-bestand.
Handmatige installatie (.zip):
- Download en pak het
colorfigures.zip bestand uit.
- Verplaats de map
colorfigures naar .claude/skills in je home-folder (of in de .claude/skills map van een project).
- Herstart Claude Code en vraag om een figuur.
ChatGPT / Codex
Via ChatGPT:
- Download de skill als zip-bestand (niet uitpakken).
- Ga in ChatGPT naar Skills, kies New skill → Upload from your computer en selecteer het zip-bestand.
- Start een nieuwe chat, beschrijf het object en open het gegenereerde HTML-bestand in je browser.
Via Codex:
- Open de Terminal en voer het volgende commando uit:
mkdir -p ~/.codex/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.codex/skills
- Herstart de Codex CLI, app of IDE-extensie.
- Beschrijf een object of start met
$colorfigures. Open het resulterende .html-bestand.
Handmatige installatie (.zip):
- Download en pak het
colorfigures.zip bestand uit.
- Verplaats de map
colorfigures naar .codex/skills in je home-folder.
- Herstart Codex en vraag om een figuur.
Gemini
Via de Gemini app:
- Download de Gemini-versie van het zip-bestand (niet uitpakken).
- Ga in Gemini naar Settings → Skills → Upload, selecteer het zip-bestand en kies Create.
- Start een nieuwe chat, beschrijf het object en open het resulterende HTML-bestand.
Via Gemini CLI:
- Open de Terminal en voer het volgende commando uit:
mkdir -p ~/.gemini/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.gemini/skills
- Herstart de Gemini CLI en controleer de installatie met
/skills list.
- Beschrijf een object en geef toestemming wanneer Gemini hierom vraagt.
Handmatige installatie (.zip):
- Download en pak het
colorfigures.zip bestand uit.
- Verplaats de map
colorfigures naar .gemini/skills in je home-folder.
- Herstart de Gemini CLI en vraag om een figuur.
Aanbevolen prompts
Je kunt deze prompts kopiëren en in je AI plakken:
- "a gumball machine where I can put in a coin and turn the crank"
- "a record player: put on a record, drop the needle and it plays"
- "a kettle that boils and clicks off by itself — show how it knows when to stop"
- "how does a toaster know when to pop? make it a Colorfigure"
- "a bike pump filling a tyre, with a see-through valve"
- "a parcel locker wall: type a code and the right door pops open"
Veelgestelde Vragen (FAQ)
Wat is een skill? Een skill is een kleine map met instructies en sjablonen die een AI leert om één specifieke taak goed uit te voeren. Het is geen app die zelfstandig draait; de AI leest de instructies pas wanneer je om iets vraagt waar de skill voor bedoeld is.
Wat moet ik doen als de AI de skill niet gebruikt? Herstart de applicatie (Claude Code, Codex of Gemini CLI) en noem de skill expliciet bij naam: "use the colorfigures skill to draw a gumball machine". Je kunt controleren of de skill is geïnstalleerd door te kijken of de map (bijv. ~/.claude/skills/colorfigures) de bestanden SKILL.md, README.md, LICENSE, assets en scripts bevat.
Hoe lang duurt het maken van een figuur en hoeveel tokens kost dit? In Claude Code duurt dit ongeveer 15 tot 30 minuten en kost het circa 200.000 tot 400.000 tokens per figuur. De meeste tijd en tokens gaan naar het modelleren van het object vanuit elke hoek en het bouwen van de 'see-through' weergave op basis van de werkelijke mechanica. De AI controleert het resultaat vanuit verschillende hoeken en op mobiele weergaves om fouten te herstellen. Latere wijzigingen in dezelfde chat gaan veel sneller.
Kan ik de kleuren aanpassen? Ja. Elke figuur heeft kleurenpalet-opties (tomato, mustard, mint, cobalt, blush) en een slider voor de handgetekende 'wobble'. Je kunt de AI ook om een specifieke kleur vragen.
Is het veilig om te installeren? Ja. De skill bestaat uit acht kleine platte tekstbestanden (ongeveer 220 KB). Installatie kopieert enkel deze bestanden; er wordt niets uitgevoerd en er zijn geen externe pakketten of afhankelijkheden. Elke gegenereerde figuur is een enkel HTML-bestand dat lokaal in de browser draait, zonder tracking, accounts of externe verzoeken.
Kan ik het voor commercieel werk gebruiken? Ja. De skill is MIT-gelicenseerd en de figuren die je ermee maakt zijn van jou, inclusief voor betaald werk en klantenprojecten. Voor op maat gemaakte figuren kun je contact opnemen via wjzhu.423@gmail.com.
Moet ik kunnen programmeren? Nee. Je beschrijft het object in gewone taal. Voor wijzigingen geef je simpelweg instructies in de chat, zoals: "laat de deur verder open gaan" of "voeg een muntteruggave toe".
Credits en Licentie
- Ontwikkeld door: April Zhu.
- Gebouwd op: ISO-GLOW door April Zhu (MIT) en iso-figure door Tolga Cohce (MIT).
- Methodiek: De 'see-through' weergaven volgen de methode van Anatomy door Ryan (MIT).
- Licentie: Colorfigures is MIT-gelicenseerd.
Colorfigures
Hoe het werkt
Met één zin als input creëert de tool een functionerend object. Er hoeft geen code handmatig te worden geschreven. De AI genereert een HTML-bestand dat in een browser kan worden geopend.
Voorbeelden van resultaten:
- Een kauwgomballenautomaat waarbij je een muntje kunt inwerpen en aan de hendel kunt draaien.
- Een elektrische waterkoker die kookt en vervolgens automatisch uitschakelt.
- Een platenspeler waarbij je een plaat oplegt, de naald laat zakken en de muziek start.
Andere geschikte objecten
De tool werkt het beste voor alledaagse machines en apparaten met bedieningselementen, zoals:
- Huishoudelijke apparaten
- Verkoopautomaten en arcadekasten
- Speelgoed
- Informatieborden en kiosken
Organische vormen (mensen, dieren, planten) zijn minder geschikt voor deze stijl.
Installatiehandleiding
De installatie duurt ongeveer één minuut. Kies het AI-platform dat je gebruikt:
Claude
Via Claude Code:
- Open de Terminal en voer het volgende commando uit:
mkdir -p ~/.claude/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.claude/skills
- Herstart Claude Code zodat de nieuwe skill wordt herkend.
- Vraag om een figuur door een object te beschrijven of start met
/colorfigures. Het resultaat wordt opgeslagen als een .html-bestand.
Via Claude.ai:
- Download het skill-bestand (
colorfigures.skill).
- Ga naar Settings → Capabilities → Skills, upload het bestand en schakel het in.
- Start een nieuwe chat en beschrijf het object. Open het resultaat in de preview of download het HTML-bestand.
Handmatige installatie (.zip):
- Download en pak het
colorfigures.zip bestand uit.
- Verplaats de map
colorfigures naar .claude/skills in je home-folder (of in de .claude/skills map van een project).
- Herstart Claude Code en vraag om een figuur.
ChatGPT / Codex
Via ChatGPT:
- Download de skill als zip-bestand (niet uitpakken).
- Ga in ChatGPT naar Skills, kies New skill → Upload from your computer en selecteer het zip-bestand.
- Start een nieuwe chat, beschrijf het object en open het gegenereerde HTML-bestand in je browser.
Via Codex:
- Open de Terminal en voer het volgende commando uit:
mkdir -p ~/.codex/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.codex/skills
- Herstart de Codex CLI, app of IDE-extensie.
- Beschrijf een object of start met
$colorfigures. Open het resulterende .html-bestand.
Handmatige installatie (.zip):
- Download en pak het
colorfigures.zip bestand uit.
- Verplaats de map
colorfigures naar .codex/skills in je home-folder.
- Herstart Codex en vraag om een figuur.
Gemini
Via de Gemini app:
- Download de Gemini-versie van het zip-bestand (niet uitpakken).
- Ga in Gemini naar Settings → Skills → Upload, selecteer het zip-bestand en kies Create.
- Start een nieuwe chat, beschrijf het object en open het resulterende HTML-bestand.
Via Gemini CLI:
- Open de Terminal en voer het volgende commando uit:
mkdir -p ~/.gemini/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.gemini/skills
- Herstart de Gemini CLI en controleer de installatie met
/skills list.
- Beschrijf een object en geef toestemming wanneer Gemini hierom vraagt.
Handmatige installatie (.zip):
- Download en pak het
colorfigures.zip bestand uit.
- Verplaats de map
colorfigures naar .gemini/skills in je home-folder.
- Herstart de Gemini CLI en vraag om een figuur.
Aanbevolen prompts
Je kunt deze prompts kopiëren en in je AI plakken:
- "a gumball machine where I can put in a coin and turn the crank"
- "a record player: put on a record, drop the needle and it plays"
- "a kettle that boils and clicks off by itself — show how it knows when to stop"
- "how does a toaster know when to pop? make it a Colorfigure"
- "a bike pump filling a tyre, with a see-through valve"
- "a parcel locker wall: type a code and the right door pops open"
Veelgestelde Vragen (FAQ)
Wat is een skill? Een skill is een kleine map met instructies en sjablonen die een AI leert om één specifieke taak goed uit te voeren. Het is geen app die zelfstandig draait; de AI leest de instructies pas wanneer je om iets vraagt waar de skill voor bedoeld is.
Wat moet ik doen als de AI de skill niet gebruikt? Herstart de applicatie (Claude Code, Codex of Gemini CLI) en noem de skill expliciet bij naam: "use the colorfigures skill to draw a gumball machine". Je kunt controleren of de skill is geïnstalleerd door te kijken of de map (bijv. ~/.claude/skills/colorfigures) de bestanden SKILL.md, README.md, LICENSE, assets en scripts bevat.
Hoe lang duurt het maken van een figuur en hoeveel tokens kost dit? In Claude Code duurt dit ongeveer 15 tot 30 minuten en kost het circa 200.000 tot 400.000 tokens per figuur. De meeste tijd en tokens gaan naar het modelleren van het object vanuit elke hoek en het bouwen van de 'see-through' weergave op basis van de werkelijke mechanica. De AI controleert het resultaat vanuit verschillende hoeken en op mobiele weergaves om fouten te herstellen. Latere wijzigingen in dezelfde chat gaan veel sneller.
Kan ik de kleuren aanpassen? Ja. Elke figuur heeft kleurenpalet-opties (tomato, mustard, mint, cobalt, blush) en een slider voor de handgetekende 'wobble'. Je kunt de AI ook om een specifieke kleur vragen.
Is het veilig om te installeren? Ja. De skill bestaat uit acht kleine platte tekstbestanden (ongeveer 220 KB). Installatie kopieert enkel deze bestanden; er wordt niets uitgevoerd en er zijn geen externe pakketten of afhankelijkheden. Elke gegenereerde figuur is een enkel HTML-bestand dat lokaal in de browser draait, zonder tracking, accounts of externe verzoeken.
Kan ik het voor commercieel werk gebruiken? Ja. De skill is MIT-gelicenseerd en de figuren die je ermee maakt zijn van jou, inclusief voor betaald werk en klantenprojecten. Voor op maat gemaakte figuren kun je contact opnemen via wjzhu.423@gmail.com.
Moet ik kunnen programmeren? Nee. Je beschrijft het object in gewone taal. Voor wijzigingen geef je simpelweg instructies in de chat, zoals: "laat de deur verder open gaan" of "voeg een muntteruggave toe".
Credits en Licentie
- Ontwikkeld door: April Zhu.
- Gebouwd op: ISO-GLOW door April Zhu (MIT) en iso-figure door Tolga Cohce (MIT).
- Methodiek: De 'see-through' weergaven volgen de methode van Anatomy door Ryan (MIT).
- Licentie: Colorfigures is MIT-gelicenseerd.
Groetjes,