Illustration Style
If you're building a design system and need to nail down how illustrations should look and work across your product, this gives you the full framework. It walks through the key visual decisions like geometric versus organic, flat versus dimensional, and how detailed to go. You'll define color rules, character design if needed, and spell out the different illustration types from spot illustrations to error states. What I like is that it doesn't just focus on the art style itself but also covers the practical stuff like when to actually use illustrations, how they fit your grid, and accessibility considerations. It's basically the template for turning "we need consistent illustrations" into an actual documented system your team can follow.
- skills.sh installs
- 2.8K
- GitHub stars
- 3.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add owl-listener/designer-skills --skill illustration-style --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/owl-listener/designer-skills
- Categories
- Documentation, Code Review & Quality, Design & UI/UX
- First seen
- Jun 3, 2026
More from owl-listener/designer-skills
All 68- Visual Hierarchy2.8K
- Color System2.7K
- Dark Mode Design2.7K
- User Flow Diagram2.7K
- Icon System2.6K
- Layout Grid2.6K
- Heuristic Evaluation2.6K
- Data Visualization2.6K
- Spacing System2.5K
- Responsive Design2.5K
- Wireframe Spec2.5K
- Micro Interaction Spec2.5K
- Loading States2.5K
- Animation Principles2.5K
- Design Critique2.5K
- Design Qa Checklist2.5K
- Design Token Audit2.5K
- State Machine2.4K
- Error Handling Ux2.4K
- Design Token2.4K
- Usability Test Plan2.4K
- Accessibility Audit2.4K
- Case Study2.4K
- Ux Writing2.4K
Recommended
More Documentation
wwasphuryn/pm-skillsCreate product backlog items in Why-What-Acceptance format — independent, valuable, testable items with strategic context. Use when writing structured backlog i2.8Kskills.sh installs
exa-web-search-freesundial-org/awesome-openclaw-skillsFree AI search via Exa MCP. Web search for news/info, code search for docs/examples from GitHub/StackOverflow, company research for business intel. No API key n2.8Kskills.sh installs
configuring-connected-appsforcedotcom/sf-skillsSalesforce Connected Apps and External Client Apps OAuth configuration with 120-point scoring. Use this skill to configure OAuth flows, JWT bearer auth, Connect2.8Kskills.sh installsgenerating-visual-diagramsforcedotcom/sf-skillsAI-powered image generation for Salesforce visuals via Nano Banana Pro. Use this skill when the user needs rendered PNG/SVG output such as visual ERDs (Entity R2.8Kskills.sh installs
create-skillsiviter-xyz/dot-agentGuide for creating effective skills following best practices. Use when creating or updating skills that extend agent capabilities.2.8Kskills.sh installs
mojo-gpu-fundamentalsmodular/skillsThe basics of how to program GPUs using Mojo. Use this skill in addition to mojo-syntax when writing Mojo code that targets GPUs or other accelerators. Use targ2.8Kskills.sh installs