Demo di imagineAI: non è stata fatta per Nico e non è la sua pagina ufficiale. Abbiamo usato il suo profilo pubblico come esempio perché ha un brand molto chiaro su Instagram. Il suo nome, la sua foto e le copertine dei suoi libri appartengono ai rispettivi titolari.
Se hai un Linktree, probabilmente è uguale a quello di tutti: sfondo colorato, pulsanti bianchi arrotondati, un elenco di link uno sotto l'altro. Fa il suo lavoro, ma non suona come te. In questo articolo ti mostriamo come abbiamo creato, in un'ora e con un'IA di design, una pagina di link con i colori, le lettere e l'ordine di priorità di una persona reale. Ci sono i tre prompt esatti, così puoi copiarli e sostituire i tuoi dati.
Prima e dopo
Nico Grupe è un coach di sviluppo personale e ha circa un milione di follower su Instagram. Il suo brand lì si riconosce in un secondo: arancione, carta crema, lettere spesse in maiuscolo e una frase scritta a mano. Il suo Linktree, invece, ha i colori e la forma di Linktree.
Cambiano tre cose. Ciò che si vende passa in alto e si distingue dal resto. I colori e le lettere vengono dal suo Instagram. E i quattro libri smettono di essere quattro pulsanti per diventare un'unica fila di copertine.
Passo 1: il design system
Un design system è il manuale di stile di un brand scritto in modo che una macchina possa leggerlo: colori con il loro codice, caratteri, dimensioni, bordi, l'aspetto dei pulsanti e il modo in cui parla il brand. Se lo dai all'IA prima di chiederle una pagina, la pagina esce con quell'identità e non con quella di un template generico.
Cosa allegare prima di scrivere qualsiasi cosa:
- Screenshot di 6-9 pubblicazioni recenti del suo Instagram, in formati diversi (schede con frasi, copertine dei reel, diagrammi).
- La sua foto del profilo.
- Il link del suo sito, che passi dentro il prompt perché l'IA lo visiti.
Abbiamo provato tutto in Claude Design, lo strumento di Anthropic che genera pagine e le mostra a schermo per revisionarle. Questo è stato il primo prompt, parola per parola:
Voglio creare il design system personale di Nico Grupe, divulgatore di filosofia stoica e sviluppo personale. È una demo di imagineAI: non la facciamo per lui, è un esempio di ciò che si può fare.
Entra nel suo sito, https://nicogrupe.com, e guarda gli screenshot del suo Instagram che ti allego. Ricava da lì il suo stile reale, senza inventarne uno nuovo:
- Una palette di 4-6 colori, con i loro codici e a cosa serve ciascuno.
- Due caratteri di Google Fonts, uno per i titoli e uno per il testo, simili a quelli che usa.
- Dimensioni del testo, spaziature, bordi e ombre.
- Come appaiono i pulsanti, le schede e i link.
- Il tono: come scrive e come parla alla sua community.
Mostramelo in una pagina che io possa revisionare e consegnamelo anche come file che io possa salvare e dare all'IA a ogni richiesta.Cosa ha ricavato l'IA e da dove
La parte importante del prompt è la frase "senza inventarne uno nuovo". L'IA ha misurato i colori che lui usa già, senza sceglierne altri. Quando il sito e Instagram non coincidevano, ha vinto Instagram, perché è il suo canale principale.
| Elemento | Valore | Da dove viene |
|---|---|---|
| Arancione | #F76E09 | L'etichetta "50 MINUTOS" dei suoi reel e le etichette delle sue copertine |
| Carta crema | #E9E2D7 | Lo sfondo di tutte le sue schede con frasi e dei suoi diagrammi |
| Inchiostro | #111111 | Il testo delle sue schede e dei suoi pannelli scuri. Quasi nero, mai nero puro |
| Ambra | #FB9F1A | L'anello sfumato delle sue storie in evidenza. Si usa solo come inizio di una sfumatura |
| Titoli | Montserrat ExtraBold, in maiuscolo | Le copertine dei suoi reel ("TU EGO NO SOS VOS", cioè "il tuo ego non sei tu"). È il Google Font più simile |
| Testo | DM Sans | I testi della sua pagina di coaching |
| Frasi a mano | Patrick Hand | La scrittura delle sue schede con frasi. È un'approssimazione: la sua scrittura reale non è un font |
L'IA ha anche annotato un dettaglio di accessibilità che un designer alle prime armi di solito non guarda: l'arancione puro su sfondo crema non si legge bene in corpo piccolo. Per questo il design system dice che l'arancione va nelle lettere grandi e nei pulsanti, e che i testi piccoli vanno in inchiostro.
Alla fine di questo passo hai un file di testo con tutto questo. Lo incollerai all'inizio di ogni richiesta successiva.
Passo 2: la pagina di link
Con il design system in mano, il secondo prompt chiede la pagina. Nota che la richiesta contiene un ordine preciso, link per link, con una ragione dietro ogni posizione.
Con il design system di Nico, creami la sua pagina di link per il cellulare, in un unico file HTML. Deve sembrare il suo brand e non un Linktree generico.
Ordina i link per importanza, invece di metterli tutti uguali uno sotto l'altro:
1. In cima a tutto, la sua foto, il suo nome e una frase breve nel suo stile.
2. La cosa principale, in evidenza: Coaching 1 a 1 con Nico (https://nicogrupe.com/coaching).
3. La newsletter "Desarrollo personal sin marketing" (https://nicogrupe.kit.com/newsletter), con un pulsante chiaro per iscriversi.
4. Il suo canale WhatsApp verificato (https://whatsapp.com/channel/0029Vb8th6F47Xe8JtPMKu0H).
5. "I miei libri", in una fila di copertine: Aprende a leer LEYENDO (il suo primo libro), Manual de vida di Epitteto, Sobre la vida feliz di Seneca e Meditaciones di Marco Aurelio, gli ultimi tre commentati da Nico.
6. In fondo, icone dei suoi social: Instagram, TikTok, YouTube e il suo podcast su Spotify.
In fondo alla pagina scrivi, in piccolo: "Concept di imagineAI · demo, non è la pagina ufficiale di Nico Grupe".
Deve vedersi perfetta su un cellulare largo 390 px e caricarsi in fretta. Niente emoji: usa icone.Il risultato è un unico file HTML di circa 34 KB. Si apre su qualsiasi cellulare, non dipende da nessuna piattaforma e non ha canone mensile.
Il nuovo ordine
- Foto, nome e una frase. La frase viene dal suo Instagram: "Dejá de vivir en piloto automático" (smetti di vivere con il pilota automatico).
- Coaching 1 a 1, in una grande scheda nera con il pulsante arancione.
- Newsletter, con un pulsante di iscrizione ben visibile.
- Canale WhatsApp.
- I libri, come una fila di copertine.
- Social, come icone in fondo.
Perché quell'ordine
Ogni decisione sull'ordine risponde a una ragione di marketing. Sono quattro e valgono per qualsiasi pagina di link.
Una sola azione principale
Chi arriva da Instagram ha pochi secondi. Se tutti i pulsanti pesano uguale, non sa da dove cominciare e se ne va. In alto va ciò che vende, e si distingue: qui, il coaching.
Meno opzioni, più clic
Sette pulsanti uguali obbligano a leggerli tutti. Raggruppare i quattro libri in una fila lascia quattro blocchi e la persona decide più in fretta.
La newsletter è un contatto tuo
Un follower di Instagram dipende dall'algoritmo. Una mail è tua e arriva quando la invii tu. Per questo la newsletter va al secondo posto e con il pulsante in vista.
Lo stesso brand dall'inizio alla fine
Dal reel alla pagina, gli stessi colori e le stesse lettere. La persona riconosce di essere ancora nel posto giusto, e questo dà fiducia prima ancora che legga qualcosa.
Passo 3: la revisione
L'IA sbaglia sulle piccole cose: un testo tagliato, un pulsante che esce dallo schermo, un link copiato male. Il terzo prompt è breve e le chiede di correggersi da sola:
Aprila a dimensione cellulare, controlla che non ci sia nulla di tagliato e che tutti i link funzionino. Correggi ciò che trovi.Poi guardala tu, sul tuo cellulare e non solo sul computer. Controlla ogni dato che compare nella pagina: se l'IA ha aggiunto una cifra, un orario o una frase che il tuo brand non ha mai detto, toglila.
Pubblicarla gratis
La pagina è un file HTML, quindi basta qualsiasi posto che serva file. Noi usiamo Cloudflare Pages, che ha un piano gratuito:
- Crea un account su Cloudflare ed entra in Workers & Pages.
- Clicca Create, scegli Pages e poi Upload assets.
- Dai un nome al progetto.
- Trascina la cartella che contiene il tuo file. Deve chiamarsi
index.html. - Clicca Deploy. In pochi secondi hai la tua pagina su
tuonome.pages.dev.
Se preferisci non toccare nulla, puoi anche chiedere all'IA di pubblicarla per te.
L'unica cosa che si paga è un dominio proprio, se vuoi un indirizzo come tuonome.com invece di .pages.dev. Si paga una volta all'anno.
Adattalo al tuo caso
- Prompt 1: cambia il nome, la descrizione della persona e il link del sito. Allega screenshot del tuo Instagram e la tua foto. Togli la frase "demo di imagineAI".
- Prompt 2: sostituisci l'elenco numerato con i tuoi link, nell'ordine che preferisci. Ciò che vuoi vendere di più va per primo. Cambia la frase finale o cancellala.
- Prompt 3: va bene così com'è.
- Se non hai un Instagram con un brand definito: allega il tuo logo, il tuo sito o qualsiasi tuo materiale, e chiedi all'IA di partire da lì.
Salva questo articolo, copia i tre prompt e sostituisci i dati con i tuoi. Con un'ora e una buona lista di link ordinata per importanza, la tua pagina può suonare come te.
Vuoi che creiamo la tua pagina di link, o il tuo sito completo, con il tuo brand?
Progettiamo e costruiamo con l'IA, con pagamento unico e il codice nelle tue mani.