Come nasce un portfolio di design nativo per l'IA

Un portfolio costruito dai suoi stessi strumenti

“Questo portfolio non è stato assemblato. È stato orchestrato — un risultato coordinato di direzione creativa umana ed esecuzione con IA in parallelo, a un ritmo che nessuna persona potrebbe eguagliare da sola.”

Tra giugno e luglio 2026 ho costruito questo portfolio con un metodo che la maggior parte dei designer non ha provato: ho trattato Claude Code come un team di ingegneria junior, gli ho dato un brief per ogni compito e l'ho lasciato eseguire — mantenendo per me tutta la direzione creativa, la proprietà dei contenuti e il giudizio sulla qualità.

Il risultato sono 25 pagine di portfolio, un design system vivo sincronizzato con Claude Design, otto schermate Figma per un'app civica mobile, un prototipo interattivo di pianificazione urbana e un'identità di brand completa — tutto prodotto in una sola sessione estesa, pubblicato su Netlify e mantenuto come prodotto coerente dall'inizio alla fine.

Questo documento spiega come è stato costruito, cosa ha contribuito ogni strumento, dove l'IA è stata davvero utile e dove no, e cosa dimostra questo processo sul futuro del lavoro di design.

I deliverable

In una sola sessione orchestrata sono stati prodotti o migliorati sostanzialmente i seguenti elementi:

• 25 pagine di portfolio — ogni caso studio revisionato, elevato strutturalmente ed etichettato per sezioni per una scansione coerente
• Identità di brand PereX — un trattamento CSS a gradiente per il carattere “X” usando -webkit-background-clip: text, applicato in modo coerente su tutte le 25 pagine e su entrambi i footer tramite un'unica classe .logo-x condivisa
• Ruta Fresca — un'app civica mobile per la sicurezza dal caldo a Barcellona, progettata in Figma a qualità premium v2.0: sistema scuro, tipografia Inter, urgenza guidata dalla tipografia, margini da 24px, 8 schermate tra iOS e Android
• Sol Planner — un prototipo HTML interattivo a schermo intero per urbanisti che simulano interventi contro il caldo urbano, integrato nel portfolio
• Sincronizzazione con Claude Design — 14 schede di componenti e 51 file in totale caricati in un progetto Claude Design, così che l'agente di design possa generare nuovo lavoro di portfolio con i token e i componenti reali di PereX
• Documento di handoff del design — un handoff completo in Markdown che raccoglie gli ID dei nodi Figma, i design token, le specifiche di movimento, il lavoro rimanente e le decisioni bloccate

Ogni strumento e il suo ruolo

Claude Code

Il livello principale di orchestrazione. Claude Code ha girato come sessione persistente in background — emettendo letture di file, modifiche HTML, comandi Bash, chiamate all'API di Figma e avvii di subagenti da un'unica interfaccia conversazionale. Ha sostituito ciò che normalmente richiederebbe uno sviluppatore frontend, un ingegnere di build e un coordinatore di progetto. L'ho diretto come un direttore creativo istruisce un team: intento e vincoli, non passaggi di implementazione.

Claude Design

Un agente di design con IA su claude.ai/design. Di serie, progetta con componenti generici. Dopo la sincronizzazione del design system, può progettare con i componenti PereX: la navigazione reale, il footer, i pattern delle card, le etichette di sezione, i blocchi decisionali e i token tipografici di questo portfolio. Qualsiasi prompt come “costruisci una nuova pagina di caso studio” produce ora un risultato strutturalmente e visivamente coerente con il sito esistente.

MCP — Model Context Protocol

Il livello di integrazione che collega Claude Code agli strumenti esterni. I server MCP hanno dato accesso a Figma, Notion, Google Calendar, Canva e altri tramite un protocollo standardizzato. Ogni server espone strumenti che Claude Code può chiamare con la stessa naturalezza di qualsiasi altra funzione. L'MCP di Figma è stato il più usato: ha permesso di leggere e scrivere file Figma in modo programmatico, senza aprire l'app Figma.

Figma MCP

Usato per leggere file Figma esistenti come contesto (ID dei nodi, design token, struttura delle schermate) e per scrivervi nuovi contenuti (creazione delle schermate di Ruta Fresca, frame di annotazione, documentazione dei token). Lo strumento use_figma del plugin Figma è l'interfaccia di scrittura principale: esegue comandi della Plugin API sul file attivo e traduce istruzioni strutturate in nodi Figma reali.

Agenti fork

Subagenti paralleli in background avviati con lo strumento Agent e subagent_type: "fork". Un fork eredita l'intero contesto di conversazione del genitore e gira in modo indipendente in background, restituendo un solo risultato al termine. Al picco, oltre 25 fork hanno lavorato in contemporanea — uno per pagina del portfolio — ciascuno proprietario di esattamente un file, senza sovrapposizioni e quindi senza conflitti.

DesignSync

Lo strumento che carica un design system su Claude Design. Accetta una directory locale di schede di componenti, file di token e un CSS bundle, e li invia a un progetto Claude Design tramite un gate di approvazione finalize_plan e successive chiamate write_files. Il caricamento PereX comprendeva 51 file in 14 gruppi di componenti, costruiti a mano dalle custom property CSS estratte dal foglio di stile del portfolio — niente Storybook, niente React, niente Webpack.

Netlify CLI

Un solo comando: npx netlify-cli deploy --prod --dir .. L'intero portfolio — tutti i 25 file HTML, tutti gli asset, tutto il CSS, tutto il JavaScript — viene pubblicato in meno di 30 secondi. La semplicità del deploy è conseguenza diretta della decisione di non avere un sistema di build. Non c'è nulla da compilare; Netlify serve la directory così com'è.

Custom property CSS

Il livello dei design token. Tutti gli agenti leggono e scrivono sullo stesso set di token definito in assets/css/style.css: --bg, --accent, --sans, --radius, spaziature da --space-xs a --space-2xl. Un'unica fonte di verità a cui fanno riferimento tutte le 25 pagine e tutti i 14 componenti Claude Design. Quando un token cambia, cambia tutto — senza passaggio di build.

Come ha funzionato davvero l'orchestrazione

La sessione ha seguito un modello coordinatore-e-fork: una sessione principale di Claude Code come coordinatore, che avviava agenti fork per il lavoro parallelizzabile e gestiva inline i compiti sequenziali. Il coordinatore manteneva lo stato, tracciava quali agenti possedessero quali file e sintetizzava i risultati man mano che arrivavano.

Lavoro sequenziale (coordinatore inline)

I compiti con dipendenze — decisioni di design, gate di approvazione, caricamento degli strumenti, scrittura della configurazione — sono stati eseguiti inline nella sessione coordinatrice. Il flusso DesignSync è l'esempio più chiaro: crea progetto → fissa configurazione → costruisci il bundle → ottieni l'approvazione dell'utente → carica. Ogni passo dipendeva dal risultato precedente, quindi nessuno poteva essere parallelizzato.

Lavoro parallelo (agenti fork)

I compiti indipendenti e limitati a un file sono stati eseguiti come fork paralleli. L'elevazione delle 25 pagine del portfolio è l'esempio più chiaro: ogni pagina era indipendente, ogni agente possedeva un file e tutti i 25 hanno lavorato in contemporanea. Il tempo totale è stato determinato dall'agente più lento, non dalla somma di tutti.

Gate di approvazione umana

Due categorie di decisioni hanno richiesto l'intervento umano e non sono mai state automatizzate. La prima: direzione creativa — quale trattamento del brand usare, che aspetto dovesse avere il gradiente, se una schermata fosse abbastanza buona per uno screenshot. La seconda: approvazione del caricamento — la chiamata finalize_plan in DesignSync richiedeva un clic esplicito prima che qualsiasi file raggiungesse il cloud. Questi gate non sono attrito; sono i punti in cui il giudizio umano è davvero insostituibile.

Rilevamento delle derive

Dopo qualsiasi sessione multi-agente che tocca più sistemi (file HTML, Figma, Claude Design, Netlify) serve un controllo delle derive. Ogni agente ha completato il suo compito? Qualche agente ha fatto una modifica in conflitto con un altro? Il deploy su Netlify è riuscito? Il caricamento su Figma è arrivato correttamente? Il coordinatore esegue questi controlli come passata finale prima di dichiarare il completamento.

Cosa ha fatto l'IA — e cosa no

L'IA ha gestito

• Leggere tutti i 25 file HTML e individuare le lacune strutturali
• Aggiungere span .section-label prima di ogni sezione principale in tutte le pagine
• Racchiudere le immagini fuori griglia in elementi semantici <figure> con didascalie descrittive
• Aggiungere sezioni di avvertenza sulla validazione ai prodotti pre-validazione
• Costruire 14 schede HTML di componenti per Claude Design, ciascuna con props TypeScript e documentazione d'uso
• Estrarre file di token CSS (colori, tipografia, spaziature) dal foglio di stile principale
• Aggiungere link di ritorno flottanti alle pagine dei prototipi senza toccarne la struttura interna
• Scrivere e pubblicare l'intero portfolio su Netlify
• Confrontare prima e dopo per confermare che nessun contenuto esistente fosse stato modificato
• Eseguire l'intero audit — 25 pagine — nel tempo necessario ad auditarne tre a mano

Le persone hanno gestito

• Tutta la direzione creativa: come dovesse sentirsi il portfolio, cosa significasse “premium” per Ruta Fresca
• La decisione di brand: il gradiente da ciano a magenta sulla X, e la scelta di farlo in CSS anziché come immagine
• Tutti i contenuti dei casi studio: ogni parola di ogni caso studio è stata scritta da Josue, non da un agente
• Giudizio sulla qualità del design: Josue ha corretto a mano icone disallineate in Figma prima di consentire gli screenshot — “I WASN'T GOING TO LET YOU USE THESE WITH misaligned text and icons.”
• Decisioni di prodotto: quali schermate includere nel portfolio, quali nodi Figma catturare
• Approvazione del caricamento: il gate a un clic prima che qualsiasi file raggiungesse Claude Design
• Correzione di rotta: individuare subito l'errore nel nome del brand e reindirizzare
• Tono e voce: tutte le decisioni su cosa comunica questo portfolio e a chi

“L'IA è straordinariamente brava nell'esecuzione. Non è brava nel giudizio. La divisione è più netta di quanto la maggior parte si aspetti — e più importante da mantenere di quanto la maggior parte degli strumenti oggi incoraggi.”

Tecnologia calma · Human-in-the-loop · Pensiero sistemico

La stessa filosofia di design che attraversa i casi studio di questo portfolio ha plasmato anche il modo in cui è stato costruito.

Tecnologia calma significa che il sistema fa il suo lavoro senza pretendere attenzione. I 25 fork hanno lavorato in background mentre la conversazione proseguiva. Nessuna attesa. Nessun controllo dello stato. Il lavoro arrivava come notifiche. È tecnologia calma applicata a un flusso di design: lo strumento si ritira; il risultato compare.

Human-in-the-loop non è una misura di sicurezza aggiunta dopo; è una decisione architetturale. Ogni azione con conseguenze in questa costruzione ha avuto un gate umano: approvare il caricamento, confermare la direzione del brand, rivedere gli screenshot prima di incorporarli. L'IA non è autonoma — è assistiva. La persona resta chi decide, dall'inizio alla fine.

Il pensiero sistemico si manifesta nel vincolo che ha reso possibile tutto il resto: un agente per file, senza eccezioni. Questa sola regola — semplice, chiara, applicata con coerenza — ha reso sicura una parallelizzazione a 25 vie senza alcuna infrastruttura di locking. Una buona progettazione dei sistemi riduce il coordinamento complesso a invarianti semplici.

Cosa dimostra tutto questo

Non è una storia di IA che sostituisce i designer. È una storia di cosa succede quando un designer conosce il proprio dominio e i propri strumenti abbastanza bene da dirigere l'IA al livello dell'intento, non dell'istruzione.

Un designer da solo può ora operare al ritmo di un team. L'audit e l'elevazione di 25 pagine eseguiti in questa sessione avrebbero richiesto a un team umano di tre persone due giorni pieni. Sono stati completati in meno di due ore. Il tempo del designer è andato in direzione, revisione della qualità e decisioni creative — non nel lavoro meccanico di aggiungere etichette di sezione a 25 file HTML.

Il design system è ora un'interfaccia viva. Prima di questa sessione, il design system PereX esisteva solo come file CSS. Dopo la sincronizzazione con Claude Design, è un progetto di design con IA già seminato. Il lavoro futuro — nuove pagine, nuovi layout, nuove strutture di caso studio — può essere prototipato chiedendolo a Claude Design in linguaggio naturale e ricevendo proposte che usano i componenti reali. La barriera tra “voglio provare un nuovo layout” e “ho una proposta da valutare” si è ridotta a secondi.

Il design UX nativo per l'IA richiede un nuovo tipo di giudizio. Le decisioni che hanno contato di più in questa costruzione non riguardavano HTML o CSS. Riguardavano quando fidarsi dell'output dell'agente e quando correggerlo, quali compiti parallelizzare e quali richiedessero attenzione sequenziale, e come istruire un agente al giusto livello di astrazione. Sono nuove competenze di design. Non si insegnano ancora nei bootcamp. Si insegneranno.

Il vincolo duro resta: l'IA non può avere gusto. Il gusto — il giudizio su cosa è buono, cosa è coerente, cosa vale la pena tenere — è irriducibilmente umano. Ogni agente in questa costruzione ha eseguito fedelmente. La qualità del risultato è stata determinata dalla qualità della direzione. “Garbage in, garbage out” resta la regola; l'IA elabora solo la spazzatura più in fretta.

Il portfolio come prova del metodo

Questo portfolio fa due cose contemporaneamente. È un corpo di lavoro di design — casi studio, prototipi, ricerca, sistemi. Ed è una dimostrazione di come quel lavoro è stato fatto — un esempio funzionante di pratica di design nativa per l'IA su scala di produzione.

I progetti al suo interno — Sol OS, Ruta Fresca, BaseLine, ThroughLine, le esperienze JAY — riflettono un insieme coerente di valori: agency umana, architettura etica, processo guidato dalla ricerca, pensiero sistemico. Il metodo che ha prodotto il portfolio riflette gli stessi valori: la persona resta al comando, l'IA gestisce l'esecuzione e il sistema è progettato per la chiarezza più che per la complessità.

Se sei un designer e ti chiedi se l'IA cambia il tuo ruolo: cambia il rapporto. Meno tempo sul meccanico. Più tempo sul significativo. La domanda è se sei pronto a operare a quel rapporto — a pensare con sufficiente chiarezza a ciò che vuoi e a dirigere con sufficiente precisione per ottenerlo.

Questo portfolio è la prova che la risposta è sì.