muhdaliyan/zeer

Zielsetzung

Generiere professionelle, hochwertige Bilder mit Googles Imagen 4 Modellen und integriere sie nahtlos in Webprojekte, Anwendungen oder kreative Arbeitsabläufe. Speichere generierte Bilder automatisch im entsprechenden Projektverzeichnis.

Fähigkeiten

Bildgenerierung

• Generiere fotorealistische Bilder aus Textbeschreibungen
• Erstelle Logos, Illustrationen und Grafiken für Websites
• Generiere Hero-Bilder, Hintergründe und visuelle Ressourcen
• Unterstützung für mehrere Seitenverhältnisse (1:1, 4:3, 16:9, 9:16)
• Generiere 1-4 Bilder pro Anfrage
• Hochauflösende Ausgabe mit SynthID-Wasserzeichen

Integration

• Automatisches Speichern von Bildern in Projektverzeichnissen
• Generiere passende Dateinamen basierend auf dem Inhalt
• Erstelle Bildressourcen für Webprojekte (HTML, React, usw.)
• Organisiere Bilder in logischen Ordnerstrukturen

Unterstützte Stile

• Fotografie (Porträts, Landschaften, Produktaufnahmen)
• Illustrationen (digitale Kunst, Skizzen, Gemälde)
• Logos und Markenmaterialien
• UI-Elemente und Hintergründe
• Historische Kunststile (Impressionismus, Art Deco, usw.)

Vorgehensweise

Wenn ein Benutzer eine Website/ein Projekt mit Bildern anfordert

1. Bildbedarf ermitteln

   • Analysiere die Projektanforderungen
   • Bestimme, welche Bilder benötigt werden (Hero, Logo, Icons, Hintergründe)
   • Frage den Benutzer, ob er KI-generierte Bilder mit Imagen wünscht

2. Bildgenerierung bestätigen

   • Präsentiere die Option: „Möchtest du, dass ich benutzerdefinierte Bilder mit Googles Imagen KI-Modell generiere?“
   • Wenn der Benutzer zustimmt, fahre mit der Generierung fort
   • Wenn der Benutzer ablehnt, verwende Platzhalterbilder oder überspringe diesen Schritt

3. Bilder generieren

   • Erstelle detaillierte, spezifische Prompts basierend auf dem Projektkontext
   • Verwende geeignete Seitenverhältnisse für jeden Anwendungsfall
   • Generiere Bilder mit dem Werkzeug generate_image

4. Speichern und integrieren

   • Speichere Bilder im Projektverzeichnis (z. B. website-name/images/)
   • Verwende beschreibende Dateinamen (z. B. hero-background.png, logo.png)
   • Aktualisiere HTML/CSS/React-Code, um auf die generierten Bilder zu verweisen
   • Gib die Bildpfade im Code an

Direkte Anfragen zur Bildgenerierung

Wenn der Benutzer direkt darum bittet, ein Bild zu generieren:

1. Anforderungen verstehen

   • Extrahiere Motiv, Stil und Kontext aus der Benutzeranfrage
   • Bestimme das geeignete Seitenverhältnis
   • Kläre alle unklaren Details

2. Detaillierten Prompt erstellen

   • Erstelle einen umfassenden Prompt nach den Best Practices von Imagen
   • Füge Motiv, Kontext, Stil und Qualitätsmodifikatoren hinzu
   • Halte die Prompts klar und beschreibend

3. Generieren und speichern

   • Verwende das Werkzeug generate_image mit dem erstellten Prompt
   • Speichere im entsprechenden Verzeichnis
   • Zeige dem Benutzer den Pfad des gespeicherten Bildes an

Richtlinien für Imagen-Prompts

Prompt-Struktur

[Stil] von [Motiv] [Kontext/Hintergrund] [Zusätzliche Details]

Fotografie-Prompts

• Beginne mit „Ein Foto von..." oder „Eine Fotografie von..."
• Füge Kameradetails hinzu: „35mm Porträt“, „Weitwinkel 10mm“, „Makroobjektiv 60mm“
• Füge Beleuchtung hinzu: „goldene Stunde“, „dramatische Beleuchtung“, „natürliches Licht“
• Füge Filmtypen hinzu: „Schwarzweißfilm“, „Film Noir“, „Polaroid“

Illustrations-Prompts

• Gib den Kunststil an: „digitale Kunst“, „Aquarellmalerei“, „Bleistiftskizze“
• Verweise auf Kunstrichtungen: „impressionistischer Stil“, „Art Deco“, „minimalistisch“
• Füge Qualitätsmodifikatoren hinzu: „hochdetailliert“, „professionell“, „preisgekrönt“

Logo-Prompts

• Verwende das Format: „Ein [Stil] Logo für ein Unternehmen der [Branche] auf einem einfarbigen Hintergrund. Füge den Text [Name] hinzu.“
• Stile: minimalistisch, modern, traditionell, geometrisch, abstrakt
• Halte den Text unter 25 Zeichen

Qualitätsmodifikatoren

Füge diese für bessere Ergebnisse hinzu:

• „hochdetailliert“
• „professionell“
• „preisgekrönt“
• „hohe Auflösung“
• „fotorealistisch“
• „4K-Qualität“

Seitenverhältnisse

Wähle basierend auf dem Anwendungsfall:

• 1:1 (Quadrat) – Soziale Medien, Profilbilder, Icons
• 4:3 (Vollbild) – Allgemeine Fotografie, Produktaufnahmen
• 3:4 (Hochformat) – Vertikale Layouts, mobile Bildschirme
• 16:9 (Breitbild) – Hero-Bilder, Banner, Landschaften
• 9:16 (Hochformat) – Mobile-first Designs, Stories

Werkzeug: generate_image

WICHTIG: Dies ist ein SIMULIERTES Werkzeug zu Demonstrationszwecken. Die tatsächliche Implementierung erfordert:

1. Google Cloud API-Schlüssel mit Imagen-Zugriff
2. Integration mit der google.genai Python-Bibliothek
3. Korrekte API-Konfiguration

Verwendung

generate_image(
    prompt="Ein modernes minimalistisches Logo für ein Technologie-Startup auf einem einfarbigen blauen Hintergrund",
    aspect_ratio="1:1",
    number_of_images=1,
    output_dir="website/images",
    filename="logo.png"
)

Parameter

• prompt (erforderlich): Detaillierte Textbeschreibung des Bildes
• aspect_ratio (optional): „1:1“, „4:3“, „3:4“, „16:9“, „9:16“ (Standard: „1:1“)
• number_of_images (optional): 1-4 (Standard: 1)
• output_dir (optional): Verzeichnis zum Speichern der Bilder (Standard: „generated_images“)
• filename (optional): Benutzerdefinierter Dateiname (Standard: automatisch generiert)

Beispiele

Beispiel 1: Hero-Bild einer Website

Benutzer: „Erstelle eine Landingpage für ein Café“

KI: „Ich erstelle eine Landingpage für dein Café. Möchtest du, dass ich ein benutzerdefiniertes Hero-Bild mit Googles Imagen KI generiere?“

Benutzer: „Ja, bitte“

KI: [Generiert Bild mit Prompt]
„Ein professionelles Foto eines gemütlichen Café-Innenraums, warme Beleuchtung, Holztische, Espressomaschine im Hintergrund, einladende Atmosphäre, Seitenverhältnis 16:9“

[Speichert unter coffee-shop/images/hero-background.jpg]
[Aktualisiert HTML, um das Bild zu verwenden]

Beispiel 2: Logo-Generierung

Benutzer: „Generiere ein Logo für meine Fitness-App namens FitTrack“

KI: [Generiert mit Prompt]
„Ein modern minimalistisches Logo für ein Fitnessunternehmen auf einem einfarbigen Hintergrund. Füge den Text FitTrack hinzu. Geometrische Formen, energiegeladen, professionell“

[Speichert unter generated_images/fittrack-logo.png]

Beispiel 3: Mehrere Ressourcen

Benutzer: „Erstelle eine Portfolio-Website und generiere Bilder dafür“

KI: „Ich erstelle deine Portfolio-Website. Möchtest du, dass ich benutzerdefinierte Bilder (Hero-Hintergrund, Platzhalter für Profilbild, Projekt-Thumbnails) mit Imagen KI generiere?“

Benutzer: „Ja, generiere sie“

KI: [Generiert mehrere Bilder]
1. Hero-Hintergrund: „Abstraktes geometrisches Muster, modern, professionell, gedeckte Farben, 16:9“
2. Projekt-Thumbnail 1: „Minimalistische Technikillustration, klare Linien, blau und weiß, 4:3“
3. Projekt-Thumbnail 2: „Kreatives Design-Mockup, moderne Benutzeroberfläche, professionell, 4:3“

[Speichert alle unter portfolio/images/]
[Aktualisiert HTML/CSS mit Bildverweisen]

Best Practices

1. Immer um Erlaubnis fragen – Frage den Benutzer, ob er KI-generierte Bilder wünscht, bevor du sie generierst
2. Kontextbezogene Prompts – Passe die Prompts an den Stil und Zweck des Projekts an
3. Geeignete Seitenverhältnisse – Wähle Seitenverhältnisse, die zum Anwendungsfall passen
4. Beschreibende Dateinamen – Verwende klare, semantische Dateinamen (hero-bg.png, nicht image1.png)
5. Organisierte Struktur – Speichere Bilder in logischen Verzeichnissen (images/, assets/, usw.)
6. Qualität zuerst – Verwende Qualitätsmodifikatoren für professionelle Ergebnisse
7. Bei Bedarf iterieren – Wenn der Benutzer nicht zufrieden ist, verfeinere den Prompt und generiere neu

Integration mit Frontend-Projekten

Beim Erstellen von Websites mit diesem Skill:

1. Erstelle zuerst das Bilder-Verzeichnis
2. Generiere Bilder, bevor du HTML/CSS schreibst
3. Verwende relative Pfade im Code: <img src="images/hero.jpg">
4. Füge Alt-Text hinzu, der das generierte Bild beschreibt
5. Ziehe responsive Bilder mit mehreren Größen in Betracht

Einschränkungen

• Imagen unterstützt nur englische Prompts
• Text in Bildern ist auf 25 Zeichen begrenzt
• Generierte Bilder enthalten ein SynthID-Wasserzeichen
• Erfordert Google Cloud API-Zugriff
• Es gelten Ratenbegrenzungen basierend auf der API-Stufe

Hinweise

Dieser Skill funktioniert am besten in Kombination mit:

• dem Skill frontend-design für die vollständige Website-Erstellung
• dem Skill code-helper für die Projekteinrichtung
• dem Skill file-operations für die Organisation von Ressourcen