Usa il prompt
Aggiungi il tuo brief
Aggiungi qui sotto il tuo contesto. Verrà incluso nel prompt quando lo copi o lo scarichi.
Crea un sito web HTML responsive usando lo stack esistente del progetto per [PROJECT] e [AUDIENCE]. L'attività è: Case study cliente.
Contenuti e struttura obbligatori
Struttura la storia in contesto, sfida, approccio, prove e limiti residui.
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 viene fornito alcun sistema, parti da questa direzione: tipografia nera marcata, pannelli giallo caldo e composizioni geometriche nette; contrasto controllato. Mantieni coerenti i ruoli di caratteri, spaziatura e colori. Dai priorità all'attività rispetto agli elementi decorativi ed evita una raccolta generica di schede non correlate.
Preparazione dei contenuti
Componi una narrazione approvata sul cliente includendo situazione iniziale, vincoli, lavoro svolto e prove dei risultati. Conserva le note sulle fonti per ogni citazione e metrica.
Layout e comportamento
Racconta la storia seguendo la sequenza problema, decisione, implementazione e risultato. Associa ogni risultato al relativo periodo di misurazione e ambito, affinché il case study spieghi cosa è cambiato.
Verifica di accettazione specifica dell'attività
- Attribuisci ogni citazione e metrica alle prove approvate fornite.
- Confronta l'affermazione mostrata con le prove sottostanti.
- Attribuisci correttamente il lavoro condiviso e mantieni visibili i limiti quando più fattori possono aver contribuito al risultato.
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 case study cliente. Prima di iniziare, 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 per l'attività: struttura la storia in contesto, sfida, approccio, prove e limiti residui. Nel tradurre l'immagine in elementi modificabili, segui queste indicazioni specifiche per il layout: racconta la storia seguendo la sequenza problema, decisione, implementazione e risultato. Associa ogni risultato al relativo periodo di misurazione e ambito, affinché il case study spieghi cosa è cambiato.
Direzione visiva dal brief di esempio
Tipografia nera marcata, pannelli giallo caldo e composizioni geometriche nette; contrasto controllato.
Specifiche di interazione
Il riferimento è un concept statico: il comportamento descritto di seguito è un requisito da implementare, non una prova che l'immagine sia già funzionale. Copia il prompt personalizzato nel progetto di lavoro. Inizia dall'attività principale: struttura la storia in contesto, sfida, approccio, prove e limiti residui. Attribuisci ogni citazione e metrica alle prove approvate fornite. Per ogni controllo visibile, specifica l'evento di attivazione, lo stato interessato e il feedback; implementa le modifiche locali mantenendo uno stato coerente tra le viste correlate. Fai in modo che ricerca e filtri producano risultati reali, che i controlli di selezione abbiano uno stato attivo esplicito e che le azioni di salvataggio mostrino, ove pertinente, un feedback visibile di operazione in corso, riuscita o non riuscita. 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 backend sia riuscita quando è cambiata solo una demo locale.
Confronto visivo e consegna
- 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.
- Quindi testa il layout stretto senza comprimere il testo desktop in etichette minuscole.
- 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.
Scarica prompt + immagine
Include il prompt completo e l'immagine di riferimento a grandezza intera. Allega entrambi in OpenDesign per guidare il layout.
Come scrivere un prompt di design per un case study cliente
Usa questo prompt di design per case study cliente per strutturare la storia in contesto, sfida, approccio, prove e limiti residui.
Il riferimento è un concept generato dall'IA. Le istruzioni seguenti descrivono cosa creare e testare; l'immagine non dimostra un comportamento funzionante.
Collega il risultato dichiarato al lavoro svolto
Un case study cliente deve spiegare in che modo l'approccio ha affrontato la sfida indicata.
Risultati privi di ambito, tempistiche o attribuzione possono rendere la storia persuasiva ma impossibile da valutare. Racconta la storia seguendo la sequenza problema, decisione, implementazione e risultato. Associa ogni risultato al relativo periodo di misurazione e ambito, affinché il case study spieghi cosa è cambiato.
Dal prompt
Racconta la storia seguendo la sequenza problema, decisione, implementazione e risultato.
Personalizzalo
Struttura [CASE_EVIDENCE] in contesto, sfida, approccio e risultato. Associa [SOURCE] e [PERIOD] a ogni metrica e mantieni i limiti di ciò che le prove dimostrano.
Prepara i contenuti del case study cliente
Tre colonne illustrano il contesto del cliente, il problema e la risposta. Fornisci un resoconto specifico della situazione prima e dopo, anziché lasciare che la citazione nella sezione hero racconti l’intera storia.
Componi una narrazione approvata sul cliente includendo situazione iniziale, vincoli, lavoro svolto e prove dei risultati. Conserva le note sulle fonti per ogni citazione e metrica.
Dal prompt
Struttura la storia in contesto, sfida, approccio, prove e limiti residui.
Personalizzalo
Per [PROJECT], usa [APPROVED_CONTENT] come fonte per questo case study cliente. Componi una narrazione approvata sul cliente includendo situazione iniziale, vincoli, lavoro svolto e prove dei risultati. Conserva le note sulle fonti per ogni citazione e metrica. Individua gli input mancanti prima di sostituirli con contenuti dimostrativi.
Traccia ogni citazione e dato numerico
Le ultime due colonne separano le evidenze quantitative dai limiti residui. Verifica le definizioni e le fonti delle metriche; i numeri dimostrativi fittizi non costituiscono risultati utilizzabili relativi ai clienti.
Verifica attribuzione e periodi di confronto. Se un risultato è solo correlato al lavoro, non riscriverlo come un effetto causale dimostrato. Confronta l'affermazione mostrata con le prove sottostanti. Attribuisci correttamente il lavoro condiviso e mantieni visibili i limiti quando più fattori possono aver contribuito al risultato.
Dal prompt
Attribuisci ogni citazione e metrica alle prove approvate fornite.
Personalizzalo
Verifica il case study cliente rispetto a questo requisito: attribuire ogni citazione e metrica alle prove approvate fornite. Confronta l'affermazione mostrata con le prove sottostanti. Attribuisci correttamente il lavoro condiviso e mantieni visibili i limiti quando più fattori possono aver contribuito al risultato. Mantieni i contenuti approvati e modifica solo le parti che non superano questa verifica.
Verifica il risultato del case study cliente
I testi generati, i percorsi e la struttura visiva devono essere sottoposti a revisione. Non collegare moduli, pagamenti o servizi esterni reali senza implementare e testare tali flussi.
- Confronta l'affermazione mostrata con le prove sottostanti. Attribuisci correttamente il lavoro condiviso e mantieni visibili i limiti quando più fattori possono aver contribuito al risultato.
Prompt di follow-up
Usalo dopo il primo risultato. Restringe la revisione alla parte più importante di questa attività.
Perfeziona l'attuale case study cliente. Confronta l'affermazione mostrata con le prove sottostanti. Attribuisci correttamente il lavoro condiviso e mantieni visibili i limiti quando più fattori possono aver contribuito al risultato. Mantieni i contenuti approvati e la direzione visiva; modifica solo le parti necessarie per risolvere questi problemi.
