Goldener Raum

Golden Space

Erstelle das angeforderte visuelle Artefakt mit intentionaler Komposition und editierbarer Quelle, wo es angebracht ist. Respektiere den Inhalt, die Marke, das Medium, die Abmessungen und den Stil des Briefings. Wenn ein Poster oder ein Bild angefordert wird, erstelle das Artefakt und höre nicht bei Design-Ratschlägen, einem Plan oder einem Prompt zur Bildgenerierung auf.

Wähle und liefere das Artefakt aus

• Liefere das Format aus, das der Benutzer anfordert: editierbares SVG oder Raster wie PNG, JPEG oder WebP. Dies sind alternative endgültige Ausgaben; keine erfordert die Lieferung beider. Wenn kein Format angegeben ist, wähle SVG für vektorgeeignete Grafiken und Raster für fotografische oder malerische Arbeiten. Gib die Wahl bei Bedarf kurz an.
• Für vektorgeeignete Poster, Social-Media-Grafiken, flache Illustrationen, Diagramme und Symbole erstelle und speichere standardmäßig eine vollständige .svg-Datei. Der Benutzer muss nicht separat nach SVG fragen. Falls Rendering verfügbar ist, biete auch eine PNG-Vorschau an, ohne den editierbaren Master zu ersetzen. Eine explizite Anfrage für ein anderes Format hat Vorrang.
• Ein Raster-Poster oder eine flache Illustration kann als Zwischen-SVG komponiert und mit einem verfügbaren Renderer exportiert werden. Liefere die angeforderte Rasterdatei; füge die SVG-Quelle nur bei Bedarf hinzu. Ändere niemals die Dateierweiterung als Ersatz für das Rendern oder Kodieren des angeforderten Formats.
• Für Fotografie, Fotorealismus oder malerische Bilder wende dieselben Kompositionsbeschränkungen über das verfügbare Tool zur Bildgenerierung oder -bearbeitung an. Lies references/image-direction.md für diesen Workflow. Liefere das angeforderte Rasterbild. Wenn auch SVG angefordert wird, erstelle eine separate Vektorinterpretation, wenn möglich, und identifiziere Detailverluste; ersetze nicht stillschweigend den angeforderten visuellen Stil.
• Ein Rasterbild, das in ein SVG eingebettet ist, ist eine Hybridkomposition, kein vollständig editierbares Vektor-Kunstwerk. Biete es nur an, wenn es relevant ist, kennzeichne das eingebettete Raster deutlich und behalte Live-Text und separate Vektor-Overlays bei. Präsentiere es nicht als den unten beschriebenen portablen Vektor-Master.
• Verwende das Ausgabeverzeichnis des Benutzers und einen Dateinamen, der dem gewählten Format entspricht, z. B. poster.svg oder poster.png. Schreibe die Datei, wenn Dateiwerkzeuge verfügbar sind, und verlinke sie bei der Übergabe. Wenn das Schreiben von Dateien nicht verfügbar ist, gib den gesamten SVG-Quellcode zurück. Ein Code-Block ist ein Notfall, kein Ersatz für eine Datei, die die verfügbaren Tools erstellen können.

Etabliere die Komposition

Verwende das gelieferte Briefing. Wenn Details fehlen, wähle angemessene Standardwerte und gib sie kurz an. Frage nur nach, wenn die fehlende Antwort das Ergebnis wesentlich verändert. Für ein bestehendes Design bewahre seinen Zweck und seine nützliche visuelle Sprache.

Identifiziere die Botschaft, das Fokuselement, die Lesereihenfolge, die Ausgabegröße und die kleinste beabsichtigte Anzeigegröße. Erstelle vor der Generierung eine kompakte interne Designspezifikation: Fokusplatzierung, Proportion oder Raster, sichere Ränder, Abstandsbeziehungen, Typ-Rollen, Palette und eventuell geschützte Kopierbereiche. Verwende sie, um das SVG zu konstruieren oder das Bildwerkzeug zu steuern. Das Benennen von Prinzipien in einer abschließenden Erklärung ist nicht ausreichend. Für konkrete proportionale und optische Entscheidungen lies references/composition.md.

• Behandle den Goldenen Schnitt phi = (1 + sqrt(5)) / 2, etwa 1.618, als optionale Beziehung. Eine brauchbare Aufteilung ist etwa 61.8% / 38.2% nach Rändern und Zwischenräumen. Vergleiche ihn mit gleichen Spalten, Dritteln oder einem inhaltsgesteuerten Layout. Behalte ihn nur, wenn der Inhalt und der optische Ausgleich davon profitieren. Behaupete niemals, dass ein Verhältnis Schönheit beweist, oder füge eine Spirale nur hinzu, um Raffinesse zu signalisieren.
• Gib Weißraum eine Aufgabe: Themen trennen, verwandte Elemente verbinden, Lesbarkeit schützen oder Fokus schaffen. Innerhalb von Gruppen sollte der Abstand normalerweise kleiner sein als der Abstand zwischen Gruppen. Erzwinge keinen universellen Prozentsatz leerer Leinwand.
• Baue Hierarchie mit bewussten Unterschieden in Größe, Gewicht, Position und Raum auf. Verwende Ausrichtung und wiederholte Intervalle, um Beziehungen sichtbar zu machen. Passe geometrisch ausgerichtete Kreise, Diagonalen und Beschriftungen an, wenn sie außermittig wirken.
• Lasse Palette und Schrift dem Thema dienen. Halte Fließtext in der Ausgabegröße lesbar; verkleinere Text nicht, um eine überfüllte Komposition zu retten. Erfinde keinen Text, um Platz zu füllen.
• Für Informationsgrafiken und Oberflächen vermittle Bedeutung mit Beschriftungen oder Formen sowie mit Farbe. Überprüfe den Kontrast vor dem tatsächlichen Hintergrund. Farbschwellen und Anwendbarkeit findest du in der Kompositionsreferenz.

Erstelle den editierbaren SVG-Master

Lies references/svg-contract.md, bevor du SVG generierst oder bearbeitest, einschließlich einer Zwischenquelle, die für den Rasterexport verwendet wird. Der Standard ist ein statischer, autarker, reiner Vektor-editierbarer Master. Dieser Abschnitt gilt für die SVG-Erstellung; die Rasterausgabe muss sich nicht als editierbarer Vektorinhalt tarnen.

• Erstelle ein vollständiges SVG-Dokument mit einem SVG-Namensraum und einer korrekt dimensionierten viewBox. Für ein endgültiges SVG-Lieferobjekt speichere und verlinke die .svg-Datei. Ersetze niemals eine Bitmap, die in SVG eingebettet ist, oder einen Vorschau-Screenshot.
• Halte unabhängige Objekte unabhängig auswählbar. Verwende beschreibende eindeutige IDs, flache semantische Gruppen, primitive Formen, wo geeignet, und kompakte Pfade nur dort, wo Kurven sie erfordern. Verwandle nicht ein ganzes Design in einen zusammengesetzten Pfad.
• Halte Text als Live-<text> / <tspan> im Master. Deklariere eine Schriftfamilie mit Fallback und lege das Substitutionsrisiko offen. Eine optionale umrissene Verteilungskopie ist ein separates Artefakt; das Umreißen entfernt die Textbearbeitbarkeit.
• Bevorzuge Präsentationsattribute und einfache Transformationen. Vermeide externe Abhängigkeiten, Skripte, eingebettete Rasterinhalte, HTML, Animationen, Filtereffekte und CSS-gesteuertes Aussehen im portablen Master. Verwende lokale Gradienten- oder Beschneidungsdefinitionen nur, wenn sie einem sichtbaren Zweck dienen. Kompatibilitätsempfindliche Funktionen müssen im beabsichtigten Editor geprüft werden, nicht durch eine ungetestete Kompatibilitätsbehauptung.
• Behalte IDs, Live-Text, Gruppen und sinnvolle Präzision beim Bereinigen einer vorhandenen Datei. Führe keine zerstörerische Optimierung durch oder flattene eine Quell-Master-Datei stillschweigend.

Passe assets/starter.svg nur an, wenn seine Struktur zum Briefing passt. Seine Proportionen, Ausrichtung, Farben und sein Stil sind Beispiele, keine Standardwerte, die in jede Ausgabe kopiert werden müssen.

Überprüfe und übergib

Für ein endgültiges oder zwischenzeitliches SVG führe den gebündelten Strukturprüfer aus, wenn Python verfügbar ist:

python <skill-verzeichnis>/scripts/check_svg.py artwork.svg

Behebe Fehler. Überprüfe jede Warnung; es ist eine Aufforderung zur Überprüfung, kein automatischer Beweis für schlechtes Design. --strict schlägt auch bei Warnungen fehl; --json gibt einen maschinenlesbaren Bericht aus. Der Prüfer deckt ein konservatives Autorenprofil ab, nicht alle gültigen SVG-Dateien. Er misst nicht die visuelle Qualität, den Kontrast, das Beschneiden, die Pfadgeometrie oder die Wiedergabetreue zwischen Editoren. Bezeichne ihn nicht als Sicherheitssanitizer.

Für die Rasterausgabe überprüfe das tatsächliche kodierte Format, die Pixelabmessungen, das Seitenverhältnis und den angeforderten Hintergrund oder die Transparenz. PNG oder geeignetes WebP können Alphakanäle bewahren; JPEG benötigt einen bewussten opaken Hintergrund. Überprüfe die Komprimierung und die Kantenqualität in der Ausgabegröße. Sende kein PNG oder JPEG durch den SVG-Prüfer.

Überprüfe vor der Übergabe das tatsächliche visuelle Ergebnis anhand der Designspezifikation:

• Ist das beabsichtigte Motiv oder die Botschaft der Einstiegspunkt mit einer klaren Lesereihenfolge?
• Schützen sichere Ränder wesentliche Inhalte mit zweckmäßigem Raum um den Fokus?
• Sind die Abstände innerhalb und zwischen den Gruppen deutlich und ohne versehentliche Berührungen?
• Passt die gewählte Proportion zum Inhalt, ohne ihn zu verkleinern oder zu überfüllen?
• Sind Text, Farbbeziehungen, Grundlinien und Strichstärken lesbar und kohärent in der beabsichtigten Größe, ohne versehentliches Beschneiden oder erfundene Beschriftungen?

Rendere SVG in der Ausgabegröße und, wenn möglich, eine kleinere Vorschau. Überprüfe die Ausgabe und korrigiere beobachtete Probleme vor der Lieferung; zähle nicht nur die befolgten Regeln auf. Wende dieselbe visuelle Überprüfung auf die Rasterausgabe an. Formeln und strukturelle Linting können keine ästhetische Qualität garantieren. Wenn ein Editor verfügbar ist, öffne den SVG-Master und verifiziere, dass Text und repräsentative Formen unabhängig ausgewählt und geändert werden können. Wenn Rendering oder Editor-Überprüfung nicht verfügbar ist, melde diese Einschränkung, ohne zu behaupten, dass der Test bestanden wurde.

Liefere die tatsächliche Datei im gewählten Format (oder den vollständigen SVG-Quellcode, wenn das Schreiben von Dateien für eine SVG-Aufgabe nicht verfügbar ist) plus eine kurze Notiz zur Komposition, Schriftarten und tatsächlich durchgeführten Überprüfungen. Füge die genauen Abmessungen und die gewählte Proportion bei, wenn relevant. Halte eine Vorschau getrennt von der Quelle. Füge keinen Design-Essay hinzu, es sei denn, er wird angefordert. Respektiere SVG- oder raster-spezifische Übergaben.