miracledesign.it

Un nuovo portfolio, progettato da me e costruito con un agente AI.

Il vecchio miracledesign.it era una galleria di progetti dal 2016 al 2020. L'ho riprogettato efficientemente, aggiornando le esperienze di questi ultimi anni, e infine pubblicato dirigendo tutto con Claude Code.

Claude

Prima la specifica, poi il codice.

Prima di scrivere una riga ho scritto le regole. In una chat con Claude ho messo nero su bianco posizionamento, pubblico, i tre argomenti da sostenere (sistemi che durano, design guidato da ricerca e dati, un profilo ibrido tra design e codice), la mappa del sito e i testi di ogni sezione.

Il documento diventa la fonte unica: l'agente lo legge per primo, e dove una decisione è aperta deve chiedere, non inventare. I segnaposto restano tra parentesi quadre finché non ho un dato vero.

A un agente si danno regole, non solo richieste.

Claude Code

Il ciclo: chiedo, guardo, correggo.

Il lavoro vero è un ciclo corto. Chiedo una modifica, la guardo nel browser, la correggo o la approvo.

In una sola sera ci sono 43 salvataggi: logo, header, piè di pagina, archivio, menu, pagina CV. Ogni salvataggio è una decisione piccola e reversibile.

Tanti passi piccoli che si vedono, invece di una consegna grande.

Direzione di design

Le scelte che sono rimaste mie.

L'agente propone, ma il giudizio di design non si delega. Spesso è servito correggere il tiro: sul lessico, sulla leggibilità dei testi, sul taglio delle informazioni. A volte l'agente divagava, aggiungeva più del necessario o spiegava troppo, e il lavoro era riportarlo all'essenziale.

  • Il logo. Il file originale non esisteva più: è stato ricostruito in vettoriale dal vecchio png. L'ho fatto correggere finché le lettere non erano coerenti con il corsivo originale.
  • L'apertura della Home. Una specifica iniziale prevedeva fin da subito la menzione al percorso in Telepass e Dst. Ho optato per un'apertura più di contesto a schermo intero, con nome e cognome come titolo.
  • Raccontare il caso Telepass. La mappatura iniziale prevedeva una pagina madre e cinque capitoli. Vista costruita era troppo frammentata: è diventata una pagina unica con quattro momenti e un indice che segue lo scorrimento.
  • Accessibilità. Contrasto minimo corretto su anni ed etichette dove il grigio era troppo chiaro.

L'AI accelera l'esecuzione, la direzione resta umana.

GitHub Pages · Aruba

Messa online, senza rompere niente.

Le decisioni tecniche sono state ponderate rispetto ai sistemi già in uso, con un tocco di innovazione:

  • Hosting. Netlify è stato accantonato perché con il piano gratuito il sito si sarebbe fermato a crediti esauriti; l'FTP corrente di Aruba avrebbe richiesto ogni volta l'autorizzazione dell'indirizzo IP. La scelta è ricaduta su GitHub Pages: gratuito, ogni salvataggio pubblicato in automatico.
  • Dominio e posta. Restano su Aruba: ho cambiato solo i record del sito, senza toccare quelli della posta.
  • HTTPS. Il certificato non partiva: i server DNS di Aruba non erano ancora allineati. Abbiamo aspettato e poi forzato una nuova richiesta.
  • Privacy. Google Analytics parte solo dopo il consenso, con Signals e dati pubblicitari spenti già nel codice.

Non serve saper scrivere il codice, serve capire cosa si sta decidendo.

Google Analytics 4

Misurare.

Un sito di portfolio senza misura è un'opinione. Con l'agente ho scritto uno script che ogni settimana legge i dati di Google Analytics e produce un breve rapporto: 5 numeri, 3 osservazioni, 1 suggerimento.

Prima settimana online: 39 visitatori, quasi un minuto e mezzo a testa, la pagina Telepass letta oltre il 90% da 10 persone. LinkedIn è il canale che porta più visite dopo i link diretti. I dati hanno mostrato anche cosa mancava: i click sull'email non venivano contati, e li ho aggiunti.

Progettare, pubblicare, misurare, correggere. Anche per il proprio sito.

Cosa ho imparato

Da mesi vedo, in azienda e nel mondo digitale, quanto l'AI stia entrando nel lavoro di prodotto e soprattutto nella progettazione. Volevo capirlo sporcandomi le mani, non per sentito dire.

  1. 01Serve un capitano.L'agente è veloce e instancabile, ma tende a divagare. Il valore sta nel tenere la rotta: cosa dire, a chi, con quali parole.
  2. 02La specifica conta più del prompt.Il tempo speso a scrivere le regole prima è tornato indietro moltiplicato.
  3. 03Il ruolo si sposta verso la strategia.Meno tempo sull'esecuzione, più tempo su posizionamento, contenuti e scelte. In questa fase della mia carriera è proprio il livello su cui voglio lavorare.