Colorfigures
Turn descriptions of everyday machines into interactive, hand-inked isometric figures with working controls and cutaway views.
Best for
Designers, educators, and creators building interactive explanations of everyday devices.
mkdir -p ~/.gemini/skills && curl -fsSL https://april-zhu.com/colorfigures/colorfigures.tar.gz | tar -xz -C ~/.gemini/skills
Inside the skill
What you can apply
Explore every side
Rotate figures and inspect labelled internal mechanisms in see-through mode.
Working controls
Operate buttons, doors, and other controls to explore device behavior.
Portable HTML
Save the generated figure as an HTML file and open it in a browser.
Common use cases
When to use this skill
- Illustrate how everyday machines work.
- Build explorable appliance and kiosk demos.
- Create browser-based interactive teaching figures.
Example prompts
Prompts you can adapt
How to use it
A simple workflow
Review the installation options and examples on the official Colorfigures website.
Run the Gemini CLI installation command above, restart Gemini CLI, and use /skills list to confirm availability. For Codex or Claude Code, use the corresponding installation instructions on the official website.
Describe an everyday machine and request Colorfigures. Save the generated HTML file, open it in your browser, and test its controls.
FAQ
Questions about Colorfigures
Which agents can use Colorfigures?
The official website provides installation instructions for Claude Code, Codex, and Gemini CLI, plus upload and manual installation options.
What objects work best?
Everyday devices with mechanical parts and controls, such as appliances, vending machines, and kiosks. Organic subjects are less suited to the style.
Can I use the output commercially?
The author permits commercial use. Keep the license and attribution when redistributing the skill, and credit Colorfigures when posting generated figures. Review the official terms before use.
Related skills
Keep building the workflow
Frontend Design
Create distinctive, production-grade frontend interfaces with deliberate typography, color, layout, and visual identity instead of generic AI-generated styling.
Product Design Ideate
Generate visual design directions and remixes from a product brief, reference, or existing interface.
Interaction Design
Design and implement purposeful microinteractions, motion, transitions, loading states, gestures, and user feedback patterns that improve usability and delight.