@owl-listener/illustration-style

Define an illustration style guide with visual language, color usage, and application rules.

View in AI SkillSafe app
Scanned · no findings
1 downloads
0 stars
0 demos
SKILL.md
nameillustration-style
descriptionDefine an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).

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)

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@owl-listener/illustration-style/verified)](https://skillsafe.ai/skill/@owl-listener/illustration-style/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@owl-listener/illustration-style/installs)](https://skillsafe.ai/skill/@owl-listener/illustration-style/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@owl-listener/illustration-style/scan)](https://skillsafe.ai/skill/@owl-listener/illustration-style/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@owl-listener/illustration-style/eval)](https://skillsafe.ai/skill/@owl-listener/illustration-style/)