Crea un sito web responsive in HTML usando lo stack esistente del progetto per [PROJECT] e [AUDIENCE]. L’attività è: kit stampa e media. ## Contenuti e struttura obbligatori Offri una breve descrizione fattuale dell’azienda, i loghi approvati, schermate e contatti per la stampa. Usa [APPROVED_CONTENT] come fonte per nomi, date, dati, dichiarazioni e destinazioni. Elenca gli input mancanti prima di sostituire qualsiasi elemento. Se è necessaria una dimostrazione, indica che i contenuti sono fittizi. Non inventare citazioni di clienti, classifiche, loghi di partner o funzionalità del prodotto. ## Direzione del design Usa [BRAND_RULES] e il design system già selezionato per il progetto. Se non è stato fornito alcun sistema, parti da questa direzione: crema caldo, verde oliva tenue e terracotta; materiali tattili e un ritmo editoriale pacato. Mantieni coerenti i ruoli di tipografia, spaziatura e colore. Dai priorità all'attività rispetto agli elementi decorativi ed evita una raccolta generica di schede non correlate. ## Preparazione dei contenuti Prepara la descrizione approvata dell’azienda, le varianti aggiornate del logo, le didascalie delle immagini, le linee guida per l’utilizzo e un contatto per la stampa. Indica quali risorse sono adatte a sfondi chiari e scuri. ## Layout e comportamento Organizza i download in base alle esigenze di un giornalista: una breve descrizione, i file del logo, le immagini dei prodotti e le informazioni di contatto. Mostra l’anteprima della risorsa esatta accanto al relativo formato e alla nota d’uso. ## Verifica di accettazione specifica dell'attività - Indica le regole di utilizzo delle risorse ed evita di inventare copertura mediatica o premi. - Confronta ogni file scaricabile con la relativa anteprima, inclusi i loghi trasparenti. - Rimuovi le immagini obsolete dei prodotti ed evita di usare i loghi delle testate come approvazioni implicite. ## Implementazione e revisione Mantieni il testo modificabile. Usa una struttura semantica, controlli descrittivi, un focus da tastiera visibile e stati vuoti/di errore appropriati. Verifica i layout stretti e ampi. Rispetta le preferenze per la riduzione del movimento. Mantieni il framework e le dipendenze esistenti del progetto; non sostituire lo stack senza segnalarlo. Restituisci i file modificabili e spiega eventuali comportamenti incompleti o input non supportati. Esamina questa attività specifica prima di proporre funzionalità aggiuntive. ## Allegato di riferimento e obiettivo di ricostruzione Allega reference.webp, incluso nel pacchetto scaricabile di questo prompt, insieme al prompt in OpenDesign. Crea un risultato modificabile con composizione e gerarchia simili; non incorporare l'intera immagine di riferimento come interfaccia finale. Mantieni i contenuti di progetto approvati e le regole del brand se sono in conflitto con le etichette fittizie dell'esempio. Se l'immagine manca o è illeggibile, richiedila invece di dichiarare fedeltà visiva. ## Composizione e contenuti di riferimento Usa il file reference.webp allegato come riferimento visivo per il kit stampa e media. Prima di procedere allo sviluppo, individua dall’alto verso il basso le aree principali, le relative larghezze e altezze, l’allineamento, la spaziatura, la gerarchia tipografica, i colori delle superfici, i bordi, le immagini e i componenti ricorrenti. Mantieni queste relazioni anziché sostituirle con un modello generico. Contenuti richiesti: offri una breve descrizione oggettiva dell’azienda, loghi approvati, screenshot e contatti stampa. Segui queste indicazioni specifiche per il layout nel tradurre l’immagine in elementi modificabili: organizza i download in base alle esigenze di un giornalista: una breve descrizione, file dei loghi, immagini del prodotto e informazioni di contatto. Mostra l’anteprima della risorsa esatta accanto al relativo formato e alla nota sull’utilizzo. ## Direzione visiva dal brief di esempio crema caldo, verde oliva tenue e terracotta; materiali tattili e un ritmo editoriale pacato. ## Specifiche di interazione Il riferimento è un concept statico: il comportamento descritto di seguito è un requisito da implementare, non la prova che l’immagine sia già funzionante. Copia il prompt personalizzato nel tuo progetto di lavoro. Inizia dall’attività principale: offrire una breve descrizione oggettiva dell’azienda, loghi approvati, screenshot e contatti stampa. Indica le regole di utilizzo delle risorse ed evita di inventare copertura mediatica o premi. Per ogni controllo visibile, specifica l’evento che lo attiva, lo stato interessato e il feedback; implementa le modifiche locali mantenendo uno stato coerente tra le viste correlate. Assicurati che ricerca e filtri restituiscano risultati reali, che i controlli di selezione abbiano uno stato attivo esplicito e che le azioni di salvataggio mostrino, ove opportuno, feedback visibili per gli stati in attesa, riuscito e non riuscito. Non aggiungere flussi di lavoro non pertinenti. Usa link appropriati per la navigazione, pulsanti per le azioni e nomi accessibili per i controlli con icone. Non lasciare intendere che un’operazione di backend sia riuscita quando è cambiata soltanto una demo locale. ## Confronto visivo e consegna 1. Confronta il risultato con l'immagine allegata usando le stesse proporzioni. Prima di perfezionare i dettagli decorativi, verifica il posizionamento delle aree principali, le dimensioni relative delle immagini, le interruzioni di riga, la spaziatura, la gerarchia tipografica, il contrasto, gli stati attivi e la densità dei contenuti. 2. Quindi testa il layout stretto senza comprimere il testo desktop in etichette minuscole. 3. Mantieni loghi, foto e icone come risorse separate e tutte le etichette significative modificabili. Elenca eventuali caratteri o risorse non disponibili e qualsiasi scostamento intenzionale. Restituisci i file funzionanti insieme a una descrizione concisa dei comportamenti implementati e delle integrazioni ancora necessarie; non promettere un risultato identico al pixel basandoti solo sul prompt.