CodeKitHubChe cos'è questo strumento?
Il Generatore di Chat Personalizzato è uno strumento di mockup basato sul browser per creare uno screenshot di chat non ancorato all'identità di marca di una singola app reale. Invece di un colore di marca fisso, ottieni un selettore di colore per il fumetto "inviato" e uno per il fumetto "ricevuto", così puoi abbinare un'app fittizia, un concetto UI ipotetico, o semplicemente i colori adatti al tuo meme o alla tua presentazione.
Questo è utile quando vuoi un mockup di chat per una storia, un wireframe, o una battuta su un'app inventata, e non vuoi che il branding riconoscibile di uno specifico messenger reale distragga dal punto.
Solo per uso ricreativo e di design: questo strumento è pensato per battute, meme, sketch, slide di presentazione, prototipi UI/UX e contenuti social. Non deve mai essere usato per fabbricare prove fraudolente, molestare o diffamare qualcuno, o impersonare i messaggi reali di una persona vera — farlo può essere illegale a seconda della tua giurisdizione e va strettamente contro l'uso previsto di questo strumento.
Nulla di ciò che scrivi lascia mai il tuo dispositivo — l'intera conversazione viene disegnata con l'API HTML Canvas direttamente nel browser, e il PNG viene generato e scaricato localmente. Nessun upload su server, nessun account, nessun tracciamento del contenuto dei tuoi messaggi.
Perché usarlo?
- Stai disegnando una striscia a fumetti o un webtoon che mostra una conversazione testuale tra due personaggi nella tua app fittizia — non iMessage o WhatsApp — e ti servono colori dei fumetti coerenti con il mondo della tua storia invece che con un brand reale.
- Un cliente ti ha chiesto un mockup di UI di chat in un pitch deck e il tuo prodotto non esiste ancora — costruisci uno screenshot con i colori brand che hai effettivamente pianificato invece di mostrare l'interfaccia di un messenger reale.
- Stai facendo un meme dove la battuta dipende dal fatto che nessuno riconosca da quale app "proviene" — un fumetto di chat generico e dai colori personalizzati mantiene l'attenzione sulla battuta invece che sulla piattaforma.
- Un designer UX deve mostrare agli stakeholder come apparirà una funzione di chat con la palette colori reale del prodotto applicata, prima ancora che venga scritta una riga di codice frontend vero.
- Vuoi ricreare un'estetica di chat specifica di uno show, un videogioco o un universo fittizio (ad esempio una chat da terminale sci-fi) dove i colori non corrispondono affatto a nessuna app di messaggistica reale.
- Rendering 100% locale — il testo della tua conversazione non tocca mai un server.
Come si usa
- Imposta il nome del contatto, il testo di stato e scegli il tema chiaro o scuro per il resto dell'interfaccia.
- Scegli un colore per il fumetto inviato e uno per il fumetto ricevuto usando i due selettori di colore.
- Carica una foto per l'avatar, oppure lascialo come cerchio colorato con iniziali.
- Aggiungi righe di messaggio: scrivi il testo, scegli un lato (loro/io) e un orario.
- Regola la barra di stato (ora, batteria, segnale) a piacere.
- Guarda l'anteprima a forma di telefono aggiornarsi in tempo reale, poi clicca su "Scarica PNG" per salvare l'immagine.
Esempio
Input
Contatto: "Alex" · Fumetto inviato: viola · Fumetto ricevuto: grigio chiaro · Messaggio 1 (loro): "Confermato per stasera?" · Messaggio 2 (io): "Sì! Ci vediamo alle 8 😊"Risultato
Un'immagine PNG 375×812 che mostra una schermata di chat con un fumetto grigio chiaro a sinistra contenente il primo messaggio, e un fumetto viola a destra contenente la risposta — usando esattamente i colori che hai scelto.L'immagine viene generata istantaneamente nel canvas di anteprima live e si scarica con un clic — senza attese, senza upload.
Cosa puoi personalizzare
- Nome del contatto, testo di stato e tema chiaro/scuro per il resto dell'interfaccia.
- Colori del fumetto inviato e del fumetto ricevuto, scelti in modo indipendente.
- Avatar: carica una foto vera (ritagliata in cerchio) o scegli un colore predefinito.
- Righe di messaggio illimitate, ognuna con testo, lato (loro/io) e orario propri.
- Barra di stato del telefono: ora, percentuale di batteria e intensità del segnale.
Generatore di Chat Personalizzato vs. generatori specifici per piattaforma
| Situazione | Strumento migliore |
|---|---|
| Deve sembrare uno screenshot reale di WhatsApp/iMessage/WeChat | Usa invece il generatore dedicato di quell'app |
| Stai creando un mockup per un'app fittizia o non ancora rilasciata | Generatore di Chat Personalizzato — scegli i tuoi colori dei fumetti |
| Stai facendo un meme dove l'app non deve essere riconoscibile | Generatore di Chat Personalizzato — nessun branding di piattaforma |
| Devi abbinare la palette di un brand o design system esistente | Generatore di Chat Personalizzato — controllo completo dei colori |
| Devi illustrare dettagli UI specifici di una piattaforma reale (spunte, conferme di lettura) | Il generatore dedicato di quella piattaforma, dato che questo strumento non replica i dettagli UI specifici dell'app |
Uso responsabile
Questo generatore esiste per rendere facile creare immagini di chat chiaramente fittizie per umorismo, narrazione e lavori di design. Non è uno strumento per fabbricare prove, inscenare molestie o far credere a qualcuno che una conversazione falsa sia reale. Se hai intenzione di condividere un'immagine creata con questo strumento, valuta di aggiungere un contesto (come "falso" o "mockup") in modo che chi la vede capisca che non è una conversazione reale.
Domande frequenti
È legale o etico usare questo strumento?
Lo strumento in sé è legale da usare per intrattenimento, mockup, presentazioni e lavori di design. Ciò che non è legale né etico è usare l'immagine generata per ingannare qualcuno — ad esempio presentandola come una conversazione reale per commettere frode, molestare o diffamare una persona, o impersonare i messaggi reali di qualcuno. Usalo solo per scopi chiaramente fittizi o illustrativi.
Lo strumento carica i miei messaggi o la mia foto da qualche parte?
No. Ogni messaggio, nome, foto e impostazione che inserisci resta nella memoria del tuo browser e viene disegnato direttamente su un elemento canvas tramite JavaScript. Il file PNG viene generato e scaricato sul tuo dispositivo — nulla viene mai inviato a un server.
Dovrei usare questo strumento o uno dei generatori specifici per piattaforma?
Se il tuo mockup deve sembrare un'app reale specifica — WhatsApp, Telegram, Messenger, Signal, WeChat o LINE — usa il generatore dedicato di quell'app in modo che colori, spunte e stile dell'intestazione corrispondano a ciò che gli spettatori si aspettano. Usa invece questo Generatore di Chat Personalizzato quando vuoi un mockup di chat per un'app fittizia, un wireframe, o contenuti in cui non vuoi l'aspetto di nessun brand reale specifico, e preferisci scegliere tu stesso i colori esatti dei fumetti.
Posso caricare una foto vera come avatar?
Sì. Clicca su "Carica foto" per usare qualsiasi immagine dal tuo dispositivo come avatar del contatto — viene ritagliata automaticamente in un cerchio. Se salti questo passaggio, l'avatar torna a essere un cerchio colorato con le iniziali del contatto. La foto viene usata solo localmente nel tuo browser e non viene mai caricata da nessuna parte.
Che dimensione dell'immagine esporta?
L'anteprima e il PNG esportato usano un rapporto d'aspetto da schermo telefonico (375×812 di default), che appare naturale quando condiviso sui social o inserito in una presentazione.
C'è un limite a quanti messaggi posso aggiungere?
No — puoi aggiungere tutte le righe di messaggio che vuoi. Tieni presente che una conversazione molto lunga renderà l'immagine esportata molto alta e potrebbe richiedere più scorrimento nell'anteprima, quindi per uno screenshot pensato per essere letto a colpo d'occhio, 6-10 messaggi di solito rendono meglio.
Posso impostare orari diversi per ogni messaggio, o li compila automaticamente?
Imposti l'orario per ogni riga di messaggio singolarmente — lo strumento non genera né incrementa automaticamente gli orari per te. Questo ti dà pieno controllo per far sembrare gli orari sequenziali e realistici, oppure volutamente incoerenti se si adatta alla tua storia.
Posso far usare a un lato della conversazione un gradiente o un fumetto bicolore invece di un colore piatto?
I selettori di colore integrati impostano un singolo colore piatto per lato. Se ti serve un aspetto sfumato, genera il PNG con il colore piatto più vicino, poi usa un editor di immagini per aggiungere una sovrapposizione a gradiente in seguito — lo strumento in sé produce solo colori di fumetti pieni.
Lo strumento salva il mio design di chat se chiudo la scheda?
No — dato che nulla viene caricato o memorizzato su un server e il design vive solo nella memoria del tuo browser per quella sessione, chiudere o ricaricare la scheda cancella il tuo lavoro. Scarica il PNG prima di uscire dalla pagina se vuoi conservarlo, e valuta di annotare le tue scelte di colore se pensi di rifare un design simile in futuro.
Posso usarlo per prototipare una UI di chat per sviluppo reale, non solo un'immagine mockup?
È pensato per produrre un'immagine statica, non codice esportabile — non c'è esportazione CSS o di componenti. I designer solitamente usano il PNG come riferimento visivo da consegnare agli sviluppatori o incollare in un file Figma/design, per poi implementare la UI di chat vera e propria separatamente nel codice.