Prompt di design per un moodboard del brand

Crea una composizione HTML/CSS modificabile, con testo selezionabile e un foglio di stile per la stampa; tratta ogni illustrazione raster come una risorsa locale separata per [PROJECT] e [AUDIENCE]. L’attività è: moodboard del brand.

Contenuti e struttura obbligatori

Disponi i ruoli dei colori, i riferimenti tipografici, i materiali e gli spunti compositivi attorno a una direzione del brand formulata per iscritto.

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 nel progetto. Se non è stato fornito alcun sistema, parti da questa direzione: crema, antracite e verde oliva; gerarchia editoriale asimmetrica con ampio spazio negativo. Mantieni coerenti tipografia, spaziatura e ruoli dei colori. Dai priorità all’attività rispetto agli elementi decorativi ed evita una raccolta generica di schede scollegate.

Preparazione dei contenuti

Definisci le qualità previste del brand e raccogli riferimenti autorizzati per colore, tipografia, materiali e composizione. Indica il contributo di ciascun riferimento.

Layout e comportamento

Raggruppa i riferimenti in base al ruolo progettuale e spiega il legame con la direzione formulata per iscritto. Mantieni la moodboard abbastanza selettiva da guidare le scelte, anziché limitarti a mostrare immagini accattivanti.

Verifica di accettazione specifica dell'attività

• Etichetta le fonti d’ispirazione ed evita di far intendere che gli elementi copiati siano materiali definitivi del brand.
• Verifica se la moodboard consente di prendere una decisione progettuale concreta.
• Distingui le fonti d’ispirazione dagli elementi definitivi del brand ed evita di far intendere che un logo o un’opera citati come riferimento siano disponibili per il riutilizzo.

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.

Mantieni il testo esatto e i crediti obbligatori come testo attivo. Se le dimensioni previste non sono indicate, richiedile. Non inventare un codice QR funzionante, un codice a barre, una firma o un sigillo ufficiale.

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 moodboard del brand. Prima di procedere, identifica 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. Contenuto richiesto: disponi i ruoli dei colori, i riferimenti tipografici, i materiali e gli spunti compositivi attorno a una direzione del brand formulata per iscritto. Quando traduci l’immagine in elementi modificabili, segui queste indicazioni specifiche per il layout: raggruppa i riferimenti in base al ruolo progettuale e spiega il legame con la direzione formulata per iscritto. Mantieni la moodboard abbastanza selettiva da guidare le scelte, anziché limitarti a mostrare immagini accattivanti.

Direzione visiva dal brief di esempio

crema, antracite e verde oliva; gerarchia editoriale asimmetrica con ampio spazio negativo.

Output e modificabilità

Ricrea la grafica finale usando testo, forme e livelli immagine modificabili. Il riferimento è una composizione, non l’interfaccia di un editor; non aggiungere navigazione, moduli o widget da dashboard che non siano presenti. Raggruppa i riferimenti in base al ruolo progettuale e spiega il legame con la direzione formulata per iscritto. Mantieni la moodboard abbastanza selettiva da guidare le scelte, anziché limitarti a mostrare immagini accattivanti. Conferma le dimensioni previste e conserva la gerarchia del testo durante l’adattamento della grafica. Etichetta le fonti d’ispirazione ed evita di far intendere che gli elementi copiati siano materiali definitivi del brand.

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.