FASE 1 — Definisci il marchio e crea una bozza di contenuto (con richieste minime).

Innanzitutto, carica gli strumenti differiti che ti serviranno in seguito: chiama toolSearch per generateImage e generateWebpage in modo che siano pronti prima dei passaggi 2 e 3.

Successivamente, analizza il messaggio dell'utente e gli eventuali riferimenti @ per individuare: nome del marchio/studio, attività del marchio (focus), slogan, nomi dei progetti, elenco dei servizi e immagini caricate/citate (monitora questi elementi per il passaggio 2: NON rigenerare gli slot che occupano).

Chiedere le regole (siate parsimoniosi: l'utente preferisce interazioni concise):

- Se mancano SIA il nome del marchio CHE l'orientamento del marchio, chiama askUserQuestion UNA SOLA VOLTA con due domande raggruppate:

Q1 "Nome dello studio/marchio?" — opzioni come 'StudioNoir', 'Form & Field', 'Atelier 09', 'Object / Subject'.

D2 "Di cosa si occupa il marchio?" — opzioni come 'agenzia di design', 'studio fotografico', 'studio di architettura', 'marchio di moda', 'portfolio personale'.

- Se ne manca solo uno, chiedi solo a quello.

- Se entrambi sono presenti nel messaggio dell'utente, NON chiedere nulla — procedi direttamente.

Una volta definiti il ​​nome del brand e l'obiettivo, potete redigere il resto del testo in autonomia, senza ulteriori indugi. Tono: editoriale, sicuro di sé, minimalista, di alta qualità. Il testo deve essere conciso: questo stile si esprime attraverso gli spazi bianchi, non la prolissità.

Bozza:

- Slogan: due brevi righe che formano un'unica frase, ad esempio 'Progetta / il futuro', 'Inquadra / il mondo', 'Costruisci / ciò che dura', 'Fai / durare'. Ogni riga 1-2 parole. Abbina l'interruzione di riga a una divisione serif corsivo + serif normale.

- Descrizione: circa 80 parole, due brevi paragrafi. Menziona l'epoca di fondazione (ad esempio, "dagli anni '80"), un paio di servizi e un'atmosfera da clienti globali/premi di settore.

- TRE casi di studio. Per ciascuno: nome di progetto inventato che si adatti all'argomento (per un'agenzia di design riutilizzare nomi come 'Schematiq', 'Commercial Co.', 'Sprig & Sky'; per altri ambiti scegliere nomi simili), 1-2 tag di servizio, una frase di contesto di circa 30 parole, una frase di soluzione di circa 30 parole.

- SEI tag di servizio pertinenti all'ambito di intervento (predefiniti: Attivazione del marchio, Marketing integrato, Sviluppo di siti web, Produzione video, Identità del marchio, Strategia di marca - adattare per ambiti di intervento non legati ad agenzie).

- Slogan finale della call to action (una riga, circa 10-14 parole), ad esempio "Eleva il tuo marchio e lascia il segno nella storia".

- Elementi a piè di pagina: nome dello studio, 'Termini e condizioni di assistenza', 'Informativa sulla privacy'.

Mantieni tutto il contenuto in memoria per il passaggio 3. NON chiamare ancora generateWebpage.

FASE 2 — Assemblare esattamente 6 immagini monocromatiche coerenti.

Mappa degli slot: hero, about, project_1, project_2, project_3, feature.

A) Se l'utente ha già fornito immagini (caricamenti, riferimenti, URL nel messaggio), assegnarle agli slot nell'ordine in cui sono state ricevute e saltare la generazione per tali slot. Generare solo gli slot rimanenti.

B) Per ogni slot vuoto, chiama generateImage. Eseguili IN PARALLELO in un unico batch di strumenti, ove possibile.

Stile dell'immagine non negoziabile per ogni slot:

- Solo bianco e nero puro. Nessuna tinta di colore, niente seppia, niente duotono. Qualità editoriale/cinematografica/da rivista di alta gamma. Contrasto e grana uniformi su tutte e sei le immagini. Ampio spazio negativo dove richiesto dal layout.

Modelli di prompt per gli slot: sostituisci [DISCIPLINE] con il focus del marchio del passaggio 1 (ad esempio 'agenzia di design', 'studio fotografico', 'studio di architettura') e [DISCIPLINE_SUBJECT] con un soggetto appropriato (ad esempio per il design: scultura di carta / primo piano tipografico; per l'architettura: geometria delle ombre; per la moda: silhouette; per la fotografia: natura morta):

1. hero (formato 16:9): "Fotografia cinematografica in bianco e nero di [DISCIPLINE_SUBJECT], composizione editoriale di grande impatto, estetica monocromatica minimalista ed elegante, illuminazione dall'alto morbida, ampio spazio negativo, qualità da rivista premium, assenza di colore, contrasto elevato."

2. Informazioni (formato 4:3): "Fotografia documentaristica in bianco e nero di un interno di studio [DISCIPLINE] contemporaneo, ampie finestre con luce naturale soffusa, scrivania e strumenti minimalisti, stile reportage editoriale, solo monocromatico, alto contrasto."

3. progetto_1 (aspetto 1:1): "Composizione in bianco e nero di mockup di identità di marca — biglietti da visita, carta intestata, cancelleria stampata — su una superficie bianca pulita, fotografia editoriale nitida dall'alto, solo monocromatica."

4. progetto_2 (aspetto 1:1): "Natura morta minimalista in bianco e nero pertinente a [DISCIPLINE] (ad esempio ciak cinematografico, modellino, prodotto stilizzato), illuminazione da studio cinematografico, ombre nette, solo monocromia."

5. progetto_3 (aspetto 1:1): "Fotografia editoriale in bianco e nero di lifestyle, scena dallo stile minimalista pertinente a [DISCIPLINE], estetica da rivista premium, solo monocromatico."

6. Caratteristica (formato 16:9): "Ampia composizione astratta in bianco e nero pertinente a [DISCIPLINA], prospettiva drammatica, monocromia editoriale d'atmosfera, senza colore."

Una volta ottenuti tutti e sei gli URL, etichetta ciascuno con il proprio nome e procedi al passaggio 3.

FASE 3 — Creazione della pagina web.

Chiamare generateWebpage con as_artifact: true. Passare un singolo prompt di istruzioni dettagliato che contenga tutto quanto segue parola per parola: l'agente che esegue generateWebpage deve seguirlo alla lettera.

--- INIZIO PROMPT PAGINA WEB ---

Realizza un unico sito web portfolio scorrevole, elegante e in bianco e nero, in stile editoriale. È severamente vietato discostarsi dalle linee guida visive.

PALETTE (esclusiva: nessun'altra tonalità disponibile):

- Sfondo bianco: #FFFFFF

- Inchiostro nero e testo: #000000

- Una sezione scura può utilizzare il quasi nero: #0A0A0A

- Applicare il filtro CSS `filter: grayscale(1) contrast(1.02)` a ogni come misura di sicurezza, in modo che qualsiasi risorsa importata rimanga rigorosamente monocromatica.

TIPOGRAFIA:

- Visualizzazione: Google Font 'Fraunces' (utilizzare pesi 300 e 700, opsz 144). Variante corsiva disponibile per la parola principale in evidenza.

- Corpo: Google Font 'Inter' (pesi 400, 500). Corpo 16–18px, interlinea ~1.6.

- I titoli visualizzati sono enormi: clamp(56px, 12vw, 180px). Tracciamento -0.02em sul display.

- Maiuscoletto (`text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px`) per i tag di navigazione, i tag di servizio e i link nel piè di pagina.

RITMO DI DISPOSIZIONE:

- Padding verticale della sezione: clamp(80px, 12vh, 200px).

- Larghezza massima del contenitore: 1280px, margine laterale (24px, 6vw, 96px).

- Ampi spazi bianchi; non ammassare gli elementi.

INTERAZIONE:

- Barra di navigazione superiore fissa con una leggera sfocatura dello sfondo durante lo scorrimento.

- Pulsanti pillola: 1px solido #000, riempimento trasparente, raggio del bordo: 9999px, spaziatura interna 14px 28px. Al passaggio del mouse si inverte in sfondo #000 + colore #FFF, ease 200ms.

- Dissolvenza verso l'alto sottile attivata dallo scorrimento + traslazione verticale di 24px su ogni blocco principale (Intersection Observer).

- Righe di servizio: al passaggio del mouse il testo scorre e la freccia a destra si sposta di circa 12 pixel, con un'attenuazione di 200 ms.

REATTIVO:

- Sotto i 768px: i titoli si riducono a circa 64–88px, le griglie a due colonne si riducono a una sola colonna, le immagini mantengono l'intera larghezza all'interno del loro margine.

SEZIONI (in quest'ordine preciso):

1. NAVIGAZIONE (fissa): nome dello studio in alto a sinistra in maiuscolo; pulsante a forma di pillola "Collabora con noi" in alto a destra.

2. HERO (tutto bianco): titolo visualizzato diviso su due righe — riga 1 in Fraunces corsivo, riga 2 in Fraunces normale — utilizzando lo slogan dell'utente. Caratteri enormi. Piccola immagine monocromatica opzionale fluttuante in basso a destra (utilizzare l'immagine hero piccola qui OPPURE riservare hero per la sezione successiva). Discreto indicatore di scorrimento in basso.

3. INFORMAZIONI: titolo 'Informazioni su [studio]' in Fraunces 700. Griglia a 6 colonne: testo informativo a sinistra (colonne 1-3), immagine 4:3 a destra (colonne 4-6). Due brevi paragrafi.

4. INTESTAZIONE DELLA SEZIONE: 'Il nostro lavoro' in Fraunces 700, grande.

5. CASO DI STUDIO 1: nome del progetto (Fraunces enorme), riga dei tag di servizio in maiuscoletto (separati da un punto · centrale o da uno spazio). Sotto il nome: immagine del progetto a larghezza intera (usa project_1, 1:1 ritagliato in formato 16:9). Sotto l'immagine: griglia a due colonne: la colonna di sinistra mostra il numero '01' di grandi dimensioni (Fraunces 300, clamp(100px, 18vw, 220px)), l'etichetta 'Background' in maiuscoletto, quindi un corpo di circa 30 parole. La colonna di destra è la stessa con '02' e 'Solution'.

6. CASO DI STUDIO 2: stessa struttura del CS1 ma utilizzare l'immagine project_2. Facoltativamente, invertire l'immagine in modo che si trovi su una banda color bianco sporco — mantenere i colori rigorosamente all'interno della tavolozza.

7. CASO DI STUDIO 3: stessa struttura, utilizzare l'immagine project_3.

8. FASCIA IN EVIDENZA: immagine a tutta pagina (utilizzare lo slot per immagini in formato 16:9). Nessun testo sovrapposto.

9. COSA FACCIAMO: titolo 'Cosa facciamo' in Fraunces 700. Sotto, un elenco verticale dei 6 tag di servizio. Ogni riga: divisore sottile di 1px sopra (#000), nome del servizio a sinistra in Fraunces ~clamp(36px, 6vw, 80px), freccia '→' a destra. Cursore puntatore. Al passaggio del mouse si sposta a destra.

10. CTA: sezione scura a tutta pagina, sfondo #000. Titolo Massive Fraunces centrato in #FFF utilizzando lo slogan di chiusura della CTA. Padding clamp(120px, 20vh, 240px). Pulsante "Lavora con noi" sotto il titolo (bordo bianco, riempimento trasparente, al passaggio del mouse si inverte in sfondo bianco + testo nero).

11. PIÈ DI PAGINA: sfondo bianco, testo in caratteri grotesk maiuscoli. Nome dello studio a sinistra, link a destra ('Termini e assistenza', 'Informativa sulla privacy'). Bordo superiore sottile (#000, 1px). Note sul copyright in caratteri minuscoli su una seconda riga.

IMMAGINI — inserisci gli URL forniti nella sezione dati sottostante negli slot corrispondenti. Applica object-fit: cover e il filtro di sicurezza grayscale a ogni . Non aggiungere immagini decorative aggiuntive.

DATI — sostituisci questi nella pagina:

- nome_studio:

- slogan:

- about_copy:

- case_studies: array di tre { nome, tag[], background, soluzione } dal passaggio 1

- servizi: array di sei stringhe di tag di servizio dal passaggio 1

- cta_tagline:

- immagini: { hero, about, project_1, project_2, project_3, feature } dal passaggio 2

- footer_links: ['Termini e condizioni', 'Informativa sulla privacy']

--- FINE DEL MESSAGGIO DELLA PAGINA WEB ---

Quando chiami generateWebpage, passa as_artifact: true. Dopo che la funzione ha restituito il risultato, mostra all'utente un riepilogo di una riga nella sua lingua preferita e informalo che può chiedere di sostituire qualsiasi immagine, modificare il testo o rinominare i progetti.