SCHRITT 1 — Marke festlegen & Inhalte entwerfen (minimaler Aufwand).

Laden Sie zunächst die verzögerten Tools, die Sie später benötigen: Rufen Sie toolSearch für generateImage und generateWebpage auf, damit diese vor den Schritten 2 und 3 bereit sind.

Scannen Sie anschließend die Nachricht des Nutzers und alle @Erwähnungen nach: Marken-/Studio-Name, Tätigkeitsbereich der Marke (Fokus), Slogan, Projektnamen, Leistungsliste und alle hochgeladenen/referenzierten Bilder (diese für Schritt 2 erfassen – die entsprechenden Slots NICHT neu generieren).

Fragenregeln (sparsam formulieren – der Nutzer bevorzugt prägnante Interaktionen):

- Falls sowohl Markenname als auch Markenfokus fehlen, rufen Sie askUserQuestion EINMAL mit zwei zusammengefassten Fragen auf:

Frage 1: "Studio-/Markenname?" – Optionen wie 'StudioNoir', 'Formular & Feld', 'Atelier 09', 'Objekt / Subjekt'.

Frage 2: „Was macht die Marke?“ – Optionen wie „Designagentur“, „Fotostudio“, „Architekturbüro“, „Modelabel“, „persönliches Portfolio“.

- Falls nur eine Frage fehlt, fragen Sie nur diese eine.

- Falls beides in der Nachricht des Nutzers vorkommt, fragen Sie NICHTS – fahren Sie direkt fort.

Sobald Markenname und Fokus feststehen, verfassen Sie den Rest selbstständig. Ton: redaktionell, selbstbewusst, minimalistisch, hochwertig. Halten Sie den Text prägnant – dieser Stil lebt von Freiraum, nicht von Weitschweifigkeit.

Entwurf:

Tagline: Zwei kurze Zeilen, die als ein Satz gelesen werden, z. B. „Gestalte / die Zukunft“, „Gestalte / die Welt“, „Baue / das Dauerhafte“, „Mache / es dauerhaft“. Jede Zeile besteht aus 1–2 Wörtern. Der Zeilenumbruch wird durch eine Aufteilung in Serifenschrift (kursiv + normal) ergänzt.

- Über den Text: ca. 80 Wörter, zwei kurze Absätze. Erwähnen Sie die Gründungszeit (z. B. „seit den 80er Jahren“), einige Dienstleistungen und vermitteln Sie einen Eindruck von globalen Kunden und Branchenauszeichnungen.

- DREI Fallstudien. Für jede: ein erfundener Projektname, der zum Fokus passt (für eine Designagentur Namen wie „Schematiq“, „Commercial Co.“ oder „Sprig & Sky“ wiederverwenden; für andere Fokusse thematisch verwandte Namen wählen), 1–2 Service-Tags, ein Hintergrundsatz von ca. 30 Wörtern, ein Lösungssatz von ca. 30 Wörtern.

- SECHS Service-Tags, die für den Fokus relevant sind (Standardwerte: Markenaktivierung, Integriertes Marketing, Website-Entwicklung, Videoproduktion, Markenidentität, Markenstrategie – für Nicht-Agentur-Fokusse anpassen).

- Abschließender CTA-Slogan (eine Zeile, ca. 10–14 Wörter), z. B. „Stärken Sie Ihre Marke und schreiben Sie Geschichte.“

- Fußzeilenelemente: Studioname, „AGB & Support“, „Datenschutzrichtlinie“.

Alle Inhalte für Schritt 3 im Speicher halten. generateWebpage noch NICHT aufrufen.

SCHRITT 2 — Erstellen Sie genau 6 zusammenhängende Schwarzweißbilder.

Slot-Map: Held, Über, Projekt_1, Projekt_2, Projekt_3, Feature.

A) Falls der Nutzer bereits Bilder bereitgestellt hat (Uploads, @Referenzen, URLs in seiner Nachricht), ordnen Sie diese in der Reihenfolge ihres Eingangs den entsprechenden Slots zu und überspringen Sie die Generierung für diese Slots. Generieren Sie nur die verbleibenden Slots.

B) Rufen Sie für jeden leeren Slot die Funktion generateImage auf. Führen Sie diese nach Möglichkeit PARALLEL in einem einzigen Tool-Batch aus.

Unverhandelbarer Bildstil für jeden Slot:

Reines Schwarzweiß. Keine Farbtönung, kein Sepia, kein Duoton. Redaktionelle/filmische/hochwertige Magazinqualität. Gleichmäßiger Kontrast und gleichmäßige Körnung in allen sechs Bildern. Großzügiger Negativraum, wo es das Layout erfordert.

Vorlagen für die Eingabeaufforderung – ersetzen Sie [DISCIPLINE] durch den Markenfokus aus Schritt 1 (z. B. „Designagentur“, „Fotostudio“, „Architekturbüro“) und [DISCIPLINE_SUBJECT] durch ein passendes Thema (z. B. für Design: Papierskulptur / Typografie-Nahaufnahme; für Architektur: Schattengeometrie; für Mode: Silhouette; für Fotografie: Stillleben):

1. hero (aspect 16:9): "Filmreife Schwarzweißfotografie von [DISCIPLINE_SUBJECT], dramatische redaktionelle Komposition, elegante minimalistische monochrome Ästhetik, sanfte Oberbeleuchtung, viel Negativraum, erstklassige Magazinqualität, keine Farbe, hoher Kontrast."

2. about (aspect 4:3): "Schwarzweiß-Dokumentarfotografie eines zeitgenössischen [DISCIPLINE]-Studiointerieurs, große Fenster mit sanftem Tageslicht, minimalistischer Schreibtisch und Werkzeuge, redaktioneller Reportagestil, nur monochrom, hoher Kontrast."

3. project_1 (aspect 1:1): "Schwarz-weiße Flat-Lay-Aufnahme von Markenidentitäts-Mockups – Visitenkarten, Briefköpfe, bedruckte Geschäftspapiere – auf einer sauberen weißen Oberfläche, scharfe redaktionelle Designfotografie von oben, nur monochrom."

4. project_2 (aspect 1:1): "Schwarz-weißes minimalistisches Stillleben mit Bezug zu [DISZIPLIN] (z. B. Filmklappe, maßstabsgetreues Modell, gestyltes Produkt), filmische Studiobeleuchtung, scharfe Schatten, nur monochrom."

5. project_3 (aspect 1:1): "Redaktionelle Lifestyle-Fotografie in Schwarz-Weiß, minimalistisch inszenierte Szene mit Bezug zu [DISZIPLIN], hochwertige Magazinästhetik, ausschließlich monochrom."

6. Feature (Seitenverhältnis 16:9): „Breite, abstrakte Schwarz-Weiß-Komposition mit Bezug zu [DISZIPLIN], dramatische Perspektive, atmosphärische, redaktionelle Monochromie, keine Farbe.“

Sobald Sie alle sechs URLs haben, kennzeichnen Sie jede einzelne mit dem entsprechenden Slot und fahren Sie mit Schritt 3 fort.

SCHRITT 3 — Erstellen Sie die Webseite.

Rufen Sie generateWebpage mit as_artifact: true auf. Übergeben Sie eine detaillierte Anweisungseingabeaufforderung, die den unten stehenden Text wörtlich enthält – der Agent, der generateWebpage ausführt, muss diese genau befolgen.

--- BEGINN DER WEBSEITE-EINGABE ---

Erstellen Sie eine einzelne, lange, scrollbare Portfolio-Website im eleganten, monochromen Editorial-Stil. Strenge visuelle Vorgaben sind einzuhalten – Abweichungen sind nicht gestattet.

PALETTE (exklusiv – nirgendwo sonst erhältlich):

- Weißer Hintergrund: #FFFFFF

- Schwarze Tinte und Text: #000000

- Ein dunkler Bereich kann nahezu Schwarz verwenden: #0A0A0A

- Wenden Sie als Sicherheitsmaßnahme CSS `filter: grayscale(1) contrast(1.02)` auf jedes an, damit alle importierten Elemente streng monochrom bleiben.

TYPOGRAFIE:

- Anzeige: Google Font „Fraunces“ (Schriftstärken 300 und 700, Schriftgröße 144). Kursive Variante für hervorgehobene Wörter verfügbar.

- Textkörper: Google Font 'Inter' (Stärken 400, 500). 16–18px Textkörper, Zeilenhöhe ~1,6.

- Die Überschriften im Display sind riesig: clamp(56px, 12vw, 180px). Tracking -0,02em im Display.

- Kapitälchen (`text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px`) für Navigation, Service-Tags und Footer-Links.

LAYOUT-RHYTHMUS:

- Vertikaler Abstand des Abschnitts: clamp(80px, 12vh, 200px).

- Container max-width: 1280px, side ranters clamp(24px, 6vw, 96px).

- Großzügiger Weißraum; nicht zu eng gestalten.

INTERAKTION:

- Fixierte obere Navigationsleiste mit dezenter Hintergrundunschärfe beim Scrollen.

- Pill-Buttons: 1px durchgezogene Farbe #000, transparente Füllung, abgerundete Ecken: 9999px, Innenabstand 14px 28px. Beim Hovern wird die Hintergrundfarbe auf #000 + Farbe #FFF invertiert, Verzögerung: 200ms.

- Dezenter, scrollausgelöster Einblendeffekt + 24px Verschiebung in y-Richtung bei jedem Hauptblock (Intersection Observer).

- Servicezeilen: Hover-Text und Pfeil nach rechts ~12px, 200ms Verzögerung.

REAKTIONSFÄHIG:

- Unterhalb von 768px: Überschriften werden auf ca. 64–88px verkleinert, zweispaltige Raster werden zu einer Spalte reduziert, Bilder bleiben innerhalb ihres Innenabstands randlos.

ABSCHNITTE (in genau dieser Reihenfolge):

1. NAV (fixiert): Studioname oben links in Kapitälchen; Schaltfläche „Mit uns arbeiten“ oben rechts.

2. HERO (vollständig weiß): Zweizeilige Überschrift – Zeile 1 in Fraunces Kursivschrift, Zeile 2 in Fraunces Normalschrift – mit dem Slogan des Nutzers. Große Schriftgröße. Optionales kleines einfarbiges Akzentbild unten rechts (hier das kleine Hero-Bild verwenden ODER das Hero-Bild für den nächsten Abschnitt reservieren). Dezenter Scrollhinweis am unteren Rand.

3. ÜBER UNS: Überschrift „Über [Studio]“ in Fraunces 700. 6-spaltiges Raster: Text links (Spalten 1–3), Bild rechts (Spalten 4–6). Zwei kurze Absätze.

4. ABSCHNITTSKOPIE: „Unsere Arbeit“ in Fraunces 700, groß.

5. Fallstudie 1: Projektname (großes Fraunces), Service-Tags in Kapitälchen (getrennt durch Punkt · oder Leerzeichen). Unter dem Namen: Projektbild in voller Breite (Projekt_1 verwenden, 1:1, zugeschnitten auf 16:9). Unter dem Bild: zweispaltiges Raster – linke Spalte mit der übergroßen Zahl „01“ (Fraunces 300, clamp(100px, 18vw, 220px)), der Beschriftung „Hintergrund“ in Kapitälchen und anschließendem Text von ca. 30 Wörtern. Rechte Spalte mit „02“ und „Lösung“.

6. Fallstudie 2: Gleiche Struktur wie Fallstudie 1, aber Bild „project_2“ verwenden. Optional spiegeln, sodass das Bild auf einem getönten, cremeweißen Streifen liegt – Farben unbedingt innerhalb der Farbpalette halten.

7. Fallstudie 3: gleiche Struktur, Bild project_3 verwenden.

8. FEATURE-BAND: Randloses Breitbild (verwenden Sie den 16:9-Feature-Slot). Kein Text-Overlay.

9. WAS WIR TUN: Überschrift „Was wir tun“ in Fraunces 700. Darunter eine vertikale Liste der 6 Service-Tags. Jede Zeile: 1px schmaler Trennstrich oben (#000), Servicename links in Fraunces ~clamp(36px, 6vw, 80px), Pfeil „→“ rechts. Mauszeiger. Beim Überfahren mit der Maus gleitet der Cursor nach rechts.

10. CTA: Vollflächiger, dunkler Bereich, Hintergrund #000. Überschrift „Massive Fraunces“ zentriert in #FFF mit dem abschließenden CTA-Slogan. Innenabstand: 120px, 20px (vertikal), 240px (vertikal). Schaltfläche „Mit uns arbeiten“ unter der Überschrift (weißer Rahmen, transparente Füllung, Hover-Effekt: weißer Hintergrund + schwarze Schrift).

11. Fußzeile: Weißer Hintergrund, Schrift in Kapitälchen (Grotesk). Studioname links, Links rechts („AGB & Support“, „Datenschutzrichtlinie“). Schmaler oberer Rand (#000, 1px). Kleingedruckter Copyright-Vermerk in zweiter Zeile.

BILDER – Fügen Sie die unten im Datenbereich angegebenen URLs in die entsprechenden Felder ein. Wenden Sie auf jedes die Filter „object-fit: cover“ und „graustufen-Sicherheitsfilter“ an. Fügen Sie keine zusätzlichen dekorativen Bilder hinzu.

DATEN — Ersetzen Sie diese durch Folgendes auf der Seite:

- studio_name:

- Tagline:

- about_copy:

- case_studies: Array mit drei Elementen { Name, Tags[], Hintergrund, Lösung } aus Schritt 1

- services: Array von sechs Service-Tag-Strings aus Schritt 1

- cta_tagline:

- Bilder: { Held, Über uns, Projekt_1, Projekt_2, Projekt_3, Funktion } aus Schritt 2

- footer_links: ['Nutzungsbedingungen & Support', 'Datenschutzrichtlinie']

--- ENDE DER WEBSEITENEINGABE ---

Beim Aufruf von `generateWebpage` muss `as_artifact: true` übergeben werden. Nach der Rückgabe erhält der Benutzer eine einzeilige Zusammenfassung in seiner bevorzugten Sprache und wird darauf hingewiesen, dass er Bilder austauschen, Texte ändern oder Projekte umbenennen kann.