Illustration Style

owl-listener/designer-skills/ui-design/skills/illustration-style

作者 owl-listener9a6930cf84a8無授權條款2.8K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫4 週前更新

Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).

僅含說明Design & Creative
AI 產生的概覽

定義插畫風格指南,涵蓋視覺語言、色彩用法、角色設計與應用規則。

功能
這項技能為產品或品牌產出插畫風格指南。內容涵蓋幾何與有機、扁平與立體、線條風格等風格面向,以及色彩用法、角色設計、插畫類型與應用規則。它也列出維持一致性、可重複使用元素庫與無障礙方面的最佳實務。
適用情境
適用於委託插畫創作或在產品中統一插畫風格時。對象是需要為插畫建立成文視覺語言的團隊,而非圖示系統。
執行需求
不需要任何工具、套件、執行環境或憑證;僅為說明文件,不附帶指令碼。

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)

來源與署名

來源:owl-listener/designer-skills位於ui-design/skills/illustration-style提交9a6930c

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架