Micro-UI-Illustration

Vektorillustrations-Toolkit

Kombiniert die Ideen des Benutzers mit Referenzbildern, klärt diese durch schrittweise Fokussierung und setzt sie dann mit den hier verfügbaren Zeichenwerkzeugen um. Standardmäßig gelten die untenstehenden Micro-UI-Stilbeschränkungen; die vom Benutzer explizit angegebenen Richtungen und Projektspezifikationen haben Vorrang.

Micro-UI-Standardstil und -Komposition

Diese Regeln stellen die alten Stilgrenzen wieder her und gelten für neu gezeichnete Micro-UI-Grafiken; sie stellen keine Einschränkungen der allgemeinen SVG-Technologie dar.

• Echte Steuerelementausschnitte: Das Hauptmotiv muss eine erkennbare Werkzeug- oder Steuerelementstruktur aufweisen. Erstelle keine Oberfläche aus sich wiederholenden grauen Balken, leeren Karten und bedeutungslosen Symbolen; extrahiere stattdessen zuerst die Identitätsmerkmale des Objekts aus der Referenz.
• Null-Kontur-Hauptkörper: Große Formen werden durch Volltonfarbflächen, Verdeckungen und sanfte Schatten definiert. Notwendige Strichsymbole, Linealmesslinien und sehr helle Umgebungslinien sind erlaubt; Symbole und Strichstärken folgen den Zielprojektspezifikationen.
• Standardmäßig geschichtete Komposition: Organisiere den Raum als „Basisplatte → Mittelgrund-Steuerelementausschnitt → Vordergrundfokus“. Eine Umgebungsebene ist optional. Papier, Dokumente, Berichte können eine Basisplatte verwenden; wenn das Steuerelement selbst eine vollständige Einheit bildet, kann eine zusätzliche Basisplatte entfallen. Alle Schichten sollten dem Thema dienen, nicht der Schichtanzahl wegen hinzugefügt werden.
• Einzelschicht-Atome und keine Rekursion: Wenn das Hauptmotiv bereits aus mehreren Submodulen besteht, bleiben diese vollständige Volltonfarb-Entitäten ohne Einbettung einer dritten Ebene von Mikro-Steuerelementen, Pseudo-Diagrammen oder kleinen Symbolen. Die Strukturhierarchie wird nach der visuellen Funktion berechnet, nicht nach der Anzahl der <g>-Verschachtelungen in SVG.
• Mindestbauteil 16px: Bei der Zielanzeigegröße müssen Breite und Höhe unabhängiger Farbflächen mindestens 16px betragen; notwendige Strichsymbole, Linealmesslinien und Mikro-Indikatorpunkte (max. Durchmesser 3px) sind ausgenommen. Umgehe diese Regel nicht durch eine höhere Exportauflösung. Wenn die kleine Größe dies nicht zulässt, reduziere die Anzahl der Bauteile oder vereinfache die Darstellung.
• Zurückhaltung bei Details: Ein einzelner Container standardmäßig nicht mehr als drei Hauptbauteile; zeichne keine dichten Pseudotexte, verwende keine leeren hohen Container, die nur wenig Inhalt fassen. Text wird nur verwendet, um Identität, Status oder Aktion auszudrücken.
• Token-Farben: Der Quellcode referenziert zentral definierte Farbrollen, die dann auf Projekt-Tokens abgebildet werden; verwende keine verteilten Hexadezimal- oder anderen Farbliterale. Ein unabhängiges SVG kann die Rollen beim Export in echte Farben auflösen, wobei die Zuordnungsquelle erhalten bleibt, um die Anzeige auch außerhalb der Host-Umgebung zu gewährleisten.

Wähle für das aktuelle Objekt relevante Materialien aus Referenzbilder und Analyse; für Licht- und Schattenparameter oder Codebeispiele lies Bau und vollständige Beispiele. Die Stilregeln gelten standardmäßig. Wenn Ausnahmen wirklich nötig sind, entscheidet die KI, basierend auf Referenz und Anzeigegröße, und erläutert das Ausnahmeobjekt, den Grund und das Ergebnis der visuellen Prüfung, ohne für gewöhnliche Zeichnungen wiederholt um Erlaubnis zu fragen.

Benutzerreferenz-Lernprozess

Wenn der Benutzer ein Referenzbild sendet und dessen Eigenschaften übernehmen möchte, analysiere und dokumentiere es nach den folgenden Schritten:

1. Absicht erfassen: Der Benutzer sendet ein Referenzbild und gibt an, welche Eigenschaften übernommen werden sollen (z. B. „die Dicke der Ordneröffnung übernehmen“ oder „das Flächenverhältnis der Blau-Grün-Kombination übernehmen“).
2. Analysepunkte: Die KI betrachtet das Bild und zerlegt es in fünf Aspekte:
   • Formgebung: Wie das Steuerelement geschnitten ist, Außenkontur und Eckenradius;
   • Farbgebung: Flächenverhältnis von hellem Hintergrund, Primärfarbe der Funktion und Highlight-Fokus;
   • Ebenen: Vorne-Hinten-Verhältnis, Überlappungen und Weißraum;
   • Komposition: Schwerpunkt des Subjekts im Canvas und Augenbewegung;
   • Licht und Schatten: Versatz, Weichzeichnungsgröße und Transparenz von Mikro-Schatten.
3. Speichern und Aufzeichnen:
   • Lege das Bild im Verzeichnis assets/reference-images/ ab;
   • Füge die Analyseergebnisse an references/visual-reference-map.md an und dokumentiere klar, was übernommen werden kann und was die spezifischen Geschäftsinhalte des Originalbildes sind (nicht direkt kopieren).
4. Stilwechsel und ohne Bild:
   • Wenn der Benutzer einen Stilwechsel wünscht, passe die Parameter gemäß den neuen Anforderungen an, um Konflikte zwischen alten und neuen Regeln zu vermeiden;
   • Ohne Referenzbild zeichne gemäß den vorhandenen Regeln und Beispielen, fordere den Benutzer nicht auf, ein Bild bereitzustellen.
5. Konzeptklärung:
   • „Lernen“ bedeutet hier, das Referenzbild zu analysieren und die Kernpunkte für die Zeichnung zu notieren. Es trainiert kein Modell und behauptet nicht, dass das Modell diesen Stil dauerhaft gelernt hat.

Schrittweise Fokussierung des Bildes durch Klärung

Wenn die Richtung eines neuen Bildes noch unklar ist, führt die KI den Benutzer aktiv durch schrittweise Gedankenäußerung, ohne nach Erhalt des Themas direkt ein Bild zu erstellen. Sortiere zuerst die bereits vom Benutzer bereitgestellten Informationen: Verwendungszweck, Szenario, Referenzen, Vorlieben und Einschränkungen. Kläre nur die Lücken, die aktuelle Designentscheidungen beeinflussen; bestätigte Informationen werden übernommen, nicht erneut abgefragt.

Du kannst zunächst einige wenige konkrete Optionen anbieten, um dem Benutzer zu helfen, seine Vorlieben auszudrücken, und dann basierend auf den Entscheidungen und Erklärungen des Benutzers schrittweise tiefer gehen. Stelle in jeder Runde eine kurze, spezifische Frage zu einer entscheidenden Wahl, gib wenige, tatsächlich unterschiedliche Richtungen vor, erkläre, wie das resultierende Bild aussehen würde, und gib eine Empfehlung. Die nächste Runde sollte auf dem gerade bestätigten Inhalt aufbauen und die noch unklaren Aspekte (Szenario, Motiv oder Struktur) weiter eingrenzen, ohne allgemeine Optionen zu wiederholen. Erlaube dem Benutzer, diese Richtungen frei zu beschreiben, zu kombinieren oder abzulehnen, ohne ihn auf die Optionen zu beschränken. Wirf nicht den gesamten Anforderungskatalog in einer Runde, und übertrage dem Benutzer keine professionellen Kompositionsaufgaben.

Gehe je nach fehlender Information nach folgendem Schema schrittweise vor; überspringe bereits geklärte Teile direkt:

1. Fokussiere den Ausdrucksinhalt: Finde aus Verwendungszweck und Thema heraus, was der Benutzer dem Betrachter am meisten vermitteln möchte. Kläre Objekt, Aktion, Status oder Beziehung. Wandle allgemeine Funktionswörter in ein konkretes Szenario um und lass den Benutzer eine klare Bildabsicht in einem Satz bestätigen.
2. Fokussiere die visuelle Richtung: Zeige in Kombination mit der Materialanalyse relevante Referenzen, weise auf die übernehmbaren Aspekte von Form, Farbe, Raum oder Textur hin und frage nach den Teilen, die der Benutzer mag oder nicht mag. Unterscheide zwischen stilistischen Grundlagen und szenischen Elementen; übernimm nicht automatisch das Layout einer Referenz, nur weil sie gefällt.
3. Fokussiere die Bildkomposition: Erfahre durch Dialog schrittweise die Gedanken des Benutzers zu Motiv, Objektbeziehungen, Fokus und Gesamteindruck. Gib basierend auf den Referenzen konkrete Vorschläge, um dem Benutzer bei der Entscheidungsfindung zu helfen.

Führe die Klärung nur für das noch Unklare fort, ohne den Fragekatalog mechanisch abzuarbeiten. Nach der Fokussierung der Idee wiederhole die vereinbarte Bildabsicht und Hauptkomposition in kurzen Worten und warte auf eine explizite Bestätigung des Benutzers wie „kann loslegen“ oder eine gleichwertige Autorisierung, bevor du mit dem Zeichnen beginnst. Wenn bereits eine Startautorisierung vorliegt und die Richtung klar ist, führe direkt aus, ohne erneute Bestätigung. Weitere Details steuert der Benutzer; passe kontinuierlich anhand seiner Änderungswünsche an, ohne Zwischenprüfungen oder Feedback-Retouren. Bei lokalen Änderungen kläre nur die mehrdeutigen Ziele, ohne den gesamten Prozess neu zu starten.

Von der Referenz zur Form und Komposition

Finde zuerst die Erkennungsstruktur des Objekts in der Erfahrung des Benutzers: nicht nur Kontur und Komponenten, sondern auch Schlüsselproportionen, Anordnungsreihenfolge und Verbindungen. Text und generische abgerundete Rechtecke können diese Merkmale nicht ersetzen. Wähle je nach Verwendungszweck das vollständige Objekt oder einen lokalen Ausschnitt. Vereinfachung erfolgt bevorzugt durch Bildausschnitt und Weglassung; bei Übertreibungen behalte die strukturellen Beziehungen bei, die das Objekt glaubwürdig machen. Zeichne keinen Funktionsnamen standardmäßig als Prozessablauf.

Wähle je nach aktuellem Objekt und zu lösendem Formproblem die relevante Referenz aus, öffne das Bild tatsächlich. Wenn das Verständnis der Implementierung nötig ist, lies das entsprechende SVG und sieh dir das gerenderte Ergebnis an. Es ist nicht erforderlich, den gesamten Materialkatalog zu durchlaufen. Die Analyse sollte darauf abzielen, „welche spezifische Beziehung die Referenz funktionieren lässt und wie sie diesmal verwendet wird“, z. B. Maßstabskontrast, Abstützung oder Verdeckung, nicht nur die Auflistung von Effekten wie abgerundete Ecken oder weiche Schatten. Stilgrundlage bedeutet nicht, das Szenenlayout eins zu eins zu übernehmen; ohne Quellcode ist die Implementierungsweise eine zu verifizierende Hypothese.

Entscheide basierend darauf, was behalten, was weggelassen und wo übertrieben werden kann. Ordne dann das Hauptmotiv, Hilfsobjekte und Weißraum mit großen Formen an. Beurteile zuerst, ob das Objekt glaubwürdig ist und ob die Haupt-Neben-Struktur funktioniert, ergänze dann Details und Materialien. Wenn nur erklärender Text oder Schatten zur Rettung nötig sind, kehre zur Formgebung zurück. Die Beurteilung erfolgt durch die KI, ohne zusätzliche Bestätigungsschritte für den Benutzer. Wie spezifische Effekte in Pfade, Koordinaten und Filter umgesetzt werden, findest du unter Referenz in Zeichnung umwandeln.

Varianten sollten die Subjektbeziehung, Perspektive oder Komposition verändern; der Austausch von Linien, Texturen und Farben gehört zur Materialvariation derselben Komposition und kann nicht als neue Szene bezeichnet werden. Schreibe die Objektkombination des aktuellen Themas nicht als feste Vorlage für nachfolgende Arbeiten.

Objekte im selben Raum teilen Projektion, Dicke und Lichtquelle. Symbole und Text in der Ebene werden zuerst im lokalen Koordinatensystem angeordnet und dann als Ganzes auf die Oberfläche abgebildet. Zeichne zuerst das hintere, dann das vordere Objekt. Benachbarte Konturen müssen klar getrennt oder klar verdeckt sein; vermeide Tangentialberührungen, schmale Zwischenräume und halb sichtbare Symbole. Einheitliche Geometrie wird von den Bauwerkzeugen behandelt; die Angemessenheit des Hauptmotivs wird weiterhin durch die Referenzanalyse und das Rendern in der tatsächlichen Größe beurteilt.

Qualitätskontrolle und lokale Überarbeitung

Interne Prüfschritte: Rendern → tatsächliches Betrachten → Probleme identifizieren → erneute Prüfung. Nach Abschluss der Zeichnung oder Änderung verwende scripts/render.mjs, um aus dem SVG oder der Anzeigeseite 1×- und 3×-PNGs zu erstellen. Öffne beide Bilder und überprüfe die folgenden Punkte gemäß der „Visuellen Abnahme vor der Auslieferung“, dokumentiere alle spezifischen Probleme. Überprüfe bei 1× die Subjekterkennung, Komposition, Proportionen und Weißraum; bei 3× überprüfe abgerundete Ecken, Verdeckungen, Fugen, Beschnitte und Schatten. Die Export-Pixelauflösung ersetzt nicht die Zielanzeigegröße; wenn die Zielgröße von der nativen SVG-Größe abweicht, spezifiziere sie über --width, --height.

Führe mindestens eine Erstprüfung und eine erneute Prüfung nach der Überarbeitung durch. Wenn bei der Erstprüfung keine Probleme gefunden werden, führe eine zweite unabhängige Überprüfung durch, ohne absichtlich etwas zu ändern. Nach jeder Bildänderung rendere erneut und öffne das Bild, um zu bestätigen, dass das spezifische Problem gelöst wurde. Wenn Probleme nicht gelöst werden können oder die Umgebung das Rendern nicht zulässt, erkläre dies deutlich und behaupte nicht, dass die visuelle Abnahme bestanden ist. Dieser Prozess ist eine interne Qualitätskontrolle der KI und fügt keine Benutzer-Musterabnahme oder Feedback-Retourenphase hinzu.

Wenn CSS-Rollenvariablen betroffen sind, übergib über --vars die vom Projekt generierte JSON-Zuordnung; fehlende Variablen ohne gültigen Fallback müssen behoben werden, ersetze keine Farben eigenständig. Projektzuordnung und Exportbilder werden im Aufgabenverzeichnis gespeichert; schreibe keine Projektfarbwerte in den Skill. Details zu Befehlen, Abhängigkeiten und Anzeigeseiten-Screenshots findest du unter Rendern und Anzeigen.

Vergleiche das Ergebnisbild Seite an Seite mit der ausgewählten Referenz; vergleiche Kontur, Proportionen, Eckenradien, Farbflächen, Schatten und Detailsdichte, um die visuelle Abstimmung zu beurteilen.

Nach dem Rendern identifiziere spezifische visuelle Probleme und ändere entsprechend; überprüfe Objekterkennung, Proportionen, Verdeckung, Ausrichtung und Grenzen, ersetze die visuelle Beurteilung nicht durch eine erfolgreiche Dateiparsung oder einen erfolgreichen Export.

Vor der Änderung lokalisiere zuerst das vom Benutzer anvisierte Objekt und den Bereich, verwende die vorhandene Vektorstruktur für lokale Anpassungen. Vergleiche nach der Änderung Vorher-Nachher-Bilder, um zu bestätigen, dass die bereits genehmigten Form- und Layout-Merkmale erhalten geblieben sind.

Visuelle Abnahme vor der Auslieferung

Überprüfe nach dem Rendern die folgenden Punkte; wenn ein Problem gefunden wird, korrigiere zuerst das Bild und liefere dann aus. Dass die Datei geparst oder erfolgreich exportiert werden kann, zählt nicht als visuelle Abnahme.

• Schlüsselproportionen, Anordnung und Verbindungen entsprechen der realen Erfahrung des Objekts; nach Weglassung oder Übertreibung bleibt die Erkennungsstruktur erhalten, sodass das Thema nicht nur anhand des Titels oder weniger Symbole erraten werden muss.
• Standardmäßig haben Hintergrund-, Mittel- und Vordergrund in Größe und Verdeckung eine klare Haupt-Neben-Struktur; wenn der Hintergrund weggelassen wird, hat das Hauptmotiv eine vollständige Kontur.
• Die Containerhöhe korrespondiert mit dem Inhalt; der Vordergrund stiehlt nicht aufgrund zu großer leerer Fläche den Schwerpunkt.
• Zusammengesetzte Submodule weisen keine rekursiven Mikro-Steuerelemente auf; unabhängige Farbflächen erfüllen in der Zielanzeigegröße 16px, notwendige Linien und Mikropunkte sind als Ausnahme gekennzeichnet.
• Benachbarte Formen sind klar getrennt oder überlappen; es gibt keine tangentialen Berührungen, schmalen Spalten oder versehentliche Durchdringungen; Text und Symbole werden nicht versehentlich durch den Vordergrund verdeckt.
• Schatten unterscheiden die Ebenen, sind aber nicht schmutzig schwarz; das Farbflächenverhältnis harmonieren mit der Referenz; alle Farben sind auf die Rollenkonfiguration oder Projekttokens zurückführbar.
• Vergleich Seite an Seite mit der ausgewählten Referenz: Überprüfe, ob die übernommenen Beziehungen (Maßstab, Kontur, Raum oder Textur) im Ergebnisbild funktionieren, nicht nur, ob ähnliche Effekte verwendet wurden; betrachte gleichzeitig Originalgröße und tatsächliche Anzeigegröße; erläutere spezifische Korrekturen, erfinde keine Bewertung oder Benutzerzustimmung.

Beispiel-Sammelprozess

Frage nach Abschluss und Prüfung einmal aktiv nach. Sammle erst, wenn der Benutzer explizit zustimmt.

1. Fragerichtlinie:
   • Nach Abschluss der Illustration und interner Prüfung fragt die KI einmal aktiv: „Bist du mit dieser Illustration zufrieden? Soll ich sie zur späteren Referenz in die Beispielsammlung aufnehmen?“
   • Wenn der Benutzer noch Änderungen wünscht, ändere zuerst das Bild, frage nicht wiederholt.
   • Wenn der Benutzer ablehnt, nicht antwortet oder nur „zufrieden“ sagt, ohne explizit der Sammlung zuzustimmen, wird die Sammlung nicht durchgeführt.
   • Sammle nicht automatisch jedes generierte Ergebnis.
2. Ausführung der Sammlung:
   • Überprüfe die Dateien: Es müssen sowohl der bearbeitbare .svg-Quellcode als auch das gerenderte .png-Vorschaubild vorhanden sein. Überprüfe auf Namensgleichheit, überschreibe keine vorhandenen Dateien.
   • Führe das Sammlungsskript aus: scripts/collect-example.mjs;
   • Aktualisiere automatisch references/example-guide.md: dokumentiere den thematischen Namen, die Konstruktionsmerkmale und die geeigneten Anwendungsszenarien.

Kombinierbare SVG-Zeichenmethoden

Das SVG-Bauwerkzeug erklärt die Verwendung des lokalen scripts/build-kit.mjs: Konturen, einheitliche Kamera, Extrusion von Festkörpern, Oberflächenabbildung, Begrenzungsrahmen und Export von Farbrollen. Wähle je nach Bedarf, nicht jedes Bild muss dreidimensional sein.

Werkzeugübersicht

Gewünschter Effekt	Werkzeug und Beispiel
Gerade Linien, Bögen, organische Kurven	Pfade und Kurven
Vereinigen, Ausschneiden, lokale Beschnitte, transparente Übergänge	Formkombinationen und Masken
Verschieben, Drehen, Skalieren, Scheren, planare Projektion	Koordinaten und Transformationen
Farbflächen, Farbverläufe, Schatten, Wiederholungstexturen	Füllung und Materialien
Textbreite, Labelgröße, Zeilenbox und Ränder	Text- und Layoutwerkzeuge
Browser-Vorschau, lokales Neurendern, Bildvergleich	Rendern und Anzeigen
Sicheres Sammeln von Beispielen und Indexaktualisierung	Beispielsammlungserklärung

Bearbeitbare Beispiele und Materialien

Betrachte beim Studieren von Referenzen die tatsächlich geöffneten Bilder und die entsprechenden SVGs, ordne lokale Effekte der Implementierungsweise zu und überlege, wie sie für das aktuelle Thema verwendet werden können. Spezifische Betrachtungswinkel und Beispiele findest du unter Referenz in Zeichnung umwandeln.

• Bau- und Codebeispiele: Verwendungsgrenzen von Objektmaßstäben, Licht und Schatten, Farbrollen und historischen Fällen.
• Themenvorlagen: Fünf Typografie-Bilder sowie SVG und PNG eines Suchfilterbildes.
• Originalbeispielsammlung: SVG und PNG von Lesezeichen, Kalender, Upload, mobilen Inhalten.
• Stilmaterialien: Verfügbare visuelle Referenzen.
• Referenzbilder und Analyse: Benutzerreferenzanalyse und Merkmalsindex.

Die Parameter in den Beispielen sind Implementierungen konkreter Werke und können geändert werden. Was gezeichnet wird, welche Techniken kombiniert werden und wie kommuniziert und ausgeliefert wird, bestimmt die aktuelle Aufgabe.