Prompt di design per l'AI: rifai un design vero con MagpUI

Scegli un design vero che ti piace, copi il suo prompt e il tuo agente AI lo rifà dentro il tuo progetto. Ci vogliono pochi minuti, e il risultato non sembra più la solita schermata fatta con l'AI. Qui vedi come farlo con MagpUI, la galleria costruita da Alek, e come scrivere un buon prompt di design anche senza il sito.

Cos'è

MagpUI è una galleria che cresce di animazioni, componenti e template di pagine intere, per siti, app e gestionali. Ogni pezzo ha una pagina con descrizione, tag (colori, stile, categoria) e un prompt già pronto da incollare in Claude Code, Codex, Cursor, v0, Lovable o Bolt.new. La galleria si aggiorna ogni ora: un curatore AI gira il web, sceglie i pezzi e scrive i prompt, e Alek gli dà la direzione.

Perché serve

Chiedi a Claude Code o a Cursor "una bella landing page". Funziona, è pulita, e sembra identica a tutte le altre fatte con l'AI.

Il motivo è semplice. Quando scrivi "rendilo moderno e premium", l'AI non ha niente di concreto a cui mirare. Sceglie la risposta più media che conosce: le stesse card arrotondate, lo stesso sfumato viola, la stessa comparsa in dissolvenza.

I bravi designer partono da un riferimento, cioè qualcosa di reale che hanno visto e che gli è piaciuto. Poi lo descrivono con parole precise. Non "spazi carini", ma "40 pixel di distanza". Non "fluido", ma "un ciclo di 2400 millisecondi".

L'idea da tenere è una: l'AI copia quello che le mostri, non quello che speri. Il difficile, all'inizio, è trovare le parole giuste. MagpUI te le dà già scritte.

Come si fa

Non serve un account. Alek l'ha verificato in un browser pulito, senza login: "Copia prompt" funzionava subito.

1. Trova un pezzo. Vai su magpui.com/it, usa i filtri in alto (Animazioni, Componenti, Template e gli altri) oppure premi "A caso". Apri una card. Un esempio: "Gli anelli disegnano una sfera" di @okazz_, una sfera di anelli colorati sottili che ruota piano.
2. Leggi la pagina prima di copiare. Bastano dieci secondi. La descrizione dice cosa rende speciale il pezzo. La scheda "Come rifarlo" elenca i passaggi e gli strumenti, per esempio Three.js o la libreria Motion.
3. Installa la skill, se c'è. Alcuni pezzi suggeriscono una "skill" per Claude Code, cioè un piccolo pacchetto di conoscenze per il tuo agente (per esempio sulle animazioni con Three.js). La pagina ti dà il comando esatto. I template con foto ti dicono di crearle con un generatore di immagini, perché il codice non disegna foto.
4. Copia il prompt. Premi "Copia prompt": il pulsante diventa "Copiato". La freccia accanto ti fa copiare anche il link dell'immagine o della clip. Se vuoi leggerlo prima, apri la scheda "Prompt".
5. Incollalo nel tuo agente, dentro il tuo progetto. L'agente legge il riferimento, guarda i fotogrammi e costruisce il pezzo con quello che hai già.
6. Confronta con l'originale. È il passo che quasi tutti saltano. Metti le due versioni fianco a fianco. Se qualcosa non torna, non scrivere "fallo meglio": di' cosa cambiare, tra tempi, dimensioni, colori e spazi.

Guarda come si apre il prompt degli anelli. C'è una parte REFERENCE con i link alla pagina, al primo fotogramma, alla clip e al post originale. Poi chiede all'agente di scaricare il primo fotogramma e guardarlo prima di costruire, perché il testo descrive ma sono i fotogrammi a dire la verità. Più sotto trovi dettagli come una rotazione completa in 18000 millisecondi.

Lo schema di ogni prompt. Anche se non apri mai MagpUI, puoi riusare la sua struttura per qualsiasi schermata:

• Riferimento: link all'originale e a un fotogramma o una clip da studiare.
• Cosa costruire: una o due frasi semplici.
• Sistema di design: colori, dimensioni e spazi esatti.
• Movimento: cosa si muove, quanto dura, con quale andamento. Se un tempo è stimato e non misurato, va detto.
• Sezioni: cosa c'è sullo schermo e quali stati gestire (caricamento, completato).
• Realizzazione: strumenti, accessibilità, rispetto di chi ha disattivato le animazioni.
• Adatta al progetto: i tuoi colori e font, mai loghi o immagini dell'originale.
• Verifica finale: una breve lista con cui l'agente controlla il suo lavoro.

Pronto da copiare, da riempire con il tuo riferimento:

Se preferisci restare nell'editor. MagpUI ha anche un server MCP, cioè un modo standard per collegare uno strumento esterno al tuo agente. Una volta collegato, l'agente cerca nella galleria e prende i prompt da solo. La pagina MCP dice che è gratis, in sola lettura e senza account. In Claude Code basta lanciare una volta questo comando nel terminale:

Poi chiedi come nell'esempio della pagina:

Sulla stessa pagina ci sono le istruzioni anche per Codex, Cursor e Claude sul web.

Prova piccola

Dieci minuti. Prendi una sola parte del tuo sito, per esempio un pulsante o una card. Prima chiedi al tuo agente "rendila più moderna" e salva il risultato. Poi trova su MagpUI un pezzo simile, copia il prompt e incollalo. Metti le due versioni fianco a fianco.

È riuscita se la seconda ha misure, tempi e colori che sai nominare, e se l'agente ti elenca da solo le differenze con l'originale. Se non lo fa, chiediglielo: è lì che il risultato passa da discreto a buono.

Attenzione a

• Ogni pezzo appartiene al suo autore. MagpUI mostra il nome di chi l'ha creato e un pulsante "Vedi originale". Se un autore vuole togliere un suo lavoro, c'è un link "Scrivici" in fondo alla pagina. Usa il pezzo per imparare e fare la tua versione, non per clonare il prodotto di altri.
• Niente loghi, marchi, foto. I prompt chiudono già con una parte che chiede di adattare tutto al tuo progetto. Non toglierla quando lo modifichi.
• I tempi non sono sempre misurati. Il prompt lo dice quando un valore è suggerito. Controlla a occhio.
• I prompt sono scritti da un curatore AI, non a mano uno per uno. Leggili prima di incollarli.

Questo articolo nasce da un pezzo di Alek pubblicato in inglese su Medium.

Passo successivo: porta il pezzo dentro una pagina intera, come in Da un design a un sito vero con l'AI. Se vuoi capire che lavoro c'è dietro, leggi Cos'è un design engineer.

In breve: L'AI copia quello che le mostri, non quello che speri: parti da un riferimento vero, descrivilo con misure precise e confronta il risultato con l'originale.