Icon Systemvon Owl-Listener

Icon System Skill.

Geben Sie Icons eine einheitliche Konstruktion und ein klares Benennungssystem, statt unzusammenhängende Symbole zu sammeln.

Designsysteme
Spezifikationen

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Icon SystemSKILL.md

Aufgabe Designsysteme Ergebnis • Eine Spezifikation für Icon-Konstruktion und Größen • Benennungskategorien und Lieferanforderungen • Regeln für Barrierefreiheit und Beiträge Vor dem Start Ein Agent, der repräsentative Icons, ihre vorgesehenen Größen sowie die erforderlichen Design- und Codeformate prüfen kann.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Icon System: Produkt-Ikonografie vereinheitlichen

Legt fest, wie Icons in einem Produkt gezeichnet, benannt, geliefert und barrierefrei eingesetzt werden.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Icon System definiert die Regeln rund um die Icon-Bibliothek eines Produkts: Raster, Keylines, Strichstärke, Eckengestaltung, Größenvarianten, Benennung und Lieferung. Es unterscheidet zwischen Linien-, gefüllten und Duotone-Icons, statt alle Icon-Stile als austauschbar zu behandeln.

Die Quelle behandelt außerdem Beschriftungen, das Ausblenden dekorativer Icons, Kontrast und Interaktionsziele. Die vorgeschlagenen Pixelgrößen sind Referenzwerte, die an das Produkt angepasst werden sollten. Eine Spezifikation für ein Icon-System bedeutet nicht, dass bereits eine vollständige SVG-Bibliothek gezeichnet oder getestet wurde.

Erwartete Ergebnisse

Eine Spezifikation für Icon-Konstruktion und Größen
Benennungskategorien und Lieferanforderungen
Regeln für Barrierefreiheit und Beiträge

Beispielbriefing ansehen

Vom Briefing zur Prüfung

01
Konstruktionsregeln festlegen
Raster, Keylines, Strichstärke, Ecken und unterstützte Stile definieren.
02
Bibliothek organisieren
Kategorien, Namen, Varianten sowie erforderliche Quell- oder Komponentenformate wählen.
03
Einsatz im Kontext prüfen
Unterstützte Größen, Beschriftungen, Text bei kritischen Aktionen und interaktive Ziele kontrollieren.

02 Einsatzbereiche

Wann es sich eignet

Nutzen Sie es, um gemischte Icon-Sets in ein System zu überführen oder eine gemeinsame Bibliothek für Design und Entwicklung zu dokumentieren.

Gut geeignet

Gemischte Icon-BibliothekenUneinheitliche Symbolfamilien unter einem Konstruktionsstandard zusammenführen.
Gemeinsame ProduktkomponentenNamen und Wrapper definieren, die Design und Entwicklung einheitlich nutzen können.

Grenzen, die Sie prüfen sollten

Kein vollständiger IllustrationsleitfadenUmfassendere erzählerische Grafiken gehören zu illustration-style.
Keine automatische Asset-ErstellungDie Quelle spezifiziert ein System; die eigentlichen Icons und Wrapper müssen weiterhin produziert werden.

Diese Eingaben mitbringen

Aktuelle IconsRepräsentative Symbole und Konflikte bereitstellen.
NutzungsgrößenVorgesehene Anzeigegrößen und Interaktionskontexte auflisten.
Liefer-StackSVG, Sprites, Komponenten-Wrapper oder Anforderungen an die Designbibliothek angeben.

03 Wichtige Entscheidungen

Entscheidende Punkte

Konsistente Konstruktion
Gemeinsame Geometrieregeln lassen Symbole zusammengehörig wirken, auch wenn ihre Motive verschieden sind.
Aussagekräftige Namen
Namen für Kategorien und Varianten verbessern Auffindbarkeit und Wartung.

04 Beispielbriefing

Ein fokussiertes Briefing testen

Das folgende Beispielbriefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Laden Sie das SKILL.md dieser Aufgabe aus dem designer-skills-Repository an dem von Ihrem Agenten unterstützten Skill-Speicherort. Die Einstiegsdatei legt keinen universellen Installationsbefehl fest.

Upstream-Quelldatei

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md

Stellen Sie repräsentative Icons und ihre Nutzungskontexte bereit. Der Skill definiert Regeln; das Erstellen und Testen der eigentlichen Icon-Assets ist davon getrennt.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor Sie den Skill ausführen.

Beispielbriefing

Nutze icon-system, um unsere gemischten Navigations-Icons zu vereinheitlichen. Definiere Regeln für Raster, Strichstärke, Ecken, Größen und Benennung und spezifiziere dann die Lieferung als SVG und als Komponenten. Unterscheide dekorative Icons von beschrifteten Aktionen und kennzeichne, wo sichtbarer Text notwendig ist.

Ergebnis prüfen

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

Icons folgen gemeinsamen, dokumentierten Konstruktionsregeln.
Namen unterscheiden Kategorie und Variante.
Die Barrierefreiheitsbehandlung passt zur jeweiligen Verwendung.

OpenDesign bietet Coding-Agenten einen lokalen Design-Arbeitsbereich. Diese Auflistung bedeutet nicht, dass der Skill mitgeliefert wird oder dass externe Tools, Zugangsdaten und Softwareabhängigkeiten enthalten sind.

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

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

Quelleninhaber: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill-Datei: design-systems/skills/icon-system/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 9a6930cf84a8

Redaktionelle Quellenzusammenfassung

Legt fest, wie Icons in einem Produkt gezeichnet, benannt, geliefert und barrierefrei eingesetzt werden.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Entspricht die visuelle Größe eines Icons seinem Touch-Ziel?

Nein. Die Quelle behandelt Anzeigegröße und Hinweise zu interaktiven Zielen als getrennte Aspekte.

Sollte jedes Icon einen zugänglichen Namen haben?

Aussagekräftige Icons brauchen eine passende Beschriftung; dekorative können für assistive Technologien ausgeblendet werden.

Deckt das Hero-Illustrationen ab?

Nein. Die Quelle verweist umfassendere Illustrationsarbeit an einen separaten Skill.

OpenDesign

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

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen