Illustration Style
Define a product-wide illustration system—visual language, palette rules, and placement—so UI and marketing stay visually consistent.
Overview
Illustration Style is an agent skill for the Build phase that defines illustration systems with visual language, color rules, and application constraints for consistent product storytelling.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill illustration-styleWhat is this skill?
- Defines geometric vs organic, flat vs dimensional, and abstract vs representational axes
- Maps illustration colors to product palette with dark-mode variants
- Covers spot, hero, empty-state, onboarding, and error-state illustration types
- Optional character design rules with diversity and pose guidance
- Application rules for sizing, grid alignment, and motion on illustrations
- 5 illustration types: spot, hero, empty states, onboarding, error states
Adoption & trust: 678 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your product mixes inconsistent illustration styles across empty states, onboarding, and heroes, weakening brand recognition.
Who is it for?
Indie founders or designers documenting how illustrations should look and where they appear before scaling UI work.
Skip if: Pure photo-only brands, one-shot marketing banners with no recurring in-product art, or teams that only need a single icon set without narrative illustration.
When should I use this skill?
You need to define or refine product illustration standards, color usage in art, or rules for characters and motion before shipping UI.
What do I get? / Deliverables
You get a documented illustration style guide with type-specific rules your agent can apply when generating or reviewing UI art.
- Illustration style guide sections
- Per-context application rules
- Character and motion guidelines when applicable
Recommended Skills
Journey fit
Illustration standards land while you are shaping the product surface—the Build phase is where visual systems attach to components and pages. Frontend subphase is the canonical shelf because spot, hero, empty-state, and onboarding art ship inside UI flows.
How it compares
Use for systematic style guides—not a logo or icon-only skill; pair with component libraries rather than replacing them.
Common Questions / FAQ
Who is illustration-style for?
Solo builders and product designers who need repeatable illustration rules across web and mobile UI surfaces.
When should I use illustration-style?
During Build while defining frontend empty states, onboarding flows, and hero sections before handing specs to implementation agents.
Is illustration-style safe to install?
It is documentation-oriented with no shell or network requirements; still review the Security Audits panel on this Prism page before installing any skill from the catalog.
SKILL.md
READMESKILL.md - Illustration Style
# Illustration Style You are an expert in defining illustration systems that support product communication and brand identity. ## What You Do You create illustration style guides ensuring consistent visual storytelling across a product. ## Style Definition - **Geometric vs organic**: Angular/structured or flowing/natural - **Flat vs dimensional**: 2D flat, 2.5D isometric, or 3D - **Detailed vs minimal**: Level of detail and complexity - **Abstract vs representational**: Symbolic or realistic - **Line style**: Stroke weight, corners, endpoints ## Color in Illustration - Use a subset of the product color palette - Define primary, secondary, and accent illustration colors - Rules for gradients and shadows - Dark mode illustration variants ## Character Design (if applicable) - Proportions and body style - Level of detail in faces - Diversity and representation guidelines - Poses and expressions library ## Illustration Types - **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 - When to use vs when not to use illustrations - Size constraints per context - Alignment with grid system - Animation guidelines for illustrated elements ## Best Practices - Keep a consistent style across all illustrations - Create reusable element libraries - Document the creation process for contributors - Test at intended display sizes - Consider accessibility (don't convey info only through illustrations)