Zur Nutzungsanleitung springen
Illustration Stylevon Owl-Listener

Illustration Style Skill.

Gib beauftragten oder wiederkehrenden Illustrationen eine gemeinsame visuelle Sprache und eine klare Aufgabe in der Oberfläche.

  • UX
  • Design-Anleitung
Quellenprüfung · Illustration StyleSKILL.md
Aufgabe UX Ergebnis • Ein Leitfaden zur visuellen Sprache von Illustrationen • Regeln für Farbpalette, Figuren und wiederverwendbare Elemente • Kontextspezifische Hinweise zu Anwendung und Barrierefreiheit Vor dem Start Ein Agent, der visuelle Referenzen, Produktfarben sowie die Screens und Größen prüfen kann, in denen Illustrationen erscheinen werden.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Illustration Style: Eine visuelle Sprache definieren

Definiert Stil, Farbpalette, Figuren und Einsatz einer Illustrationsfamilie in Produkt-Screens.

Workflow auf Basis der QuelleKein Benchmark der Ausführung

Die Arbeitsweise

Illustration Style legt fest, wie eine Familie von Illustrationen aussehen soll und wohin sie gehört. Behandelt werden geometrische versus organische Formen, flache versus dimensionale Gestaltung, Detailgrad, Abstraktion und Linienstil.

Die Quelle verbindet diese visuelle Sprache mit der Produktfarbe, optionalen Figurenregeln und unterschiedlichen Kontexten wie Hero-Bildern, Empty States, Onboarding und Fehlern. Außerdem verlangt sie wiederverwendbare Elemente und Hinweise zur Erstellung. Es handelt sich um eine Art-Direction-Spezifikation, nicht um ein Bildgenerierungsmodell oder ein fertiges Asset-Paket.

Erwartete Ergebnisse

  • Ein Leitfaden zur visuellen Sprache von Illustrationen
  • Regeln für Farbpalette, Figuren und wiederverwendbare Elemente
  • Kontextspezifische Hinweise zu Anwendung und Barrierefreiheit
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Stilachsen definieren

    Wähle Form, Dimension, Detailgrad, Abstraktion und Linienbehandlung anhand konkreter Referenzen.

  2. 02
    Regeln für die Familie festlegen

    Begrenze die Palette, definiere Schatten oder Verläufe und ergänze Figurenhinweise nur dort, wo sie relevant sind.

  3. 03
    Anwendungen zuordnen

    Erkläre, wie sich Hero-, Spot-, Empty-State- und andere Illustrationen in Maßstab und Zweck unterscheiden.

02 Einsatzbereiche

Wann man es einsetzt

Nutze es, bevor du eine Serie beauftragst oder wenn bestehende Produktillustrationen eine einheitliche visuelle Richtung brauchen.

Gut geeignet

  • Eine Serie beauftragenGib Beteiligten genug Vorgaben, damit sie zusammenpassende Illustrationen erstellen können.
  • Uneinheitliche ProduktbilderGleiche Illustrationsfamilien an, ohne jeden Kontext in dieselbe Komposition zu zwingen.

Zu beachtende Grenzen

  • Kein BildgeneratorDas dokumentierte Ergebnis ist eine Anleitung; fertige Illustrationen erfordern einen separaten Erstellungsprozess.
  • Kein Icon-StandardKleine symbolische UI-Icons haben eine eigene Systemspezifikation.

Diese Eingaben mitbringen

  • Marken-ReferenzenLiefere Produktfarben und freigegebene visuelle Beispiele.
  • AnwendungsübersichtListe die Oberflächen und Größen auf, in denen Illustrationen erscheinen.
  • Inhaltliche AnforderungenBenenne Konzepte, Figuren und Anforderungen an die Darstellung.

03 Wichtige Entscheidungen

Entscheidende Punkte

  1. Konsistenz mit Spielraum

    Eine gemeinsame Sprache kann mehrere Illustrationstypen tragen, ohne dieselbe Szene zu wiederholen.

  2. Gezielte Platzierung

    Nutzungsregeln erklären, wann eine Illustration hilft und wann sie zur unnötigen Dekoration wird.

04 Beispielbriefing

Fokussiertes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfe die Einrichtung des Skills, bevor du es verwendest.

Einrichtung prüfen

Lade die SKILL.md dieser Aufgabe aus dem designer-skills-Repository an dem Ort, den dein Agent für Skills unterstützt. Die Einstiegsdatei legt keinen universellen Installationsbefehl fest.

Quelldatei im Upstream
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/illustration-style/SKILL.md

Stelle freigegebene visuelle Referenzen und die Orte bereit, an denen Illustrationen erscheinen. Der Skill erzeugt Art-Direction-Hinweise, keine fertigen Bilder.

Mit einem Ergebnis beginnen

Passe Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor du den Skill ausführst.

Beispiel-Briefing
Nutze illustration-style, um einen Leitfaden für unsere Onboarding- und Empty-State-Illustrationen zu schreiben. Definiere Regeln für Form, Dimension, Detailgrad, Linie und Palette; ergänze dunkle Varianten und Hinweise zur Darstellung von Menschen, wo Figuren vorkommen. Lege Prüfungen der Darstellungsgröße und Textalternativen fest, ohne zu behaupten, dass Assets generiert wurden.

Ergebnis prüfen

Prüfe das tatsächliche Ergebnis anhand dieser beobachtbaren Kriterien.

  • Die Stilentscheidungen sind konkret genug für eine andere Illustratorin oder einen anderen Illustrator.
  • Jede Anwendung hat Hinweise zu Größe und Zweck.
  • Wesentliche Informationen werden nicht allein durch Bilder vermittelt.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agents. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass externe Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
Owl-Listener
Lizenz
MIT
Geprüfter Stand
2026-10-07 · 9a6930cf84a8
Redaktionelle Zusammenfassung der Quelle
Definiert Stil, Farbpalette, Figuren und Einsatz einer Illustrationsfamilie in Produkt-Screens.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Nutzung des Skills und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Erzeugt es fertige Illustrationen?

Nein. Es erstellt einen Styleguide; fertige Illustrationen erfordern einen separaten Erstellungsprozess.

Muss jeder Stil Figuren verwenden?

Nein. Figurenregeln sind ausdrücklich an Bedingungen geknüpft.

Sollten Hero- und Empty-State-Illustrationen identisch sein?

Sie können eine visuelle Sprache teilen und dennoch unterschiedlichen Anforderungen an Maßstab und Kommunikation folgen.

OpenDesign

Schaffe Raum für die nächste Design-Iteration.

Halte Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfe die Einrichtung des Skills, bevor du ihn in deinen Workflow aufnimmst.

Quelldatei im Upstream
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/illustration-style/SKILL.md