What is the illustration-style skill?
The illustration-style skill is a SKILL.md in the ui-design plugin of Owl-Listener's designer-skills repository. It guides an AI coding agent to define an illustration system: style axes, a color subset, character design, five illustration types and rules for when and where illustrations appear.
The illustration-style skill belongs to the ui-design plugin in Owl-Listener's designer-skills repository. Its SKILL.md casts the agent as an expert in illustration systems that support product communication and brand identity.
It writes style guides that keep visual storytelling consistent across a product. The description says to use it when commissioning or standardising illustration, and to use icon-system for icons.
What the style guide defines
- Geometric or organic: angular and structured, or flowing and natural.
- Flat or dimensional: 2D flat, 2.5D isometric or 3D.
- Detailed or minimal: the level of detail and complexity.
- Abstract or representational: symbolic or realistic.
- Line style: stroke weight, corners and endpoints.
Color, characters and types
Illustration colors come from a subset of the product palette, such as one built with the color system skill. The guide sets primary, secondary and accent illustration colors, plus rules for gradients, shadows and dark mode variants.
- Spot illustrations: small, inline, supporting UI elements.
- Hero illustrations: large, featured, storytelling.
- Empty states: guide users when no content exists.
- Onboarding: explain features and concepts.
- Error states: soften error messages.
Application rules
The guide states when to use illustrations and when not to, size constraints per context, animation guidelines for illustrated elements and alignment with the grid system, for example a grid defined with the layout grid skill.
Who the illustration-style skill is for
Best for
- Commissioning illustration for a product from a written brief.
- Standardising a set of illustrations that already exists.
- Defining illustration rules for empty, onboarding and error states.
Not for
- Icons, which the SKILL.md routes to icon-system in the design-systems plugin.
- Producing the artwork itself. The skill produces a style guide.
- Animation craft, where the animation principles skill covers easing and duration.
How to install Illustration Style Skill: Write a Product Illustration Guide
/plugin marketplace add Owl-Listener/designer-skills
/plugin install ui-design@designer-skillsAdd the marketplace
Run
/plugin marketplace add Owl-Listener/designer-skillsinside Claude Code. This step only tells the agent where the skills live and installs nothing yet.Install the ui-design plugin
Run
/plugin install ui-design@designer-skills. The illustration-style skill ships inside this plugin. You can also type/plugin, open the Discover tab, tick the plugin and press enter.Using Gemini CLI instead
Each plugin is also a Gemini CLI extension. Clone the repository, create
.gemini/extensionsin your project root and copy the cloned.gemini/extensionscontents into it.Ask for it
Ask your agent for an illustration style guide when commissioning or standardising illustration.
Check that it loaded
Ask the agent to write an illustration style guide for a small SaaS app. It should return the five style axes, the illustration color rules, the five illustration types and the application rules.
Key features
- Style axesFive choices define the look: geometric or organic, flat or dimensional, detailed or minimal, abstract or representational, and a line style covering stroke weight, corners and endpoints.
- Dimension optionsThe flat versus dimensional axis names three options: 2D flat, 2.5D isometric and 3D.
- Illustration paletteIllustrations use a subset of the product color palette, with primary, secondary and accent illustration colors defined.
- Gradients, shadows and dark modeThe guide sets rules for gradients and shadows and defines dark mode illustration variants.
- Character designWhen a product uses characters, the guide covers proportions and body style, level of detail in faces, diversity and representation guidelines, and a library of poses and expressions.
- Five illustration typesSpot illustrations are small and inline, hero illustrations are large and tell a story, and the remaining types are empty states, onboarding and error states.
- Application rulesRules cover when to use illustrations and when not to, size constraints per context, alignment with the grid system and animation guidelines for illustrated elements.
- Reusable librariesBest practices call for one consistent style across all illustrations and reusable element libraries, with the creation process documented for contributors.
- Size testingIllustrations are tested at the display sizes they are meant for.
- AccessibilityInformation is never conveyed only through illustrations.
Frequently asked questions
What is the illustration-style skill?
It is a SKILL.md in the ui-design plugin of Owl-Listener's designer-skills repository. It guides an AI coding agent to write an illustration style guide: visual language, color use, character design, illustration types and application rules, so visual storytelling stays consistent across a product.
How do I install the illustration-style skill?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install ui-design@designer-skills. The first step only adds the marketplace and installs nothing yet. The Discover tab in /plugin offers the same route: move with the arrow keys, press space to tick the plugin and enter to install.
Which illustration types does the skill define?
It defines five. Spot illustrations are small, inline and support UI elements. Hero illustrations are large and carry a story. Empty states guide users when no content exists, onboarding illustrations explain features and concepts, and error states soften error messages.
How does illustration-style handle color?
Illustrations use a subset of the product color palette. The guide defines primary, secondary and accent illustration colors, sets rules for gradients and shadows, and specifies dark mode illustration variants so the artwork stays consistent with the interface around it.
Does illustration-style cover icons?
No. Its description sends icons to the icon-system skill, which lives in the design-systems plugin of the same repository. Illustration-style covers illustration as a system: visual language, color, characters, illustration types and the rules for applying them in a product, so the icon set is handled by icon-system instead.
Which AI coding agents can use illustration-style?
The collection is for Claude Code and Gemini CLI. Claude Code uses the plugin commands from the install steps. Each plugin is also packaged as a Gemini CLI extension, which you install by cloning the repository and copying its .gemini/extensions contents into your project.
What license does illustration-style use?
It is MIT licensed. The Owl-Listener/designer-skills repository uses the MIT license, and the ui-design plugin ships from that repository, so the illustration-style skill inside it is covered by the same terms. The same terms apply whether you install through the Claude Code marketplace or copy the Gemini CLI extension folder.