Was macht Iconsaz: Individuelle Icon-Pakete?
Erstellen Sie ein neues, originelles Icon-Paket, das aussieht, als gehöre es zur Marke des Benutzers: gleiches Strichgefühl wie die Schriftart, gleiche Eckensprache wie die UI, gleiche Stimmung wie das Marketing. Die Qualitätslatte liegt bei den besten öffentlichen Paketen (Lucide, Phosphor, Tabler, Heroicons, Material Symbols, Untitled UI): ein Raster, eine Strichregel, eine optische Größe, vorhersagbare Namen. Die Ausgabe ist das eigene Paket des Benutzers, keine Kopie eines dieser Pakete.
Dateien in diesem Skill
| Datei | Lesen, wenn ... |
|---|---|
references/question-flow.md | Schritt 1: genaue Formulierung, Optionen, Standardwerte und Bündelung für die 14 Fragen |
references/style-rules.md | Schritte 2–7: Benchmark-Regeln, Marke-zu-Stil-Zuordnung, Konstruktionsregeln, Startkatalog, Metaphernbank |
references/rtl-and-culture.md | Schritt 8 und immer wenn das Produkt RTL ist oder in mehrere Regionen ausgeliefert wird |
templates/style-brief.md | Schritt 3: Kopieren und ausfüllen; es ist auch die Datei, die der Benutzer behält |
scripts/validate_icons.py | Schritte 6, 7 und 9: Prüft Raster, Abstand, Strich, viewBox, currentColor, versteckte Ebenen, Benennung, Vollständigkeit, RTL-Paare |
scripts/preview_sheet.py | Schritte 6 und 9: Erstellt preview.html (Größen, Zoom auf Raster, Hell/Dunkel, Farbe, RTL-Umschalter) |
scripts/package_pack.py | Schritt 10: Validiert, erstellt dann ZIP mit SVGs + flachen Figma-konformen Kopien + Vorschau + Briefing + Importanleitung |
Die Skripte sind reines Python 3.8+ ohne Abhängigkeiten. Führen Sie sie mit python scripts/<name>.py --help aus.
Zwei Modi
- Neues Paket: Führen Sie den gesamten untenstehenden Workflow aus.
- Paket erweitern: Der Benutzer teilt ein Stil-Briefing, das von diesem Skill erstellt wurde (es enthält einen
icon-specJSON-Block). Überspringen Sie das Interview und den Marken-Scan. Lesen Sie das Briefing, fragen Sie nur, welche Icons hinzugefügt werden sollen (und bieten Sie Metaphern für abstrakte an), zeichnen Sie sie nach den genauen Zahlen des Briefings, validieren Sie sie, fügen Sie sie zur Icon-Liste hinzu, erhöhen Sie die Nebenversion und fügen Sie eine Changelog-Zeile hinzu. Ändern Sie in diesem Modus niemals Raster, Strich, Abstand oder Radius: Die exakte Übereinstimmung mit den alten Icons ist der entscheidende Punkt. Wenn der Benutzer eine Stiländerung wünscht, ist das eine neue Hauptversion und jedes Icon muss neu gezeichnet werden.
Workflow
Halten Sie den Benutzer an drei Stellen im Loop: dem Marken-Scan (Schritt 2), dem Briefing (Schritt 3) und den Test-Icons (Schritt 6). 60 Icons basierend auf einer falschen Annahme zu zeichnen, kostet weit mehr Zeit als eine zusätzliche Bestätigung.
1. Interview
Stellen Sie die 14 Fragen aus references/question-flow.md der Reihe nach, drei oder vier auf einmal. Verwenden Sie ein strukturiertes Fragetool (z. B. AskUserQuestion) für Multiple-Choice-Fragen, wenn eines verfügbar ist, und einfachen Chat für Uploads und getippte Antworten.
- Wenn der Benutzer eine Frage überspringt, wählen Sie den Standardwert aus der Referenz, sagen Sie in einem Satz, was Sie gewählt haben und warum, und fahren Sie fort. Fragen Sie nicht noch einmal.
- Fragen Sie nicht nach vorhandenen Icons des Benutzers, und wenn er sie anbietet, danken Sie ihm und legen Sie sie beiseite. Dies ist ein neues Set; alte Icons ziehen den Stil zurück zu dem, was das Team zu verlassen versucht. Die Regeln des Designsystems (Raster, Strich, Radius) sind willkommen, worum es in Frage 9 geht.
- Hochgeladene Screenshots enthalten aktuelle Icons. Verwenden Sie sie nur, um zu erfahren, wo Icons benötigt werden (Schritt 4), niemals wie sie aussehen sollen.
2. Marken-DNA-Scan
Studieren Sie alles Hochgeladene: Logo, Markenrichtlinien, Farben, Schriftart, Moodboards, Marketing und Screenshots. Leiten Sie den Stil anhand der Mapping-Tabellen in references/style-rules.md („Von der Marke zum Icon-Stil“) aus Belegen ab. Achten Sie auf:
- Schriftart: Strichstärke in UI-Größen, Endungen (rund, flach, abgewinkelt), Rundheit der Bögen, x-Höhe, geometrisch vs. humanistisch. Dies legt Strichstärke und Enden/Verbindungen fest.
- Logo: Linienstärke relativ zu seiner Größe, Eckenformen, Winkel (45° vs. frei), jedes charakteristische Motiv (eine Kerbe, eine Locke, eine abgeschnittene Ecke), das zu einem subtilen, paketweiten Merkmal werden könnte.
- UI-Screenshots: Komponenten-Eckenradius, Rahmenstärke, Dichte, Abstände. Dies legt den Icon-Eckenradius und die Größensets fest.
- Farbe und Bildsprache: Diese beeinflussen nur die Stimmung. Icons werden in
currentColorausgeliefert.
Zeigen Sie die Ergebnisse als Tabelle und bitten Sie den Benutzer, sie zu bestätigen oder zu korrigieren:
| Signal | Beleg | Entscheidung | Konfidenz |
|---|---|---|---|
| Strich | Textschrift ist Nunito Regular, Stämme ≈ 1,6 px bei 16 px Text | 2 px bei 24, 1,75 bei 20 | Hoch |
Sagen Sie deutlich, wenn die Beweislage dünn ist („keine Schriftart geliefert, daher wird der Strich nur aus dem Logo abgeleitet, mittlere Konfidenz“).
3. Stil-Briefing
Kopieren Sie templates/style-brief.md, füllen Sie jeden Abschnitt aus und zeigen Sie es dem Benutzer. Es deckt Raster und Abstand, Strich pro Größe, Enden und Verbindungen, Eckenradius, Stile und Zustände, Größen, Stimmung, Benennung, RTL-Entscheidungen und die vollständige, nach Kategorien gruppierte Icon-Liste ab. Der icon-spec JSON-Block am Ende ist das, was die Skripte lesen, halten Sie ihn daher mit dem Fließtext synchron. Holen Sie ausdrückliche Zustimmung ein, bevor Sie etwas zeichnen.
4. Fehlende-Icons-Finder
Gehen Sie jeden Screenshot Bereich für Bereich durch (Navigation, Kopfzeilen, Symbolleisten, Schaltflächen, Listeneinträge, Formularfelder, Leerzustände, Toasts und Status, Einstellungszeilen, Karten) und listen Sie jede Stelle auf, die ein Icon benötigt. Präsentieren Sie eine Tabelle – Bildschirm, Position, benötigtes Icon, bereits in der Liste? – und fügen Sie die fehlenden nach Zustimmung des Benutzers zur Icon-Liste des Briefings hinzu. Wenn keine Screenshots vorhanden sind, verwenden Sie den Startkatalog in references/style-rules.md plus den Produktkontext.
5. Metaphern-Optionen
Bieten Sie für jedes abstrakte Konzept (Rückerstattung, Beratung, Synchronisation, Onboarding, Abonnement, Treue, Compliance usw.) zwei oder drei visuelle Ideen mit jeweils einer einzeiligen Begründung an und weisen Sie auf kulturelle Risiken unter Verwendung von references/rtl-and-culture.md hin. Die „Metaphernbank“ in references/style-rules.md enthält Ausgangspunkte. Lassen Sie den Benutzer wählen und zeichnen Sie die Wahl dann im Briefing auf, denn der nächste Designer muss wissen, warum refund eine Münze mit einem Rückpfeil ist.
6. Test-Icons
Zeichnen Sie zuerst drei oder vier Beispiele: home, search, settings und das charakteristischste produktspezifische Icon. Erstellen Sie jedes in jedem genehmigten Stil, in jeder Größe. Führen Sie dann aus:
python scripts/validate_icons.py icons/ --brief style-brief.md --samples
python scripts/preview_sheet.py icons/ --brief style-brief.md -o preview.html
Beheben Sie jeden Fehler, betrachten Sie die Vorschau selbst (öffnen Sie sie in einem Browser, falls vorhanden, und überprüfen Sie die 1×-Größen, nicht nur den Zoom), und zeigen Sie sie dann dem Benutzer. Fragen Sie, was sich falsch anfühlt. Typische Anpassungen in dieser Phase: Strich etwas schwerer oder leichter, weichere Ecken, mehr oder weniger Details. Aktualisieren Sie das Briefing, wenn sich etwas ändert. Beginnen Sie nicht mit dem vollständigen Set, bis der Benutzer die Beispiele genehmigt hat.
7. Vollständiges Set
Zeichnen Sie jedes Icon im Briefing gemäß „Wie zeichnen“ unten. Arbeiten Sie Kategorie für Kategorie und führen Sie den Validierer nach jeder Kategorie aus, damit Sie einen systematischen Fehler nicht erst 80 Icons später finden.
8. RTL und Kultur
Wenn die Textrichtung RTL oder beides ist, erstellen Sie eine gespiegelte -rtl-Version jedes richtungsabhängigen Icons (Pfeile, Zurück und Vorwärts, Senden, Antworten, Rückgängig und Wiederholen, Abmelden, Listeneinzug usw.). Lassen Sie nicht-richtungsabhängige Icons in Ruhe; das Spiegeln einer Uhr oder eines Play-Buttons ist ein Fehler. Überprüfen Sie jedes Icon anhand der kulturellen Risikoliste. Beide Listen finden Sie in references/rtl-and-culture.md. Markieren Sie richtungsabhängige Icons in der directional-Liste der Spezifikation, damit der Validierer die Paare prüft.
9. Abschließende Prüfung
Führen Sie den Validierer ohne --samples aus. Er muss null Fehler melden. Überprüfen Sie dann mit dem Auge, denn ein Skript kann die Erkennbarkeit nicht beurteilen:
- Jedes Icon im Briefing existiert in jedem Stil und jeder Größe (Validierer: Vollständigkeit).
- Jedes Icon folgt dem Briefing: Raster, Abstand, Strich, Enden, Verbindungen, Radius (Validierer).
- Die optische Größe ist im gesamten Set gleichmäßig; nichts sieht im Vorschaugitter größer oder kleiner aus als seine Nachbarn (Validierer warnt bei Ausreißern).
- Jedes Icon ist auch in der kleinsten Größe noch klar: Betrachten Sie die 1×-Zeile der Vorschau. Wenn zwei Details verschmelzen, entfernen Sie in dieser Größe eines, anstatt den Strich zu verdünnen.
- Namen folgen
category/name/variant/size, Kleinbuchstaben-Kebab-Case, und bedeuten überall dasselbe (Validierer: Benennung). - RTL-Paare existieren und spiegeln sich wirklich (Validierer: RTL).
- Es hat sich kein kulturell riskantes Symbol eingeschlichen.
Beheben Sie alles, was fehlschlägt, und führen Sie die Prüfungen vor der Auslieferung erneut durch.
10. Ausliefern
Figma Professional (oder höher): Erstellen Sie die Bibliothek mit dem Figma MCP. Wenn seine Tools fehlen oder nicht authentifiziert sind, teilen Sie dem Benutzer mit, dass eine Verbindung hergestellt werden muss, und bieten Sie stattdessen das ZIP an. Wenn ein Figma-Skill wie figma-use verfügbar ist, laden Sie ihn vor dem ersten Schreibaufruf.
- Erstellen Sie eine neue Datei mit drei Seiten: Cover, Icons und Usage.
- Erstellen Sie auf Icons einen Abschnitt pro Kategorie. Verwandle für jedes Icon das SVG in einen Knoten (
figma.createNodeFromSvg), konvertiere es in eine Komponente, benenne die Komponenten mit Varianten-Eigenschaften (style=outline, state=default, size=24) und kombiniere sie mitfigma.combineAsVariantszu einem Komponenten-Set namenscategory/name. Behalten Sie Striche als Striche; wandeln Sie sie nicht in Pfade um. - Erstellen Sie eine Kategorie pro Schreibaufruf. Große Stapel laufen Gefahr zu zeitüberschreiten, und ein Fehler kostet eine Kategorie, nicht das gesamte Paket. Machen Sie nach jeder Kategorie einen Screenshot und vergleichen Sie ihn mit der Vorschau.
- Cover: Paketname, Version, Stimmungswörter und ein Raster mit Helden-Icons. Usage: Größen und wann welche verwendet wird, Abstand neben Text, die Aktiv/Inaktiv-Regel, RTL-Regel, Benennung, Beispiele für „Tun/Nicht tun“ und „Um Icons hinzuzufügen, teile das Stil-Briefing mit dem Skill“.
- Übergeben Sie auch das ZIP aus dem nächsten Pfad, da Entwickler die SVGs so oder so benötigen.
Figma Free (oder kein Figma): Der Figma MCP kann auf kostenlosen Tarifen keine Bibliotheksdateien schreiben, liefern Sie daher stattdessen Dateien aus:
python scripts/package_pack.py icons/ --brief style-brief.md --out dist/
Es weigert sich zu paketieren bei Fehlern und auch bei Warnungen, bis Sie diese überprüft haben; fügen Sie --allow-warnings nur hinzu, wenn jede verbleibende Warnung beabsichtigt ist. Es schreibt dann dist/<pack>-v<version>.zip mit svg/ (der Verzeichnisbaum category/name/variant/size.svg), figma/ (flache category__name__variant__size.svg-Kopien, die nach einer Stapelumbenennung in Figma zu Schrägstrichnamen werden), preview.html, manifest.json, dem Stil-Briefing und IMPORT-TO-FIGMA.md mit Schritt-für-Schritt-Anleitungen zum Importieren der Icons und deren Umwandlung in Komponenten mit Varianten. Fassen Sie diese Schritte auch im Chat zusammen.
11. Briefing speichern
Speichern Sie das endgültige Stil-Briefing neben dem Auslieferungsobjekt (benannt als <pack>-style-brief.md) und teilen Sie dem Benutzer mit, in etwa diesen Worten: „Heben Sie diese Datei auf. Wenn Sie das nächste Mal Icons benötigen, teilen Sie sie mir zuerst mit, und die neuen werden genau diesem Paket entsprechen.“
Wie zeichnen
Schreiben Sie SVGs von Hand auf dem vereinbarten Raster, als würden Sie Vektoren in einem Designtool erstellen. Jede Größe wird auf ihrer eigenen nativen Leinwand gezeichnet (viewBox="0 0 20 20" für 20 px usw.), sodass kleine Größen ihren eigenen Strich und vereinfachte Details erhalten können, so wie die optischen Größen von Material und die 20- und 16-px-Sets von Heroicons.
- Root:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">. Setzen Sie die Füllung auf dem Root und lassen Sie die Formen erben, das hält jedes Icon identisch. - Verwenden Sie Grundelemente (
circle,rectmitrx,line,pathmit Bögen) auf dem Raster. Halten Sie Koordinaten auf ganzen oder halben Einheiten (höchstens Vierteleinheiten). Punkte außerhalb des Rasters wirken bei 1× unscharf. - Farbe ist nur
currentColor. Gefüllte Formen verwendenfill="currentColor". Der zweite Ton bei Duotone istcurrentColormit der Deckkraft des Briefings, niemals eine zweite Farbe. - Keine Transformationen, versteckte Elemente,
<text>, eingebettete Bilder,<style>, IDs oder Editor-Metadaten. Reduzieren Sie alles auf einfache Geometrie. - Passen Sie die Form an ihre Keyline an (Kreis, Quadrat, Hoch- oder Querformat-Rechteck; siehe style-rules), sodass ein rundes und ein eckiges Icon gleich groß aussehen.
- Innenabstände sind mindestens eine Strichstärke breit, bei 16 px breiter.
- Gefüllte Varianten folgen derselben Silhouette wie die Kontur, mit Details, die als Lücken ausgespart sind. Sie sollten als das gleiche Icon gelesen werden, „eingeschaltet“.
- Um eine kleinere Größe zu erstellen, beginnen Sie mit der 24-px-Geometrie, skaliert auf die neue Leinwand, rasten Sie Punkte auf das Raster ein, setzen Sie den Strich dieser Größe aus dem Briefing und entfernen Sie dann Details, die nicht mehr passen. Skalieren Sie niemals einfach die Datei.
- Passen Sie die Schriftart der Marke an: Enden und Verbindungen spiegeln ihre Endungen, Kurven spiegeln ihre Bögen, und eine paketweite Signatur (eine Kerbe, eine abgeschnittene Ecke) kann das Logo widerspiegeln, wenn das Briefing dies verlangt.
Ein minimales Kontur-Icon:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="10.5" cy="10.5" r="7"/>
<path d="M15.5 15.5 21 21"/>
</svg>
Arbeitsverzeichnis
icons/<category>/<name>/<variant>/<size>.svg z.B. icons/nav/home/outline/24.svg
icons/nav/arrow-back-rtl/outline/24.svg gespiegelter RTL-Zwilling
style-brief.md ausgefüllte Vorlage mit dem icon-spec-Block
preview.html generiert
dist/<pack>-v<version>.zip generiert
Der kanonische Icon-Name ist der Pfad ohne .svg, also nav/home/outline/24. Das ist auch der Figma-Komponentenname, der Code, Design und Dateien aufeinander abstimmt.
Gespräch mit dem Benutzer
Viele Benutzer sind Designer, keine Entwickler. Sagen Sie „Linienstärke“ neben „Strich“, „Eckenrundung“ neben „Radius“ und erklären Sie jede Skriptausgabe in einem Satz, anstatt sie roh einzufügen. Halten Sie jede Runde kurz: ein paar Fragen, eine Entscheidung oder eine Sache zur Überprüfung.