Foto-Grafikdesigner & Art Director

Professional Photo Graphic Designer & Art Director Skill

Diese Fähigkeit verwandelt Rohfotos in hochwertige Social-Media-Grafiken, Postkarten und Gedenkposter. Anstatt KI-Bildgenerierung auf Fotos anzuwenden (was Gesichter verzerrt, Himmel verändert und thailändische Typografie zerstört), verwendet dieser Workflow HTML5 + CSS3 + benutzerdefinierte SVG-Vektorgrafiken + Google Fonts, gerendert in 4K-Retina-Auflösung (--force-device-scale-factor=2) via Headless Chrome und mit Python Pillow (subsampling=0) zusammengefügt.

---

Kern-Workflow (6 Phasen)

Phase 1: Fotoinspektion und automatisierte visuelle Analyse

1. Ziel-Foto anzeigen: Rufe immer zuerst read_file für das Zielfoto auf, um das Motiv, die Stimmung, die Beleuchtung und Hindernisse (z. B. Gesichter, Zeltstangen, Abspannleinen, Horizonte, Bäume) visuell zu erfassen.
2. Foto-Analyse-Skript ausführen: Führe analyze_photo.py auf dem Zielfoto aus, um folgende Werte zu extrahieren:
   • Exakte Pixelmaße, Seitenverhältnis und EXIF-Metadaten.
   • Eine 3×3-Gitter-Luminanz- und Negativraumkarte (identifiziert welche Zonen dunkel, mittel oder hell sind und welche Zonen wenig Detail für Typografie aufweisen).
   • Extrahierte Farbpalette (dominante Hintergrund-Hex-Farben + empfohlene kontrastreiche Akzent-Hex-Farben).

   python ".agents/skills/photo-graphic-designer/scripts/analyze_photo.py" "<image_path>"
   

---

Phase 2: Interaktive Stil- und Richtungsfindung

Bevor Grafiken generiert werden, konsultiere style_catalog.md und verwende ask_question, um dem Benutzer die Auswahl aus kuratierten Designrichtungen zu ermöglichen, die auf das Foto zugeschnitten sind:

1. Design-Stil-Auswahl (Präsentiere 3–5 am besten passende Stile aus den 12+ Stilen in style_catalog.md, plus die Option, mehrere Stile zum Vergleich generieren zu lassen):
   • Celestial & Starry Romance (Luxuriöse goldene Serife, Sternbildlinien, leuchtendes Sternenlicht, Astrolabium-Ränder)
   • Minimal Editorial / Magazine Postcard (Kinfolk / GO OUT / NatGeo-Layout, Haarfeine Gitter, Metadaten-Kopfzeile, Ortsstempel)
   • Warm & Cute Hand-Drawn Doodle (Gemütliche Lichterketten, skizzenhafte gestrichelte Ränder, schwebende Herzen, geschwungene Pfeilspitzen, handgeschriebene Schrift)
   • Vintage Film & Analog Kodachrome (Halation-Glühen, Filmrand, Datumsstempel, Retro-Serife)
   • Modern Glassmorphism & Floating UI (Mattglas-Karten, Musikplayer / Erinnerungsleiste, elegante serifenlose Schrift)
   • Outdoor Adventure & Retro Badge (Nationalpark / Camping-Emblem, topografische Linien, Kompass- und Kiefernvektoren)
   • Japanese Minimalist Poster (Zakka / Muji Vibe) (Vertikale/asymmetrische Typografie, großzügiger Weißraum, zarte Linienkunst)
   • Cinematic Letterbox & Story Subtitles (Anamorphotische Balken, Film-Titelblock, poetische zweisprachige Untertitel)
2. Seitenverhältnis und Ausgabeformat:
   • Ursprüngliches Seitenverhältnis (z. B. 3:2 Querformat 3600×2400)
   • Porträt Social Feed (4:5 2400×3000)
   • Quadratisch (1:1 2800×2800) oder Story/Reel (9:16 2160×3840)

---

Phase 3: Mehrsprachige Texterstellungs-Werkstatt (entscheidend!)

Allgemeine oder zu kitschige Zitate wirken oft unnatürlich ("ไม่ใช่ตัวเอง"). Bevor der Text finalisiert wird – oder wenn der Benutzer nach Wortideen fragt – lies copywriting_tones.md und verwende ask_question, um dem Benutzer die Auswahl oder Kombination von Formulierungen nach Abschnitt und Persönlichkeitston zu ermöglichen:

• Teile den Text in modulare Slots auf:
  1. Top-Badge / Überzeile (z. B. englischer Titel oder Anlass-Tag)
  2. Hauptüberschrift (Primäre thailändische/englische Begrüßung)
  3. Untertitel / Kernanker (Warme Schlüsselphrase)
  4. Hauptnachricht / Zitat-Box (2-zeilige herzliche Nachricht – oder Option zum Weglassen für ein klareres Aussehen)
  5. Motiv-Hinweis / Pfeil-Notiz (Kurzes süßes Etikett neben einem handgezeichneten Pfeil, der auf die Person/das Motiv zeigt – oder Option zum Weglassen)
• Biete 5–6 verschiedene Persönlichkeitstöne pro Slot an:
  • สายลุย-ชิลล์ๆ (Outdoor / Chill Partner): Natürlich, entspannt, Abenteuer-Kumpel-Vibe.
  • แมนๆ จริงใจ ไม่เลี่ยน (Sincere & Grounded): Ehrlich, warm, null peinlich.
  • อบอุ่น-เรียบง่าย (Warm & Classic): Sanft, wertschätzend, zeitlos.
  • กวนนิดๆ กันเอง (Playful & Teasing): Real-Partner-Banter mit Zuneigung.
  • โรแมนติก-ลึกซึ้ง (Poetic & Romantic): Sternenlicht, Schicksal, tiefe Emotion.
  • สั้นกระชับ-มินิมอล (Short & Punchy): Minimalistische Wirkung.

---

Phase 4: Komposition, Blickführung und Farbtheorie-Regeln

Konsultiere composition_and_color.md beim Erstellen der HTML/CSS/SVG-Overlays. Halte immer diese goldenen Regeln ein:

1. Schutzbereich für Motiv und Hindernisse:
   • Kartiere die genauen Begrenzungskoordinaten (x, y) von Gesichtern, Körpern und strukturellen Linien (wie Zeltstangen oder diagonalen Abspannleinen).
   • Lasse Text, schwebende Herzen, Sterne oder Pfeile niemals über Gesichter kreuzen oder ungeschickt mit Leinen kollidieren. Verschiebe Callout-Elemente sauber zur Seite einer jeden Leine/Linie.
2. Blickführung des Betrachters (Visuelle Vektorisierung):
   • Leite das Auge des Betrachters vom primären Typografie-Block (im freien Negativraum) -> entlang sekundärer Verzierungen / Callout-Pfeile -> direkt zum Gesicht/Lächeln des menschlichen Motivs.
   • Verwende geschwungene SVG-Pfade (<path d="M ... Q ...">), Mondsichel-Ausrichtung oder Sternschnuppen-Winkel, die auf das Motiv zeigen oder den Text nach innen rahmen, niemals das Auge vom Rand des Bildes wegführen.
3. Farbharmonie und adaptive Lesbarkeit:
   • 60-30-10-Farbregel:
     • 60% Basis-Foto-Umgebungston (z. B. Tiefes Mitternachtsblau #0A1530 oder Waldgrün).
     • 30% Primäre Typografie-Farbe (Hochkontrast-Warmes Elfenbein #FFFAF0 oder Reines Knallweiß #FFFFFF).
     • 10% Akzent-Highlight-Farbe, aus der Szene abgetastet oder harmonisiert (z. B. Warmes Lichterketten-Gold #FFE299, Champagner #F0CA86 oder Sanftes Korallenherz #FF7B93).
   • Platziere immer einen subtilen, unsichtbar berandeten radialen/linearen Verlauf (rgba(8, 16, 38, 0.38)) oder einen Mattglas-Container (backdrop-filter: blur(4px)) hinter dem Text, damit die Typografie über Sternen, Wolken oder Laubwerk 100% lesbar bleibt.
4. Thailändische Typografie-Perfektion:
   • Verwende white-space: nowrap auf mehrsätzigen thailändischen Zitatzeilen oder explizite <br>-Zeilenumbrüche an natürlichen Phrasengrenzen, damit thailändische Wörter (wie "ฉัน" oder "วัน") nie allein in einer Zeile hängen.
   • Lasse mindestens 35px–50px klaren Abstand zwischen großen thailändischen Anzeigetexten (die hohe obere Vokale/Tonmarken wie ั ิ ี ึ ื ่ ้ ๊ ๋ ์ und untere Vokale ุ ู haben) und umgebenden SVG-Sternen, Monden oder Rändern.

---

Phase 5: 4K-Retina-Rendering-Pipeline

Verwende render_graphic.py, um eine beliebige HTML/CSS/SVG-Vorlage über dem Zielfoto in 4K-Auflösung zu rendern:

python ".agents/skills/photo-graphic-designer/scripts/render_graphic.py" `
  --photo "DSC03461.jpg" `
  --html "path/to/design.html" `
  --output "DSC03461_Output.jpg" `
  --width 1800 --height 1200 --scale 2

• Warum --scale 2 und --virtual-time-budget=3000 wichtig sind:
  • Das Entwerfen in 1800×1200 CSS-Pixeln mit --force-device-scale-factor=2 erzeugt eine ultrascharfe 3600×2400 Retina-Ausgabe.
  • --virtual-time-budget=3000 stellt sicher, dass Google Fonts fertig heruntergeladen und angewendet werden, bevor Chrome das Bild erfasst (verhindert Systemschriftart-Fallback).
  • Das Speichern mit quality=96, subsampling=0 bewahrt 100% scharfe Kanten bei farbigem Text und dünnen Vektorlinien.

---

Phase 6: Obligatorische visuelle Qualitätssicherung

Nach dem Rendern jedes Bildes MUSST du die generierte .jpg-Datei mit read_file inspizieren und diese Checkliste überprüfen, bevor du sie dem Benutzer zeigst:

• Schriftart-Überprüfung: Wurden die beabsichtigten Google Fonts korrekt geladen (kein Tahoma/Arial-Fallback)?
• Keine Waisenkinder: Sind alle thailändischen Sätze sauber an beabsichtigten <br>-Stellen umbrochen, ohne einzelne nachgestellte Wörter?
• Null-Kollision-Prüfung: Berühren oder überlappen Sterne, Monde, Herzen, Ränder oder Pfeile thailändische Vokale/Tonmarken, menschliche Gesichter oder Zeltseile?
• Visuelles Gleichgewicht & Kontrast: Ist jede Textzeile sowohl aus der Miniaturansicht als auch im Vollbild mühelos lesbar?

Wenn bei der read_file-Inspektion ein Problem festgestellt wird, passe sofort die CSS/SVG-Koordinaten an und rendere neu, bevor das Ergebnis präsentiert wird.

---

Referenz-Vorlagen und Dokumentation

• Stil-Katalog & Schriftart-Paarungen: references/style_catalog.md
• Kompositions-, Blickführungs- und Farben-Leitfaden: references/composition_and_color.md
• Thailändisch- und Englisch-Texterstellungs-Matrix: references/copywriting_tones.md
• Verwendungsfertige HTML/SVG-Referenzvorlagen:
  • examples/style_starry_romantic.html
  • examples/style_minimal_magazine.html
  • examples/style_warm_cute_doodle.html