Claude Design: Anthropic entra nel mondo della progettazione visiva
Claude Design trasforma prompt in prototipi interattivi. L'ho provato il primo giorno: un loader GTFS animato con la mappa della Sardegna, quattro varianti, dati reali ARST. In quindici minuti.
Il 17 aprile 2026 Anthropic ha lanciato Claude Design, un prodotto nuovo di zecca che porta Claude nel territorio della progettazione visiva. Non stiamo parlando di generazione di immagini in stile Midjourney o DALL-E. Claude Design serve a creare prototipi interattivi, slide, mockup di app, one-pager e materiale di marketing partendo da un prompt testuale o da un file esistente.
Il prodotto è alimentato da Claude Opus 4.7 ed è disponibile in research preview per gli abbonati Pro, Max, Team ed Enterprise. Non costa nulla in più rispetto all’abbonamento: rientra nei limiti del piano, con la possibilità di acquistare crediti extra se si supera la soglia.
L’ho provato il giorno stesso del lancio. Quello che segue non è un comunicato stampa riscritto: è quello che succede quando dai a Claude Design un brief tecnico reale e vedi cosa ne esce.
Il mio primo progetto: un loader animato per il feed GTFS di ARST
Per il test ho scelto qualcosa di concreto e non banale. Lavoro per ARST, l’azienda di trasporto pubblico della Sardegna: 298 linee, 2.487 fermate, 370 comuni serviti su 377. Abbiamo un feed GTFS pubblico che alimenta le app di trasporto. Ho chiesto a Claude Design di progettare un indicatore di caricamento che mostrasse l’isola sarda e il parsing del feed GTFS in tempo reale.
Il prompt era semplice: “Prototipo di un indicatore di carico che mostra l’isola sarda e il feed GTFS di ARST SpA”. Ho scelto un design hi-fi e un prototipo interattivo. Claude mi ha fatto due domande — palette colori e stile mappa — e poi è partito.
Cosa ha prodotto Claude Design
Prima di scrivere una sola riga di codice, Claude ha fatto ricerca. Ha verificato la struttura del feed GTFS di ARST, ha trovato i file reali (agency.txt, routes.txt, trips.txt, stops.txt, stop_times.txt, calendar.txt, shapes.txt), ha controllato quanti comuni sono serviti e quali sono i sette esclusi (La Maddalena, Oschiri, Monti, Viddalba, Santa Maria Coghinas, Palmas Arborea).
Poi ha definito un design system completo: palette scura (#0b0d10 sfondo, #e8e6e1 testo, #d4a84b oro, #5b7a8a blu ardesia), tipografia JetBrains Mono per l’estetica da terminale, e ha prodotto quattro varianti del loader.
Variante 01: Cartografo
Il contorno della Sardegna viene disegnato tratto per tratto sulla sinistra, mentre a destra un registro mostra il parsing file per file del GTFS in tempo reale. Ogni file — agency.txt, routes.txt, stops.txt — appare con dimensione, barra di progresso e conteggio righe.
Variante 02: Tracciati
L’isola al centro, con i percorsi delle linee bus che si tracciano uno alla volta come curve di Bézier tra i nodi delle città. A destra, il registro delle linee con ID e nome: L.9323 Sassari-Alghero, L.430 Oristano-S.Giovanni di Sinis, L.810 Iglesias-Villamassargia.
Variante 03: Scansione
Una linea di scansione orizzontale percorre l’isola dall’alto verso il basso, rivelando le fermate come punti luminosi al suo passaggio. Ai lati, i contatori in tempo reale: 158 linee extraurbane da routes.txt, 1.336 fermate su 2.487 analizzate da stops.txt.
Variante 04: Console
Registro da terminale a schermo intero. Simula una sessione zsh: connessione TLS a opendata.arst.sardegna.it, download del file arst-cagliari-it.zip (14.38 MB), estrazione di 12 file, parsing riga per riga. A destra, la minimappa con i metadati del feed: agency ARST, feed_id arst-cagliari-it, 370 su 377 comuni serviti, e la lista dei comuni non serviti.
Tutte e quattro le varianti usano dati reali: i nomi dei file GTFS sono quelli veri, i conteggi sono realistici (2.487 fermate, 298 percorsi), il feed_id è arst-cagliari-it. Il contorno della Sardegna è tracciato su coordinate geografiche reali. Le città — Cagliari, Sassari, Nuoro, Oristano, Olbia — sono posizionate dove devono essere.
Da prototipo a file HTML standalone
Ho chiesto a Claude Design di esportare tutto come file HTML autonomo. Ha preso il progetto React, ha eseguito il bundling delle dipendenze, ha integrato i font da Google Fonts e gli script da unpkg, e ha prodotto un singolo file HTML da 1.6 MB che funziona offline, senza server, senza dipendenze esterne. Lo apri nel browser e gira.
Il file include un pannello Tweaks accessibile dalla toolbar che permette di passare tra le quattro varianti, regolare la velocità dell’animazione, attivare o disattivare le etichette delle città e il conteggio delle fermate. È un prototipo interattivo completo, non un mockup statico.
Dal prompt iniziale al file HTML finito sono passati circa quindici minuti. Quindici minuti per un progetto che con un designer e uno sviluppatore avrebbe richiesto giorni. Non perché Claude Design sia “magico”, ma perché ha fatto tutto in sequenza: ricerca, design system, codice, bundling, export.
Come funziona Claude Design
Si parte da un prompt testuale, da un’immagine, da un documento caricato (DOCX, PPTX, XLSX) oppure da un collegamento diretto alla codebase. Claude genera una prima versione del design, e da lì si lavora insieme: commenti inline su elementi specifici, modifiche dirette al testo, slider per regolare spaziatura, colori e layout in tempo reale.
Non è un editor grafico tradizionale. È più simile a una conversazione con un designer che esegue le modifiche mentre parli. Descrivi cosa vuoi cambiare, Claude lo fa. Vuoi spostare un elemento, cambiare la palette colori, aggiungere una sezione? Lo chiedi e succede.
C’è anche un web capture tool che permette di estrarre elementi da siti web esistenti e usarli come punto di partenza.
Design system e coerenza visiva
Claude Design può leggere la codebase e i file di design di un team e applicare automaticamente lo stile visivo dell’azienda a ogni progetto. Colori, font, spaziature, componenti: tutto resta coerente con il brand senza doverlo specificare ogni volta.
L’ho visto in azione con il mio progetto ARST: una volta scelta la palette, ogni variante del loader era visivamente coerente. Stessi colori, stessa tipografia, stessa griglia. Non ho dovuto correggere incongruenze tra una variante e l’altra.
Il ponte verso Claude Code
Quando un design è pronto per essere sviluppato, Claude lo impacchetta in un handoff bundle che può essere passato direttamente a Claude Code con una singola istruzione. Il ciclo diventa: esplorazione, prototipo, codice di produzione, tutto dentro l’ecosistema Anthropic.
Nella pratica significa che un founder può partire da un’idea scritta a parole, trasformarla in un prototipo interattivo con Claude Design, e poi passarla a Claude Code per generare il codice funzionante. È il vibe coding portato alla sua conclusione logica: non scrivi nemmeno più il prompt per il codice, lo generi dal design.
Cosa si può creare
- Prototipi interattivi realistici
- Wireframe e mockup di prodotto
- Esplorazioni di design
- Pitch deck e presentazioni
- Materiale marketing (one-pager, brochure)
- Prototipi con codice che includono voce, video, shader e elementi 3D
L’ultimo punto è quello che distingue Claude Design da un semplice generatore di slide. I prototipi possono includere logica funzionante, interazioni reali, persino elementi 3D.
Formati di esportazione
I design si possono condividere internamente all’organizzazione con accesso in sola lettura o in modifica, oppure esportare in diversi formati: URL interni, cartelle, Canva, PDF, PPTX, HTML standalone. L’export verso Canva posiziona Claude Design come strumento complementare, non sostitutivo. Anthropic stessa ha dichiarato che l’obiettivo è complementare Canva, non rimpiazzarla.
Impatto e disponibilità
Il giorno dell’annuncio, il titolo Figma ha perso circa il 7%. Claude Design non compete con Figma sulle funzionalità avanzate, ma erode il suo mercato dal basso. Per ogni designer professionista che usa Figma, ci sono dieci product manager, founder e tecnici che avevano bisogno di “qualcosa di visivo” e non sapevano da dove cominciare.
Claude Design è in research preview dal 17 aprile 2026, incluso negli abbonamenti Claude Pro, Max, Team ed Enterprise. Per le organizzazioni Enterprise, va abilitato dall’amministratore. Il rollout è graduale.
Io l’ho provato il primo giorno e il risultato è un loader animato con quattro varianti, dati reali, export HTML standalone funzionante. In quindici minuti. Questo non è un comunicato stampa: è un fatto.
Blogger dal 2001, Nativo Digitale, Developer.
Da 15 anni mi occupo di IT per una grande Azienda.
Lavoro per abbattere il Digital Divide.
Visita i miei altri progetti
sardiniamobility.com
www.cyberness.it